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.
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:
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
Very good article, I like the contentEditable’s part!
Thanks Antonio for sharing!
Amazing article i like it soo much thank a lot Antonio ;)
Very interesting post!
Thanks Antonio
Tanks Antonio for this amazing article
Great article. :) BTW, there is a little glitch with the link in the “oEmbed” section.
Thanks Fred, now it’s ok!
Excellent tips! Thank you!
OAuth is new for me…interesting read
Thanks for this information!
Awesome article. Just excellent.
I liked, in particular, the oAuth part.
It’s great to see that, finally, we’re going towards a widely supported (and simplified) “platform” with HTML5 and all the technologies around it.
This is a sort of “convergent evolution”, where different systems evolve to acquire similar characteristics. We’ll soon see cell phones, tablets, netbooks and other “every day use electronics” make use of the web as a common platform.
And these are the foundations to build on top of.
I believe that convergent evolution is necessary for web designers and developers too. The era of the “designer” and the “back-end developer” is over. We need to know it all and use it all, so yes, every web developer (and designer) should know and use such techniques.
As usual, thanks for sharing.
very nice read. extremely informative and enlightening. definitely cutting-edge.
also, i agree with Niccolo Favari. Convergent evolution is a great term to describe the assimilation of similarities between different formats.
contenteditable has been part of Internet explorer for years even before the draft version of HTML was out.
Ops i meant – The draft version of HTML 5
Hi, I was wondering why you would use contentEditable instead of texarea, is there any advantage of using a div?
For WYSIWYG purposes. If you bold some word in a div, you’ll see the word bolded, while in a textarea you’ll get ‘word‘.
very goog article of html5 action
Thx for that, i love HTML 5! I Hope 2010 HTML 5 will get a bot more popluar!
Great tips. Great for e-commerce sites!
Great, I ought to start learning and applying these techniques in order to keep abreast of the trend.
Thank for sharing!
thanks antonio, hadn’t heard of oAuth before.. interesting read
very informative Article thanks for sharing.!
Good Stuff! I didn’t know about manifest and will be looking heavily into this. Thx
I like contenteditable, hmmmm, fun!
Thanks, this was very insightful.
I think i’m looking forward to oEmbed the most, probably something i’ll use the most in development
Great article aswell, thanks :)
Learnt a few interesting thing. Thank you Antonio!
Nice & simple Antonio, I like it.
Good info on the uses of HTML5… Are these techniques supported by older browsers (see IE6 & IE7) as well?
For oAuth you could also use OpenID. The website rpxnow.com has info on instant open ID and data portability – oAuth…
This is a great post for understanding new technologies and keeping up with it.
I would like to oEmbed. lets see when!
Will HTML5 accept a possibility to edit tags attributes without contentEditable=true?
cache manifest seems to be a step towards to search engines.. :)
Great Post! Really Helpful article, Thanks a Lot.
Wow, thank you… I need to do some more research… so easy to get left behind!
Wow…I echo everyone else’s statement. A wonderful and great post indeed. Just like “Web Design Maidstone ” said, very easy to get left behind if one is not up to date with how things are changing.
By the way Antonio, how do you keep up to date with all this stuff, I mean how do you get all this info so quick and early in the game, I think that is a very important thing.
Awesome Article.
Great article thanks!
Great! I like this contenteditable stuff!!
Wow… HTML 5 is great….. I need to practice and practice ….
Amazing Article,
Nice Case study,very information.
I really appreciate the information you are offering,this is very much useful for in my learning experience.
Thanks for sharing
Best Regards
Nevin
contentEditable has been available since version 5.5 of MSIE. 10 years ago? Glad to see other browsers catching up, hah.
There is so much happening in the field of web development that its very hard to keep up. My biggest fear is becoming obsolete because I picked a certain technology only to find out its not needed anymore. This has already happened to me once in the past and its not a fun position to find yourself in. (was a cd-rom devpr in 90′s) Now Im focused on web site development using PHP/mySQL, I think I should be ok with this for at least another 5 years. I hope.
Nice article :) I thank you and expect more from you ! :)
And again a big thanks ! :)
Thx for sharing, very useful post, html5 will probably kill Flash
Thank you for this post, it will be very usefull and I didn’t know most of the tips you posted, i’ll make a link on my blog
Wow, I didn’t know about the contenteditable-clause until earlier today, whilst checking how the Facebook-tagging works. Thanks for the clarification. :-)