May 03, 2013

Building Instagram-Style Photo Sharing App Comparatively Simple In HTML5

HTML5 has done some absolutely amazing things in terms of mobile apps. It’s got serious potential in terms of gaming, and it may well at one point kill the app store thanks to its browser-friendly and largely decentralized nature. But for those who wonder how to build an Instagram-style photo sharing app with HTML5, the folks behind InstaFuzz started offering a bit of a breakdown on how to do just that, using the rapidly growing tool that is HTML5.

InstaFuzz’s completion offers a lot of insight in terms of how to build a photo sharing app with HTML5, including several important details involved in the construction of the user interface. But a photo sharing app is more than just its user interface, so a further set of tools needs to be established, and HTML5 can handle many of those tools.

For instance, establishing a drag and drop system–vital for a photo sharing app in terms of ease of use–can be a comparatively simple matter. Programmers simply need to handle what’s called the "drop" event on the CANVAS element. In the programming side, once a file is dropped onto an HTML element, the "drop" event is subsequently fired on that element. That passes in what’s known as a "dataTransfer" object, containing a list of files that were dropped.

This in turn is where the File API steps in, interacting with the collected File objects from the drop events. Since the File API is a World Wide Web Consortium (W3C (NewsAlert)) specification, it’s handled much the same way across several different systems, and allows Web apps access to the files contained within the local file system, while at the same time, doing so securely. InstaFuzz, for example, uses a FileReader object to read the file contents with the readAsDataURL method, allowing the program to treat the file contents the same way it would treat, as the name implies, a data URL.

Once all of that is in place, things like adding in the effects of filters, as well as rendering images onto the canvas itself, can be brought into play, making the app a much more complete tool that’s ready for users to take pictures to and add into sharing circles for all to enjoy.

Indeed, the folks behind InstaFuzz saw right away that using HTML5 as the base for a photo-sharing app like Instagram’s allowed for a user experience with a whole lot of capability added to it. Indeed, those standard HTML5 technologies mentioned above, like Canvas and File API, are opening up a variety of new possibilities. Since most current browsers will handle these tools without incident, it makes for a nicely-sized pool of users to get involved. One outstanding issue, however, comes down to making such technologies work for older browsers, many of which are still in use today.

HTML5 is making it possible for a wide variety of apps to be generated, especially in fields like photo-sharing. Only time will tell what else will follow, but there’s definitely plenty to look forward to.

Edited by Stefania Viscusi


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More