How to Create an XML AJAX App with Open Standards

Data Integration & User Interaction with Open Standards

Open Standards and the W3C

On November 12, 1990 Sir Tim Berners-Lee @timberners_lee submitted a paper that would change the world, this paper was the WorldWideWeb: Proposal for a HyperText Project.  Sir Tim Berners-Lee leads the World Wide Web Consortium (W3C).  The W3C is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential.  The W3C is having it’s very first Developer’s Conference (Free Streaming Video Available)  #W3Conf @w3cConf on November 15 – 16, 2011, “W3Conf Developer Conference“.

Data and Services Integration

Integration of heterogeneous data and services has always been a concern for creators and managers of services. With the emergence of the Web, the need for reusing data and services became even stronger, as the number of available services raised.

Cloud-based services are also created using different paradigms and present the same challenges as the ones found in Enterprise Services, or on the Open Web, and the opportunity to create mashups of services using different models.

There is currently extensive deployment experience with Web Services; the Semantic Web is more mature; and the XML Stack has become ubiquitous. The increasing use of JSON-based services and Cloud-based computing combined with experience and maturity of the XML-based services and of the Semantic Web technologies suggests that now is a good time to find ways to bridge and combine these various technologies to make a coherent platform for future business and technical work.  Additional information, reports, and presentations are available from this W3C Workshop.

A paper submitted by IBM to the W3C Data & Services Workshop describes the challenges of multiple data formats and possible solutions for loosely structured data, “Experiences with JSON and XML Transformations“.  This paper explains common problems developers and web service providers face when trying to develop a common interface.  The presenters identified many real-world key problems that left me wondering about a different solution that I hope others elaborate on here.

Web 2.0 App Model with XML AJAX API

Modern Web 2.0 Apps use Asynchronous JavaScript and XML (AJAX) to create dynamic interactive displays with data.  Many AJAX apps use JSON instead of XML.

What if they used Standard XML leveraging XPATH with cross-platform and language-independent DOM?  This approach could let us use object-oriented programming to work with object-oriented data.

The Data

The problem with loosely structured data is identifying target areas. This simple example of a book collection does not have unique identifiers in the data elements. Unique identifiers in the data elements would allow us to use standard methods to work with targeted areas.



Top Shelf Book Store

  Everyday Italian
  Giada De Laurentiis
  2005
  30.00



  Harry Potter
  J K. Rowling
  2005
  29.99



  XQuery Kick Start
  James McGovern
  Per Bothner
  Kurt Cagle
  James Linn
  Vaidyanathan Nagarajan
  2003
  49.99



  Learning XML
  Erik T. Ray
  2003
  39.95


 

The Data with NoDeCode Identifiers

This simple example of a book collection has unique identifiers in the data elements. The “XQuery Kick Start” book element now has a unique id, it’s author elements all have unique ids, along with every element in our XML data. Unique identifiers in the data elements allow us to use standard methods to work with targeted areas. No DeCode between JSON and XML is necessary with NoDeCode identifiers.



Top Shelf Book Store

  Everyday Italian
  Giada De Laurentiis
  2005
  30.00



  Harry Potter
  J K. Rowling
  2005
  29.99



  XQuery Kick Start
  James McGovern
  Per Bothner
  Kurt Cagle
  James Linn
  Vaidyanathan Nagarajan
  2003
  49.99



  Learning XML
  Erik T. Ray
  2003
  39.95

The NoDeCode identifiers are added as attributes to the XML DOM object with a few simple lines of code.

//Add nodecode for indexing elements
xmlUtil.prototype.addNodeCode = function(xmlNode){
	for (var i = 0; i < xmlNode.childNodes.length; i++) {//each child node
		if (xmlNode.childNodes[i].nodeType == 1) {//no white spaces
			//add nodecode attribute
			xmlNode.childNodes[i].setAttribute("id", this.getNodeCode());
			//http://www.w3.org/TR/xml-id/
			//setIdAttribute is not supported in common web browsers
			//xmlNode.childNodes[i].setIdAttribute("id", true);
		}
		//recursive to child of children
		this.addNodeCode(xmlNode.childNodes[i]);
	}
}

Simple AJAX Interfaces for Targeted XML DOM Objects

