原文地址：http://woorkup.com/2010/01/16/emerging-techniques-every-web-developer-should-know/

?

The Web is evolving fast: new features, formats, user needs, continuously change the way we interact with websites. In this post I want to suggest you some interesting emerging techniques every web developer should know in order to build modern web applications. <script></script>

HTML 5 Offline Application

The HTML 5 specification introduces a lot of new features that radically improve the way users interact with websites and web applications. With HTML 5 developers can build easily offline web applications by using a SQL database API and an offline application caching API for storing data locally (by using a client-side SQL database) and allowing applications are available even when users are offline. This technique use a .manifest file and JavaScript to get an update of the cached files when is not available a connection to the server.

You can enable offline application caching by using the manifest attribute on the html tag:

<!DOCTYPE HTML>
<html manifest="cache-manifest">

You have to create a .manifest file that specifies which files are to be cached offline. Here is a typical structure of a manifest file:

CACHE MANIFEST
index.html
about.html
style.css
logo.png
...

NETWORK:
server.cgi

According to the W3C Working Group Note about Offline Web Applications topic, server.cgi should never be cached in order to continuously get updates from the server.

Apple Developer Connection provides a full detailed, step-by-step guide to help you learning how to buit modern offline web applications. You can read the full guide here.

oEmbed

oEmbed is basically an open format for allowing an embedded representation of a URL on webpages. Facebook probably has one of the most popular implementation of oEmbed API. For example, when you copy a link from YouTube, Vimeo, Flickr, into your status bar, Facebook converts this link into a movie or image embedded on your profile.

Previously on Woork Up I wrote this interesting post “Learning oEmbed: Convert Links Into Embedded Content” where I explained how to use oEmbed API to implement a Facebook-like link-to-embedded-content feature. The tutorial is really simple, easy to customize and reuse on your projects. A working example is also available.

HTML 5 contentEditable

The HTML 5 contentditable attribute allows to make editable the content within a HTML element with the contenteditable state set to “true”. This attribute is useful for example for easily developing edit in-place features or advanced rich text editors without using third party resources. All major browsers (IE, Firefox, Safari, Chrome) implement this attribute and here is a sample usage:

<div id="editableLayer" contenteditable="true">...</div>

You can use document.execCommand to add some basic features to your custom editor simply adding this code in the head tag of your webpage:

<script language="javascript">
function formatText(cmd){
????document.execCommand(cmd, null, null);
}
</script>

This is the result:

BoldItalicUnderline

Try to change the code within this layer

Here is an example of button to format the selected text:

<button onclick="formatText('bold');">

The previous code is only an example. I suggest you to use unobtrusive approach for separating HTML structure from JavaScript code (in this case the onclick event).

OAuth

oAuth is an open protocol that implements an authorization model for allowing websites and web applications to publish and access data stored in third party websites without sharing user login information. Yahoo! Developer Network provides an interesting and detailed tutorial that illustrates how to create an OAuth application for accessing Yahoo! services.

If you want to implement OAuth protocol on your application also take a look at the following links:

Implement OAuth for Google
Implement OAuth for Twitter
Implement OAuth for Yahoo