Web Development

Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.

10 Ways the Mobile Web is Different

3 June 2011 / 7 Comments

As mobile web browsing becomes more common, it’s increasingly important to design websites for mobile use as well as for desktop browsing. This can mean anything from tweaking your regular site so it looks OK on Android and iOS devices, through to CSS media queries, responsive layouts, and even completely separate websites for mobile users.

The question is: How do you make a website work well on a mobile browser? It helps to start out by thinking about how the mobile browsing experience differs from desktop browsing. In this article I’ll touch on 10 important factors that make the mobile web different, and show how you can use those factors to influence your mobile site design decisions.

Object-Oriented PHP: Working with Inheritance

26 May 2011 / 2 Comments

Welcome to my third object-oriented PHP tutorial! If you haven’t already checked out the first two then you may want to take a look at those first, since this tutorial builds on the previous two:

In this article we’re going to explore the idea of inheritance in object-oriented programming, and how inheritance works in PHP. With inheritance, your objects and classes can become much more powerful and flexible, and you can save a lot of time and effort with your coding.

We’ll look at the following topics in this article:

The concept of inheritance, and why it’s so useful
How one PHP class can inherit from another
How a child class can override some of the functionality of its parent
Working with final classes and methods
Using abstract classes, and
Working with interfaces.

Ready? Let’s get started!

LESS Is More: Make Your CSS Coding Easier with LESS

18 May 2011 / 8 Comments

In recent years, CSS has matured into a very powerful way to style web pages. It’s now possible to create a website’s look almost entirely in CSS, with minimal use of images.

This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. It’s not uncommon for a typical stylesheet to run into hundreds of lines of code, with a large number of interdependent rules.

For this reason, various dynamic stylesheet languages are starting to spring up. These allow you to write your CSS rules using a more flexible, powerful language that is then turned into regular CSS for the browser to interpret.

In this article you’ll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort.

Cover Flow Remade with CSS and jQuery

6 May 2011 / 10 Comments

View Demo »

Download Code

(Requires Safari)

If you’ve used a Mac or iTunes at all, you’ve probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar, or using the arrow keys.

It’s a nice effect, but it requires a fair bit of processing power to accomplish. I thought it’d be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript. At the start I had no idea if this was even possible, but I’m pretty happy with the result!

Object-Oriented PHP: Delving Deeper into Properties and Methods

29 April 2011 / 9 Comments

Welcome to the second article in my series on object-oriented PHP programming. In the first article, we looked at the basics of OOP in PHP — including the concepts of classes, objects, properties and methods — and we saw how to create basic classes and objects in PHP.

In this article, you’re going to delve a bit deeper into properties and methods in PHP. This will give you a solid grounding when it comes to using objects in PHP, before we move on to more advanced topics such as inheritance in later articles.

These are the concepts you’ll explore in this article:

Constructors and destructors, which let your objects do specific things whenever they’re created or deleted
Static properties and methods, for creating class properties and methods that are not tied to specific objects
Class constants, which are handy for storing fixed values related to a class
Type hinting, for restricting the types of objects that can be passed to a method
The __get() and __set() magic methods for overloading property accesses
The __call() magic method for overloading method calls

All set to delve deeper into properties and methods? Great! Let’s go!

IE9 Is Here! 7 Cross-Browser CSS Tricks You Can Now Use

15 April 2011 / 5 Comments

Last month, the newest version of Microsoft’s Internet Explorer browser, IE9, hit the streets. Market share for IE9 is already growing rapidly at the expense of older versions of IE, including the much-maligned IE6.

While its CSS3 support still has some major omissions, IE9 has much better CSS3 support than previous versions of IE. This means that you, as a web designer or developer, can use some of the exciting and useful features of CSS3, safe in the knowledge that even IE users can now see the results! (Well, if they’re running IE9, of course.)

In this article we’ll explore some of these new CSS features that are, at last, supported by Internet Explorer, and show what these features can do for you as a web designer or coder.

Of course, most Internet Explorer users are still running earlier versions of IE. There’s still hope though, even for these older browsers! We’ll look at solutions and workarounds for older IE versions at the end of the article.

Object-Oriented PHP for Absolute Beginners

8 April 2011 / 10 Comments

Welcome to the first in a series of tutorials covering object-oriented programming in PHP. In this series you’ll explore the various ideas and concepts involved in object-oriented programming, and learn how to build robust object-oriented PHP applications quickly and easily.

In this tutorial, we’re going to kick things off nice and gently by looking at some really basic concepts of object-oriented programming. You’re going to learn:

What object-oriented programming is
How object-oriented programming can help you write better PHP scripts
Some fundamental concepts, including classes, objects, methods and properties, and
How to start writing object-oriented PHP code.

Ready to explore the world of PHP objects? Let’s get started!

How to Make a Slick Ajax Contact Form with jQuery and PHP

1 April 2011 / 299 Comments

View Demo »

Download Code

Contact forms can be useful way for visitors to contact the owner of a site. They’re easy to use, and since they don’t expose the site owner’s email address in the page, they cut down on spam too.

However, contact forms can also be cumbersome, especially as they’re usually on a separate page. The visitor has to visit the contact form page, fill in the details, view yet another response page, and then try to make their way back to the page they were originally reading.

Fortunately, Ajax gives us a way round this problem. By embedding the form in the page, and submitting the form data via Ajax, the user never has to leave the current page. It also provides a smoother experience for the user.

In this tutorial we’ll build a nice-looking, embedded Ajax contact form that the user can summon up by clicking a link in the page. Along the way, we’ll explore various topics, including:

HTML5 form fields
How to use fallback techniques to make the form function even if the browser has JavaScript turned off
Using CSS techniques to create attractive forms
Writing a secure form mailer using PHP
Animating page elements with jQuery, and, of course…
Using jQuery to make Ajax requests

Before you begin, check out the finished product by clicking the View Demo button above. This opens a new page with some dummy content, and a couple of “Send us an email” links. Click one of these links to display the form.

The demo doesn’t actually send an email anywhere, but the finished code in the download is fully functional. To get the code, click the Download Code button above.

Ready? Let’s get started!

JSON Basics: What You Need to Know

24 March 2011 / 13 Comments

If you’ve developed websites or web apps at all, you’ve probably heard of JSON, at least in passing. But what exactly is JSON? What can it do, and how do you use it?

In this tutorial you’ll learn the basics of JSON. You’ll look at the following topics:

What JSON does
The kinds of things JSON is used for
How to create JSON strings
A simple JSON example
How JSON compares to XML, and
How to work with JSON using both JavaScript and PHP.

Let’s get started!

How to Make an Elegant Sliding Image Gallery with jQuery

16 March 2011 / 66 Comments

View Demo »

Download Code

There are a lot of jQuery image galleries out there, some of which are quite lovely (Galleria springs to mind). However, I’ve yet to discover a really nice-looking, full-window sliding image gallery that is simple and elegant, and that also shows off the photos to good effect. So I decided to write one!

To see what it looks like, click the View Demo button above. It looks best on WebKit browsers such as Safari and Chrome, but other modern browsers should work well too.

For best results, make your browser full-screen. Google Chrome gives the most immersive experience here — view the demo, then choose View > Enter Full Screen.

The gallery is simple to use. Click the left or right edge of the window to move around the pictures (or use the left and right arrow keys on your keyboard). Hover over the main image to view its caption.

I’ve also made the gallery work reasonably well on touch devices such as iPhones and iPads by adding touch and swipe events. (I haven’t yet tested these on the Android browser so your mileage may vary there. Watch this space!)

So how do you make this gallery? In this tutorial I’ll walk you through the process step-by-step, from creating the markup and CSS through to writing the JavaScript code to make the gallery function. If you’d rather just grab the code and get going, click the Download Code button above.

If you like this gallery, please feel free to use the code in your own websites and projects. It’s Creative Commons licensed.

Ready? Let’s get started!

Web Development

Footer

Contact Matt

Follow Matt