Web Info & Tutorials

December 6th, 2007

USE THE GOOGLE CHART API TO CREATE CHARTS FOR YOUR WEB APPLICATIONS

I love simple APIs, and this one eats the pie. With the Google Chart API you can build a URL that will dynamically create a chart for you. This service is used internally for Google Finance, Google Video, and beyond. Now, anyone can use it!

Although it is simple to use (just a darn URL after all) you will see that there are many options.

Here is just a few charts to show how broad this is:

Line Chart

http://chart.apis.google.com/chart?cht=lxy&chs=200×125&chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|100,90,40,20,10|-1|5,33,50,55,7&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5

Bar Charts

http://chart.apis.google.com/chart?cht=bvg&chs=200×125&chd=s:hello,world&chco=cc0000,00aa00

Pie Charts

http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=200×100&chl=Rails|PHP|Java|.NET

Venn Diagrams

http://chart.apis.google.com/chart?cht=v&chs=200×100&chd=t:100,80,60,30,30,30,10

Scatter

http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200×125

Solid Fill

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chs=200×125&chxt=x,y&chxl=0:|Jun|July|Aug|1:||20|30|40|50&chf=bg,s,efefef

Linear Gradient

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=0:|1|2|3|4|5|1:|0|50|100&chs=200×125&chf=c,lg,45,ffffff,0,76A4FB,0.75|bg,s,EFEFEF

Linear Stripes

http://chart.apis.google.com/chart?cht=lc&chd=s:UVVUVVUUUVVUSSVVVXXYadfhjlllllllmmliigdbbZZXVVUUUTU&chco=0000FF&chls=2.0,1.0,0.0&chxt=x,y&chxl=0:|Jan|Feb|Mar|Jun|Jul|Aug|1:|0|25|50|75|100&chs=200×125&chg=100.0,25.0&chf=c,ls,0,CCCCCC,0.2,ffffff,0.2

Legend

http://chart.apis.google.com/chart?cht=v&chs=200×100&chd=t:100,20,20,20,20,0,0&chdl=First|Second|Third&chco=ff0000,00ff00,0000ff

Multiple Axis Labels

http://chart.apis.google.com/chart?chxt=x,y,r,x&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200×125

Fill Area

http://chart.apis.google.com/chart?cht=lc&chd=s:99,cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH,AA&chco=000000,000000,000000,000000,000000&chls=1,1,0|1,1,0|1,1,0|1,4,0&chs=200×125&chxt=x,y&chxl=0:|Sep|Oct|Nov|Dec|1:||50|100&chg=25,25&chm=b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0

December 6th, 2007

CONVERSATION WITH BILL GATES ABOUT IE8 AND MICROSOFT TRANSPARENCY

Molly Holzschlag got a chance to talk directly to Bill Gates about IE 8.

Here is my revised and edited version of the conversation:

MOLLY: Why the hell aren’t we able to talk about IE 8?
BILL: I’ll have to ask Dean what the hell is going on.
MOLLY: I do realize that there is a new engine, so we can’t talk about it?
BILL: I’ll have to ask Dean what the hell is going on.
JENNIFER: Come to MIX 08.
BILL: We don’t want to set expectations.

December 6th, 2007

AJAXIAN FEATURED TUTORIAL: AJAX FOR CHAT

Ever wanted to build a chat module for your application? Jack Herrington shows you how in this tutorial on the IBM Developerworks site.

Learn to build a chat system into your Web application with Asynchronous JavaScript™ + XML (Ajax) and PHP. Your customers can talk to you and to each other about the content of the site without having to download or install any special instant-messaging software.

While not exactly Meebo, the tutorial does provide the foundation for building your own little chat app and uses the powerful Prototype library for it's client-side code.

Here is some of the code that Jack listed in the tutorial. The full code for the tutorial can be found here.

LANGUAGE:
    <?php
    if ( array_key_exists( 'username', $_POST ) ) {
      $_SESSION['user'] = $_POST['username'];
    }
    $user = $_SESSION['user'];
    ?>
    <html>
    <head><title><?php echo( $user ) ?> - Chatting</title>
    <script src="prototype.js"></script>
    </head>
    <body>

    <div id="chat" style="height:400px;overflow:auto;">
    </div>

    <script>
    function addmessage()
    {
      new Ajax.Updater( 'chat', 'add.php',
      {
         method: 'post',
         parameters: $('chatmessage').serialize(),
         onSuccess: function() {
           $('messagetext').value = '';
         }
      } );
    }
    </script>

    <form id="chatmessage">
    <textarea name="message" id="messagetext">
    </textarea>
    </form>

    <button onclick="addmessage()">Add</button>

    <script>
    function getMessages()
    {
      new Ajax.Updater( 'chat', 'messages.php', {
        onSuccess: function() { window.setTimeout( getMessages, 1000 ); }
      } );
    }
    getMessages();
    </script>

    </body>
    </html>

December 6th, 2007

APPLEBOX: ITUNES IN SERVERLESS AJAX

Simon Gilligan has created Applebox, a consumer front that looks meet same iTunes, but instead of Cocoa, it is a serverless Ajax application:

Ok, instance to geek discover and speech most the profession behindhand APPLEBOX. Whilst we conceive our help for the topical DVD accumulation is a succeeder (we’ve low accumulation overheads, embraced the cyberspace and kept a brawny significance of topical accord modify from the web) we also completely fuck the technology! Forget Rails, we’ve got a J2EE scheme arrange that we conceive is ordinal to none. Check it out:

  • Our structure is SOA (Service Oriented)
    All our covering calls are SOAP, which from the connector up creates an API we module provide open danger to at a after date. For warning this call returns a flick profile.
  • Our front is Serverless AJAX
    The Web 2.0 shitting has sweptwing AJAX into the mainstream. We verify that digit travel boost and have our rank covering as Serverless AJAX that makes unsettled SOAP calls to our backend.
  • Our utilization impact is Model Driven (MDA)
    Rails gives the Ruby accord productivity. For us, MDA gives J2EE a kindred effort in the arm. Our rank arrange with stubs for every playing methods and scheme services, a choice CRUD assist layer, and every the J2EE XML config files are generated from a UML model. We crapper iterate from UML finished to database and assist layers in a concern of minutes. The MDA shaper we we ingest is AndroMDA.
  • Our J2EE components are
    Axis (Web Services), Acegi (Security), Spring (Transactions), Hibernate (ORM), MySQL (Database) and JBoss (App Server).

Applebox

December 6th, 2007

MICROSOFT LABS VOLTA: .NET WEB TOOLKIT

Microsoft Labs has announced a new project called Volta that looks like GWT for .NET.

Erik Meijer (Mr. LINQ) is behind this one:

"The idea is that you start out building your application, focusing on the functionality, the look and feel, until you're satisfied with it and then you repurpose it into an AJAX application or whatever," Erik Meijer, Volta's principal architect and a member of Microsoft's SQL Server team, said in an interview. "You incrementally morph a standard client-only application into a Web application. The programmer specifies the intent and then we're going to insert all the necessary code to do the 'how.'"

Apps written with Volta can be debugged from within Visual Studio, something that's not always easy for multi-tier apps that run across client and server. "One of the unique opportunities provided for us is to debug across different forms of code, whether client or server," Alex Daley, Microsoft's group product manager for Live Labs, said in an interview. Volta, meanwhile, can also instrument code so developers can collect information on performance from Microsoft Service Trace Viewer.

You have a full API to talk into the browser side of things... E.g.:

C#:
  1.  
  2. partial void InitializeComponent() {
  3.    nameElement = Document.GetById&lt;input&gt;("Text1");
  4.    greetingElement = Document.GetById&lt;div&gt;("Greeting");
  5.    button1 = Document.GetById&lt;button&gt;("Button1");
  6.    public VoltaPage1() {
  7.      InitializeComponent();
  8.  
  9.      var greeter = new Greeter();
  10.      button1.Click += delegate {
  11.         var name = nameElement.Value;
  12.     };
  13. }
  14.  

You can also call out to "native" JavaScript code via annotations:

C#:
  1.  
  2. [Import("function(id) { return new VEMap(id); }")]
  3. public extern Map(string id);
  4.  

I have seen teams have great success with GWT, and it is especially nice when a new version comes out that has huge speed improvements (which seems to happen each time), so there is probably a market for people who are .NET shops who think JavaScript is "icky" :/

I definitely want to check out the Ruby side of things...

December 6th, 2007

ADOBE AMF AND FLASH MEDIA SERVER

One thing that I learned being on the Adobe bus tour was that Ted Patrick has good taste in reggae. He just put a blog post up about the ABCs of AMF in which he details the format and has a little hint at the end:

The AMF file format is a binary file format representing a serialized ActionScript object. This file type is used in many places within the Flash Player and AIR for data storage and data exchange. In Flash Player 9 and AIR, the flash.utils.ByteArray class is the primary way AMF is handled.

...

I would encourage you to take a deeper look at AMF. There are some low level benefits to using it that are hard to beat. With all distributed computing systems, serialized object formats are essential and AMF is the native format for Flash Player.

There is some big AMF news coming in December.... :)

Several people are alluding to an opening up of that format.

Adobe also made the Flash Media Server less that a bazillion dollars, and we can probably thank Microsoft for the price slash.

December 6th, 2007

YSLOW 0.9 RELEASE: GROKKING XHR AND MORE

Steve Souders and Stoyan Stefanov have released YSlow 0.9:

There are two big features in this release. By integrating more tightly with Firebug's Net Panel, YSlow now finds non-DOM components such as Ajax requests and image beacons. And YSlow now crawls frames and iframes and analyzes those resources as well. There are several other new features and bug fixes described in the release notes including highlighting 404s, better detection of CSS expressions and JavaScript minification, and searching within the YSlow panel.

These features make YSlow stronger at identifying performance improvements for Web 2.0 applications. It's great that YSlow does even better performance analysis of pages, but be forewarned that your previous YSlow scores will drop if these new-found components exhibit bad performance characteristics. As mentioned in Rule 14 - Make Ajax Cacheable, some of the performance improvements that are readily applied to static content (far future Expires header, gzip compression, minification) can also be applied to Ajax responses. Whether it's Web 1.0 or Web 2.0, YSlow 0.9 helps you figure out what to fix to make your pages faster for your users.

Stoyan Stefanov goes into more detail on the new features, and you can check out the release notes.