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...
Google Analtyics gives so much data that sometimes it becomes hard to digest. For larger sites it is easy to become so overwhelmed that you can't find the time to look up the analtyics for each page. Or maybe you have many editors for a site who don't have access to your Google Analtyics account and you want to provide them with data so they can see how well their pages are performing. With the Google Analytics API we can easily display some basic analytics right in each page. Google offers many libraries...
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...
There are many JavaScript frameworks that leverage HTML5. Paper.js is one of these frameworks that uses Document Object Model (DOM) to structure objects in an easy-to-understand manner. It offers creative and neat ways of doing lots of stuff on a Web browser that supports the <canvas> tag. It also offers a new and interesting approach to drawing vector graphics. The basic setup is shown below: <script src="js/paper.js" type="text/javascript"></script> <script src="js/main.js"...
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...
We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer. In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well. In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work. If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick...
In the last post, Creating and Manipulating Modal Popups, I discussed what the JavaScript method showModalDialog is used for and how to implement it in your website. Part two of this topic will focus on using popups to manipulate data and pass information from the child page back to the parent. User Experience ... Manipulating data in the popup window can be tricky, because modal windows do not function like normal ones. In a normal window, when your page does a postback, the postback is rendered...