Articles Tagged ‘HTML5’

8 HTML5 Features You Haven’t Seen Before at #lwsdeep

This month at London Web Standards, two in-depth HTML5 talks, covering bits which aren’t in common usage at the moment, and what you can do with the bits that are. This is part one, Google’s Michael Mahemoff (@mahemoff) on 8 HTML5 features you haven’t seen before, and part two, Opera’s Patrick Lauke (@patrick_h_lauke) on <video> and <audio>. Below are my notes and write-up. Enjoy!

Sketchnotes for 8 HTML5 Features You Haven't Seen Before

Sketchnotes for 8 HTML5 Features You Haven't Seen Before

This talk focused on 8 less-commonly used features of HTML5. Whether they’re all actually part of HTML5 is up for debate, but they’re all specifications being worked on for implementation in browsers, so that’s enough.

Firstly, Michael had made his slides using HTML5, which worked really quite well, nice flashy transitions and all that and was a good example of some of the features he showed off (notably the history API) .

1. App Caching
App caching is making web sites work offline: it tells browsers which files they should keep cached and re-load when the URL is requested. Whole apps can be cached like this and the iPhone and Android make good use of this. This is not the same as…

2. Client-side Storage
Which is data storage accessed from JavaScript. You used to do this with cookies, but now you’ve got access to simple storage arrays, and WebSQL and IndexedDBs are coming. Both of these together replace services like Google Gears which was a stop-gap for this.

3. Cross Origin Resource Sharing
One big problem with AJAX is that the XHR request can’t request something on another domain. The work-around for this is JSONP which is a hack if there ever was one. CORS allows people to do this in an open way… which to me, is simply dangerous. However, it will have some uses, unlike…

4. Ping
Which, apart from being a new social network, adds a bit of header information basically pinging a web site when a link is clicked. It’s designed to replace redirects but I didn’t really understand a good use case for it. If anyone wants to explain it, please drop me a line.

5. Web Sockets
Web sockets allow for a connection to a server to be kept alive and events received, much like sockets created in any other programming language. Web sites like Facebook (for chat) and Swoopo currently use Comet for doing this and web sockets will allow them to get updates pushed to the page from the server without the ugly hacks.

6. History API
I’m looking forward to this one: it allows for JavaScript inspection and manipulation of the browser’s history stack (or array, whatever it is) without changing the URL to use the # technique. It’s going to be very powerful for making applications where you don’t change the page but lots of things change state and users use the back button a lot. I made ¬†a note that it’s quite a bit like a view state, making an ASP.NET comparison, but that’s a bit unfair.

7. Workers
Web workers enables multi-threading in JavaScript. Finally! I hear you cry. It’s not widely supported at the moment and it is about 25% slower than running the process in the main thread, but means you can do all sorts of things whilst the UI keeps updating.

8. Geo-location
Used to be done by IP with big expensive databases, but can now be done with hooks into device hardware. Useful for a load of different applications, this will be one of the most widely-used of the HTML5 APIs.

And that’s it. They’re all under-the-hood improvements, and the browser makers are making it easier to do the cool stuff, which will bring in a lot of innovative web apps as people discover the power of these new tools.

Part two of #lwsdeep can be found here

Update: here’s a picture of what’s in HTML5 and what isn’t by Bruce Lawson (Flickr)

What's in HTMl5

What's in HTML5 and What isn't, created by Bruce Lawson

The Progressive Web with Andy Hume (LWS Future)

Monday night (16th August 2010) was London Web Standards‘ ‘Web Futures’ event with presentations from Clear Left‘s Andy Hume (@andyhume) and Richard Rutter (@clagnut).

This is part covering Andy’s talk which was on “The Progressive Web”. First up, my sketchnotes.

Sketch Notes of The Progressive Web with Andy Hume

Sketch Notes of The Progressive Web, apologies to Andy Hume

The basic message of Andy’s talk is that the landscape of the web these days (note my awesome rolling hills) has changed and people should be more open to these new techniques. By designing and coding sites for today and tomorrow, you are not only reducing the amount of work you have to do now, but you’re decreasing the number of bugs, not having to re-do gradients for high-resolution displays, and you’re also making your web site faster, which is directly linked to revenue. There’s no reason not to add these things in now unless you’re designing entirely for IE6.

