I used to work in the healthcare sector, and was always amazed to see the amount of paperwork that was required. Literally paper work that is. The industry was full of drawers overflowing with paper.
I imagine that the legal profession has its fair share of this too, but one company Nextpoint, is trying to change that.
I had the opportunity to sit down with some members of the Nextpoint Lab, including Jim Halberg the Ajaxian, to get a tour and discuss their latest products. Below are a few questions about the Ajax implementation, and we finish up with a video showcasing the work.
What are the Nextpoint tools?
Nextpoint’s flagship software product (marketing site, brochure), brings web 2.0 to the world of litigation software. We provide a powerful and easy to use way to manage the mountain of electronic information associated with any case.
What are some of the cool Ajax features?
The site has many small ajaxy features. Things like status bars for uploads or bulk operations, submitting small bits of data that shouldn’t require traditional round-trips, or updating a small piece of the page with some results. The stuff we think Ajaxian readers would be more interested in mainly revolves around our work with images.
A real pain source for many years in trial litigation has been stamping documents. When you decide you want to use a document in court it must be stamped (i.e. “Defense Exhibit 1″) and then communicated to the opposing team of lawyers. With most products today this means, locating the document in the management software; exporting it; printing it; physically stamping it; scanning it back in locally; uploading it back into the management software; and finally transmitting that electronic copy… it’s not hard to see how this could get annoying after the 100th time you’ve had to do it this week. Nextpoint provides the ability to electronically add a customized stamp - these can be resized or repositioned as desired and because we’re doing things electronically it’s much easier to do things like “stamp these thousand documents as ‘Defense Exhibits’”. Believe it or not - the server normally can get this task done a bit quicker than a guy with a rubber stamp in his hand. When the machine is done stamping - they’re already electronic copies - you’re ready to go.
Our flashiest use of Ajax is in our presentation tool, “Theater”. Many of our clients are using this tool to prepare document treatments before a trial, so that they’re ready to call up at a moments notice in a pre-formatted state. It also may be used live in a courtroom to direct listeners attention to important points in a way that visually impresses. We’ll show this off in the demo video we’re going to provide.
What tools are used to create theater?
Theater is mostly a custom javascript application, using prototype and scriptaculous to simplify the Ajax communication and animation. The images are served from a Merb-based server, which uses the GD libraries to do scaling, rotating, cropping, and setting transparency on the fly. The transparency is especially important, so that HTML elements can be used as highlights behind the main image content, keeping the user interface very responsive.
What were the biggest challenges getting all of this Ajax stuff to work?
Even when using Ajax to keep the traffic between client and server light, the latency and server processing time can become quite apparent. Theater employs a few neat tricks to keep the application feeling responsive. The annotations on documents (mentioned above) are done with HTML elements, preventing the wait of a roundtrip to the server to get a new image. When loading new documents, a pre-generated medium-resolution image is loaded first, and then replaced with an exact-fit image once it’s ready, which usually takes less than a second. Similarly, when creating callouts of an image section, the main document image is resized and cropped in a DIV in the browser as a low-resolution preview until the high-resolution version is available. The same thing happens when callouts get resized to make room on-screen for more callouts. Users feel more like they’re working with an application when they can continue to work with the preview versions instead of waiting after each click.
Allowing users to resize and reposition a “stamp” on top of an image presented some challenges but most of the trouble in that interface emerged from making sure that the final position the user set with css/js was properly translated into coordinates that could be used for the actual image manipulation on the backend. Allowing a variety of stamp formats, variable amounts of text, and translating between entirely different measurement systems for fonts on the server vs. the browsers complicated things, as well as the oft-demanded rounded corners to make the stamps look “more natural”.
Originally Theater was based around a tiled-image concept, like Google Maps. The images were pre-cropped into tiles at a few different “zoom” levels, and then further zoom levels were simulated by resizing in the browser. Unfortunately, storing 200+ images for each page of each document quickly became unmanageable. In addition, many browsers use a pretty low-quality algorithm for resizing images, leaving the in-between levels looking “chunky” or “distorted.” Using the GD library, and a streamlined application server that doesn’t load the entire Rails application, we were able to overcome this issue by generating images on the fly. That reduced the number of requests made to the server and creates pristine images of just the right size.
Demo
Below is a demo of the product. For a high quality version go here.
UPDATE: A new video showing the data stamping technique has been added. There is a normal version, and a high res one (must be a vimeo member for high res).
Heroku is a new YCombinator startup that joins the growing number of “use your browser to build your apps” type of applications.
You can create new Rails applications, and they are magically hosted up in the cloud. You can import your own Rails application, or you can use the inline editor and tools to built the application directly in the browser.
Heroku itself is a Rails application. I wonder if they now self hosting :)
Being able to quickly build an application and have it running live is great (using Amazon EC2), and this is just the beginning. They already tie into the usual tools like Rake, but there is room to go further and have nice DB utilities, cloning of functionality, and much more.
The editor itself could use a bunch of work too. I can never see where the cursor is, let alone have all of the Textmate / Aptana / IntelliJ goodness.
I have been having a bit of fun with cartoons recently. There are a few good Ajax sites that help you do cartoons such as Toonlets, Toondoo (From AdventNet, the Indian company behind Zoho and others), and Pixton.
I don’t know about you, but the idea of ordering food online has had promise, but often falls flat. When I lived in Boulder I would order from The Sink, but they would call you back and confirm the order, which kinda defeated the point.
If you don’t get a call back though, then you wonder… “hmm is someone on the other end of this web site thing? Are they REALLY going to bring my food!”
Dominos has done the right thing. They give you feedback, but not in the annoying way. After you put in an order online you can watch the entire process, so you feel like you know exactly what is happening without talking to a person until the doorbell rings:
Kiichi Takeuchi has created a cheeky little site called O’Reilly Maker that let’s you create silly O’Reilly book covers in a live preview style using jQuery and Django.
Surely, Tim will get these guys to rename (remember Web 2.0 conferences?).
I am sure you can come up with funnier ones that I can, so add them to the comments.
Jeremiah Grossman is known for his amazing Web security talks. Now though, along with Lex Arquette, he has come out with a Dojo powered project (using 1.0.2) Roxer which aims to be the easiest way to make a web page:
Targeted mostly for novices, where with Roxer anyone can build just about any Web page they want using a Web browser (no plug-ins) and without a single line of code. Think Visio, MS Word, or OmniGraffle, but extremely simple and completely on Web-based.
There are a lot of cool features in Roxer, including cross-tab copy/paste, which were extremely difficult to implement. It’s only due to a background in JavaScript hacking were we successful. Other Web 2.0 / Ajax’ish stuff like Drag & Drop, Rich Text Editing, and Edit-in-Place were zip zap after that.
CuePrompter (via DownloadSquad) is an browser-based teleprompt tool. Cut-and-paste some or insert some text and the application will scroll it forward or back, at your desired speed. A variant of the Ajax e-reader concept.
Peeking at the source, it's been around since 2005. Implementation is small and straightforward. It works using a timer and manipulation of the top CSS property to continuously re-position the top of the entire text. (A negative top value means the top of the passage is "above" the browser window; hence you'll see text further along in the passage.)
Triggit has created a very interesting tool. The problem they are trying to solve is that many people want to muck around with their websites, but don't want to grok HTML. They want to integrate with services (mash them up in a manual one off way) such as insert their videos from YouTube, photos from Flickr, and other publishing items. One big one is being able to add advertising to the site.
As techies we often think that things are easy enough, "What? You just put in some embed code.... how hard is that!" Triggit allows you to go meta and put in only one embed code, and then offer a toolbar for users to add content in WYSIWYG style.
How does this all work?
When you put in that script code on your site, it has a hook back to the Triggit platform. Say you want to add a photo from Flickr: In the tool you find the photo and place it on the screen and hit save. The action is saved back to Triggit 'add this photo to that location with this style'. Then when a visitor hits the site, the page is loaded, the JavaScript is run, and the action is sent down to the browser and the DOM is changed to add this image. Zach said that one of the biggest challenges was getting this working across the various browsers, so when you put an image at some place using Firefox (the first browser that is supported for the editor side), it ends up in the right place no matter which browser is used from the visitor perspective.
This means that you now have a logical page, but content is split between you real backend, and the Triggit servers. The advantage to this method is that you can integrate with anything. You don't need to have special code that groks a particular backend service, it is all generic.
So, this is a little out there. You are balancing between making it incredibly easy to update pages, and adding complexity by having content in separate places. The page could jump a little depending on the amount of information coming down, if Triggit gets dugg, or what have you. If successful though, you can see as developers that you could write plugins for the system and allow John Doe to easily tie in your content. That is the future promise.
Fancy giving it a go? Zach gave Ajaxian readers 300 invites (as the product IS in beta!). Head over to the signup page and use the code "ajaxian" and if you are in the first 300 you should be good to go. Oh, and for coolness factor, I believe that Rails, Erlang, and crazy JavaScript skills were used to make this happen.
I got to sit down with Zach Coelius and he discusses the product, and gives us a walk through:
I also have a short demo of it running on my own blog:
Triggit, a San Francisco based startup, with the aim of making life a lot simpler for web publishers, today announced the beta launch of the first ever WYSIWYG web application for integrating third party elements into websites.
With Triggit, any web publisher can now drag and drop advertisements, Flickr pictures, YouTube videos and more, directly into their site without any skills in web programming. Triggit is free to use, and works on any site that accepts JavaScript. It does not require any downloads, access to FTP, or APIs, and installs easily by pasting one small piece of code in the site.
“Triggit is here to help anyone who would like to take full advantage of the resources of the web for their site who isn’t a programmer and who doesn’t think in code,†says Susan Coelius-Keplinger, Triggit’s COO.
At a time when more and more non-technical publishers are coming online, Triggit is focused on removing the complexity of using code to add third party objects to a page. Whether it is widget, a video of a dog skateboarding, or a banner ad, current technology still requires the use of embedded code to integrate these elements into a website. For publishers accustomed to using graphical user interfaces for all their computing, it can be a daunting task to modify and integrate code into their websites. One area where this is a particular problem is for online advertising networks who continue to lose hundreds of millions of dollars of potential earnings annually to web publishers who can’t integrate and optimize their ad units.
Triggit’s goal is to serve as a feature-rich tool whereby publishers can quickly and easily integrate all manner of widgets, content, advertising units, APIs and data from third party sites. In doing so, it operates as a distribution arm for companies seeking to spread the reach of their advertisements, widgets, content and data on the web. By making it easier for web publishers to integrate these objects into their websites, Triggit helps to expand the ability of these companies to reach larger online audiences and add new revenue streams. Ryan Tecco, Triggit’s CTO says “It is really early days for this technology. There are a lot of things waiting in the wings that we haven’t yet put into the tool. We are very excited to see where this goesâ€.
Move your mouse over the christmas lights (with headphones), and blow off some holiday stress! Smash -all- of the lights, and you will be.. rewarded. ;) This uses SoundManager 2 for the effects, and YUI for DOM, Animation and the Slider widget. The site's time-sensitive (night/day) and you can control the "lighting" and other effects via a slider, but I'll leave it for you to check out if interested. ;)
I was also pleased to note that the YUI worked nearly flawlessly when the site is rendered in proper XML/standards mode (XHTML sent with the "application/xhtml+xml" MIME type), which also makes JavaScript a little more "strict" - ie., you can't reference document.body any more, and so on.
The design is intentionally experimental, and uses a lot of alpha-transparent PNGs, animation and CSS opacity (there is an "enhanced FX" checkbox in the UI which enables/disables the fancy stuff), and will put a pretty good load on any modern system. The point was to see how the different browsers would perform; Safari 3 and Firefox 3 (beta) both handle things quite well, Opera and IE 7 do a decent job as well. (Unfortunately I had to degrade IE 6, it couldn't handle all the PNGs + opacity.)
The site shows off the new easing code that Robert Penner contributed to Dojo:
A small change in the Animation system to accommodate
the inclusion of the entire set of Robert Penner's Flash easing functions to The Dojo Toolkit. They were contributed
under CLA to the Dojo Foundation, and ported to JavaScript (dojox.fx.easing) by Bryan Forbes,
a Dojo committer, and maff mastermind.
He had released them BSD some time ago, officially. This CLA only insures a clear
traceable licensing path: written permission from the author. Its a huge win for JavaScript, and
the toolkits using or wanting to use those functions (Dojo now included). A big personal Thank You is in order, from all the OpenWeb.
The dojo._Animation change is transparent, though these functions will not work
with the Dojo 1.0.x branch, basically because numbers were being clipped beyond "100%" of
the Line (like in the elastic easing functions, the "snap back" after overshooting the
target).
The moj.oe demo started out as a simple preview of this _Animation change, and the
fun easing functions. The gravity button uses the bounce transition to drop the circles
to the ground (and bounce), the snap-back when you drag the circles (or logo) uses
the elastic easing function, and the "Live Download" dialog uses the backIn easing method when
you click "hide", for that "little boost immediately before leaving" ...
We then heard from Bruno Braes, a developer who worked on other political Ajax fun over in Flanders, Belgium. This is a touch ironic since Belgium has been running without a new government for how many months now? :)
Bruno talked about the project:
The main purpose of the website was online publication of election results with preferential votes and statistical information (including man/woman ratio, age category of the elected person, level of participation). The website recorded peaks of 8.45 million hits an hour, 3 million read pages and more than 350,000 unique visitors on October 8th. The automatic refresh, the user-friendliness and availability of the site resulted in satisfied users.
For all internal final data storage as well as for publication of information to the outside world one set of EML (Election Markup Language) based XML (eXtensible Markup Language) - document types was used. This international standard guaranteed, over the entire election process, a uniform and well documented communication to citizens, the media, the authorities involved, the local organisations and the political parties.
Using AJAX technology only 3 static HTML pages were used to serve all election results via XML data translated into a JavaScript object model, presented live and real-time on the day of the elections. By using AJAX technology the load on the server was minimal because we controlled when the new data was pulled by the browser, by knowing the exact moment new data was available on the server. Another advantage of using AJAX was no "flicker" was shown when reloading content (which happens automatically after a predefined period of time). During the day of the elections, the website was also used by the political parties on big screen/projector without the need of having to refresh the pages themselves.
Various 3rd party libraries (Prototype, Scriptaculous, TrimPath JST engine, …) were used, as well as a lot of custom scripts.
You can still check it out, and surely you know a couple of cities, such as Antwerp, to plug in. You can also click on a map.
Hopefully both countries have good political leaders in the coming months!
I was at the PCWorld innovative product awards at CES last night, and ran into Tastebook, a site that allows you to build a personal cookbook from both online and your grandma's recipes.
The site is Rails based, and uses a mixture of JavaScript and Flash to get rich functionality such as a visual representation of the book, a designers, access to Web services, and drag and drop support.
The primaries and caucuses are here, and people want their information. CNN has an Election Center to give you that information, and it has an Ajax flavour this year:
There were features I was hoping to see that I didn't. When the results were coming in it would be nice of them to (maybe using Comet) update the page when new content came in, and updating the time (1 minute ago doesn't make as much sense if it doesn't change).
The use of Ajax itself is subtle throughout. There are lots of in place loading, lightboxes, subtle animations as you go through tabs, and more.
Buxfer has a few interesting features that differentiate it from the others. While it offers auto-syncing of transaction information with your banks and credit cards, budgeting, and expense analysis, Buxfer also has three key characteristics:
Shared Finances - Buxfer allows you to create groups and assign specific finances to those groups to monitor who owes or receives money. For example, you could create a "Cable Bill" group and assign yourself and your roommates to the group to track who has forked over the cash for the Super Deluxe Sports Package.
Google Gears - By using Buxfer's Google Gears support, you can keep all of your private financial data on your own computer, instead of Buxfer's servers. The other personal finance sites store your information on their servers, thus out of your control.
Mobile Access - Buxfer has a mobile phone interface and an iPhone-specific interface for accessing your account remotely. You can also use Twitter or SMS to get account balances or to be notified of low balances, large withdrawals, etc.
Buxfer uses a perverted Prototype, and looks fairly Gmail-y with the top right red 'Loading...' and such. It looks nice.
Photophlow allows you to add Flickr streams to its chat rooms, so you can discuss away. It also integrates with Twitter.
A view source shows both Prototype and Dojo under the hood, and the UI itself is quite rich. Comet is used for pushing the data to the client, and although many people assume it's Flash (Flash is used for network communication and sound if available) it is Open Web all the way.
In fact, fellow Ajaxian Michael Mahemoff actually helped build an early prototype of the app.
, Ruby
