Archive of published articles on 2006
Back homequickSub is a Javascript function that adds intelligence to the Jason Brome’s RSS feed feed button on your web page. Just roll your mouse over the example, and you’ll be instantly greeted by one-click subscription links to the most popular aggregators.
Website: http://www.methodize.org/quicksub/
Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.
Website: http://www.doknowevil.net/litebox/
Most of the sites that I’ve featured recently that have to do with content visualization have really been about deep discovery. If you take that notion and apply it to a search engine you have mnemo map. With mnemo you can search Yahoo!, flickr, and YouTube by tags, synonyms and translations for any search term. mnemo, “combines the technologies of social networking, search engines and other data sources to help you formulate search queries and find really relevant information”. I have to say the site is a very refreshing way to search! Thanks.
Application Program Interfaces are, broadly speaking, tools for building software applications. An operating system API might help you build applications with a consistent interface, but Web APIs are mostly about giving you access to data. Even Web APIs aren’t a new idea. Google’s search API has been available via SOAP since 2002, and there’s definitely older services than that. However, the recent growth in Web API availability has been fuelled by two recent developments. The first, which I’ve already mentioned, was a philosophical change in the way that data is handled. The second was the introduction of AJAX. Again, not a new idea, or even a new technology, but sometimes it’s all about timing.
Website: http://www.thinkvitamin.com/features/ajax/go-forth-and-api
Lovelines is one of the most unique content visualization ideas I’ve seen recently. “Using a data collection engine created by the artists for their recent collaboration, We Feel Fine – wefeelfine.org, Lovelines examines thousands of blogs every few minutes to find expressions of love and hate, posted by all manner of people. When it can, Lovelines identifies and saves the age, gender, and geographical location of the person who wrote the post, and then presents that information along with the post.” Lovelines shows it’s data in words, pictures and superlatives. Words and pictures present individual examples of love and hate. Superlatives provides a daily zeitgeist of the most loved and hated things. All in all a very amazing content visualization of how the blogosphere feels about love and hate on a up to the minute basis.
When I first started posting about AJAX over a year ago, many of the posts I found were about definitions, theory or examples. Today, most of the links that I find are tutorials and I applaud this. The following is a list of what I consider to be the best and most helpful AJAX tutorials I’ve found in the last two months.
Please let me know through email or a comment if you know of any other great AJAX tutorials and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these great free learning experiences.
AJAX and API Tutorials
Go forth and API
Application Program Interfaces are, broadly speaking, tools for building software applications. An operating system API might help you build applications with a consistent interface, but Web APIs are mostly about giving you access to data. Even Web APIs aren’t a new idea. Google’s search API has been available via SOAP since 2002, and there’s definitely older services than that. However, the recent growth in Web API availability has been fuelled by two recent developments. The first, which I’ve already mentioned, was a philosophical change in the way that data is handled. The second was the introduction of AJAX. Again, not a new idea, or even a new technology, but sometimes it’s all about timing.
MapStats
Blog Flux MapStats is the coolest way of tracking your website visitors. Not only does it provide the normal statistics and graphs, we have incorporated the system into Google Maps! Instantly see where your latest visitors are coming from, and find out what they are looking for.
Working with the Google Web Toolkit
The Google Web Toolkit (GWT) is, in essence, a JavaScript generator. The interesting thing is what this JavaScript is generated from: Java. GWT takes Java code written against a special API and converts it into browser-runnable Ajax code. If that weren’t enough to make it cool, it also includes a test harness (see Figure 1) that will execute the Java code inline with a test browser, allowing you to step-through debug (see Figure 2), profile and unit test your Ajax front end in your favorite IDE or at the command line.
AJAX Auto-Complete Tutorial
Using Ajax Agent and PHP for Auto-Complete
Description: In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Complete box with a drill-down list of data. Although the state of this Ajax Framework is questionable it is so far the simplest and easiest framework I have found.
AJAX Editing Tutorials
AJAX Edit In Place With Prototype
Late last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flick as an example and Prototype to do the heavy lifting he showed how to edit text inline. Like many other people I’ve been fascinated by this approach to altering text. After playing with Drew’s example off and on I finally sat down and decided to generalize it a bit more to make it easier to use.
Easy AJAX inline text edit 2.0
As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.
AJAX Flash Tutorial
Incito – Interactive Everything
SwfJax is a new approach to asynchronous JavaScript and XML applications using revolutionary Flash technology. SwfJax uses a lightweight SWF (Adobe’s Small Web Format or simply – Flash) engine to get XML data from the server and xPath (XML Path Language) to address a part of data it has retrieved. Data can be returned back to Javascript as an Array. You can also send multiple xPath queries at once.
AJAX Form Tutorial
HTTP Authentication with HTML Forms
Authentication in Web applications has been highjacked, HTTP defines a standard way of providing authentication but most apps use the evil spawn of Netscape, otherwise known as cookies. Why is this? Cookies aren’t designed for authentication, they’re a pain to use for it, insecure unless you know what you’re doing, non-standard, and unRESTful.
AJAX Gallery Tutorial
Pyxy-gallery
Pyxy-gallery is a PHP script to make an image gallery. There are many other scripts to do this, but this one is different. Maybe even better.
AJAX and Java Tutorials
Ajax for Java developers: Exploring the Google Web Toolkit
The recently released Google Web Toolkit (GWT) is a comprehensive set of APIs and tools that lets you create dynamic Web applications almost entirely in Java(TM) code. Philip McCarthy returns to his popular Ajax for Java developers series to show you what GWT can do and help you decide whether it’s right for you. (Note: You can now download an updated ZIP file containing the article source code.)
Project jMaki
jMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component.jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets. jMaki currently provides bootstrap widgets for many components from Dojo, Scriptaculus, Yahoo UI Widgets and DHTML Goodies. This project also includes a set of AJAX widgets with a focus on Web 2.0 such as a RSS widget, a del.icio.us Bookmark widget, a Chat widget, and many more to come.
AJAX and Javascript Tutorials
15 Days of jQuery
If your project calls for AJAX or DOM scripting and you need it done quickly, with minimal fuss, and you believe in keeping things simple, then jQuery might be perfect for you.
jsScrolling
Nice javascript text scroller with examples.
Nice tutorial on how to do a purely javascript powered motion tween.
Narrative JavaScript
Narrative JavaScript is a small extension to the JavaScript language that enables blocking capabilities for asynchronous operations. This makes writing asynchronous code sequences easier and increases code readability.
Serving JavaScript Fast
The next generation of web apps make heavy use of JavaScript and CSS. WeaO(TM)ll show you how to make those apps responsive and quick.
AJAX Library Tutorials
15 Things you can do with Yahoo! UI
In this article I’m going to share some of my short stories, poems, and random sonnets of affectionate escapades I’ve had with JavaScript during the last few months, which I’ve built using the Yahoo UI utilities. Some are rather embarrassing, others useful, and yet others I feel are just downright sexy. If you see something you like, feel free to take it, tweak it, and make it your own. This is what some poetry afficionados of secret societies would call a poetry slam. So for want of a better phrase, this can be a code slam.
JSXML includes REXML, a high-performance parser that doesn’t mind if you throw 2000 lines of (well-formed) XML at it, a builder with a unique API that invites the coding of GUIs (graphical user interfaces) around it, and an iterator that makes costly recursion unnecessary. It was released under the LGPL (it’s free for private and commercial use, no strings attached) and has been downloaded over 300 times.
Cheat Sheets for the YUI Utilities
The YUI development team has begun drafting some cheat sheets — inspired by the handy references published by ilovejackdaniels, among others — that give you a one-page dashboard of documentation for each of the library’s components.
AJAX and PHP Tutorial
Developing PHP the Ajax way, Part 2: Back, Forward, Reload
major challenge of Asynchronous JavaScript and XML (Ajax)-driven Web sites is the lack of a Back button. We will use JavaScript to create a history stack for the Ajax photo gallery built in Part 1 of this two-part “Developing PHP the Ajax way” series. This history stack will closely mirror the history utility found in Web browsers, and it will be used to provide Back, Forward, and Reload buttons for the application.
AJAX Programing Tutorials
AJAX Counting Nightmares
I’ve been very vocal about the AJAX counting issue; I’ve written several articles, spoken on panels, and pushed the IAB to update the impression guidelines on a very fast timeline. There’s been interest and response, and the IAB is beginning to act. But everyone involved in the process realizes this will take time. So today, my recommendations for how developers of AJAX Web pages and software applications that include advertising can deal with the unique counting issues.
AJAX Feedback Mechanism
One thing that I have always tried to solicit as much as possible is user feedback. For example, when a user signs up for Toronto, they get a personalized email from me, complete with my actual email address. I want to make it as easy as possible to give feedback.
Building a Pagination System with AJAX
You know how to use AJAX to pull rows from a database, but do you know how to create an AJAX-based system to organize the records neatly into pages? You’ll know how to do that by the end of this series! This first article shows you how to build the user interface.
AJAX and Prototype Tutorials
Prototype Window Class : Introduction
This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. It has been tested on Safari, Camino, Firefox and IE6.
Prototype Window Class : Samples
Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().
Really easy field validation with Prototype
I wanted a robust javascript validation library that was simple to implement and didn’t require me do any extra work other than creating the form.
Script# Prototype
Script# brings the C# developer experience (programming and tooling) to Javascript/Ajax world. This post shares a prototype project for enabling script authoring via C#..
AJAX in Real Time Tutorials
Introducing AjaxSpy
While playing with the new RJS templates in rails, I found it difficult to know what was actually being returned from my requests. Thus, AjaxSpy was born. It’s a simple JavaScript and CSS file. All you need to do is include the js file in the header of your document, the css is automagically included (must be in the stylesheets directory). The script relies on Prototype 1.5.0rc0, and for it to be sexy you need the Scriptaculous effects library. You can include it conditionaly based on params in the query string, or do some fancy session stuff.
Mapping website visitors in real time
A while ago I had an idea. What if I were to try to geographically locate all the visitors to my website, and tag their locations on a map? Using Google Maps, Ajax, MySQL and some PHP, it came together quite nicely.
AJAX Scalability Tutorials
Scalable AJAX
AJAX done well can reduce server load and bandwidth, but I’ve seen a lot of people jumping on the AJAX bandwagon who don’t really consider what the impact is on the back-end. Done badly, AJAX can bring a server to its knees.
AJAX Sorting Tutorial
SortedTable example
SortedTable allows you to make any valid table a sortable one. Tables can be sorted automatically or manually by moving rows.
AJAX Tree Tutorials
Editable JavaScript TreeGrid
EJS TreeGrid is DHTML component written in pure JavaScript to display and edit data in table, grid, tree view or grid with tree on HTML page.
SilverStripe AJAX Tree Control
Nice AJAX tree tutorial and script using Prototype and Behaviour libraries.
AJAX UI Element Tutorials
Bubble Tooltips
Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute. Recently I was playing with a variation, a nearly pure Javascript+CSS approach where the tasks assigned are more clearly separated: interaction to javascript, presentation to CSS. So the new article on Bubble Tooltips was published this week in italian on Pro, and I’m presenting here a translation for the international audience.
More Rounded Corners with CSS
More rounded corners: Taking the “Sliding Doors” approach to fluid, rounded-corner/border/shadow-based dialog boxes, with examples .
AJAX Website Tutorials
AJAX Desktop Tutorial
The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.
Ajax Tabs Content Script
This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.
XMLHttpRequest Tutorials
AJAX:Getting Started – MDC
This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.
AdvancedAJAX 1.1
AdvancedAJAX is a JavaScript object allowing to use XMLHttpRequest object easier and speeding up development of AJAX based projects. It consists a bound of methods helping creating queries, error handling, usage with HTML forms as well as connection timeouts and reconnecting.
Fjax – a lightweight methodology for Ajax style development
Fjax is a technique focused on drastically streamlining the XML handling layer of web 2.0 applications. Picture Ajax’s XML parsing and handling with less than 65 lines of code! It’s not a replacement for toolsets that provide presentation-layer visual gizmos. Think of it as a new engine to put under the hood of all the great widgets that are already out there.
Responsible Asynchronous Scripting
Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now. Originally dependent on proprietary technology like Java applets, ActiveX and Flash or clever combinations of disparate technologies like images and cookies, native support for the XMLHttpRequest (XHR) object in modern browsers has made it easier than ever to make web apps more responsive and more like their desktop counterparts. This lower barrier to entry also makes it easier to make poor decisions and inappropriate use of a powerful technology.
XmlHttpRequest Debugging for IE
Since I wrote the original XMLHttpRequest Debugging user script for Firefox (screenshot), almost a year ago, it has received a lot of positive feedback and a number of you expressed interest in having the tool support IE, to ease your AJAX development. Finally, here is a port of the script to run on IE, in the form of a bookmarklet
AJAX done well can reduce server load and bandwidth, but I’ve seen a lot of people jumping on the AJAX bandwagon who don’t really consider what the impact is on the back-end. Done badly, AJAX can bring a server to its knees.
Website: http://blog.metawrap.com/blog/ScalableAJAXForTheLoveOfGodThinkOfTheServers.aspx
SwfJax is a new approach to asynchronous JavaScript and XML applications using revolutionary Flash technology. SwfJax uses a lightweight SWF (Adobe’s Small Web Format or simply – Flash) engine to get XML data from the server and xPath (XML Path Language) to address a part of data it has retrieved. Data can be returned back to Javascript as an Array. You can also send multiple xPath queries at once.
Website: http://incito.lt/index.php#/gateways/go.php?to=products/swfjax
There are many directory management tools out there, however, Relay is worth checking out. Relay is a free, downloadable AJAX powered directory manager that feels very much like a desktop application. Features include, drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts. Awesome open source AJAX app!
In the last 20 hours I’ve received over 12,000 unique visitors, 957 diggs and 495 bookmarks in del.icio.us to my post, “How to Make Your AJAX Applications Accessible – 40 Tutorials and Articles”. Special thanks to Kevin Rose of Digg for submitting my story to his awesome website!
The recently released Google Web Toolkit (GWT) is a comprehensive set of APIs and tools that lets you create dynamic Web applications almost entirely in Java(TM) code. Philip McCarthy returns to his popular Ajax for Java developers series to show you what GWT can do and help you decide whether it’s right for you. (Note: You can now download an updated ZIP file containing the article source code.)
Website: http://www-128.ibm.com/developerworks/library/j-ajax4/index.html?ca=dgr-lnxw01GWT4Ajax
AJAX is a great tool for creating rich internet applications, however, when improperly implemented it can cause huge accessibility issues. The good news is that most of these issues can be fixed so your websites are viewable by a much wider audience. Great resources on accessibility have been around for years, however, many web 2.0 and AJAX websites ignore all of the research that went into turning website accessibility into a movement followed by most professional web developers. Below you’ll find a list of 40 best AJAX accessibility tutorials and articles that I have found on the web in the last year.
As always thanks to all of the developers and accessibility experts who made all of the information below available to us. Also, if you know of any other AJAX accessibility resources please add them to this post via my comments area.
3 Myths of Ajax and Accessibility
I’ve seen quite a few ideas and bits of policy writing about accessiblity that could probably do with some updating. These are the 3 most common.
Accessibility of AJAX Applications
AJAX will not work in all web browsers. As its name suggests, AJAX requires JavaScript. This alone means that AJAX applications will not work in web browsers and devices that do not support JavaScript. For this reason it is not accessible to many typical Web users. The Web Content Accessibility Guidelines also require that web applications function when JavaScript is disabled or not supported. AJAX also requires that XMLHttpRequest be supported, which many browsers do not.
Accessible DHTML
DHTML accessibility allows desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices.
Accessible JavaScript Guidelines
Use Javascript to enhance the usability features for the majority of users, without negatively affecting the accessibility for the minority of users. You can almost always fall back on a plain HTML or server-side solution for the benefit JavaScript provides.
Accessible Pop-up Links
Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.
AJAX Accessibility Overview
Asynchronous JavaScript and XML (AJAX) is a hot new technology on the Internet that allows the incremental update of portions of a Web page without reloading the entire page. This has great performance benefits and provides a medium for developing rich Internet applications. Accessibility concerns have arisen with the increased use of JavaScript and AJAX on the Web. This article introduces AJAX and discusses some of the accessibility issues and best practices.
AJAX and Accessibility
In this article we will have a look at the implications for accessibility and usability when using Javascript to dynamically update a web page. I will also show how you can increase accessibility for AJAX-based forms
Ajax, accessibility and Assistive Technology
I’ve been worrying about Ajax accessibility for a while now, so I was delighted to read two very interesting items of research on Ajax accessibility which were published last week.
Ajax Accessibility Revisited
The incredible flexibility provided by Ajax technologies is a big frustration to the accessible design community. Speaking for myself, I’d LOVE to feel comfortable using these powerful tools to create accessible tools. But the situation continues to be limiting.
AJAX and Accessibility
With DOM Scripting and Remote Scripting making their way into standards-compliant web development, people are beginning to wonder what the effect of these techniques is in screenreaders and other assistive technologies. Kevin Leitch asked me and some others about AJAX and Accessibility.
AJAX and Screenreaders: When Can it Work?
We’ve all heard a great deal of buzz about AJAX in the last few months, and with this talk has come a legion of articles, tips, presentations and practical APIs designed to explore the possibilities and try to arrive at best-practice techniques. But, for all of the excitement and hype, still very little has been said on the subject of AJAX and accessibility.
The main aim of Keith’s Hijax methodology is a model of Web Standards “Progressive Enhancement” lovliness, which ensures the degradability of the web page/ web app (call it what you will). It is basically the principle of unobtrusive JavaScript applied to Ajax.
AJAX, JavaScript and accessibility
With the advent of mass-hype for building AJAX solutions, I find it necessary to shed some light of AJAX and JavaScript implementations and how they relate to and affect accessibility, and to explain how they can both co-exist; that one doesn’t exclude the other.
AJAX: Usable Interactivity with Remote Scripting
This article aims to give you an introduction to the foundations of remote scripting, in particular, the emerging XMLHttpRequest protocol. We’ll then walk through an example application that demonstrates how to implement that protocol, while creating a usable interface.
Ajaxessibility
Unfortunately for us, it’s also inaccessible as all getout. Even in 2005, assistive technologies like screen readers get serious heartburn when it comes to just about anything we call “dynamic HTML.” It doesn’t know what of this asynchronous content crossing the transom is relevant to the user, and how to deliver it meaningfully to the user. Do they want to announce every line of a ticker script automatically, while the user is trying to read other content? Nope.
An important lesson learned about AJAX and accessibility
Yesterday I went to visit some fellow consultants at their assignment for a sub company/department of one of Sweden’s largest banks. We had a talk about AJAX in general and different ways of how to implement it, and one of them opened his web browser to navigate to some AJAX-based web sites.
Build Half a Product: Is Ajax accessible? At all?
If you know about WCAG then you know that many parts of it are outdated. And you also know that a lot of people have developed expertise over the years in interpreting WCAG in contemporary ways.
Creating Accessible JavaScript
JavaScript allows developers to add increased interaction, information processing, and control in web-based content. However, JavaScript can also introduce accessibility issues.
Event Handler Accessibility
Only use onchange rarely and don’t alert users of format errors until time for submission. For example, you may want to use it for slight formatting changes of input data. If a user has typed in (555)555-1212 for a phone number format instead of the requested format, you could change it to 555-555-1212 safely without alerting the user.
First Framework to Support Accessibility for AJAX and Web 2.0 Applications
MB Technologies, developers of Bindows, the leading development framework for AJAX and Web 2.0 applications, announced today the release of Bindows version 2.0 with enhanced support for Section 508 accessibility compliance, an industry first.
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
Everyone’s favourite AJAX technology app is Google Maps. Google have done a stunning job… But when I came to try to bookmark a page I had to hunt around for ‘link to this page’ over on the right hand side. Why have they broken such a basic function of the web?
Front-End Architecture: AJAX & DOM Scripting
The tipping point that really got me wondering about front-end architecture is AJAX. It’s unique in that it really crosses the chasm between user experience and the deeper technical bits. On one hand, AJAX is important because it enables us to create exponentially richer user experiences. On the other hand however, its implementation can leave much to be desired if handled incorrectly, and to make matters worse, because of the way it straddles the line between the front and back-end, it’s difficult to determine how it fits in with everything.
How do scripting languages affect accessibility?
Scripting languages are becoming increasingly popular on the web, because they can be used to make web pages more dynamic and interactive. There are two types of scripting languages: server-side and client-side.
Index of JavaScript tests
Some great information about javascript and accessibility
Javascript and Accessibility
Use of scripts such as Javascript may create barriers to access for some users of adaptive technology. For example, if a script generates content on the “mouseover” event handler, as in the case of “rollovers,” anyone who relies on keyboard access will not be able create the event that will cause the browser to generate the text.
JavaScript Accessibility Examples
Use the event handlers on an anchor element rather than on the image element. An image cannot achieve keyboard focus so it would never be able to use the keyboard events.
JavaScript accessibility issues
JavaScript is a scripting language used to make HTML documents more dynamic. Oftentimes, user actions trigger scripts which modify the page. Users may not realize a page has changed or may not be ready for the page to change when it does. On the other hand, if done well, JavaScript can enhance the accessibility of pages by allowing users to customize them to their needs.
JavaScript and Accessibility
here are some pretty serious implications for the AJAX-ification of the web if we want to do it right. I’m a believer that AJAX is interesting, will become a popular way of building web based applications. I’m concerned that we’re going to get people building AJAX type applications that simply won’t work at all without JavaScript on.
Making Ajax Work with Screen Readers
The accessibility community is understandably concerned about the accessibility of client-side scripting, in particular using Asynchronous JavaScript and XML (Ajax) to produce Rich Internet Applications. Steve Faulkner of Vision Australia and founder member of the Web Accessibility Tools Consortium (WAT-C) and myself on behalf of The Paciello Group (TPG) have collaborated in an effort to come up with techniques to make Ajax and other client-side scripting techniques accessible to assistive technology.
Progressive enhancement with Ajax
It would be nice if Google Maps were accessible by non-JavaScript enabled user agents, but in practice this must be weighed up against market forces – is an acceptable proportion of your target market likely to have JavaScript enabled, or is your service so useful that people will go out of their way to acquire JavaScript capabilities to use it
Responsible Asynchronous Scripting
AJAX and its kin are empowering developers, but with great power comes great responsibility. Asynchronous or remote scripting has been lurking in the background of web app development for quite some time now.
Rich Accessibility
I think accessibility issues have always been an abstract concept to me. It usually was an afterthought, something that the usability folks dinged us for. You know the text wasn’t dark enough or the font was too small. It seemed to me that every experience I had with accessibility was from the negative perspective.
Same Language, New Dialect
First, accessibility: Advanced interactions and behavior provided via JavaScript must be enhancements, not the sole way to accomplish a task. In desktop cut-and-paste, there are at least three ways: keyboard shortcuts; “Edit” menu options; and drag and drop. Accessibility isn’t an optional characteristic of the Web.
The Hows and Whys of Degradable Ajax
While working on Particletree’s shopping cart system for our magazine, we decided that we wanted to create a flawless user experience for all users without having to sacrifice the added user interface benefits provided by Ajax goodness. A lot of places will tell you that it is ok to use JavaScript and Ajax as long as it’s not mission critical. Well, we don’t think web apps have to be boring to be reliable.
Usable XMLHttpRequest in Practice
One of the great benefits of XMLHttpRequest is that you can use it to make complex WYSIWYG. This has previously been hard to do on the web. Take a “build your car” feature that you often find on sites of car manufacturers. This could be greatly enhanced by the use of XMLHttpRequest. When the buyer selects something, you can connect to the database, recalculate prices, change the image or change other options – without reloading the page, on the fly. This is great! But… remember the 4 points above. XMLHttpRequest do not support any of them by default, if you want to keep your web application usable – you have to reinvent them.
Usability and accessibility with Ajax
The Ajax express train rumbles on, threatening to crush anything in its path. Recent discussion has turned to those critical elements of good web development, usability and accessibility. Accessibility is a major issue with Ajax, mainly because anything that relies on JavaScript to function is inaccessible pretty much by default. There are two solutions: either provide a fall-back system where the site remains useful without its Ajax enhancements, or provide a whole separate interface that works without scripting.
XMLHttpRequest Usability Guidelines
XMLHttpRequest is becoming more and more popular, and many people are currently exploring what we could do with it. Unfortunately this also causes people to reinvent old and forgotten usability problems.
Web 2.0 and accessibility
Web 2.0 is the hottest buzzword since Ajax, and I’m glad to see that I’m not the only one worried about what thoughtless implementation of everything that fits in “Web 2.0″ could mean for accessibility and device independence on the web.
Important Note:
The post that was here Why Ajax Sucks (Most of the Time) has been removed as it was not a legitimate article about AJAX. It was a fraud, and it was not written by Jakob Nielsen. Very sorry Jakob.
Why Ajax Sucks (Most of the Time)
With respect to the use of ajax by highly skilled Web designers, I have changed my opinion somewhat: people who really know what they are doing can sometimes use ajax to good effect, though even experienced designers are advised to use ajax as sparingly as possible.
You should’ve been @media
What we basically agreed on is that we need to get the word out. JavaScript is ready for its proper role in modern, standards based websites. During the conference we found plenty of evidence that there is much interest in JavaScript, if only people could get more help and more explanations.
Ideacodes is pleased to be working with Ning on UI and user experience design for many of Ning’s upcoming features and releases. Ning is a free online service for cloning, customizing and sharing social web applications, and is led by CEO Gina Bianchini and co-founded by Marc Andreessen.
The purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.
Website: http://www.musestorm.com/web/jsp/tutorials/ad_tutorial.jsp
In the last year I’ve seen many amazing new content visualization models, however, Digg will be launching something truly amazing in July. After being a web application designer for more than eleven years I almost became verklempt watching the latest version of DiggNation. The new features show incoming links in real time, but unlike Digg Spy the incoming posts and comments are shown on a real time visualization map. You can use a slider to show more or less content per page, and in one view real time diggs come in an cluster around a post. This is not only impressive, but possible revolutionary. Thanks to Digg and stamen design for producing such a great new visualization model!
For the most part AJAX does not significantly increase the security vulnerabilities in most web applications. However, javascript, XML and asynchronous server calls do have potential holes if not properly implemented. If you’re an application developer or security professional there are things to watch out for with AJAX applications. If you’re new to AJAX there are many hazards to watch out for, and tutorials and examples are one of the worst culprits for security vulnerabilities. Before you start downloading examples and making them live on your server you should learn a bit about security first. Below, you’ll find a list of tutorials, examples, and articles that will detail many of the security implications of using AJAX..
As always special thanks to all of the hard work done by the developers and security professionals who have taken there time to make all of this great information publicly accessible. Also if you know of other great resources or tutorials pertaining to AJAX please use my comments section on this article to add to the overall list. Thanks!
Ajax and Information Security
Ajax is a relatively new technology for security engineers to attempt to protect. Since the adoption rate of Ajax is starting to get bigger, security personnel should start looking at the technology now to see how best to protect the company in regards to using the new technology. Of course all the standard web application security structures should still be in place, but if the development or business teams wants to use Ajax, it brings along its own special issues along the way that security personnel need to know about.
AJAX and Secure Web Communications
Imagine, if you will, combining the Ajax model as articulated by Garrett with maturing XML security standards in order to meet ever increasing security and privacy needs. With encryption and signature services, and key management and/or client side authentication services embedded in the Ajax Engine layer, combined with identity management and access control on the server side, one can envision a powerful new class of secure web communications. And authentication could be handled through a PKI-based mechanism, kerberos, or something else.
Ajax Security: Container Managed Security
Ajax – Asynchronous JavaScript and XML clearly is in the focus of software development. Strongly associated with the new Web 2.0 term, Ajax today is everbody’s darling. Inspired by the promise and the developer uptake of Ajax, I thought on doing a reality check on one of my favorite pets: container managed security, authentication in particular. There are a couple of issues that just don’t work well with container managed security
AJAX: Is your application secure
Some web-enabled applications, such as for email, do have pretty destructive functionality that could possibly be abused. The question is will the average AJAX-enabled web-application be able to tell the difference between a real and a faked XmlHttpRequest?
Ajax Mistakes
Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems.
AJAX Security Basics
Ajax is considered the next step in a progression towards the trumpeted, “Web 2.0.” The purpose of this article is to introduce some of the security implications with modern Ajax web technologies. Though Ajax applications can be more difficult to test, security professionals already have most of relevant approaches and tools needed.
AJAX Security
Web developers cannot have failed to notice the excitement surrounding AJAX or Asynchronous JavaScript And XML. The ability to create intelligent web sites such as Google Suggest or compelling web-based applications such as Gmail is thanks in no small part to this technology. There is, however, a darker side – and accompanying the growth in AJAX applications we have noticed an equally significant growth in security flaws, with the potential to turn AJAX-enabled sites into a time bomb.
AJAX Security Threats and Performance Challenges
Forum Systems has issued an alert for AJAX-related security threats and performance issues. AJAX transforms a user’s Web browser into a Web services portal, thus exposing it to potentially corrupted data that can cause the browser to crash or perform poorly; malformed messages can disrupt server performance due to excessive parsing and exception handling.
Cenzic Extends Support for AJAX Security Assesment Applications
Cenzic announced that its automated vulnerability assessment solutions now offer full support for testing Web applications built using AJAX (Asynchronous JavaScript and XML) software development technology. AJAX support in Cenzic Hailstorm and ClickToSecure enables customers to take advantage of this application development technique to develop smoother, more responsive and intuitive applications without the associated vulnerabilities which have left AJAX-based applications increasingly susceptible to security threats.
Cross-Domain Ajax. Security Implications in Depth
Some people think we should remove the “same-domain” restriction from Ajax calls, and Eric Pascarello and xml.com (amongst others) don’t. I don’t think we’ve got to the bottom of the debate yet.
Cross-site scripting
Cross-site scripting (XSS) is a type of computer security vulnerability typically found in web applications which can be used by an attacker to compromise the same origin policy of client-side scripting languages.
Day-to-Day: Ajax Security
It’s hard to talk about Ajax without talking about security. Or more precisely, just about every customer who wants to talk seriously about using Ajax wants to talk about security.
Debunking Strong Misconceptions About Cross-Domain Ajax Security Issues
Quite a number of people have been discussing possible cross-domain Ajax security issues recently. These are smart people that generally know their technologies very well, but for some reason are missing some fundamental aspects about Ajax.
Eric Pascarello dissects Ajax security vulnerabilities
When people look at Ajax they see this XMLHttpRequest object performing magic on a Web page and they think that this can lead to major security flaws. When we do a simple view source on the page, we see the page we are calling, the parameters that are being sent. Anyone with any basic knowledge of JavaScript can easily inject scripts onto the page and change the request object to send other data. So yes, it is open to attack, but it is not anything to be afraid of.
Google, MSN, Flickr… struck by security hole
Tens of thousands of companies including AOL, Google, Microsoft and Yahoo are likely to be affected by the flaw in CPAINT – a toolkit used to create applications using an approach known as AJAX – short for Asynchronous JavaScript and XML. Rather than a technology in itself, AJAX is an approach to putting more dynamic interactivity into Web applications using a combination of HTML, CSS, Document Object Model, JavaScript, and XMLHttpRequest.
Informal Thoughts on AJAX and Security
I’ll be the first to tell you: AJAX does NOT substantially change the typical web application security audit methodology. However, if you are a developer or a security professional, there are a few issues to consider and watch out for. The following is a list of thoughts I created for my own use, but I’d like to share it with you. Note that it is draft, and a work in progress.
JavaScript Security
JavaScript has a long and inglorious history of atrocious security holes. Its security problems are not limited to implementation errors. There are numerous ways in which scripts can affect the user’s execution environment without violating any security policies.
OWASP AJAX Security Project
The OWASP AJAX Security project is in the process of being formed. We are seeking a leader (or leaders) for the project develop the OWASP AJAX Security Project Roadmap and identify the first tasks.
SAJA – Secure Ajax For PHP
Saja is a lightweight, open-source AJAX scripting engine for PHP, with optional secured function calls. It is designed for the speedy creation of simple, intuitive, and maintainable AJAX applications, without the need to write any JavaScript.
Security in an AJAX World
If data is more openly available as XML over HTTP, it’s going to be pretty damn easy for a smart hacker to get access to that data to make applications like this impressive example… which is great, but undoubtedly someone eventually will feel like their data is being “stolen” or “misused”.
Sprajax An Open Source Security Scanner for AJAX
Sprajax is the first web security scanner developed specifically to scan AJAX web applications for security vulnerabilities. Denim Group, an IT consultancy specializing in web application security, recognized that there were no tools available on the market able to scan AJAX. AJAX allows web-based applications a higher degree of user-interactivity, a feature with growing popularity among developers.
Using AJAX for Image Passwords – AJAX Security
Using a mouse movement login, in addition to a regular text password, will increase security being another dimensional input. Although keyboard sniffers could fairly easily start logging your mouse movements (I’m sure some already do), the amount of data needed to be stored is orders of magnitude more than regular text passwords.
Using the XMLHttpRequest Object and AJAX to Spy On You
Just imagine, for the purposes of an example, that you drop your new iPod on the ground and it stops working. Hoping to get a free replacement, you write an e-mail to Apple support that says: “I just bought a brand new iPod. I dropped it down a set of stairs. It stopped working.” You then decide to delete the second sentence to help your cause. TOO LATE! If the site uses AJAX, your response may already have been zapped to the complaint desk in the sky!
Web Apps Compromised by Security Hole
Security vulnerabilities have been discovered in a widespread Web service protocol which could allow an attacker to take control of a vulnerable server. The holes, found in XML-RPC For PHP and PEAR XML_RPC, affect a large number of Web applications, according to an advisory from GulfTech, which discovered the flaws.
Draw pictures and label things on a google map using simple clicks and drags. Easily move the map to anywhere in the world. Quikmaps is perfect for: drawing a map to your house, sketching out a cycling or hiking route, or telling everyone where you saw the grizzly bear.
Website: http://quikmaps.com/
Fjax is a technique focused on drastically streamlining the XML handling layer of web 2.0 applications. Picture Ajax’s XML parsing and handling with less than 65 lines of code! It’s not a replacement for toolsets that provide presentation-layer visual gizmos. Think of it as a new engine to put under the hood of all the great widgets that are already out there.
Website: http://www.fjax.net/
I could not find a single way to have real sockets in Javascript. Google told me that there probably is no solution except embeding a java applet or an active-x component! So I thought why not using a little .swf file as a bridge from javascript to the socket functions of flash!
Website: http://dev.dschini.org/socketjs/
So with all of the light/thick/whatever-box methods out there today, why would I build my own… because I wasn’t all that thrilled with the other ones out there. Don’t get me wrong, LITBox is not perfect, but for what I am developing at SpinWeb, it is the best fit. Probably the biggest advantage of the LITBox, is that it is a lightbox written into a class. This gives it the ability to open multiple instances of the LITBox and be able to control each one with unique settings and controls.
Website: http://www.ryanjlowe.com/?p=9#