Andy talked extensively about @media queries, how these should be used instead of browser sniffing (read: should do feature detection) and how they can make simple websites work better across more web-enabled devices. He demonstrated the dConstruct website as a good example of this.

Andy put up two great slides, one on when you can use HTML5/CSS3 standards today, and where you should use intermediaries like jQuery. The other slide is poorly reproduced in my sketchnotes (middle-right), showing the cycle between standards, new hacks, old hacks and back to standards. This indicates a whole new era of innovation in the web now that we have these new standards.

So, a great talk by Andy. Read part two, on the future of web typography by Richard Rutter.

CSS3 Bookshelf

Using CSS3 and a little JavaScript, I’ve created a bookshelf for your blog. For a demo, go to the CSS3 bookshelf, for some more information on how it was made, read on.

Inception

A few weeks ago, Nic Price (@nicprice) and I were talking about blogs and taking a picture of his bookshelf to show what books he’s found helpful over the years. After a little consideration, and watching the CSS 3D transform demo (snow stack), I thought that this is a perfect candidate for some CSS trickery.

The sketch

One sunny morning, I drew this:

CSS3 bookshelf sketch

CSS3 bookshelf sketch

The concept is simple:

  • a definition list of title and description.
  • Style and transform thes to look like books on a shelf
  • CSS animations on hover to pull the book slightly out of the shelf
  • Move the book into the centre on click/touch, displaying the definition underneath
  • Use as many CSS3 techniques as possible

Implementation

Starting with the definition list, I set out the widths and heights required for each of the books. Initially, only the spine of the book was showing, but that didn’t look as good as a small gap. Each element is positioned using relative-absolute positioning, allowing for simple movements using the left property to center each book in the screen, instead of lots of calculations when using translateX. So, pretty standard stuff to get the books in line.

Book Styles

Each book has a css class associated with it. This allows for title position customisation and different backgrounds, widths and heights. Each book makes use of CSS3 Multiple backgrounds, allowing for different images between the book spine and the front cover. Whilst this can be done in one image with photoshop, I decided not to (potentially, the spine of the book can be removed).

Book titles

The title of each book needs to be rotated to read down the spine. Optionally, I could have put the titles into the background elements, making them more like the actual books. Unfortunately, I couldn’t find good images of the spines on the internet, and there’s more opportunity for CSS3 transforming text. So, using the -vendor-transform property, I rotated the text 90 degrees:

-webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */

However, this rotates the whole element, so a tag has to be used to target only the text. In the example there’s a few other properties to make the text line up properly, and on some books it’s overridden to allow for longer or shorter titles. In the end, it looks like this:

dl.bookshelf dt span {
	-webkit-transform: rotate(90deg); /* Rotate book title 90 degrees */
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
 
	display: block;
	position: relative;
	width: 300px; /* width is height of book */
	top:150px;
	right: 130px;
}

Animations

On hover (or focus) the book pulls itself out from the shelf and tilts slightly, adding some box shadow to give it a 3D look. This is in two parts, defining what elements will transition on the element, and then changing the values on hover. These values were gained by trial and error, with a small rotation and translation looking better than a more pronounced movement.

dl.bookshelf dt {
	height:300px; /* Default height of books */
	display: block;
	float: left;
	border:1px solid black;
	font-size: 1.5em;
	position: absolute; /* Using relative-absolute positioning */
 
	-webkit-transition-property: left, webkit-transform, webkit-box-shadow; /* transition on two properties */
	-webkit-transition-duration: 0.5s; /* take 0.5 seconds */
	-webkit-transition-timing-function:ease-in; /* Ease in */
	-webkit-transform-origin: left bottom; /* use the left, bottom of the element as the origin of transformation */
/*... see css file for full vendor property list */
}
/* Hover over or focus on a book and have it pull out of the shelf */
dl.bookshelf dt:not(.showBook):hover, dl.bookshelf dt:not(.showBook):focus {
	cursor:pointer; /* turn cursor to a hand */
 
	-webkit-transform: rotate(-5deg) translateX(-30px); /* Roate 5 degrees and pull out 30px */
	-webkit-box-shadow:#000 1px 3px 5px; /* Add a box shadow so it looks like the book has depth */
/*... see css file for full vendor property list */
}

