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 ]

How to Master the Mobile Market

Mobile Developer’s Guide to the Galaxy

The Ultimate Strategy & Development Guide to Mobile Markets

This beautiful and comprehensive guide created by the amazing people at “Enough Software” is a spectacular piece of work!  You will be astonished by how incredibly fast you can establish your presence in the mobile market with the simple steps explained in this PDF guide for all things mobile.

Mobile Developer's Guide to the Galaxy

Mastering the Mobile Market

Here are just a few things you will quickly learn in the “Mobile Developer’s Guide to the Galaxy”.

Mobile Developers Guide

  • Programming Android Apps
  • Programming bada Apps
  • Programming Native BlackBerry Apps
  • Programming Flash Apps
  • Programming iOS Apps
  • Programming J2ME / Java ME Apps
  • Programming MeeGo Apps
  • Programming Qt Apps

  • Programming Symbian Apps
  • Programming webOS Apps
  • Programming Windows Phone Apps
  • Programming Mobile Widgets
  • Programming With Cross-Platform Tools
  • Creating Mobile Websites
  • Implementing Rich Media
  • Implementing Location-Based Services
  • Implementing Near Field Communication (NFC)
  • Testing Your Application
  • Monetization
  • Appstores

Thanks to the creative crew at Enough Software for creating the most beautiful and comprehensive guide in the galaxy for mobile development! Thanks to @rickmans, @roonaan, and @peterpeerdeman for sharing this on Twitter.

Mobile Market Strategy

A mobile market strategy should be a foundational part of Social Business Models.  I hope this encourages others to share their ideas about Social Business Strategy and their thoughts about Mobile Markets.

 

 

 

 

 

E 2.0: Can the Enterprise Learn From Twitter’s Success Secrets?

3 Simple Secrets to Twitter’s Success

  • Understanding Culture
  • Harnessing Technology
  • Empowering Others

Trends about our culture today show us people are busy and tolerance for complicated things seems to be getting lower with each passing day.  Twitter tapped this culture trend of time commitment by keeping post limited to 140 characters and with it’s User Friendly / People Focused Design.  The Mobile Market is exploding, more people own mobile devices than computers.  Twitter tapped this trend by integrating a mobile strategy early in their plan.  People like things to fit their needs, this is why Application Programming Interfaces (APIs) should be a critical part of any technology strategy.  Twitter empowers people through it’s API with the ability to share custom information across multiple environments.

Happy Fav Five Friday!

Fav Five Places

I actually have a few more than five favorite places.  I hope you don’t mind.

The Famous Twitter Sketch

You can see the birth of the idea for Twitter in this sketch and you can read Jack Dorsey’s thoughts about this sketch here.  Notice the simplicity of the design and how the idea of sharing across multiple channels was an early thought.  The discovery (“find-em”) part toward the bottom is a very smart piece to include early in the design too.  Sharing ideas (Collaboration) is the main point of Enterprise 2.0.  This sketch reminds us of how a simple idea, shared with others can grow into something beyond your imagination.

Picture 22

Twitter Talk at TED

Evan Williams of Twitter talks about integrating his ideas about SMS with Jack Dorsey’s ideas about Twitter.  Evan goes on to talk about the Fundamentals of Twitter.  He quickly describes how people discover uses of Twitter for Business and in Government.

A great quote here is, “One of the many ways that users shaped the evolution of Twitter”.  I can’t wait to here this in the Enterprise, “One of the many ways that USERS shaped the evolution of Enterprise 2.0″.

Twitter’s design and API make this tool so simple to use, that a common house plant can communicate to the world.   This reminds us of the power of simplicity.  Technology should lower barriers, not create new ones.

“Going far beyond the original idea” is another great quote.  I believe Enterprise 2.0 is designed to support doing this very thing.

There are many things taught about innovation in this video

Twitter CEO Evan Williams speaks to users in Tokyo

“What we learned time and time again from listening…”  is an important quote in this video.  You can also see the chart of all the tweets over the course of the World Cup.  This got me thinking about what would happen to your business if an idea had this much collaboration through Enterprise 2.0 tools.

Biz Stone and Evan Williams on Twitter

In this more recent video we hear Biz and Evan talk about how relationships are important.  Listening to customers can help avoid PR disasters and improve brand loyalty.  A little communication can reverse a customers decision about going to your competitor.  They also share some important thoughts on privacy.

How Twitter Changed My Life

This is an impressive presentation about Twitter and how to harness it’s value.

A Collection of Twitter Case Studies

Twitter provides a nice collection of case studies.  These case studies include reports from big businesses, non-profits, and government.

Picture 23

The Power of the API

In the first video Evan mentions there were over 2,000 applications using Twitter’s API.  Their API enables people to share filtered customized data across multiple environments.  The ability to share information across multiple environments increases the opportunities for collaboration.  What if  your Enterprise 2.0 Solution had an API to support sharing data when you need it, where you need it?

Twitter API Mashups and Apps on Programmable Web

You can discover and learn from a huge collection of APIs and developers at Progammable Web.

Picture 24

Twitter API Mashups and Apps on Yahoo Pipes

You can discover some new ways of using Twitter at Yahoo Pipes.

Picture 25

Fav Five Faces

Who is on your “Fantasy Innovation Team” this week?

Here are just a few new friends that have connected me to new people and new ideas this week.  You might be familiar with “Fantasy Football Teams” and such, well this is my “Fantasy Innovation Team” this week.  I recommend following these smart, creative people on Twitter.

twitter-db Communication strategist. Digital Something. Connector. Entrepreneur. Anime & SciFi lover. http://twitter.com/db
twitter-bhc3 VP of Product at Spigit, the SaaS enterprise innovation management platform. And a Dad who misses running marathons. http://twitter.com/bhc3
twitter-dzhu IT consultant, managing software development/ integration projects for a living; .Net, CMS, intranet, collaborative workplace, knowledge management, e-learning http://twitter.com/dzhu
twitter-eric_andersen Technology consultant/architect at IBM in Cambridge MA, enterprise search, social computing; piano, a cappella, cyclist, origami, iPhone; my tweets are my own! http://twitter.com/eric_andersen
twitter-rickmans social media strategist, technological optimist, blogger, consultant, father, spreker, innovatie, php, wordpress | I collect and tweet interesting links http://twitter.com/rickmans

5 Twitter Success Secrets for Enterprise 2.0

  • Listen (people, users, customers, partners, metrics)
  • Respond (people, users, customers, partners, metrics)
  • Empower Others
  • APIs Rock
  • Practice “People Centered” Design