Archive for March, 2007

IBM to launch an accessible browser known as A-Browser

1

Mar
31

IBM has announced that they will soon be releasing a new browser with the aim of targeting the visually impaired market.

The browser known as A-Browser was conceived by a blind employee, Dr Chieko Asakawa, from IBM’s research lab in Japan.

The browser is totally controllable from the keyboard and allows users to engage with multimedia content (currently targeting both Real Player and Windows Media Player) by using defined keyboard keys and therefore not relying on sight to see controls and using the mouse to click on them.

Video content can be further controlled by speeding it up or slowing it down and can also house an extra narration track that is inclujded in many films and TV programmes.

With over 160 million visually impaired users world wide there is a huge market to target and IBM could have made a very clever decision by targeting this area and its about time too.

Having developed countless accessible sights myself it becomes very frustrating when listening to sites in screen readers such as Jaws.  They sound long winded and are amazingly difficult to navigate and that’s from a developer’s point of view let alone somebody who has never visited the site before.

A-Browser could really be an incredible step in the right direction and should be applauded, and with the product due to be delivered later this year for free (hopefully) and open source IBM have truly made a bold move.

JavaScript nextSibling Firefox bug fix

10

Mar
28

After being totally frustrated by what I believe to be a bug in Firefox’s Document Object Model (DOM) I found a very handy fix. Agave Group Design investigated this issue and realised that Firefox counts line breaks as a textNode and therefore can be returned in many situations as the next sibling rather than for example the next div.

The fix was fairly simple in the creation of the following function:

code

function getNextSibling(startBrother){
  endBrother=startBrother.nextSibling;
  while(endBrother.nodeType!=1){
    endBrother = endBrother.nextSibling;
  }
  return endBrother;
}

The full article can be found on the Agave Group Design website.

Simple CSS Image Mask

18

Mar
28

This is a simple task but nether the less worth documenting.  The aim is to create a mask over the top of an image when hovering over them or selecting them.

Image without mask Mask over view


The images above show the two states, the first the idle state and the second the border masked state.  Obviously these are both images, however, this actual example will be carried out purely with CSS.

I have knocked up a quick demo of the Simple CSS Image Mask.

code

HTML Code

The HTML simply consists of a div container with a class of mask applied  wrapping  a linked image.

<div class="mask">
    <a href="#">
        <img alt="Image without mask" src="http://www.andrewsellick.com/wp-content/uploads/Image/tree.jpg" class="left" />
    </a>
</div>

CSS Styles

The CSS is also fairly simple.  Widths and heights are applied to the a tag.  Active and hover states are then set on the a tag and the img tag.  A border of six pixels is applied to the a tag and a width and height reduced by 12 pixels  to cater for the extra size produced by the border and finally an overflow of hidden is applied to "mask" the image.  The last step is pull the active image acroos to the left and up by 6 pixels to create the illusion that the image is being masked.

.mask a{     
    height:227px;     
    display:block;     
    width:150px;
}

.mask a:hover,
.mask a.active,
.mask a:active{     
    border:6px solid #646567;     
    width:138px;     
    height:215px;     
    overflow:hidden;
}

.mask a:hover img,
.mask a.active img,
.mask a:active img{      
    margin:-6px 0px 0px -6px;
}

.mask img{
    border:0px;
}

demo

The demo can be found at the following link: Simple CSS Image Mask.

Internet Explorer (IE 5, 5.5, 6 and 7) CSS Hacks

2

Mar
21

I will start off by saying that I understand both the pros and cons of hacking CSS and I am not condoning it, however, I still think it is worth while showing the hacks out there and the potential to isolate specific browsers by doing this.  This is only going to be a short article reflecting on IE hacks only.

the hacks

Phew.  Right now I’ve got that out of the way lets start off with one of the most commonly used hacks, the underscore hack.

_width:100%;

This will work in all IE browsers below IE 7 but NOT IE 7 itself.

Next we move onto the backslash hack.

w\idth:100%;

This will work in most browsers (Firefox 2 and 1.5, IE 7 and 6, Opera) however it is not recognised in IE 5.5 and 5.

Then the star hack.

*width:100%;

This works in all versions of IE but not other browsers.

combinations

Right now we have some of the main hacks listed we can now start to combine them to good effect.

Lets combine underscore hack and the backslash hack.

_w\idth:50%;

This will work in IE 6 only;

Now lets combine the star hack and the backslash hack.

*w\idth:50%;

This will work in IE 7 and 6.

Now lets adopt a slightly different method of combing using the star hack and the underscore hack as follows.

*width:50%;
_width:inherit;

This will only target IE 7 with regards to applying the 50%.

demo

Check out this simple IE CSS Hacks demo to see the results.  All the columns that are set to a width of 50% have the style applied.

Apollo Runtime from Adobe Labs

3

Mar
19

I have been following the progress of Apollo Runtime for a while and thought I would share a few thoughts.  To start off with I’ll just give you a basic explanation as to what it is. 

what is it?

It’s a cross-OS runtime that supports the use of technologies such as Flash, Flex, HTML, JavaScript, Ajax and is currently running across both Windows XP Service Pack 2 (SP2) and Macintosh (Mac) OS X. 

In essence it can easily allow developers to create their own Google Desktop esq applications that after the 1.0 release will also be supported on Linux allowing wide coverage of your desired application over a multitude of operating systems.

who will use it?

Well one sample that is already being pushed out as a showcase is Finetune Desktop.  This allows registered users to use created playlists as well as dynamic playlists dedicated to artists and tags.

I believe this is a prime example of what could be a move away from the traditional web browser as we know it.

I can think of a million and one good examples of uses for ranging from gambling websites integrating flash games into Apollo to lighter functionality I.e. news tickers etc.

will it catch on?

Only time will tell I guess, however, I’m definitely going to give it a go and see what I think, although, first impressions are that it looks very good. 

My main sticking point is that it is another download and how readily users will do this is debatable.  Adobe has to find strong sources from which they can leverage downloads and have themselves stated “we are also exploring a number of other distribution methods, and are confident that we will be able to quickly get significant distribution of the Apollo runtime”, this will be essential part in the potential success of this runtime as low coverage equals a potential flop.

Have a look for yourself on the Apollo Runtime (Adobe Labs) website.

« Previous Entries