HTML posts

Implementing Drop-Down Menus with CSS3

CSS3 allows developers to implement a variety of visual and interactive functions most of us would previously have turned to JavaScript for. In this tutorial we will implement a drop-down menu, with background images featuring a gradient and rounded corners, all defined purely in CSS3 code. Our list will be structured using embedded lists in the HTML code, with top-level menu options appearing above their sub-menus, which we will display when users hover the mouse over the top level item. Here is...

PHP Ad Tracker: Listing Ad Banners and Clients

In our last session, we finished writing the PHP class file that would control all the ad banner functions.  This week, we look at the presentation layer for the administration of these functions. The ads_list.php page lists the current banner ads.  First, we must include the class file so that the page can instantiate the class call the functions: <?php require_once("class.ads.php"); // instantiate ads class $oAds = new ads; Next, we fill the $aAds array with the data from the ads table and get...

Parallax Scrolling: An Introduction

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 Simple Way to Add Free News Content to Your Website

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....

Implementing Drag and Drop Functions with HTML5 and JavaScript

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...

5 Best Practices Before Deploying a Rails App

Starting out as a newb in anything is always tough because you never really know what "the right" way to do things are. If you are anything like me, you can easily hack your way through things and get them to work, but are always afraid that you are missing something.  Well, I've come up with my own list of best practices before I deploy a Rails application to the public. Some of these best practices are, of course, universal to any web application development effort, so I won't go deep into them - but at least...

Pushing Updates to the Web Page with HTML5 Server-Sent Events

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...

Using Backgrounds in CSS3

With CSS3, developers and designers can utilize an enhanced range of options for Web page backgrounds. New options include the ability to use multiple background images, to specify size properties for background images, and to define background origin and clipping in terms of the CSS box model. In this tutorial we will work through various options using these new techniques, demonstrating the CSS syntax for each one. Create a Page ... Create a Web page with a single element and an area for your CSS declarations...

Embed Analytics Using the Google Analtyics API

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...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns