Activate your free membership today | Log-in

Monday, October 6th, 2008

SMIL 3.0 Reaches Proposed Recommendation

Category: Standards

Synchronized Multimedia Integration Language (or SMIL) 3.0 has now become a proposed recommendation at the W3C. SMIL hasn’t been widely used, but some of it is widely supported thanks to ACID tests that had the browser vendors put it in.

3.0 has the following goals:

  • Define an XML-based language that allows authors to write interactive
    multimedia presentations. Using SMIL, an author may describe the temporal
    behaviour of a multimedia presentation, associate hyperlinks with media
    objects and describe the layout of the presentation on a screen.
  • Allow reusing of SMIL syntax and semantics in other XML-based
    languages, in particular those who need to represent timing and
    synchronization. For example, SMIL components are used for integrating
    timing into XHTML [XHTML10] and into SVG
    [SVG].
  • Extend the functionalities contained in the SMIL 2.1 [SMIL21] into
    new or revised SMIL 3.0 modules.
  • Define new SMIL 3.0 Profiles incorporating features useful within the
    industry.

Posted by Dion Almaer at 12:32 pm
3 Comments

+++--
3.4 rating from 5 votes

Ajaxified Body; When to refresh the page

Category: Ajax

Matt Raible has posted on the Ajaxified Body pattern, that loads content into the main area instead of reloading an entire page.

The surrounding template stays put, and the red area changes when you have an action:

This is an old question: “When should you just reload the page?” In the sample application you see the trade offs. Every click causes a red “Loading…” indicator, and just the main area changes. The browser doesn’t have any indication that something is happening, hence the need for the custom red indicator. You also then have to implement support for browser history, make sure that direct access works and the like. The positive is that you don’t get a refresh flash, but is that enough to warrant the change?

One of the use cases on the page is the rich table component. That should definitely be able to refresh and page without the page changing, but when the main content gets swapped in, I start to question. What do you think?

Matt uses SiteMesh, a great technology that can knit together the look and feel, and can fit in very well in this kind of world. If a browser goes directly to a page it can piece together the entire page, but an Ajax request can come in and it can just send back the main content. Very nice.

Posted by Dion Almaer at 10:29 am
13 Comments

+----
1.8 rating from 22 votes

js.io: client library for networking

Category: Comet, JavaScript, Library

Michael Carter et al have been working on js.io, a client library that gives you networking, including Comet like support, via JavaScript.

The low level work can sit upon Comet APIs, and in the future, Web Sockets, and you get high level APIs to protocols such as:

  • amqp
  • imap
  • irc
  • ldap
  • smtp
  • ssh
  • stomp
  • telnet
  • xmpp

There are some demos such as LiveHelp that uses Orbited as the backend.

Posted by Dion Almaer at 7:01 am
3 Comments

++++-
4.3 rating from 15 votes

Mecca: A new social browser

Category: Browsers

Mecca is a new browser by the prolific Todd Ditchendorf of Fluid fame. It is currently in the works, and features:

  • Open Plug-in Architecture
  • Built-in Userscripting
  • Userstyles
  • ÜberView for Plug-in Split Views
  • Global Keyboard Shortcut
  • Single-Window Browsing Mode
  • BrowsaBrowsa Plug-in for Sidebars
  • Session Restore
  • Full-Screen Mode
  • Customizable Shortcuts
  • Integrated Gears-loading (InputManager)
  • Hidden “Closed” Windows
  • Thumbnail Plug-in for CoverFlow
  • TinyURL creation/expansion
  • Automatic Software Updates
  • Custom User-Agent Strings
  • Full WebInspector
  • Custom Window Opacity/Level/Style

It looks very interesting, and I can’t wait to see it!

Posted by Dion Almaer at 6:56 am
8 Comments

++---
2.3 rating from 15 votes

Friday, October 3rd, 2008

iPhone Web Apps running at full screen

Category: Mobile, iPhone

I am so happy that the NDA mess is over! Clancy has written about how you can have your iPhone Web app run in full screen and has a demo app that shows it off:

HTML:
  1.  
  2. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  3. <meta name="apple-mobile-web-app-capable" content="yes" />
  4. <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  5.  

Posted by Dion Almaer at 4:03 pm
10 Comments

+++--
3.1 rating from 16 votes

Vista / OS X Mash-up Created with GWT on PHP

Category: GWT, PHP, Showcase

Here's an interesting link for a Friday. Viktor Zeman on Quality Unit sent us a link to "PostAffiliateXpress", some boring IT application with an interesting interface and an even more intriguing back-end.

The UI combines a Vista-like "Start" menu along with an OS X-like dock (using everyone's favorite fish-eye widget). It also has a built-in widget system that leverages Google Widgets. Overall, it's a pretty nice implementation of a desktop and windowing in Ajax.

The framework itself is "GwtPHP" which attempts to take all the advantages of GWT and deploy them to PHP backends in an attempt to solve the problem of limited Java-friendly hosting services. Unfortunately, the framework isn't available for use until sometime in early November.

Dual-License

The developers intend to use the familiar "free for hobbyists, pay up for commercial use" licensing model (what their licensing page calls a "what for what" model).

Give some feedback

Viktor says that they are quite keen to get feedback from folks on the project, so interested folks should get in touch, let them know what you think about the licensing model, and perhaps get early access, etc.

Posted by Ben Galbraith at 10:51 am
6 Comments

+++--
3.3 rating from 35 votes

Thinking about the difference between frameworks

Category: JavaScript, Library

I got to meet Aaron Newton at The Ajax Experience, and he is a thinker. He was really taking in the various talks, and interactions, and you could tell that he was trying to work out various angles on the frameworks. What makes them different? What makes them popular? Where are they going?

He wrote a really nice post on some of these thoughts that goes into detail on different patterns for JavaScript programing. The meme at the show was definitely "the frameworks all do the same thing, just with a different looking API" which makes it even harder to put your finger on differences sometimes. Aaron does a good job.

John Resig himself gave a talk comparing the frameworks. Considering that he is Mr. jQuery, I thought he was very unbiased and had some good thoughts:

Posted by Dion Almaer at 10:20 am
35 Comments

+++--
3.6 rating from 49 votes

Practical Functional JavaScript

Category: JavaScript, The Ajax Experience

Oliver Steele gave a great talk at The Ajax Experience this week on Practical Functional JavaScript.

For his talk, he ended up creating a samples application where you can run the code directly, very similar to what John Resig did in Learn JavaScript.

The samples take you through JavaScript world, stopping for:

Posted by Dion Almaer at 10:11 am
Comment here

+++--
3.2 rating from 11 votes

Life: The game in Canvas

Category: Canvas, Games

Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:

JAVASCRIPT:
  1.  
  2. var counterface = 0;
  3. var oInstance;
  4. var Game = Class.create();
  5.  
  6. Game.prototype = {
  7.         'working': false,
  8.         'map': '',
  9.         'interval_id': '',
  10.     'initialize': function()
  11.     {
  12.  
  13.                 //generate map
  14.                 var startmap = [];
  15.                
  16.                 for(var y = 0; y <90; y++)
  17.                 {
  18.                         var row = [];
  19.                        
  20.                         for(var x = 0; x <90; x++)
  21.                         {
  22.                                 var state = Math.random();
  23.                                 state = (state> 0.8)? 1:0;
  24.                                 row[x] = state;
  25.                         }
  26.                        
  27.                         startmap[y] = row;
  28.                 }
  29.  
  30.                 this.map = startmap;
  31.                
  32.                 oInstance=this;
  33.                 this.interval_id = setInterval(function(){oInstance.loop()}, 100);
  34.     },
  35.     'loop': function()
  36.     {
  37.                 if (document.getElementById('frame').getContext)
  38.                 {
  39.                         // drawing code here
  40.                         if(this.working == false)
  41.                         {
  42.                                 this.working = true;
  43.                                 this.draw();
  44.                                 this.step();
  45.                                 this.working = false;
  46.                         }
  47.                 }
  48.                 else
  49.                 {
  50.                         // canvas-unsupported code here
  51.                         alert('Your Browser does not support the canvas tag. try again  in firefox 1.5+ or Opera 9+');
  52.                 }
  53.     },
  54.         'draw': function()
  55.         {
  56.                 var ctx = document.getElementById('frame').getContext('2d');
  57.                 ctx.save();
  58.                 ctx.clearRect(0,0,450,450);
  59.             ctx.fillStyle = "rgb(0,0,0)";
  60.  
  61.                 for(var y = 0; y <90; y++)
  62.                 {
  63.                         for(var x = 0; x <90; x++)
  64.                         {
  65.                                 if(this.map[y][x] == 1)
  66.                                 {
  67.                                         ctx.fillRect (x*5, y*5, 5, 5);
  68.                                 }
  69.                         }
  70.                 }
  71.  
  72.                 ctx.restore();
  73.                 ctx.fill();
  74.         },
  75.         'step': function()
  76.         {
  77.                 var output = '';
  78.                 supercount = 0;
  79.                
  80.                 var tempmap = [];
  81.  
  82.                 for(var y = 0; y <90; y++)//work around for arrays passing by reference.
  83.                 {
  84.                         var row = [];
  85.                        
  86.                         for(var x = 0; x <90; x++)
  87.                         {
  88.                                 row[x] = this.map[y][x];
  89.                         }
  90.                        
  91.                         tempmap[y] = row;
  92.                 }
  93.                                
  94.                 for(var y = 0; y <90; y++)
  95.                 {
  96.                         for(var x = 0; x <90; x++)
  97.                         {
  98.                                 var countme = this.getNeighborCount(y,x);
  99.                                
  100.                                 if ( this.map[y][x] == 0 ) // dead cell 
  101.                                 { 
  102.                                         if ( countme == 3 ) 
  103.                                         { 
  104.                                                 tempmap[y][x] = 1
  105.                                         } 
  106.                                 } 
  107.                                 else
  108.                                 { 
  109.                                         if ( ( countme == 2 ) || ( countme == 3) ) 
  110.                                         { 
  111.                                                 tempmap[y][x] = 1
  112.                                         } 
  113.                                         else 
  114.                                         { 
  115.                                                 tempmap[y][x] = 0
  116.                                         } 
  117.                                 } 
  118.                         }              
  119.                 }       
  120.                 counterface++;
  121.                 this.map = tempmap;
  122.         },
  123.         'getNeighborCount': function(starty,startx)
  124.         {
  125.                 var count = 0;
  126.                
  127.                 for(var y = starty-1; y <= starty+1; y++)
  128.                 {
  129.                         for(var x = startx-1; x <= startx+1; x++)
  130.                         {
  131.                                 if(y>= 0 && y <90 && x>= 0 && x <90)
  132.                                 {
  133.                                         if(startx != x || starty != y)
  134.                                         {
  135.                                                 if(this.map[y][x] == 1)
  136.                                                 {
  137.                                                         count++;
  138.                                                 }
  139.                                         }
  140.                                 }
  141.                         }
  142.                 }
  143.                
  144.