• 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 / Articles tagged: HTML5

HTML5

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

The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding

21 December 2010 / 54 Comments

The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding

Up to now, playing audio in a web browser has been a bit of a black art. Traditionally there are several ways to embed a sound in a web page — some work better than others, and many only work if you happen to be using the right browser with the right plugin.

The ubiquity of the Flash plugin has helped to a large extent, since Flash makes it easy to embed audio in a way that works with most browsers. However, this doesn’t help with browsers such as Safari on the iPhone and iPad, which don’t support Flash at all.

In short, it’s all a bit of a mess.

Fortunately, HTML5 looks set to make life easier for us developers, thanks to its audio element. This element lets you embed an audio file in a web page, as well as control playback of the sound using JavaScript. More importantly, it doesn’t require any plugin to work, and is supported by nearly all modern web browsers. (We’ll come back to browser support later!)

In this tutorial I’ll show you how to embed sounds in a page with the audio element. We’ll also take a look at how to trigger and stop the audio via JavaScript, and how to ensure our audio can play on as many web browsers as possible.

[Read more…] about The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding

Smooth Fading Image Captions with Pure CSS3

29 September 2010 / 2 Comments

Smooth Fading Image Captions with Pure CSS3

View Demo »

Download Code

CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.

One CSS3 feature that is really starting to gain traction now is transitions. CSS transitions allow you to smoothly animate an element’s CSS properties from one state to another, without using a single line of JavaScript.

Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. IE sadly doesn’t (and this includes the upcoming IE9). Fortunately, transitions usually degrade gracefully in browsers that don’t support them—instead of elements slowly moving from one state to another, they simply jump instantly between states.

In this tutorial I’ll show you how to use CSS3 transitions to create a nice fading caption effect on images. View it in action — as you hover over an image with the mouse, you’ll see its caption fade in. (Assuming you’re not using IE, of course.)

Naturally, mobile browsers with touchscreens don’t have a concept of hovering. Instead, you can tap an image to see its caption.

Along the way, we’ll also use some new HTML5 elements like figure and figcaption to create nice semantic markup.

Ready? Let’s get started!

[Read more…] about Smooth Fading Image Captions with Pure CSS3

25 Web Tech Buzzwords Demystified

9 September 2010 / 5 Comments

25 Web Tech Buzzwords Demystified

The web is a fast-moving industry, and it seems as if a new web technology buzzword emerges every time you blink. From Ajax to WOFF, the array of buzzwords — and the technologies behind them — can be quite bewildering at times.

How are you, dear web developer, to keep up with it all?!

In this article I list 25 key web buzzwords that every modern web developer should understand. For each buzzword, I explain its meaning, talk about why the technology is useful, and include a few links for further reading.

Enjoy!

[Read more…] about 25 Web Tech Buzzwords Demystified

Banish JavaScript in Web Forms with HTML5

3 September 2010 / 4 Comments

Banish JavaScript in Web Forms with HTML5

View Demo »

Download Code

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it’s not without its problems:

  • Not all browsers have JavaScript enabled, or can even run JavaScript.
  • Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form’s unique quirks and foibles in order to use it.
  • Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there’s a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we’ll see later in the tutorial. Sure, this does mean we’re not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I’m going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It’s an online order form for an imaginary software company.

You can play with the form now by trying out the demo. Fill in a couple of fields, then click “Place Your Order” to see the validation kick in. Try clicking the “Expiry date” field and see what happens.

Ready to code it? Let’s get started!

[Read more…] about Banish JavaScript in Web Forms with HTML5

Create Smooth Rotatable Images with CSS3 and jQuery

25 August 2010 / 19 Comments

Create Smooth Rotatable Images with CSS3 and jQuery
View Demo »

Download Code

With the advent of CSS3 transforms, we can do some nice tricks with elements in a web page, including rotation, scaling, and skewing. Once we start throwing jQuery into the mix too, we can start doing some really nice tricks!

In this tutorial I’ll show how you can use CSS3 transforms, along with some jQuery, to add smoothly rotatable photos to a web page. You can try it out right now by clicking the “View Demo” button above. Hold down Shift, then click and drag on a photo to rotate it.

I’ve based the code on this photo light table tutorial that I wrote a couple of months ago. In that tutorial, you could drag photos around the table, and click a photo to view it in a lightbox. Now, with this latest addition, you can also Shift-drag a photo to rotate it smoothly about its centre. Nice!

I should point out that this tutorial won’t work in IE at all, since IE (as of version 8) doesn’t support CSS transforms. I suspect it might work in IE9, although I don’t have it to test with. It also won’t work in touchscreen mobile browsers (yet) due to the lack of a Shift key!

Here’s how to code this baby up. Bear in mind that we’re starting with the script from the last tutorial, so if you want to follow along then you can download that code and work from it.

[Read more…] about Create Smooth Rotatable Images with CSS3 and jQuery

A Snazzy Animated Pie Chart with HTML5 and jQuery

11 August 2010 / 84 Comments

A Snazzy Animated Pie Chart with HTML5 and jQuery
View Demo »
Download Code

In this tutorial I’m going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Not that long ago, this kind of thing was only practical to do with Flash. Now, thanks to advances such as the HTML5 canvas element, we can create pretty nifty animated effects using nothing but JavaScript, CSS, and a small sprinkling of maths!

[Read more…] about A Snazzy Animated Pie Chart with HTML5 and jQuery

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery
View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

  • A wooden table background image for the photos to sit on
  • Each photo “floats” onto the table as it loads
  • Each photo is given a random position and orientation to create a “scattered” effect
  • The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
  • Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

[Read more…] about Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

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