• 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

jQuery Mobile 1.1: Smoother, Faster, Nicer

16 April 2012 / Leave a Comment

jQuery Mobile 1.1: Smoother, Faster, Nicer

The latest version of jQuery Mobile, 1.1, has just hit the streets, and it has some great new features and improvements over 1.0. In this article you’ll get a quick run-down of jQuery Mobile 1.1, and all that it has to offer you as a mobile web developer.

You’ll look at:

  • Improved fixed header and footer toolbars
  • Enhancements to page transitions, and two new transition effects
  • Loading spinner and text improvements
  • Cute mini form elements
  • Nicer-looking flip switches
  • Improved sliders
  • Disabling markup enhancements and Ajax handling for entire containers, and
  • A few other minor improvements in version 1.1.

At the end of the article, you’ll also get a brief taste of the new features and widgets that are slated for the upcoming jQuery Mobile 1.2 release.

Let’s start with one of jQuery Mobile 1.1’s headline features: its vastly improved fixed header and footer toolbars.

[Read more…] about jQuery Mobile 1.1: Smoother, Faster, Nicer

Ajax with jQuery: A Beginner’s Guide

6 March 2012 / 4 Comments

Ajax with jQuery: A Beginner's Guide

Many modern websites — and practically all web apps — use a technique called Ajax to provide a smooth, fast experience for the user. From apps like Gmail and Google Maps through to JavaScript frameworks like jQuery Mobile, Ajax is a popular way to fetch data from a server in the background and update the page dynamically.

Writing Ajax JavaScript code from the ground up can be fiddly. However, many JavaScript libraries, including jQuery, have excellent high-level support for Ajax, making it easy for you to build Ajax-driven websites and apps with minimal hassle.

In this tutorial, you’ll learn the basics of making Ajax requests using jQuery. You’ll look at:

  • Exactly what Ajax is, how it works, and why it’s a good thing
  • How to make various types of Ajax requests using jQuery
  • Sending data to the server along with an Ajax request
  • Handling the Ajax response from the server, and capturing any data returned in the response
  • How to customize jQuery’s Ajax handling and change default settings, and
  • A few links to some more advanced Ajax-related info and tips.

To keep things simple, this tutorial concentrates on the JavaScript side of things, rather than delving into server-side coding. However, it’s pretty easy to write server-side scripts that work with Ajax. If you want to learn a server-side language, check out my PHP tutorials.

Ready to learn Ajax? Let’s get started!

[Read more…] about Ajax with jQuery: A Beginner’s Guide

Responsive Web Design: 5 Handy Tips

17 February 2012 / 2 Comments

Responsive Web Design: 5 Handy Tips

In my previous article Responsive Web Design Demystified, I explained the concepts behind responsive web design, and showed how to build a simple responsive layout from the ground up.

In this article, you learn five additional techniques that will help you build great responsive layouts. You’ll put each technique into practice as you build on the responsive layout created in the previous article.

Here’s what you’ll learn in this article:

  • How to hide non-essential content on smaller screens
  • Creating collapsible blocks of content to make the best use of mobile displays
  • Scaling images in proportion to the available screen width
  • How to create responsive images that are optimised for different screen sizes and network speeds, and
  • Resizing type according to browser width.

Ready? Let’s get started!

[Read more…] about Responsive Web Design: 5 Handy Tips

How to Add Article Categories to Your CMS

25 January 2012 / 68 Comments

How to Add Article Categories to Your CMS

View Demo » | Download Code

16 May 2019: This article and the code were updated for PHP7 compatibility.

Since publishing my tutorial Build a CMS in an Afternoon with PHP and MySQL, many readers have asked how to add more features to the CMS. I thought I’d answer some of these questions by writing additional tutorials that build on the original simple CMS.

In this tutorial, you’ll learn how to add article categories to the CMS. Categories give your site more flexibility: as well as listing all articles on the homepage, you can create separate section pages of your site, with each section page listing the articles belonging to a particular category.

For example, our original CMS demo lumps all types of article — news, reviews, and interviews — together on both the homepage and the archive page. By creating separate News, Reviews, and Interviews article categories in our CMS, we can then create individual archive pages for news, reviews, and interviews in our site.

You can see how this looks by clicking the View Demo link above. Notice that each article title on the homepage has a category name below it (Interviews, Reviews or News). Click a category to view its archive page, which lists all articles in that category, along with the description of the category at the top of the page.

[Read more…] about How to Add Article Categories to Your CMS

jQuery Mobile Masterclass: Build a Simple, Attractive Twitter App for iPhone

31 October 2011 / 4 Comments

jQuery Mobile Masterclass: Build a Simple, Attractive Twitter App for iPhone

View Demo »

Download Code

(Open on your iPhone or iPad!)

jQuery Mobile is a great framework for building mobile web apps, and as the 1.0 release gets nearer it’s really starting to mature into a stable platform.

In my previous jQuery Mobile article, I gave a quick overview of jQuery Mobile’s headline features. In this tutorial you’ll delve deeper into jQuery Mobile. You’ll build a simple, nice-looking, easy-to-use iPhone Twitter app called “CloseFriends” that displays your closest Twitter friends’ latest tweets.

