Web development for the PS3

The PS3 uses the NetFront browser. Developing for this is like web development in the days when ie5.5 or ie6 were the dominant browsers. Some things I have picked up that might help someone when developing for PS3:

  1. There seems to be a scrollbar that appears all of the time and the best way to get rid of this is to add the attribute scroll=”no” to the body tag
  2. The html star hack works for targeting the browser (* html)
  3. JavaScript events are set up with attachEvent and removed with detachEvent. So if you want you events to work cross browser I suggest using something like John Resigs cross browser addEvent function
  4. If you want to use a JavaScript library I found that BBC glow works well. The JQuery ready function would not fire, admittedly I did not spend much time trying to get to the bottom of this but I have found Glow to offer everything I required.
  5. Absolutely positioned elements dont seem to receive focus when you tab with the dpad
  6. If you want to align you site vertically in the middle of the screen then you will need JavaScript. I took the route of hiding the site, positioning it and then showing it as this prevents an FOUC
  7. I worked with a fixed width and height but there is scope to make your site fluid. However remember that users can be viewing you site on 52inch TV’s so you will probably need hi res images which can be bandwidth hungry to download
  8. Sony told a work colleague of mine that playstation owners tend to take a while to update so build and test for a the browser version that is a year old.
  9. The browser cache can be quite aggressive and I often found that even when I cleared the cache in the setting the HTML would not change. The best way to sort this is to attach a query string to the URL
  10. CSS sprites and transparent pngs work fine
  11. To deal with different screen sizes you will need to adapt the layout. I have worked on the basis of everything less than 720 gets the small verion of the site and everything above it gets the larger version. The small version is 790*440 and the large version is 1195*665. To tackle each layout seperatley I use a small bit of JavaScript that writes an additional classname into the head when the large screen verison is being used e.g.
    
    var screenHeight = document.documentElement.clientHeight;
    var screenWidth = document.documentElement.clientWidth;
    if (screenHeight >= 720 && screenWidth > 1195) {
        var a = document.getElementsByTagName('html')[0]; var x = a.className; var y = x.substr(3); a.className = y + ' largescreen';
    } else {
        var a = document.getElementsByTagName('html')[0]; var x = a.className; var y = x.substr(3); a.className = y;
    } 
  12. The following function maps the dpad events from the controller.
    
    function keyDown(e){
      var code;
      if (!e) var e = window.event;
      if (e.keyCode) code = e.keyCode;
      else if (e.which) code = e.which;
      var character = String.fromCharCode(code);
      switch(character){
      case "%":
        mapped_char = 'D-pad Left';
        break;
      case "'":
        mapped_char = 'D-pad Right';
        break;
      case "&":
        mapped_char = 'D-pad Up';
        break;
      case "(":
        mapped_char = 'D-pad Down';
        break;
      default:
        mapped_char = character
    }
      logger('EVENT: keydown - character was ' + mapped_char);
    } 
  13. Not so much a PS3 specific tip but a very useful one when debugging. PS3 has no debug console but the following function really helped me out when trying to get to the bottom of certain bugs:
    
                    function logger(log){
                      var el = document.getElementById('console');
                      var current_log = el.innerHTML;
                      var new_log = current_log + log + '<br />';
                      el.innerHTML = new_log;
                    }   

This entry was posted on