Web 2.0

YouTube Data API Changes and Player API

If you haven't heard the big news yet, the YouTube Data API has been updated and the YouTube Player APIs have been released. The APIs look very interesting with some much wanted features.

The below is the big news from the YouTube Blog.

Here's the sound byte: We now support upload, other write operations, and internationalized standard feeds. (And there was much rejoicing!) We're also introducing player APIs and a chromeless player -- a barebones player SWF that's fully customizable and controllable using the player APIs.

The Data API now allows for reading (nothing new), writing and uploading of data (the latter two are the big news). The API allows for you to do many things that can be done in YouTube, such as add comments about a video or upload videos to YouTube. Libraries for the API are available for Java and PHP (sorry Ruby developers at least for now).

You can read more about the Data API here.

The Player APIs now offer a Flash (Actionscript 2.0) API and a JavaScript API to allow more control over the player. The JavaScript API and Flash API are very similar (which makes since as they are both based on ECMA Script). The APIs have some very powerful hooks into the videos. My personal favorite hook is player.getPlayerState() which returns the state of the player. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).

You can read about the JavaScript API here and the Flash API here (note that the Flash API is almost exactly the same as the JavaScript API, so you will need to read both references if you are going to use the Flash API).

Perhaps Even bigger news is the release of the chromeless player. Below is an excerpt about the chromeless player from reference.

Getting Started

First off, you need a developer key. To register for one, visit the registration page.

The chromeless player consists of two SWF files. apiplayer.SWF contains the actual video playing functionality. cl.SWF is a loader SWF that loads apiplayer.SWF and exposes the player's API functions. It also provides security sandbox restrictions for the apiplayer.SWF, so loading SWFs cannot access elements inside the player directly.

The player can be controlled via two methods — by loading the SWF into another SWF (or Flash website, etc.), or by embedding it directly in an HTML page and using JavaScript to control the player. The JavaScript controls are identical to the embedded player's JavaScript API.

The URL to load the chromeless player SWF is:

http://gdata.youtube.com/apiplayer?key=DEV_KEY

Functions

The following operations are available in addition to the ones listed in the JavaScript API documentation.

loadVideoById(videoId:String, startSeconds:Number):Void
Load the specified video and starts playing the video. If startSeconds (number can be a float) is specified, the video will start from the closest keyframe to the specified time.
cueVideoById(videoId:String, startSeconds:Number):Void
Loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until playVideo() or seekTo() is called. startSeconds accepts a float/integer and specifies the time that the video should start playing from when playVideo() is called. If you specify startSeconds and then call seekTo(), the startSeconds is forgotten and the player plays from the time specified in the seekTo() call. When the video is cued and ready to play, the player will broadcast a video cued event (5).
setSize(width:Number, height:Number):Void
Sets the size of the chromeless player. This method should be used in favor of setting the width + height of the MovieClip directly. Note that this method does not constrain the proportions of the video player, so you will need to maintain a 4:3 aspect ratio. When embedding the player directly in HTML, the size is updated automatically to the Stage.width and Stage.height values, so there is no need to call setSize() when embedding the chromeless player directly into an HTML page. The default size of the SWF when loaded into another SWF is 320px by 240px.

You can read more about the new features at the YouTube API Blog.

