• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development

Web Development

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

See also:
  • HTML
  • JavaScript
  • PHP
  • CSS
  • Perl and CGI Scripting

10 Ways the Mobile Web is Different

3 June 2011 / 7 Comments

10 Ways the Mobile Web is Different

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.

[Read more…] about 10 Ways the Mobile Web is Different

Object-Oriented PHP: Working with Inheritance

26 May 2011 / 2 Comments

Object-Oriented PHP: Working with Inheritance

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:

  • Object-Oriented PHP for Absolute Beginners
  • Delving Deeper into Properties and Methods

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!

[Read more…] about Object-Oriented PHP: Working with Inheritance

LESS Is More: Make Your CSS Coding Easier with LESS

18 May 2011 / 8 Comments

LESS Is More: Make Your CSS Coding Easier with LESS

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.

[Read more…] about LESS Is More: Make Your CSS Coding Easier with LESS

Cover Flow Remade with CSS and jQuery

6 May 2011 / 10 Comments

Cover Flow Remade with CSS and jQuery

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!

[Read more…] about Cover Flow Remade with CSS and jQuery

Object-Oriented PHP: Delving Deeper into Properties and Methods

29 April 2011 / 9 Comments

Object-Oriented PHP: Delving Deeper into Properties and Methods

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!

[Read more…] about Object-Oriented PHP: Delving Deeper into Properties and Methods

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

15 April 2011 / 5 Comments

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

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.

[Read more…] about IE9 Is Here! 7 Cross-Browser CSS Tricks You Can Now Use

Object-Oriented PHP for Absolute Beginners

8 April 2011 / 10 Comments

Object-Oriented PHP for Absolute Beginners

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!

[Read more…] about Object-Oriented PHP for Absolute Beginners

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

1 April 2011 / 299 Comments

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

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!

[Read more…] about How to Make a Slick Ajax Contact Form with jQuery and PHP

JSON Basics: What You Need to Know

24 March 2011 / 13 Comments

JSON Basics: What You Need to Know

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!

[Read more…] about JSON Basics: What You Need to Know

How to Make an Elegant Sliding Image Gallery with jQuery

16 March 2011 / 66 Comments

How to Make an Elegant Sliding Image Gallery with jQuery

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!

[Read more…] about How to Make an Elegant Sliding Image Gallery with jQuery

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • Interim pages omitted …
  • Go to page 17
  • Go to Next Page »

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits