Lots of excitement surrounds HTML5's native audio element. It promises cross browser standardized support for playing audio clips embedded directly in our web pages. With this new element, gone are the days of including a third party plug-in like Flash, QuickTime, or Silverlight. Of course, we're not quite there yet. Currently, the <audio> element is supported in these browsers: iOS 4+, Android 2.3+, Opera Mobile 11+, and As web developers, we must be careful to include fallback support...
Custom attributes are among the most significant additions for HTML5, and can play a major role in semantic Web development. In this tutorial we'll go through a practical example of creating and accessing HTML5 custom data attributes, including the necessary JavaScript functions. It was possible before HTML5 to add your own attributes to HTML elements and access them using JavaScript, but if you've ever tried it you'll know you can forget about getting your markup to validate. HTML5 provides the...
Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling. Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol. Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect. Why am I talking about retro video games on a web development site? Well, the simple...
A challenge that many website owners face is how to supply continuously fresh content for new and repeat visitors to peruse. It can be a very time-consuming task to manually upload regular updates. Fortunately, there is an easy way to showcase free, readily available news content on a wide variety of topics. We will examine a quick and effective method of incorporating RSS (Really Simple Syndication) coding in order to add news content to any site. First, let’s look at what RSS is, and how it works....
The HTML5 Server-Sent event model allows you to push realtime data updates from the server to the browser. In this tutorial we will work through the process, with the EventSource object handling received data and writing it to the page. We will use HTML5 and JavaScript at client side, with PHP at server side. With existing models such as AJAX, the code in a Web page would continually ask the server to supply new data, but the onus was on the client to request the information. With Server-Sent requests, you...
HTML5 offers lots of significant advantages to developers, but browser support is still pretty low. There's no reason not to start inserting HTML5 functions into sites now, as long as you take the necessary steps to check for browser support and provide alternative content for everyone else. In this tutorial we'll go over the basics of using HTML5 and JavaScript to exploit the enhanced storage facilities on offer. With HTML5 you can store more data - and store it more efficiently. The two main data storage...
We’re going to wrap up our tutorial on how to develop a responsive website this week by making our secondary page, well, responsive. We created our large layout for the page in our last tutorial, but now we want to make it fluid so that it will display nicely across various platforms, ranging from tablets and mobile devices to PC’s. Let’s take a quick peak at what we’re working towards. Notice how once we hit the skinnier, mobile version of the site we go to a more vertical layout. This makes it...
Geolocation is one of the most exciting features offered by HTML5. Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API. As with all HTML5 functions, you cannot yet rely on browser support. Where browser...