Making the Jump to the Web

Many applications on the web are now considered by the general public to be "semantic" web applications. In this case, semantic means that it is easier to use compared to the "old web"; it is easier to find, collaborate, and share documents. This can be accomplished through AJAX and the like, or through proprietary formats such as Flash and Java. Paradigms which require the user to reload the page or move to a different page to do something are not considered semantic because they remind the user that they are in a web browser. Ideally, a semantic web page provides an interface that the user is used to, such as .mac web mail imitating the Mail.app interface. Some web browsers provide tools for doing this that degrade gracefully, most notably WebKit (the Safari engine) and Gecko (The Firefox/Netscape engine) provide rounded corners through the -moz-border-radius and the -webkit-border-radius tags. Any browser can provide a system-themed dialogue using javascript, for example:

This input will ask a user for their name and provide a box to answer it in, and it adopts the look and feel of the system it is running on. In this way, a semantic web application can provide a method for user interaction that feels integrated with the system.

A browser that goes above and beyond in terms of integration is WebKit. Integration and looking great on one platform sometimes requires sacrifices on others. However, in most cases, WebKit's integration degrades gracefully, leaving a "normal" experience on another browser. For example, if this page is viewed in Safari 3 or another recent webkit-based browser (like the android browser), hovering over the /rc/etc image at top will cause it to tilt and scale. This is done through the -webkit-transition: and the -webkit-transform css tag. This degrades gracefully in other browsers, leaving nothing behind. See here for more information on CSS animations in WebKit.

Another way to provide more seamless integration is through sliders. It just so happens that WebKit provides a gracefully degrading slider as well: the -webkit-appearance: slider-horizontal or slider-vertical. This will degrade gracefully in other browsers by just leaving a text field for users to enter a value in. For example:

Of course, all of this can be applied to mobile web applications as well. Sites targeted for the iPhone and other mobiles with Gecko and WebKit-based browsers can make use of the appropriate tags, because they don't have to worry about other browsers (besides Windows Mobile's IE). This can be a path to smooth transitions on the iPhone by employing JavaScript for the WebKit animations, or other things