The NoDeCode supports connecting standard user interfaces to targeted data areas in the XML DOM Object supported by standard XPATH methods.  It is important to note that no round trips to the server are taking place at this time.  All the user interactions are taking place in the XML Object on the client.  The data can be manipulated and modified on the client, then the data object can be transformed into a string and posted to the server using standard HTTP protocol.

A screenshot of a simple delete books user interface

NoDeCode has been tested in the following web browsers:

  • Firefox 7
  • Google Chrome 15
  • Internet Explorer 8

NoDeCode Supports:

  • Standard HTTP protocol to get XML string
  • Method to convert XML string to XML object
  • Method to convert XML object to XML string
  • Methods/Properties to target loosely structured XML
  • Methods to connect User Interfaces to XML objects

The NoDeCode AJAX XML XPATH DOM Model demonstrates how to extend existing web browser objects and methods for custom needs.  It also shows how to use Object-Oriented JavaScript programming to create custom objects that can easily be extended to include new methods and properties.  NoDeCode contains many resources in it’s source code and was written in a single HTML page to support fast modifications and quick testing.  The source code along with a sample XML file can be downloaded here, NoDeCode.zip

Please feel free to share your thoughts and comments here.

How to Master Data Visualization

Strategy & Tools for Data Visualization

Data Visualization

Data visualization is the study of the visual representation of data, meaning “information which has been abstracted in some schematic form, including attributes or variables for the units of information”.  According to Friedman (2008) the “main goal of data visualization is to communicate information clearly and effectively through graphical means. It doesn’t mean that data visualization needs to look boring to be functional or extremely sophisticated to look beautiful.

Data Visualization Strategy

Edward Tufte @EdwardTufte delivered a great presentation about data visualization strategy for the star studded Tech@State event audience.   Tech@State ( @techATstate ) connects tech innovators and those interested in diplomacy and development to enable 21st century statecraft by improving education, health and welfare of the world’s population.   The Edward Tufte: Beautiful Evidence (Highlights) video is available here. Edward Tufte’s complete data visualization strategy presentation video is available here, his presentation begins at 14:24.

If your display isn’t worth 1000 words, to hell with it – @EdwardTufte

Data Visualization Tools & Services

Google Data Visualization Services

Google Data Visualization Service provides a variety of charts that are optimized to address your data visualization needs. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required.

Sencha ExtJS Data Visualization Tools

It has always been hard to draw things in web applications. HTML is really not cut out for creating charts and other richly interactive imagery, but Sencha ExtJS 4 supports data visualizations HTML applications. Typically this need has been met with Adobe Flash, but this gave Sencha two problems: most people like writing code in JavaScript, and Flash isn’t available on all devices. The ExtJS 4 solution to these problems is a pure-JavaScript drawing library that can create incredibly rich charting and graphics. It works everywhere – from IE6 to iOS – and will also be available as an add-on for Sencha Touch (mobile).

Highcharts Data Visualization Tools

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.  You can also you create stock or general timeline charts in pure JavaScript, including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning with Highstock.

Current Data Visualization Twitter Game Board

Diversity fuels innovation. Sports fanatics have their fantasy football teams. This is my fantasy innovation team. This Data Visualization twitter game board represents people focused on sharing ideas about how to make data make sense.

[twitterusers @edwardtufte @NoelDickover @JohnFMoore @SuzKPH @techATstate @StateDept @lovisatalk @visualisingdata @noahi ]

5 AJAX Libraries/Frameworks You Should Know for Web 2.0

AJAX Libraries/Frameworks for Awesome Web 2.0

Happy Fav Five Friday!

What is AJAX?

AJAX is shorthand for (Asynchronous JavaScript + XML).  This is a blend of technologies used to improve the user experience and can reduce web server load while increasing your network speed.  This is accomplished by reducing client trips to the server and only requesting the required information instead of complete page loads.

Why use AJAX Libraries/Frameworks?

Developing Web 2.0 applications can be difficult because content can be received on multiple devices in many environments.  These devices include web browsers, their versions, and the platform in which they are installed.  We are a mobile culture, so we also need to understand display and behavior on mobile devices.  The use of AJAX libraries and frameworks serves as an abstraction layer supporting rapid application development by reducing the need to know of the detailed behaviors in an exhastive list of devices across a multitude of platforms.

5 Great Web 2.0 AJAX Libraries/Frameworks

The Yahoo User Interface Library

