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...
With HTML5 and JavaScript, you can implement native drag and drop functions within the Web browser. This is one of the emerging HTML5 tools that promises to make websites more interactive without relying on additional technologies such as Flash. In this tutorial we will create a simple page with images the user can drag and drop into designated areas. Create an HTML5 Web Page ... Create an HTML file for your drag and drop function. Use the following basic outline, with sections for JavaScript and CSS...
This week we're going to finish up the portfolio slider on our homepage that we have already started. At this point, if you view your index.php file and scroll down to the secondary screen it should look something like this. We’re close, all we have to do now is plug in our jQuery elements and then add some CSS to make our secondary portfolio slider screen responsive. Go ahead and download the Java files you'll need from here, keep the js directory in your root folder and check out what out the image below...
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...
We’re going to begin to wrap up our tutorial on creating a responsive website this week by creating a secondary services page to feature the necessary, and important, content of our site. Keeping a sites layout visually appealing is a crucial aspect of keeping a visitor on your site. Having a simple box filled with verbiage running from left to right is not very inviting, nor aesthetically pleasing. When displayed like that, the sheer amount of text could be enough to cause your visitor to quickly...