David Hurth's blog

New Google API Features

Tagged:  

The Google Chart API is a great API for building applications that represent data in a simple chart. Well, there are a few new features to the API.

Below is a rundown of the new features.

  1. You can now create Sparklines
  2. You can now create Radar Charts
  3. Now you can create Map Charts
  4. They added scaling for text encoded data
  5. They added support for negative numbers on bar charts
  6. They added ability to draw data lines on bar charts

As with everything in the Google Chart API you simply pass values in the URL. To create a Sparkline you would pass in &cht=ls. If you want to create a Radar Chart you would pass in &cht=r or &cht=rs. In order to create a Map Chart you would pass in &cht=t.

You can get more information about the new features in the API here.

These new features make the API even more useful. I can see some good uses for these new features in future applications that I make.

Widgetbox - Easily Create and Distribute Your Widgets

Tagged:  

You may remember that not that long ago we released the del.icio.us Spy Widget. Well, after the initial release I started looking into Widgetbox to extend the capabilities of the widget.

Widgetbox allows you to create or extend widgets that are Flash based, HTML/JavaScript, A Web Page, Blog/Feed or a Google Gadget. Creating a widget is easy, you just click on Make a Widget, then choose the type of content that you want made into a widget and you finally fill out the information in the forms to create your widget. Your widget can also be made to add to social networks like Facebook and MySpace (only Flash widgets can be put on MySpace) using a very simple wizard like process to setup the widget for these networks.

