The development of new web technologies is one of the reasons programming is such an exciting field. There are few things more pleasing than getting your hands on cutting-edge technology, and bending it to your purposes. New technology turns every day into Christmas for developers, and the gifts just keep getting better and better. This piece will discuss some of the technology that has been released to the programming community, and give some indication of the ways these breakthroughs are being used in the industry. Most of these are already available for commercial and private use, and they are definitely worth keeping an eye on in the coming year.
getUserMedia
There are many APIs out today that are mistakenly labeled “HTML5”. This is not the case with getUserMedia. It began its life as a HTML5 device, but was later renamed and hived off to W3C’s WebRTC suite of specifications. The getUserMedia technology, or gUM, gives access to a user’s microphone and camera. As a part of the WebRTC suite of specifications, gUM enables peer-to-peer-in-browser video conferencing. The fact that gUM has other uses means it has been separated from the rest of the suite.
In Opera 12 final for Android, Opera Desktop, and Google Chrome Canary camera access was successfully implemented. Opera and Chrome do not yet have microphone access as the specification is still being worked on, but there is a JavaScript snippet called The gUM Shield addresses this issue. When video is streaming from the device, it can be made into the source of a video element, and positioned off-screen if necessary. It can then be copied to canvas and manipulated as required by the user. There are also tools available that allow the gUM data to be copied into other formats for easier manipulation.
Giving web applications the very same functionality as native applications is the primary mission of gUM, and it goes a long way toward accomplishing this lofty goal. Functionality is the real key in any new technology, and as functionality grows in production browsers, there will be an incredible amount of web-based QR code-readers and augmented reality apps developed.
SVG
Scalable Vector Graphics are nothing new in the development industry. They have been around for quite some time in Chrome, Firefox, Opera, and Safari. It was not until Internet Explorer began supporting it in IE9 that SVG became fully realized. Sadly, by this time it was largely overshadowed by HTML5 even though they are, at heart, different tools for different tasks.
Canvas 2D is an excellent tool for quickly adding graphics to a given screen, but all you can do is paint the graphics. There is no record of what is where, or what is layered above or below as is found in Photoshop or similar tools. All records of these layers must be kept in a separate JavaScript code. With no DOM in memory, this technology is superfast, and works wonders in video games requiring speed for proper performance.
SVG is an excellent tool when a DOM is required due to its ability to allow users to move and animate objects independently with JavaScript. Since shapes and paths are described via markup, they can be styled with CSS. Text remains text in SVG, unlike canvas where it is turned into pixels, and is mash-uppable, accessible, and indexable. This is excellent for modifying text, but the real standout feature of SVG is that its vector based. Illustrations, graphs, and user interface icons are just as clear on a large screen TV as they will on a mobile device. This is of the upmost importance in this Internet-everywhere age. SVG even allows for the inclusion of Media Queries. This gives the response time necessary to keep nuances of shading and detail when size is reduced.
SVG has garnered support from all the latest browsers. It has great mobile support on all platforms with the lone exception of versions of Android older than 3.0. There are many online tutorials and articles available that go into much greater detail when discussing SVG and how it may be used. That is a bonus for all of the newbie developers who may not have had any exposure to SVG. It would be a great benefit to anyone starting out with SVG to take the time to visit these sites, and get acquainted with all the ins and outs of this tool.
WebGL
Web-based Graphics Library, or WebGL, is managed by the Khronos Group. It is used, in tandem with HTML5, to produce 3D graphics. WebGL is notoriously difficult to learn and master due to the fact that it is extremely low-level. It runs on graphics processing units, and is actually a JavaScript port of OpenGL. OpenGL is a long-established set of APIs used by game developers. These developers are the target market for this tool, so WebGL is expected to replace OpenGL in game development.
The difficulty in learning WebGL is a major hurdle for many users, but there are resources available to help with this learning curve. WebGL is not just for game developers either. There have been music videos, excellent graphics, and professional visualizations created with WebGL. Here are some excellent resources to use:
- Raw WebGL 101
- Learning WebGL
- WebGL 101
WebGL can be found on almost all browsers, excluding IE10, and is equally prevalent on mobile operating systems as well. It has been excluded from Internet Explorer 10 due to Microsoft’s refusal to support it. This is an internal decision made by Microsoft, and should not be interpreted as a failure of WebGL.
File APIs
File APIs give JavaScript access to files on a local system. FileReader is the most commonly used API, and is available in IE10, Chrome, Opera, and Firefox platform preview. It provides an API for representing objects in applications, selecting them, and accessing their data. It is possible to upload files into a browser and discern information such as name, size, and file type without having to query the server. The files can also be opened and manipulated. This amplifies interaction in browser-based applications making them more like desktop applications.
Traditional image upload dialogue is great, but it can be upgraded by allowing dragging and dropping into the browser rather than navigating through the specific file system. This allows the user to start with a normal file and progressively add enhancements. If the user detects for HTML5 drag and drop support, and locates it, they can replace the input with a drag target for the image. Now when an image is dragged into the target area the FilReader API shows a thumbnail of the image. There are also specifications for writing and manipulating file systems, but, as of today, these are not currently usable due to cross-browser insufficiency. Here are some resources that may be of use:
- The W3C File API
- Exploring the FileSystem API
Final Thoughts
The technologies described here are only a small sampling of what is available to users in 2013. These tools represent the cutting-edge of web technology, but in a field that changes as fast as this it is only reasonable to assume that the next great tool is already coming down the pipeline. That is just one of the things that make technology so exciting to work with. There is never a dull moment, or a penultimate tool. Things change. Adaptation and enthusiasm are the still the best tools we humans have.
Blog – Lift Conversions – Brand Spanking New Web Technologies by Spencer Wade
