The Developer’s Guide to HTML5 Canvas. Undoubtedly, the canvas element in HTML5 is the biggest feature that developers will want to use to develop truly rich web applications without needing to install browser plug-ins like Adobe's Flash player.
IE9 was born at a time when client richness is at the forefront of developers' minds. Modern browsers like Chrome, Firefox, and Internet Explorer 9 and 10 all support it. But what exactly is the canvas element in HTML5? How can you use it to create rich web applications? If you're unfamiliar with HTML5, before diving into this article, try learning more here. What's the Canvas Element For? Officially a canvas is "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly". The code above will render a canvas in the browser, but because the canvas is empty, you won’t see anything.
Figure 1. Not very exciting just yet, but this will change the further you read on! Create an interactive bubble chart with HTML5 canvas. Building Mobile Apps with HTML and a Local Database. After my recent post, Crafting Native Looking iOS Apps with HTML, a number of you asked for an offline version that would use a Local Database (instead of the simple in-memory store) and provide a mechanism to automatically keep the local database in sync with a server database.
I’ll save automatic data synchronization strategies for a future post, but here is the first step: an “offline” version of the application that uses the device’s or the browser’s local database as its data provider. This version still uses Backbone.js as its architectural framework. Backbone.js makes it easy to change its default data access mechanism (which assumes RESTful services). You just replace the default Backbone.sync implementation and provide your own data access logic: in this case, some local SQL logic. Web SQL vs IndexedDB As you probably know, there have been two competing database APIs for HTML. Firefox and IE don’t support Web SQL. Code Highlights Source Code. Learn HTML5 in 5 Minutes! I’ll cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use HTML5 with older browsers.
Might be a bit more than five minutes, but I promise I’ll keep it quick. Stick with me ... it’ll be worth it! Semantic Markup and Page Layout There’s a great story about a university who, when building their campus, didn’t create any walking paths. They just planted grass and waited. A year later, the grass was all worn out where people walked most frequently. It makes perfect sense! The HTML5 new semantic elements were based on that exact same logic (see the W3C design guidance to “Pave the Cowpaths”). Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Developers commonly use IDs and/or class names with these <div> tags. In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers.
How to build hybrid mobile apps combining native UI components with HTML5. Last week we showed a screencast of Trigger.io Forge in action, this week we’ll explain how you can use a native top bar and native tab bar along with your HTML / CSS and JavaScript in a hybrid app created with Trigger.io.
We’ll add more native UI components in the future, but here’s how you can get started creating a beautiful, responsive mobile apps for iOS and Android using just web technologies. These are screenshots of a simple recipe app that we created using the Trigger.io Forge native UI components, and we’ll explain how we built it. Along the way we’ll show you how to: Configure Trigger.io Forge to add native top bar and tab bar elements to your appStyle the native elementsAdd listeners to and control the native elements from JavaScript. Create Quick HTML5 Presentations with Punch. HTML5 presentations are cool and convenient.
They just work in the browser and thanks to CSS3 & JavaScript they can be made to look even better than the traditional slides. It's easy to link to individual slides. Also, demos (if you're showing something related to web technologies) can done on the slides itself. There are already couple of good frameworks such as Google's HTML5Slides, deck.js and impress.js to create HTML5 presentations. However, in all above frameworks, you have to define the slides as HTML blocks (usually wrapped inside a div or a section).
I felt the same while creating the presentation on Punch, which I recently presented at RefreshColombo. This is what I did. Then I saved the HTML page for slides as a Mustache template. ... Finally, I ran punch command to generate the following HTML5 Presentation - I have created a simple bootstrapper, by extracting the common slide formats from my presentation, which you can use straight away. The source is available in GitHub. Maqetta. Learn HTML5 in 5 Minutes! Google, Microsoft and Netflix want DRM-like encryption in HTML5.