The Web Platform: Browser technologies. The developer’s guide to the HTML5 APIs. Net magazine is the number one choice for the professional web designer and developer. It’s here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front- and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice. In short, If you're serious about web design and development, then net is the magazine for you.
Editorial Advertising. 5 More HTML5 APIs You Didn’t Know Existed. The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a step in the right direction. I recently shared with you 5 HTML5 APIs You Didn’t Know Existed in the hope that some of them would inspire you to improve your own web apps. I'd like to share with you 5 more lessor known HTML5 APIs -- hopefully you find some of them useful! Fullscreen API The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval: Any element can be pushed to fullscreen, and there's even a CSS pseudo-class to allow some control over the screen while in fullscreen mode.
Page Visibility API var hidden, state, visibilityChange; if (typeof document.hidden ! GetUserMedia API Battery API Link Prefetching There's five more HTML5 APIs to research and tinker with. Top 100 Canvas Demos. HTML5 Canvas Tutorials. CAKE - Canvas Animation Kit Experiment. Canvas From Scratch: Introducing Canvas. This is the first article in a series that will bring you up to speed with HTML5 canvas, the plugin-less drawing functionality built into modern browsers. In this introductory article, I'll show you how to access the canvas element, draw shapes, change colours, and erase things. It's a whistle-stop tour of the basics of this amazing new Web technology.
Prefer a Video Tutorial? The series will be an exciting ride, and one that I hope you enjoy. I'm assuming that you're already comfortable with JavaScript, but have little to no experience with canvas. Even if you're new to JavaScript, don't fret, as you'll still learn something from these articles. Introducing the Canvas Element Using the canvas element is dead easy. When you think of canvas, you probably think about the new HTML5 canvas element. Using the canvas element is dead easy; it's one simple HTML tag, with a defined width and height. This doesn't do much yet. Browser support Browser support for canvas is pretty amazing. Simple. How to Make All Browsers Render HTML5 Mark-up Correctly - Even IE6. HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we'll create a common layout using some of HTML 5's new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer.
Yes, even IE 6. Tutorial Details Technology: HTMLVersion: 5Difficulty: IntermediateEstimated Completion Time: 1 hour Prefer a Video Tutorial? The HTML 5 Working Draft provides a new set of semantically-meaningful elements for describing a typical web page layout. The HTML 5 elements we'll be using are: headerfooternavarticlehgroup Just by reading the names of the elements, you should get a pretty good idea of what they're for, and that's the point! The one element that may not be obvious is <hgroup>. Step 1: The HTML We're going to recreate the most common layout on the Web, the 2-column layout: