Welcome to the second part of the IndexedDB article. Raymond Camden strongly recommends reading the first article in this series, as he’ll be assuming you are familiar with all the concepts covered so far. In this article, we’re going to wrap up the CRUD aspects we didn’t finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.
One of the more interesting developments in web standards lately is the Indexed Database (IndexedDB for short) specification. For a fun time you can read the spec yourself. In this tutorial Raymond Camden will be explaining this feature and hopefully giving you some inspiration to use this powerful feature yourself.
Much has been written recently in the ongoing debate between native and HTML5 applications. There are three principal ways to develop a mobile solution: native code, hybrid mobile app, mobile Web app. Developing an application in HTML5 is a way to leverage code across multiple platforms, rather than having to write the entire application from scratch for each platform. As such, much of the user interface, perhaps the entire interface, would be done in HTML.
Jake Rocheleau is going to look at building a simple HTML5 and CSS3 threaded comments layout. He won’t be using any jQuery effects on the comment blocks (although it is possible to extend this functionality). He will look into structuring the HTML5 document and how to position elements using CSS. From this base template it should be easy for developers to pick up their own customizations and implement a threaded comment block into any website layout.
Before HTML5, if you wanted to implement drag and drop features in the browser you had to use libraries such as jQuery and MooTools. Now you have HTML5 Drag and Drop, which gives you the ability to drag, drop, and transfer data natively within the browser. While Drag and Drop is a new API included in HTML5, it was – amazingly – first implemented in IE5, back in 2005 when Ian Hickson worked on the HTML5 API.
Whatever you call them - blocks, boxes, areas, regions - you’ve been dividing your Web pages into visible sections for well over a decade. The problem is, you’ve never had the right tools to do so. While the interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance. Now that HTML5 has finally made sectioning elements available, many of you greet them with great reluctance.
Imagine you have a form and you want a user to input a string of text, like their name for example. You have the <input type="text" /> element, which will allow the user to type whatever he or she pleases. Imagine then that you want the user to enter his or her country of residence; you’d likely use a <select> element. This would limit the results to the options available (sometimes a good thing) and would also present the user with a potentially huge list to choose from. But what if you want the user to be free to enter what they please and at the same time being given some suggestions? This is where datalist comes in.
HTML5 has a set of elements that make page structure more accessible to assistive technologies (ATs). The <header>, <footer>, <nav>, <article>, <aside> and <section> elements make it possible for ATs such as screen readers to identify the purpose of chunks of content on the page. But a growing school of thought says that there is one element missing from this set of semantically important tags.
Prior to HTML5 we had to rely on using class or rel attributes to store little snippets of data that you could use in your websites. This sometimes led to problems and could cause conflicts between the styling and functionality of websites. The advent of HTML5 introduced a new attribute known as data. In this article Aaron Lumsden is going to be looking at some examples of how he would use this attribute as well as how it should be used correctly.