Widgetbox allows you to track subscriptions and hits of your widget. This tracking can help you easily see if your widget is gaining traction or if nobody cares about it. The service also has a directory that has a social feel (with it's user ratings and helping you find related widgets) and helps your widget gain in popularity due to it's viral features.

Below you can see the del.icio.us Spy Widget after using Widgetbox (If you are viewing this in a feed reader you will probably need to click on the del.icio.us Spy link to view the widget in a browser).

Widgetbox is a great tool for any developer wanting to make cool widgets that can easily be shared all over the web. Perhaps I should make a widget of the Ajaxonomy blog next. If you have used Widgetbox, I would love to hear about your experience (as usual, you can leave it in the comments or if you would like you can write a post on this blog using your free Ajaxonomy account).

Keeping Your Data Guarded - Password Strength Check

Tagged:  

In keeping your data guarded for your application the most key area is your password. Even many developers use very week passwords to protect things like file level access, database access and admin access to web applications. The easiest way to hack into a system is to crack an unsecured password and then a hacker (or to be correct a cracker) can cripple a system or worst steal data.

Well, I have run across a good open source web application called Password Strength Checker that can be used to make a much stronger password. The applications is very easy to use, you simply type in your password and then the form tells exactly how strong your password is. The form also gives you information about what makes your password strong or weak, such as that it is too short or lacks capital letters.

You can go to the applications here. And since it is open source you can download it and run it on your server (it is released under the GPL) you can download the application here. So, if you use this or a similar application I would love to hear about it (you can leave it in the comments or write a blog about it on this blog, using your free Ajaxonomy account).

The Best Cheat Sheets for Web Designers and Developers (From CSS, Ajax, Perl, Vbscript…)

Tagged:  

If you are a web developer then you probably love cheat sheets for various aspects of development. Well, over at specky boy they have posted quite a list of cheat sheets.

Below are a few of the cheat sheets in the post.

CSS (http://www.ilovejackdaniels.com)
CSS
Prototype 1.5.0 (http://snook.ca/)
Prototype 1.5.0
Script.aculo.us (http://ajaxian.com/)
Script.aculo.us

You can read the full post here.

This is a good list of cheat sheets for developers from around the web. If you find any cheat sheet that you think is particularly interesting I would love to hear about it (you can leave it in the comments).

80+ AJAX-Solutions For Professional Coding

Tagged:  

Smashing Magazine has put together quite a list of Ajax solutions. The list contains over 80 Ajax solutions and includes everything from Ajax star ratings to Slideshows.

Below is just a small excerpt from the post.

Enhanced AJAX Solutions

39. AJAX Instant Completion: Rico Framework

AJAX Scripts - Rico

40. Novemberborn: Event Cache

AJAX Scripts - Novemberborn: Event Cache

41. Altering CSS Class Attributes with JavaScript

AJAX Scripts - Altering CSS Class Attributes with JavaScript

42. Select Some Checkboxes JavaScript Function

AJAX Scripts - Select Some Checkboxes JavaScript Function

43. AJAX Emprise Charts: 100% Pure JavaScript Charts

AJAX Scripts - Emprise JavaScript Charts :: 100% Pure JavaScript Charts

44. amCharts: customizable flash Pie & Donut chart

AJAX Scripts - amCharts: customizable flash Pie & Donut chart

45. PJ Hyett : The Lightbox Effect without Lightbox

AJAX Scripts - PJ Hyett : The Lightbox Effect without Lightbox

You can read the full post here.

This is quite a large list so take some time and go through the entire list. While some of the items will be very familiar to you there where quite a few scripts that I hadn't seen before. It is worth a look.

ProtoFlow

Have you been looking for a cool way to display information on your web site or application. Well, one interesting script that can display information in a cool effect is ProtoFlow.

ProtoFlow is very easy to use and below is how you use it as described on the ProtoFlow web site.

How to use it?

Its fairly easy to use this lib. Just follow the steps:

  1. Download ProtoFlow and extract it.
  2. Add Prototype and Scriptaculous and Reflection.js to your page
  3. Add ProtoFlow.js and ProtoFlow.css to your page
  4. Add Markup and onLoad event (as described below)

Implementation:

Your HTML Markup would look like:


<div id="myCoverFlow">
	<img src="image1.jpg" alt="Caption for this image 1"/>
	<img src="image2.jpg" alt="Caption for this image 2"/>

	<img src="image3.jpg" alt="Caption for this image 3"/>
	.....
	<img src="imageN.jpg" alt="Caption for this image N"/>

</div>
			

Than you can initialize ProtoFlow like:

Event.observe(window, 'load', function(evnt)
{
	var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
		startIndex: 2,	//which image do you want the flow
						//to focus on by default
		slider: true,	//show or hide slider?
		captions: true,	//show or hide captions, by default we hide it. 
				//So YOU MUST turn it on here
		useReflection: false	//Add reflection to your images. Please 
				//note that this will slow down rendering.
	});
});
			

While there are other scripts that create a similar effect, ProtoFlow is the only one that I know of using Prototype and Scriptaculous. This makes it perfect if you are already using these libraries (just remember to compress the script files as appropriate as the libraries are a little large).

You can get more information about ProtoFlow and see a demo of it here.

If you find any interesting uses for the script I'd love to hear about it (you can leave a comment or you can write a blog post using your free Ajaxonomy account). So, start making that cool website or application and use this or some other interesting effect to make it stand out.

Google I/O

Tagged:  

Mark your calendars for May 28th and 29th for the Google I/O event held at San Francisco's Moscone. The event will focus on new technologies that Google offers to help developers make new killer apps. The event promises to talk about technologies like Google Gears, Open Social and Google Android.

According to the Google I/O site the below speakers scheduled to appear.

Learn first hand from Google engineers like David Glazer, Alex Martelli, Steve Souders, Dion Almaer, Mark Lucovsky, Guido van Rossum, Jeff Dean, Chris DiBona, Josh Bloch, and many more leaders in the field of development.

Those are some pretty heavy hitters. If you are able to attend it promises to be worth your time (especially if your work is paying for the trip).

Below are just a sample of some of the sessions that you could attend (this is the social portion of the event).

Social

URLs Are People Too - Using the Social Graph API to Build a Social
Web

Kevin Marks, Brad Fitzpatrick

Type: 101

Using email addresses to identify people has a problem - email addresses
can be used to send, not receive. With the rise of blogs and social networks,
millions of people are using URLs to refer to themselves and others. The
Social Graph API indexes these sites and their connections, enabling this
web-wide distributed social network to be used to make your sites better.
Learn how XFN and FOAF express connections, how we index them, and how OpenID
combines with The Social Graph API to help connect people on the web to your
applications, and save your users from re-entering their friends over and
over again.

OpenSocial: A Standard for the Social Web

Patrick Chanezon, Kevin Marks, and Chris Schalk

Type: 101

OpenSocial is an open specification defining a common API that works on
many different social websites, including MySpace, Plaxo, Hi5, Ning, orkut,
Salesforce.com and LinkedIn, among others. This allows developers to learn
one API, then write a social application for any of those sites: Learn once,
write anywhere.

In addition, in order to make it easier for developers of social sites to
implement the API and make their site an OpenSocial container, the Apache
project Shindig provides reference implementations for OpenSocial containers
in several languages (Java, PHP). Shindig will define a language specific
Service Provider Interface (SPI) that a social site can implement to connect
Shindig to People, Persistence and Activities backend services for the social
site. Shindig will then expose these services as OpenSocial JavaScript and
REST APIs.

In this session we will explain what OpenSocial is, show examples of
OpenSocial containers and applications, demonstrate how to create an
OpenSocial application, and explain how to leverage Apache Shindig in order
to implement an OpenSocial container.

OpenSocial Specification: What's Next for OpenSocial

David Glazer

Type: 201

OpenSocial is an open specification established by a group of social sites
and application developers. While OpenSocial version 0.7 is being rolled out
on several large social networking sites, the specification is evolving to
include more features useful to social application developers.

This session will cover the most interesting features that are discussed
in the specification working group to be included in the next versions of
OpenSocial, like an OpenSocial template language, and the OpenSocial RESTful
API.

Apache Shindig: Make Your Social Site an OpenSocial Container

John Panzer, Dan Peterson

Type: 101

Shindig is a new project in the Apache Software Foundation incubator and
is an open source implementation of the OpenSocial specification and gadgets
specification in multiple programming languages. The goal of Shindig is to
make it easy for social sites to extend their functionality using the
OpenSocial API, which makes it easier for developers to write those
extensions.

This session will explain what Shindig is, the server's architecture, the
JavaScript and Java Service Provider Interfaces that developers can leverage
to integrate Shindig with their social site, and the state of the Shindig
ports to other languages (PHP, .NET, Ruby). We will do a live demonstration
of how to integrate Shindig with an existing social site.

OpenSocial across Containers

Arne Roomann-Kurrik, Lane LiaBraaten

Type: 201

OpenSocial provides a common set of APIs that developers can learn in
order to create applications that run on multiple social sites. However,
since social sites vary widely in functionality, OpenSocial provides ways to
extend the core APIs so containers can implement site-specific
functionality.

This session will cover best practices for how to extend the OpenSocial
API for your container, as well as how to write applications that will run on
multiple OpenSocial sites.

Best Practices for Spreading Your App without Ruining the User Experience

Vivian Li, Chris Schalk

Type: 201

The OpenSocial API provides features that application developers can use
to help their users share the application with their friends. We'll review
other social application architectures that allow apps to spread virally.
We'll then discuss the sharing features in OpenSocial in detail including a
review of requestSentMessage and requestShareApp. We'll also go over
programmatic best practices for such things as determining if an app is
already installed, and we'll look at example apps that have successfully used
these features.

Building an OpenSocial Application, Focus on Client Side APIs

Arne Roomann-Kurrik, Dan Holevoet

Type: Code Lab

Become a social hax0r! In this session you'll build your first social
app, from setting up a place to host your application to accessing the
OpenSocial APIs. By the end of the session you 'll have your own gift-giving
application that accesses profile information, stores data using the
persistence API, and publishes activities that your friends can see. This is
a hands-on session so don't forget your laptop and power adaptor!

Building an OpenSocial Application in the Cloud

Patrick Chanezon, Lane LiaBraaten, Jason Cooper

Type: Code Lab

Simple OpenSocial applications can be built without any server side logic,
leveraging the OpenSocial persistence API. For more complex applications
requiring server side logic, many developers choose to use their own server.
As their applications spread virally and become more successful, these
developers end up spending most of their time making their applications scale
instead of adding new features.

Cloud computing services can provide a solution to these problems. This
session will explain how to build an OpenSocial application with server side
business logic, on top of a cloud computing platform, using makeRequest to
make digitally signed calls to your server side logic.

Make Your Social Site an OpenSocial Container Using Shindig

Patrick Chanezon, Kevin Marks, Chris Schalk

Type: Code Lab

Shindig is a new incubator project in the Apache Software Foundation and
is an open source implementation of the OpenSocial specification and gadgets
specification in multiple computer languages. The goal of Shindig is to make
it easy for social sites to make the OpenSocial API available for application
developers on their site.

In this code lab, attendees will implement part of the OpenSocial API in an
existing open source Java social site engine.

Fireside Chat: OpenSocial

OpenSocial developers

Type: Fireside Chat

Fireside chats are a chance to talk to the engineering team building
products. Come hear from OpenSocial container engineers across the web and
get your questions answered first hand.

You can get a full list of available sessions here.

Pricing for the event is:

  • Early Bird (until 3/28) $300
  • Attendee Registration (starting 3/29) $400
  • Students $50

You can sign-up for the event here.

Quick Ajax Loading Icons

If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

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).

Syndicate content