Posts Tagged ‘ui’

Dropped support for IE6

Wednesday, April 9th, 2008

We’ve been silent on these pages recently. The reason for that is a series of meetings that we’ve had, plus some steering that we’re doing on our roadmap (more on this will follow).

One of the things that kept us busy in the past month has been this bug. Basically we were rendering awfully on IE.

Our demo on IE6, a week ago…

We’d had this issue for a while and it was just time to get dirty on it. Working with Jan has been really instructive and, beside reminding me that developers suck at designing UIs, I’ve learnt that supporting IE6 it’s not really a matter of throwing fixes or using javascript libraries reporting to support it (we use JQuery here).

We could get the basic layout fixed, but we didn’t get anywhere near solving all the issues we had so, after two days spent on black magic css-ing, we took the decision: Atalaya (at least in its 1.x versions) won’t support IE6.

IE6 has still 30% of browser share, but it’s been constantly declining over the past here and especially after IE7 was released. Also, our target users are probably the least likely to have IE6 on their corporate computers, which makes this decision reasonable after all.

This decision aligns with our objective of taking a fresh look at our UI for Atalaya 2.0 (hold on:)), thus not spending a lot of time on the current look&feel (yes, the JFreeChart charts really suck we know).

Ah, the online demo has been updated with the fixes, and contains some new features also. Go check it out:)

 

 

JQuery RSS feed reader plugin

Friday, February 8th, 2008

Post update! I have been away from this blog for quite a while now; sometimes things turn in a way you wouln’t expect… Since this post seems to still be pretty active, I’m planning an update to include some explanation,more context and feedbacks. Please be patient and thanks for your suggestions:)

I’ve finally decided to post another no-brainer JQuery plugin: a simple news box fed by an RSS feed. You can see an example on our project’s home page. I had found the idea on the JQuery mailing list but loving plugins (although not really good at it) I decided to wrap it up a bit.

The result is quite simple: just place a div somewhere and initialize it with a feed URL:

<script language="JavaScript" type="text/javascript">
$('#rightcolumn').feedreader({
targeturl: 'http://blogs.atalayasec.org/atalaya/?feed=rss2'
});
</script>
...
<div id="rightcolumn">
</div>

There are two other configuration options available; how many posts to put in the news box and the length of the text to be displayed for each item. A complete initialization would be then like the following:

$('#rightcolumn').feedreader({
targeturl: 'http://blogs.atalayasec.org/atalaya/?feed=rss2',
items: 3,
descLength: 15
});

The code is pretty rough (and not really js-style) but functional. In case it’s useful to someone.

A JQuery plugin for canvas pies

Thursday, February 7th, 2008

These days I’ve been thinking on how to make Atalaya charts look better. This morning I’ve found this post that renders a canvas pie chart reading data from a table. Before trying to use it for real, I needed for the data table to disappear after rendering the chart.

The original code, from Stoyan Stefanov, is here. I’ve simply wrapped it in a jquery plugin. It’s enough to wrap the canvas and table elements in a div:

<div id="pie">
	  <table id="mydata">
	    <tr><th>Lang</th><th>Value</th</tr>
	    <tr><td>JavaScript</td><td>100</td></tr>
	    <tr><td>CSS</td><td>200</td></tr>
	    <tr><td>HTML</td><td>300</td></tr>
	    <tr><td>PHP</td><td>50</td></tr>
	    <tr><td>MySQL</td><td>30</td></tr>
	    <tr><td>Apache</td><td>10</td></tr>
	    <tr><td>Linux</td><td>30</td></tr>
	  </table>
	  <canvas id="canvas" width="300" height="300"></canvas>
</div>

and to initialize the plugin:

 $(function() {
         $(‘#pie).canvaspie({table: ‘#mydata‘,canvas: ‘#canvas})
 });

The plugin hides the table and shows the pie. An example (and the plugin itself) can be found here, in case someone finds it useful.

P.S: yes, I do need a code highlighter, sorry.

P.P.S: Thanks Stoyan for pointing me to hiliteme.

Update: I’ve updated the test page to use ExplorerCanvas, so now the test page should work on IE as well.