As far as UI goes, it is a bit awkward. Much like Office one. Also, it is not intuitive how to create a web site. I found Emtpy web site under Site from template option. However, this is just a small bump up the road. The fact that there are so many usable features like site report and easy database management and possibility of importing projects like WordPress and Drupal just proves that this is a serious start-up product. And on top of it it is free (yes, like beer).

Anyway… more info can be located on their official website. I suggest you give it a go.

Until IE steps into the picture. I don’t know if the same behaviour is in IE 8 as well, but IE 7 definitely has issues with AJAX requests. If URL of request doesn’t change, IE caches the result and passes it back to you. This wouldn’t be a problem if you would actually expect to see the same result each and every time. However, in our case, where it is desired that DYK section is not always the same, this is kind of annoying.

To sort out our issues, we just added a random number to the request. This number is changed to new random value each and every time the request is processed.

However, while presenting my newest work to a customer, reality hit me hard. The page displayed without styling in Safari (4.0.3 531.9.1) and Chrome (3.0.195.21) browsers. I went to investigate. After some time, I removed @Charset command from all CSS files. That fixed the problem but still made me look weird.

So until further ado, I’ll avoid using @Charset command in CSS. I advise you do the same.

In recent years, I had pleasure (yes, let’s call it pleasure) of working with several web designers. I also had pleasure of observing the latest stuff made by web designers on the net. I am yet to find a single designer that thought about people with disabilities. And I am not talking about heavy disability either. Not every one of us is young with perfect sight. Many people have problems with high resolutions, and even distinguishing colours. And we are not that old as well. Take WordPress theme I am using atm. Enhance fonts. You see what happened with tabs and search box? Yeah. But it looks nice in normal size. Right?

The funny thing though. I always pointed out the problem to designers. Nobody cared, but insisted the design stays as is. And I don’t even want to start explaining how much clutter do you need to add to HTML code to make fields rounded and expendable. Sure, you could do it using Javascript and perhaps this is the way to go anyway. But enough of that.

It is more than obvious that some don’t get the importance of great looking float-able, accessible and useful designs. And that is not OK. And it is not only a design issue as well. There is about 10% of people with some sort of optical problems. So 10% of all users will, in worst case, see your site distorted, or find it unusable. Excellent. Specially, if those are your customers.

Building web page as designer drew it is just not enough. Web sites that don’t scale are behind an era we are living now and in best case annoying to people with sight issues. So, use techniques that are available nowadays (and when CSS3 finally gets support it deserves, we all will be happy hypos) and don’t forget that you don’t represent everyone.

Writing HTML, CSS and JS for all those rounded buttons was fiddly, not to mention time consuming. The answer from designer: “You don’t need the design to float, scale, etc.”

Right. I will be covering that methodology (or wrongness of it) in one of my next posts. I just hope CSS3 support grows by 1000% in next week. Yeah, wishful thinking.

What to do?

A first thing that I always thought of was z-indexes. Only one problem there. Z-index doesn’t work in Internet Explorer in this case. But how can it be solved?

There is an attribute you can set for embedded objects called wmode. If this attribute contains value of transparent, you will force embedded object to display behind the absolute positioned one.

Example:

<embed width="465" height="285"
type="application/x-shockwave-flash" src="myflashanimation.swf"
style="" name="movie_player" quality="high"
allowfullscreen="true" allowscriptaccess="always" flashvars=""
wmode="transparent" id="movie_player"/>

Not a good idea. I don’t know, when was the last time, someone at IBM took a look at their rendering engine, but this just isn’t it. Unordered lists don’t close, leading to a total mess of your layout. On numerous occasions, a div tag marked as pass through text got put to the bottom of contents and not at the spot where it was in the body field, leading to some more confusion. And what killed it for me was a sudden br tag flood in the HTML for no apparent reason. All 6 of them were gone when text was put in the same line as pass through text and appeared right after I put the text back in new line. And all of this appeared randomly, which amused me for a while.

So, I guess it is no wonder, why there are so many CMS application in Notes, where content needs to be entered as HTML. However, in my experience, you as a developer or admin of such system can be glad if a content editor knows how to use Lotus Notes.

First, we need to assmble list of fields user needs to add. Each field usually has a label that describes to a user what information should he enter. Then, some fields are plain text, rich text, checkboxes, etc. Also, fields can have a default value.