Note the dt:not(.showBook), because we don’t want the selected book rotating when hovered over. I tried using -webkit-perspective here to make the books look a little more “3D”, but I couldn’t make it work properly. It’s a feature only available on Safari on Snow Leopard so isn’t widely used enough for my purposes.

All of those three together produces this:

CSS3 Bookshelf using animations, transforms, web fonts and multiple=

Showing the Book
Using a little JavaScript, I added a click event that added a class of “showBook” onto the <dt> and <dd> tags. This triggers an animation to move the book to the middle of the page and displays the definition below it.

The animation is pretty simple stuff, modifying the left property and the z-index, no keyframed animation. I did try more complex animations, but it didn’t add anything to the look and feel, only complicated code.

Themakes use of border radius, RGBA for its background and text-shadow to make the text stand out on the opaque background. Eachhas an Amazon affiliates link which floats to the right hand side of the definition. These together look like this:

A Book and description in CSS3, showing transform, box shadow, RGBA and text shadow

A Book and description in CSS3, showing transform, box shadow, RGBA and text shadow

The code for that looks like this:

dl.bookshelf dt.showBook {
	-webkit-transform: translateZ(10px); /* Come above all the books */
	-webkit-box-shadow:#000 10px 10px 5px;
	/* See code for other vendors */
 
	left:335px; /*(page width / 2) - (book width / 2), or thereabouts */
	z-index: 100; /* just in case the translateZ doesn't work */
	padding-left: -80px;
}
 
/* Class applied to definitions when shown */
dl.bookshelf dd.showBook {
	display:block;
	width:350px;
	position: absolute;
	top:310px;
	left:250px;
	background:rgba(0,0,0,0.8); /* RGBA background */
	padding: 10px;
	color:#fff;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px; /* Opera and MS will support border radius without prefix */
	text-shadow: #666 1px 1px;
}

Before I finish, there are a few caveats:

  • The only browsers to completely support all features are Safari for Mac, Chrome 5 and Opera 10.5
  • Firefox gets animation support in 3.7 (or above)
  • Animations aren’t smooth in Opera 10.5 until they’ve been run a few times; after that, it look fantastic.
  • Internet Explorer… let’s not go there. Some features like border radius will work in IE9. I’ve put all vendor prefixes in even if the browser doesn’t support it at this time.

Update #2: Firefox 5 is fully supported with animations. IE9 is functional and IE10 platform-preview 2 works very well

So, enjoy the CSS3 Bookshelf, I’ve enjoyed making it and it’s a good use of this new technology. I’ll make a downloadable package available in a few days, for now, take a look at the source code.

Thanks for reading.

Update: I’ve re-jigged the CSS a little to account for some more perspective. I’ve also changed the shelf as the old one was, well, hideous. New screenshot below:

CSS3 Bookshelf

 

HTML5 Coming of Age

iPad flaming chariot

If technology is driven forward by demand and hype, Apple is at the helm of a HTML5 labelled chariot rampaging through the streets. The iPad is coming and high-end newspaper and magazine publications are falling over themselves to change their sites to be used with Apple’s new flagship device.

The amount of power Apple holds is amazing. Forcing the likes of News Corp to change the way their content is published is a task that would normally be impossible for any external company. Even if you were coming at it from the inside, you would never have a hope of dropping Flash video players. There simply isn’t the business case to change something that so many man hours will have been put into, and backwards-compatability issues crop up all over the place. Yet with the onset of this new device, predicted to sell between 8 and 10 million units this year, companies have had to look to new, Apple endorsed, technologies.

This change, away from Flash, has forced the issue of HTML5 video. YouTube has HTML5 video mode, as does Vimeo, and this will soon be supported by the upcoming IE9. All of these major sites are now raising awareness of this new technology to people who wouldn’t normally know about it i.e. your manager AKA the person with the budget. Now they’re aware of the benefits of HTML5, they want to see what else it can do. If you are ever asked this question, show them HTML5demos.com or the IE9 test drive page. If they’ve got a more detailed question, go to the HTML5 Doctor or just twitter @brucel, Opera’s web evangelist.

With so much drive towards HTML5 at the moment, you can’t get away from it. With Apple as the driving force, the train will be unstoppable, though it will still be many years until you can use it in all situations; probably around the time we ditch Windows XP for good.