I think that these new feature really make it possible to make some great mash-ups with YouTube. If you create a cool mash-up using some of the new features of the API or use the the Player APIs or use the chromeless player then I would love to hear about it (you can leave it in the comments or you can write a blog post about it using your free Ajaxonomy account.

JavaScriptMVC - Model View Controller for JavaScript

You may have heard about the JavaScriptMVC library (it received quite a bit of press because of it's compression capabilities) and may have thought about using it, but haven't played with it yet. Well, I've been looking at the library and have found a few tutorials very useful.

If you haven't downloaded the library you will want to do it before starting working on the tutorials (You can download the library here).

The first tutorial you should read is the getting started tutorial. This tutorial covers the basics of including the JavaScript files and the plug-in files.

Below is an excerpt from the getting started tutorial.

Including plugins and JavaScripts

All JavaScriptMVC functionality comes in the form of a plugin. We'll include the Controller plugin, which organizes your event handlers.

Replace myapp.html with the following HTML. Note the numbered comments, which are explained after the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
   <head></head>
   <body>
      <script type='text/javascript' src='jmvc/include.js'></script>
      <script type='text/javascript'> 
         include.plugins('controller'); 
include('myscript');
      </script>
   </body>
</html>
  1. Creates a script tag where we'll include a plugin and a script.
  2. Loads the Controller plugin.
  3. Loads myscript.js, a file we'll create in the next section.

The next tutorial that I would recommend reading is the controller tutorial. The tutorial goes over the syntax that is required to use the controller.

Below is an excerpt from the controller tutorial.

Main Controller

If you want to respond to events like:

  • the page being loaded
  • the page being unloaded
  • the page being resized
  • the page being scrolled

you create a special main controller by naming it 'main'. The main controller listens for events on the window, document, and body.

$MVC.Controller('main',{
  // the window onload event handler
  load: function(){
    alert('page loaded');
  },
  // the window resize event handler
  resize: function(){
    alert('page resized');
  }
});

The next tutorial that I would read is the view tutorial. This tutorial gives an overview of how the view functionality is accomplished including the use of templates.

Below is an excerpt from the view tutorial.

Create a Template

The first step towards cleaner code is separating your presentation markup (HTML) from your application logic (JavaScript). We'll do this by separating our presentation markup into a separate file called a template. Create a file called cleaning.ejs and insert the following code:

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>

        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>

    <% } %>
</ul>

You'll notice everything inside <% %> tags is
executed and everything inside <%= %> tags inserts itself into the returned HTML string.

We need to add JavaScript to control the loading and rendering of the template.
We'll replace the original string concatenation code with the following:

// load the template file, then render it with data
var html = new View({url: 'cleaning.ejs'}).render(data);

Doesn't that feel better? The template code restores HTML to its intended structure and the JavaScript code is short and unambiguous.
The dust is clear, now its time to mop.

It is good to see a library try to bring some form of the Model View Controller design patter to JavaScript. If you use this library for any of your projects I would love to hear about them (as usual you can leave them in the comments or write a blog post about it using your free Ajaxonomy account).

TaffyDB: A Javascript database for your browser

Tagged:  

Have you ever built an Ajax application that has some data that needs to be saved and queried for the current session, but not for multiple sessions. Well, instead of creating a temporary database table Ian Smith has come up with a better solution called Taffy DB.

Taffy DB is like having a SQL database in your browser! The Taffy DB is accessed through JavaScript, so it is great for Ajax applications. The library is under 10KB and plays well with other libraries like jQuery and the Yahoo! User Interface.

Below is how the library is described on the official Taffy DB Website

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

What makes it cool:

  • Under 10K!
  • Simple, JavaScript Centric Syntax
  • Fast
  • Easy to include in any web application
  • Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
  • CRUD Interface (Create, Read, Update, Delete)
  • Sorting
  • Looping
  • Advanced Queries

Think of it as a SQL database in your web browser.

Below are some examples of how you would use the library.

Example #1:

Let's say you have a collection of products and you want to find every product that costs less $10 and is not a book. Simple, just write some JavaScript:

products.find({price:{lessthan:10}, type:{not:"Book"}});



Example #2:

Let's say you want to update every product from XZYDesign and set the status to not available:

products.update({status:"NA"},{manufacturer:"XZYDesign"});



Example #3:

Let's say you want to sort your products based on type, price ascending, and quantity ascending:

products.orderBy(["type",{"price":"asce"},{"quantity":"asce"}]);

Below are the methods that are available from the library.

  • Find Method
  • Update Method
  • Insert Method
  • Remove Method
  • OrderBy Method
  • ForEach Method
  • Get and First Methods

You can find an overview of all of these methods here.

You can read more about the library here.
You can download the library here.

You can see the library in action at Joe's Goals and Quote Wizard. I can see a lot of uses for this in some future applications. If you use this library in any of your applications I would love to hear about it (you can leave a comment about it or write a blog using your free Ajaxonomy account).

Bad Object Detection

Tagged:  

John Resig has written another great post, this time about bad object detection. The article talks about classic bad object detection such as checking if the document.all object exists to test for Internet Explorer (I admit it I've been guilty of this one).

Below is an excerpt from the post.

Fringe Cases From Global Variables

While they don't happen often for those that they do happen to they can be a living hell. Specifically when object detection takes place within the global object (e.g. window.opera) then all bets are off as to its cross-browser applicability. Let's take a look at an example:

<html>
<head>
<script>

window.onload = function(){
  if ( window.opera ) {
    alert("You're using Opera, pick me!");
  }
};
</script>

</head>
<body> 
  <h1>Which browser?</h1>
  <a href="http://mozilla.com/" id="firefox"> Firefox</a><br/>

  <a href="http://apple.com/" id="safari"> Safari</a><br/>
  <a href="http://opera.com/" id="opera"> Opera</a><br/>

  <a href="http://microsoft.com/" id="ie"> Internet Explorer</a>
</body>
</html>

You would expect the alert to pop up when the user visits the page in Opera - and it does - however the alert also comes up in Internet Explorer. This is because all elements with an ID are automatically introduced as global variables (in the above there are four globals: firefox, safari, opera, and ie that all reference their associated elements). This is a fantastically difficult bug to spot and work around - thus you should be very cautious when doing any form of object detection on the global object.

Of course, it almost goes without saying, that there could exist an 'opera' variable elsewhere in the site that could interfere with this detection. Although that would, arguably, be easier to detect as it would make every browser trigger a false positive.

There's two morals here:

  1. Only use object detection to detect exactly what you need to use.
  2. Be wary of detecting properties on the global object - it's capable of lying to you.

You can read the full post here.

This is a great post and something that I hadn't thought much about. I really like John's blog and I find his posts very informative. I have often found information on his blog that I haven't seen anywhere else on the web (I know that I've said it before, but if you don't have John's blog on your feed reader, I would recommend adding it).

OpenSocial Videos

Tagged:  

With all the buzz about OpenSocial (especially with MySpace jumping on board) you probably are interested in using the API. Well if you are anything like me you find it easier to learn by watching a video than reading a boring post. Well the OpenSocial API blog has posted a few videos to help you in your development.

del.icio.us Spy Widget Released

Tagged:  

You may have used our del.icio.us Spy application and hopefully it has been useful in finding new websites and bookmarks. If you have a blog or website you may have thought that it would be cool to have a widget of what is on the del.icio.us Spy. Well, we have just released a del.icio.us Spy widget for your blog or website.

AdSense for Video now in Beta

Tagged:  

We've been hearing that it was coming, but Google's AdSense for Video is finally released in beta form. People will now be able to easily advertise on their YouTube videos.

Below is an excerpt regarding the release from the Official Google blog.

Enter, stage left: the AdSense for video beta. This approach takes the same non-intrusive InVideo ad format used on YouTube and extends it across video partner sites on the Google Content Network. This enables advertisers to run a single campaign across the largest network of online video content.

Unique to AdSense for video are text overlay ads contextually targeted to a combination of signals in your videos and on your site. With these overlay ads, the user's experience is not interrupted; users determine how much they want to interact with the ad.

We have two major goals: to make it easier for publishers to monetize video online, and for advertisers to learn how to reach the video community. Towards these ends, today we're also launching a single destination with an overview of various options to expand online video opportunities called Google Video Advertising Solutions. We hope this will be your starting point to understand how to leverage the Google Content Network and YouTube to make the most out of the online video experience. You can also see our overview videos for advertisers and publishers -- because isn’t video the best way to experience video?

We've been working with a number of video partners (e.g. popular destinations like BobVila.com, eHow, MyDamnChannel, ExpertVillage, PinkBike, TheNewsRoom, and social video aggregators like Revver, blip.tv, and GodTube). And we're also working with several key video platform solution solutions like Brightcove, Yume, Tremor Media, and Eyespot Network, who have plugged our ads into their platforms.

There are some criteria that publishers have to meet to participate in AdSense for video, which you can learn about on the Inside AdSense blog.

You can read the full post here.

The thing that sounds very interesting is how the ads will be placed in the video. This will be very interesting to see in action. It am looking forward to seeing how this catches on and if popular videos start making decent money.

From Google's stand point it is a great way to increase their ad revenue as they already have a strong hold on sites like this blog (look at the ads on the right hand side of this page). It is possible that with Google's purchase of FeedBurner that they could rule that ad space in Web Sites/Blogs, RSS Feeds and On-line Videos.

Creating a Simple JavaScript Game Board

Over at the Web Cash blog they have posted two tutorials on Game development in JavaScript, Ajax and PHP. The first tutorial explains the concept and describes how to make a game board.

Below is an excerpt from the first tutorial.

Game Development with JS, AJAX, and PHP

How can we use JS and PHP - connected through AJAX - to develop an online game?

Javascript’s main use for us is to create an interface for the game. Through Javascript we can capture user input - i.e. mouse clicks and text. We can also alter the game’s output - changing the HTML of the page, adding images, and moving things around. Javascript will provide a lot of the front end work.

PHP, on the other hand, is a more robust language for dealing with the logic of the game. PHP could be useful for developing an AI and evaluating winning conditions. It also offers a great way to store information for later use through flat files or database integration.

If we’re going to use both Javascript and PHP, we’ll need to use AJAX. This is the glue that holds the whole thing together. It will send input from the main Javascript to the PHP processing scripts. The PHP script will then send info back to the Javascript and it will alter the page’s layout accordingly.

Read the full first tutorial here.

The second tutorial goes into more detail as to how you would start creating a simple game. By the end of the tutorial you have a complete simple tic-tac-toe game (the game needs more logic added to be finished, but the concept is there).

Below is an excerpt from the second tutorial.

Creating Graphics

Tic Tac Toe Circle ImageI created two images in Inkscape to use for this board. Each is a 50×50 png file - with a gray background and a black border. The actual token (the circle or cross) is red and laid on top of the gray background.

Tic Tac Toe Cross ImageI’m no great artist, but these should work for a functional demo. We can worry about making nice circle and cross tokens later. I think getting the game working is more important than making it pretty from the get-go.

Turning Our .js Script into a Class

In making this a functional board, I also converted the script into an actual class. The script may end up being somewhat large and unwieldy - and an object oriented approach may help us keep it tidy and clean. Or it may add a lot of overhead… but I like objects.

In our HTML file, we’ll create the object like this.

<script type="text/javascript">
var tictactoe = new game();
</script>

In the attached .js file, we actually define the game object. Here’s part of the object definition.

function game() {
  //  Array to hold the bgImgs
  this.bgImgs = new Array();
    this.bgImgs[0] = 'tttcircle.png';
    this.bgImgs[1] = 'tttcross.png';

 
  //  Player information			
  this.currentPlayer = 0;
  this.players = new Array();
    this.players[0] = "Player One";
    this.players[1] = "Player Two";

 
   return true;

This class constructor does some of the initialization for us.

First, it creates an array with background images. At the moment we’re only using two images. However, this technique would be useful if you had a more complex map - with 10-15 images you could lay over a div.

Second, we create some player information variables. The ‘currentPlayer’ property is going to track whether the ‘cross’ or ‘circle’ player is currently taking a turn. The ‘players’ array will just hold the names of those players for now.

The Background Image Changing Function

One of the major methods of this class will be changeBackground(). Just like in the previous example, this method will change the background style of a given div tag. This way we can change it from an open square to a circle or cross token.

  this.changeBackground = function (boxId) {
    var box = document.getElementById('box-' + boxId);
    box.style.background = 'transparent url(' + 
      this.bgImgs[this.currentPlayer] + ') top left no-repeat';

 
    box.removeAttribute('onClick');
 
    this.changePlayer();
  }

This should be pretty straightforward. We’re storing the ‘div’ element in the ‘box’ variable. We’re then setting the ‘background’ style as we would in a css style. Remember that we stored the background images in an array (this.bgImgs) and this.currentPlayer corresponds to a key in the this.bgImgs array (either 0 or 1).

The ‘box.removeAttribute()’ method is removing ‘onClick’ from that div. We can’t use a square a second time, so we might as well eliminate the onClick handler altogether.

Finally, this.changePlayer() is calling a new method. This is going to help us switch from Player One’s turn to Player Two’s turn.

One Turn to Another - this.changePlayer()

The last method we need to declare for this class at the moment is changePlayer.

This will toggle the active player - which in turn affects whether a circle or cross is placed on the board. For some added effect, we’ll also create a new html element to display a message that says who’s turn it is.

  this.changePlayer = function () {
    //  Switch the active player

    if (this.currentPlayer == 0) {
      this.currentPlayer = 1;
    } else {

      this.currentPlayer = 0;
    }
 
    //  Get a reference to our 'message' element and create the message
    var box = document.getElementById('message');
    var msg = "It is " + this.players[this.currentPlayer] + "'s turn.";
    var txt = document.createTextNode(msg);

 
    //  Erase any existing text
    while (box.hasChildNodes()) {
      box.removeChild(box.lastChild);
    }

 
    //  Add the text node (our message) to our element
    box.appendChild(txt);
  }

Again, this is pretty straightforward. The DOM functions are amazingly simple - once you see how they work.

‘box’ is a reference to our element (id = message). The msg variable is a temp variable I created to hold the string. The ‘createTextNode’ method creates a new block of text (with our msg) that we can then insert into an HTML element.

The while() loop is simply there to erase any old text. As long as our ‘box’ element has any child nodes inside of it (text or other HTML tags), the loop will execute and delete one of those child nodes each time. This way we have a clean slate on which to write down who’s turn it is.

Read the full second tutorial here.

Although the tutorial only shows a simplistic tic-tac-toe game you could use the concepts as a starting point to build your own web games. As always if you have made any cool games we would love to hear about them either in the comments or you can write a blog post about it using your free Ajaxonomy account.

Online Presentation Applications

Tagged:  

Over at Mashable they have posted a run down of 13 Online Presentation Applications. So get your favorite Business Analyst and show them how they can use the web for their next presentation (although it may take some work as they may be lost outside of the Microsoft PowerPoint world).

Below are the first five listed in the post.

http://us.ajax13.com/en/ajaxpresents/index.jsp

AjaxPresents - Presentation software portion of the Ajax13 office suite. Works with Firefox 1.5 and higher, free, and can import & export from PowerPoint and OpenOffice.

http://www.brinkpad.com

BrinkPad.com - A Java based presentation tool that allows you to create online and then download to your system to save it.

http://www.empressr.com/

Empressr.com - A tool for creating media rich presentations online with Flash and Ajax. You can share them with the public and allow them to be voted on.

Presentation Editor

Google Documents - Google made their intentions to take on Microsoft Office fairly obvious when they finally added an online presentation tool to take on PowerPoint.

http://preezo.com/

Preezo.com - Uses an Ajax-based interface for quick editing. Allows collaboration and easy sharing with clients and colleagues.

You can see the full list by clicking here.

Some of these tools look very good although I don't think that they will replace PowerPoint quite yet.

jQuery UI 1.5 Beta Released

Tagged:  

The jQuery team has announced the first beta release of their new upcoming UI library - jQuery UI 1.5. This is a complete overhaul of the library, so you can expect to see some big changes. Here are some mentioned in the release notes:

  • A Unified API

    The API has been updated for all UI components. It should now be very easy to use other plugins if you’re familiar with one of them. There is only one exposed method for every plugin - All other methods are called by passing in a String into the exposed method, the initialization of the plugin works by giving on a options hash as first argument. You can now change and get all options at a later point if you want to by using the new data method. Basic example for draggables:


    $(..).draggable({...}); //Initialize the draggable
    $(..).draggable("disable"); //Disable the draggable
    $(..).data("cursor.draggable", "move") //Change the cursor during drag to 'move'

  • Updated Docs
  • Drag & Drop

    Draggables and Droppables have been completely refactored. It might now be the most non-destructive drag & drop implementation ever: The css position’s value will not be changed except for ’static’: That means that elements, that were static or relative, will not be forced into absolute positioning, which often destroyed layouts, especially when dealing with floats.

  • Sliders

    The slider wasn’t refactored, but has been completely rewritten from scratch. While it’s still almost backwards compatible, it’s now very stable and simpler than ever: The moveTo method now only takes two arguments: The value you want to move the handle to and optionally the index of the handle you want to move. Want to retrieve a specific handle value? No problem, just call $(..).slider(”value”, index) .

    Even better, the slider now is completely keyboard accessible: You can now tab and focus each slider handle separately and move its position using the left/right keys. We also improved support for using the mouse: Clicking into a empty area now moves the focused handle to the clicked position, regardless on how many handles you have.

  • Sortables

    Rewritten as well, the sortables now support a wide range of features you already know from draggables: cursor, zIndex, revert, opacity, axis, handles, containment and scrolling. Additional to that, you can now serialize your items to a url hash, and you now have the often requested ability to connect multiple sortables, so you can drag a node from one sortable to another.

  • and more...

Check out the docs and cool demos below:

Mouse Interactions:

Reusable Widgets:

Visit the jQuery Blog to read about this release and download the beta.

Syndicate content