Keeping that in mind, a basic web form usually has a field named $$Return, that specifies what happens on document submit. Also, it would be nice, if we allowed our users to enter name of the form and some short description that will be presented in web form.

The implementation

For basic forms, we don’t need anything fancy. No rich text for short description, probably only simplest field formats (plain text, rich text, radiobutton and checkbox) and probably not more than 10 fields. Since this example is here just to prove a case, I will limit it to 5 different fields.

So, our list of fields now looks like this:

• form name
• form description
• return page
• 5x field that will hold field name
• 5x field that will be used for field type
• 5x field with value (in case of radiobutton and checkbox)
• 5x field with default value
• 5x field with label

The “finished” form is displayed in picture below.

Filled user's form

Absolutely nothing. The only connection to Lotus Notes is, when you integrate this functionality into your database. It is a simple and trivial solution. I needed to create a form that will represent one single banner. This form contains name, URL, image, sort order etc. Look-up view for obtaining sorted banner list was created and some web forms that are already in “production” had to be altered, for loading of JavaScript class etc.

Prerequisites

This functionality depends heavily on jQuery library. It can be obtained here. I recommend minified version if you plan on hosting it yourself or, you can use Google Code link to link it from Google.

Next you need to obtain the adPlayer library. It is located here. I would ask you to not link the library directly from this link, but download it to your server and link it from there.

Getting started

In order to implement this application, you will first need to make a small HTML adjustment in the place where you want banner animator to be implemented.

<ul id="adPlayer">
    <li><a href=""><img src="images/ad1.jpg" /></a></li>
    <li><a href=""><img src="images/ad2.jpg" /></a></li>
    <li><a href=""><img src="images/ad3.jpg" /></a></li>
</ul>
<div id="adPlayerNav"></div>

Obviously you should insert link of your desire. The same goes for image src and alt parameters. Also, number of li elements can vary.

Next, at the bottom of the page (where your JS libraries are loaded and on load events are set), you need to load both .js files (jQuery and AdPlayer) , if you do not already have them. Next, add following (or if you already have onload event loader, just call loadPlayer() function).

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        loadPlayer();
    });
</script>

Now add some style

It is necessary to add styling to content thus far. CSS excerpt below will give you some idea as to how you can style things. Beware that #adPlayer height property must be set to height of a banner space. Also, some tweaking to .js file will have to be done, but nothing major (this will definitely be changed in future releases).

/* layout */
#adPlayer { list-style: none; height: 220px; margin-left: 0;
margin-bottom: 0; overflow: hidden; padding: 0; }
#adPlayer li { margin: 0; padding: 0; }
#adPlayerNav { position: relative; top: -1em; right: 1em;
text-align: right; }
#adPlayerNav ul { list-style: none; margin: 0; padding: 0; }
#adPlayerNav li { display: inline; margin: 0 0 0 0.1em;
padding: 0; }
#adPlayerNav li.adPlay, #adPlayerNav li.adPause {
margin-left: 1em; }
#adPlayerNav li a { cursor: pointer; padding: 0 0.5em; }

/* typography */
#adPlayerNav li { font-size: 1.2em; }

/* color */
#adPlayerNav li { border: solid 1px rgb(213, 213, 217); }
#adPlayerNav li a { background-color: white; padding: 0.5em; }

You now have fully functional banner animator.

Optimization

Loading 3+ 50K+ images in the middle of the page can never be a good thing. Thus, adPlayer library has a dynamic mode that can be used. This mode loads images after the page is loaded, which is a good thing. However, you cannot leave your banner space empty until then. A compromise solution is to load first banner in-line and all others after the document is loaded. Your HTML file must now look somewhat like this:

...
<ul id="adPlayer">
    <li><a href=""><img src="images/ad1.jpg" /></a></li>
</ul>
<div id="adPlayerNav"></div>
...
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        loadPlayer( true );
        adplayer.add ("", "images/ad2.jpg", "");
        adplayer.add ("", "images/ad3.jpg", "");
        adplayer.generatePlayer();
    });
</script>

Loading loadPlayer method with true as parameter value will enable dynamic mode. Now you can add banners in desired sort order. First parameter is link, second image src and third image alt. After you are done, just call generatePlayer method.