When I think about “Enterprise Level” AJAX, the YUI library is the first thing on my mind.  Yahoo, the grandfather of social media and enterprise level code has a proven track record that spans several years.  The Yahoo User Interface Library also has an impressive set of documentation.

The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it’s an industrial-strength JavaScript library for professionals who love JavaScript.

YUI Library

YUI Library

http://developer.yahoo.com/yui/

The jQuery JavaScript Library

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

The jQuery JavaScript Library

The jQuery JavaScript Library

http://jquery.com/

Dojo the Open Source JavaScript DHTML Toolkit

Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a “unified” toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

Dojo the Open Source JavaScript DHTML Toolkit

Dojo the Open Source JavaScript DHTML Toolkit

http://dojotoolkit.org

Prototype JavaScript Framework

Prototype features a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Prototype JavaScript Framework

Prototype JavaScript Framework

http://www.prototypejs.org/

Script.aculo.us Web 2.0 JavaScript

script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more. Be sure to have a look at the demos!

Script.aculo.us Web 2.0 JavaScript

Script.aculo.us Web 2.0 JavaScript

http://script.aculo.us/

Twitter, Social Media, & Hashtags For Events, Meetings, Presentations, & Bloggers

How to use Twitter and other Social Media Tools to engage your audience

The World Wide Web is connecting people and things faster than ever.  The use Twitter, Blogs, Social Media, Mobile Media has become part of main stream culture.  You can leverage the power of your audience and new media to build exponential value into your existing efforts.

The Three Points of View for an Event

  • Audience
  • Speakers
  • Event Coordinators

Three Thoughts About Events

  • How Event Coordinators Can Make Their Job Easier
  • How Speakers/Presenters Can Make Their Job Easier
  • How The Audience Adds Value

Events 2.0

Events are much more interactive now.  The trend for events is similar to the trend we see in how people use the Internet.  Web 1.0 (Mostly one-way communication) to Web 2.0 (Very interactive with at least two-way communication).  People are working together now, more than ever.  The current economic conditions and busy lifestyles creates a condition that leads us to doing more with less.  People are smart and will spend their time and money where they see the most value.  Adding more value is key to success.

Social Media Tools

Twitter: “Just-In-Time” Communications

Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick rich text messages.  Twitter messages are available through mobile devices, web services, and third party applications. http://twitter.com Conversations can be connected by the use of a hash tag.

Twitter: Micro Blogging

ParaTweet: Engage audience and speakers

Paratweet Supports Speakers interacting with the audience through live or delayed Q&A and spreads user generated conference info.  This tool supports filtering.  http://www.paratweet.com/The view can be filtered by the event hash tag.

ParaTweet

Twitterfall: A tool to help display questions/conversations on stage

Twitterfall is a way of viewing the latest ‘tweets’ of upcoming trends and custom searches on the micro-blogging site Twitter. Updates fall from the top of the page in near-real-time. http://twitterfall.com/ Views can be filtered by hash tags.

picture-101

Free WordPress Blog: Blogging service for your online journal

You can get a blog started in less time than it takes you to read this sentence. All you need is an email address. You’ll get your own WordPress.com address (like you.wordpress.com), a selection  of great free and customizable designs for your blog (we call them themes), 3 gigabytes of file storage (that’s about 2,500 pictures!) and many other great features. You can blog as much as you want for free, your blog can be public to the world or private for just your friends, and premium features are completely optional.  http://wordpress.com/ Event related posts can include event hash tag in title & body so others can find the extra content by a simple search.

WordPress: Blogging Software - SaaS

Google YouTube to share your event and presentation videos

Google YouTube allows people to easily upload and share video clips on www.YouTube.com and across the Internet through websites, mobile devices, blogs, and email. http://www.youtube.com Event related videos can include event hash tag in title & description so others can find the extra content by a simple search.

Google: YouTube

Google YouTube example: Service Oriented Architecture-SOA

Slideshare automatically converts your presentation into sharable content for social media

Upload and share your PowerPoint presentations and Word documents on SlideShare. Share publicly or privately. Add audio to make a webinar.  http://www.slideshare.net Event related presentations can include event hash tag in title & description so others can find the extra content by a simple search.

Slideshare: sharing presentations

Slideshare example from #ajaxworld 09 NY