You’ll explore the following topics as you work through the tutorial:

  • How to build a web app using just HTML, CSS and JavaScript (no server-side code).
  • Making an app that can be installed and launched from the iPhone home screen.
  • Creating rich mobile interfaces using jQuery Mobile, including page transitions, list views, buttons and dialogs.
  • Using Scott Jehl’s excellent pagination plugin to create a sequence of draggable “latest tweet” pages, much like the native iOS Weather app.
  • Tweaking the pagination plugin to create a nicer swipe experience.
  • Working with the Twitter API using JavaScript.
  • How to use HTML5 local storage to store data persistently in the browser.
  • Creating your own jQuery Mobile swatches to theme your app.
  • Working with jQuery Mobile events.
  • Adapting to different device screen sizes and orientations.
  • …and lots more!

You can try out the finished app on your iOS device by tapping the View Demo button above, and download the complete code and image files by clicking the Download Code button.

To get the most from this tutorial, it helps to have some familiarity with JavaScript, jQuery and jQuery Mobile. A great way to get up to speed quickly with jQuery Mobile is to read my comprehensive eBook, Master Mobile Web Apps with jQuery Mobile.

Ready to build the CloseFriends app? Let’s go!

[Read more…] about jQuery Mobile Masterclass: Build a Simple, Attractive Twitter App for iPhone

Responsive Web Design Demystified

30 September 2011 / 27 Comments

Responsive Web Design Demystified

Responsive web design is a hot topic these days, especially as websites need to adapt to the growing number of mobile devices with their relatively small screens. Many designers and developers want to create new websites with responsive layouts, or modify their existing sites to incorporate responsive elements.

However, the whole topic can be somewhat bewildering at first glance. Responsive design is a relatively new idea, and it is rapidly evolving. It’s full of rather confusing terms, such as responsive layouts, adaptive layouts, media queries and viewports. Where to begin?

In this article, you get a gentle introduction to the world of responsive web design. You’ll:

  • Learn exactly what responsive design is, and why it’s useful
  • Look at the difference between the terms “responsive design” and “adaptive design”
  • Take an existing fluid layout and convert it into a responsive layout that looks good on all screens, from mobile to widescreen desktop, and
  • See how media queries and the viewport meta tag can help you build responsive layouts.

Ready to explore the world of responsive design? Let’s go!

[Read more…] about Responsive Web Design Demystified

5 JavaScript Libraries You’ll Love

9 September 2011 / Leave a Comment

5 JavaScript Libraries You'll Love

When JavaScript first appeared on the scene way back in 1995, people were using it for fairly simple tasks such as form validation. These days, JavaScript has matured into a powerful language that, when coupled with HTML5 APIs like native video playback, drag-and-drop and the canvas element, allows you to build detailed, interactive user interfaces for your websites.

However, as you start to use JavaScript to build larger and larger web apps with complex data structures and rich user interfaces, it becomes clear that the JavaScript language alone is not really up to the task. Interacting directly with the DOM starts to get messy and tedious; JavaScript doesn’t have much in the way of data manipulation functions; its object model can cause headaches; and its syntax can get overly fussy.

Fortunately, some great JavaScript libraries have sprung up in recent years to make your life as a web developer much easier. In this article I’m going to focus on five fairly recent libraries and technologies that are starting to gain traction:

  • Backbone, for adding structure to large JavaScript-based web apps.
  • Underscore, a utility-belt library that adds functional programming features to JavaScript.
  • Knockout, a great way to simplify your user interfaces.
  • Sugar, which extends the JavaScript language with a wealth of useful methods.
  • CoffeeScript, a language that compiles down to JavaScript and is really nice to work with.

With each library, you’ll get an overview of what it does and how it works, and I’ve also included some useful links for finding out more information.

Ready? Let’s go!

[Read more…] about 5 JavaScript Libraries You’ll Love

MySQL for Absolute Beginners

25 August 2011 / 62 Comments

MySQL for Absolute Beginners

A database is an essential part of most websites and blogs, but setting up and using a database can be a daunting task for the beginner web developer.

In this tutorial you’ll learn — in simple terms — how to install, set up, and use a MySQL database on your computer. This will give you a good grounding in MySQL that you’ll find useful when you start developing database-driven websites using PHP, Ruby, or your language of choice.

You’ll explore the following areas in this tutorial:

  • The concept of a database, and why databases are useful
  • The advantages of using MySQL to manage your databases
  • How to install MySQL on your computer
  • Using the MySQL Monitor program to send commands to your MySQL server
  • How to create a database and table
  • SQL (Structured Query Language), and what it’s used for
  • Adding records to a table, and retrieving records from a table

Ready to start exploring MySQL? Let’s go!

[Read more…] about MySQL for Absolute Beginners

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

7 Lovely Things About HTML5 Markup

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

  • Doctypes
  • data- attributes
  • Some new and improved elements and attributes
  • More flexible linking
  • Simpler markup, and
  • Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

[Read more…] about 7 Lovely Things About HTML5 Markup

Object-Oriented PHP: Autoloading, Serializing, and Querying Objects

29 June 2011 / 9 Comments

Object-Oriented PHP: Autoloading, Serializing, and Querying Objects

Welcome to my fourth object-oriented PHP tutorial! If you missed the first three then you may want to take a look at those first, to give yourself a thorough grounding in PHP classes and objects:

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

If you’ve read all the articles up to this point then you’re already familiar with the most important concepts of object-oriented programming in PHP: classes, objects, properties, methods, and inheritance. In this final (for now, at least!) tutorial in the series, I’m going to tie up some loose ends and look at some other useful OOP-related features of PHP:

  • How to automatically load classes on demand
  • Converting objects to and from strings for easy storage and transmission, and
  • Useful ways to find out more about a given class or object.

Ready? Let’s go!

[Read more…] about Object-Oriented PHP: Autoloading, Serializing, and Querying Objects

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • 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