Yahoo Flickr to share photos/videos of people, ideas, and information from your events

Event related photos/videos can include event hash tag in collection title, tag, & description so others can find the extra content by a simple search. http://www.flickr.com

Flickr photo sharing site

Yahoo Flickr example from #ajaxworld 09 NY

How The Audience Adds Value

People are going to talk about the event and the speakers.  Most of these conversations will take place on the web in the form of social media.  The current trend of using Twitter and mobile devices during an event opens new opportunities.   Giving the audience resources to use in these social media channels will benefit everyone.  A simple resource could be a hash tag (a key word that identifies the event ex:#web30), more on this later.  Additional resources could include content that people could simply copy and paste into their blogs, twitter posts, and other created media that adds value.  Twitter offers the ReTweet function.  Google YouTube, Slideshare, & Yahoo Flickr offer copy/paste code for bloggers.  Most of these tools also have APIs that will support Mashups.

Resources on how to use Social Media for Events and Meetings

About Hash Tags

Hashtags are a community-driven convention for adding additional context and metadata to your tweets. They’re like tags on Flickr, only added in-line to your post. You create a hashtag simply by prefixing a word with a hash symbol: #hashtag. http://twitter.pbworks.com/Hashtags

Using Hash Tags For Events

Additional Social Media Resources Related to Twitter

  • Tweetboard is True Twitter Conversation for your website: http://tweetboard.com
  • TweetGrid gives bloggers and web site owners the ability to include event related widgets in their pages:  http://tweetgrid.com/
  • EventVue provides easy-to-use social networking tools that help your attendees get the most out of their networking experience at your event: http://www.eventvue.com/

Experiments with #hashtags

The hash tag for AJAXWORLD 2009 New York was #ajaxworld.  This event spanned more than one day and had several sessions across multiple tracks.  This event also happens annually.  I would think the annual hash tag would be something like #ajaxworld09.  This event also happens in multiple locations within one year.  I would think the hash tag would now look something like #ajaxworld09NY.

Here is what we have so far:

  • #ajaxworld: What
  • #ajaxworld09: What When
  • #ajaxworld09NY: What When Where

I would think that this type of structure easier and I would still have space within my 140 characters to add value.  That would be difficult if I had to include “#ajaxworld #2009 #NewYork #RIA #SOA #iPhoneDevSummit“.

Now we have “what”, “when”, and “where”, I am thinking about how to identify the tracks and sessions.  Track 04 was dedicated to iPhone Developer Summit.  Seems like the hash tag for that track at this event would be #ajaxworld09NY04.  This hash tag would allow people to monitor the iPhone Developer Summit Track of AJAX WORLD during 2009 in New York. The hash tag could also be used to tag related resources for current or future review.

What about the session part of the event matrix?

I would think that session 05 of the iPhone Track on the second day would look like #ajaxworld09NY040502.  This would identify the “iPhone Development in an Enterprise Environment” session that took place on the second day.

Ideal hash tag structure:

#{What}{When}{Where}{Topic}{Details}{Time} Most hash tag users seem to use a two digit number for the year, which makes me think about also using two digit numbers for Topic, Details, and Time.  This type of structure will support an event with upto 99 Topics through 99 sessions across 99 days.  Events that go beyond these limits would be broken up into multiple events.

Searching on #hashtags (This does not work on all services)

  • #ajaxworld: return everything about ajaxworld
  • #ajaxworld09: return everything about ajaxworld in 2009
  • #ajaxworld09NY: return everything about ajaxworld in 2009 New York
  • #ajaxworld09NY04: return everything about ajaxworld in 2009 New York related to the iPhone Dev Track
  • #ajaxworld09NY040502: return everything about ajaxworld in 2009 New York related to the iPhone Dev Track on iPhone/E 2.0

The current twitter tools seem to search for the hash tag followed by an empty space.  A search in some services for #ajaxworld does not always return results that contain #ajaxworld09NY.

#Hashtag Thoughts

Using a hash tag for an event is a common practice.  A standard that software developers could understand will help users take full advantage of the power that hash tags provide.  A simple hash tag that identifies the event and its parts should support the ability for user filtering.

What are your thoughts about hash tags and their structure?

What do you think about using twitter and other social media tools during events?

Thoughts about this post

I hope more people will think about putting their content into shareable content objects and leverage the work of others.