Monday, 15 July 2013

Website Slideshows - Which is the best approach?

Image slideshows have been around for a long time on websites. You're probably so used to seeing them now that you don't even realise when you're looking at one. There are two main ways that they're used on websites: to create movement in a header graphic; to allow the site visitor to scroll through a selection of images in a gallery in an interactive and attractive manner. But how are these slideshows created? What technologies can we use to create them? What is the best approach?

A little history...

In the early days of the internet it was really hard to anything with moving images, and the only way to create any sort of animation was using animated gifs. These were great for vector art and cartoon style graphics, but if you wanted to create something like a high quality photographic header you were going to have to put up with a lot of quality loss. Although Java was around it wasn't widely used and being a full Object Oriented (OO) Programming language was aimed at providing web based applications for 'dumb terminals' to operate network based functions. Out of Java was born JavaScript, which was a lightweight complementary OO language that Netscape released in the mid-90s. With this it was possible to start using lightweight client-server programming to add functionality to web pages, and aimed at nonprofessional programmers was soon used to create web pages that would allow you to make calculations, verify that form fields had been filled etc. It wasn't long before people started to realise that you could manipulate pretty much every part of the web page using JavaScript and they started to write scripts that would allow a set of images to be cycled through, changing the photo at a set interval. At the same time a little known program called SmartSketch was allowing users to create cell animation and vector graphics - the developing company was bought by Macromedia and Flash was born. 

Now there were two alternatives to the standard animated gif. JavaScript became a natively supported language in all web browsers which meant that any scripts would be accessible without the installation of any additional programmes. Flash, however, required the installation of either the Flash player or the Shockwave player in order for the animations to be viewed. As Flash and Shockwave became synonymous with games this became less of an issue over the ensuing years and the easy ability to add controls to a Flash animation made it the go-to option for most developers wishing to create image slideshows of any type.

Where do we stand today?

Many developers started to phase out the use of Flash for slideshows over the last few years for a number of reasons - though the main one for me was the lack of compatibility with Screen Reader software and therefore the potential problems that using Flash could cause in terms of the Disability Discrimination Act (DDA) and an awareness that not all home users were confident enough to install the Flash player - many users being wary of installing add-ons to their browsers due to fear of hacking and malicious software.

Over time the HTML standards changed, CSS was introduced, and the options developers had available to them in terms of placement of items on a web page improved sufficiently that slideshow controls could easily be added to a page and the images could all be loaded when the page loaded but just shown or hidden on command - rather than having to load images when needed, which could be a slow process on a narrowband connection. With this in mind a lot of developers went back to JavaScript. 

Today there is a new kid on the block, JQuery. It's been around since 2006, but has really only become commonplace in the last 2 or 3 years. JQuery is a cross-browser JavaScript library that is designed to simplify client-side scripting on websites. It's free, it's open source and the developer can simply call the libraries from various repositories on the internet, freeing up space on their own servers and ensuring that any code updates are automatically applied, closing any bugs and loopholes that may appear over time and allowing quick access to the latest tools.

Most slideshows in use on the Internet today are now powered by JQuery. There is a huge resource of code samples, free downloads and help available online making it one of the quickest and easiest technologies to work with. Being a JavaScript library it uses common JavaScript technology and so is readily available to all browsers on all platforms, unlike Flash which is not available on any Apple mobile device - a move which further fueled the move away from Flash for many web developers. As a JavaScript library much of the implementation code is quick and easy to write, although it may be a little more complex to adapt a freely available JQuery script to your specific needs if it isn't a perfect match. 

Today we favour the JQuery approach as it allows us to quickly create attractive slideshows and be sure that they will work on all devices and all browsers. Working with JQuery also means that we can combine effects, for example adding a hover maginfier to a slideshow on a brochure websites.

Monday, 8 July 2013

Working with HTML5 video

HTML5 video has been around for a while now, but it can still be a problem to work with when trying to achieve cross-browser compatibility. In this blog post I hope to help you add HTML5 video to your sites with the minimum of effort.

There are a lot of different HTML5 video formats that are supported by the various browsers out there, and in some cases your users may still be working with older versions of Internet Explorer which doesn't support any HTML5. Despite this my findings have been that you don't need to provide all of those versions as many browsers will happily work with multiple HTML5 video formats.

In order to provide both HTML5 video and a fallback for older browsers to Flash you will need to create the following video files: mp4, webm and FLV or SWF. But, a word of warning before you start encoding. The mp4 video must be created in a very specific way in order to be compatible with Internet Explorer 9 and 10.

When I work with video I now use Free Studio Manager from DVDVideoSoft. This piece of free software will allow you to convert video into multiple formats suitable for all types of devices - DVD, Mobile, YouTube etc. I use the DVD & Video option to convert videos. For your webm video, which will play on Firefox, Opera and Chrome, make sure that you use the webm container with VP8 video and Vorbis audio options. For mp4 video, which will play on all browsers with the exception of Opera, you will need to be careful to make sure that you use the mp4 container with H.264 video and mp3 audio. You may find that you need to create a new preset for this format. It is important that you use these options only as any others will not play in Internet Explorer.

Once your video files have been created, including your Flash fallback, you can place them on your webpage. Again, you need to use a specific order for your HTML code - place the webm first, then the mp4 and finally the Flash.

Sample code:
<video controls width="510">
<source src="assets/videos/html5video.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- if Safari/Chrome--> 
<source src="assets/videos/html5video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. --> 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="510" height="328" id="flashvideo" align="middle">
<param name="movie" value="flashvideo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flashvideo.swf" width="510" height="328">
<param name="movie" value="flashvideo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
You should now have a fully functioning HTML5 video page that will automatically display the correct video format for the user's browser.

Monday, 1 July 2013

PrettyPhoto: How to make your captions use HTML formatting…

A PrettyPhoto gallery image using HTML styled caption

…without messing up the tooltips

I’ve been using PrettyPhoto for a while now, as it’s a nice and neat Lightbox effect for image galleries written in jQuery. It creates an overlay on the screen displaying the full size image from a thumbnail with navigation through related images. It’s always been possible to add captions to these large images, but with the last couple of versions there has been support for using HTML formatting tags to make the captions more attractive. Unfortunately the drawback of this is that the HTML is then displayed in plain text within the Tooltip when you hover over an image which is in a PrettyPhoto gallery. There is lots of information online about fixing this, but none of this is compatible with the current version of PrettyPhoto (v 3.1.5), so I decided to use the old fix as a basis for creating a way to pretty up the captions in the latest version.

Open the jquery.prettyPhoto.js file from your site and locate the line that contains the following code:
pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("title")?e(t).attr("title"):""}):e.makeArray(e(this).attr("title"));
This tells the jQuery code to display the contents of the “title” tag of the image as the caption. This means that if you place HTML formatting code into the “title” tag of an image it will then appear fully formatted in the caption of the relevant PrettyPhoto gallery. However, the “title” tag is also used by browsers to display a description of the photo as a Tooltip when you hover over an image on the page. If you have added any HTML code here it will not be rendered by the browser as anything but text e.g.<h2>Heading</h2><p>Caption here.</p> will display formatted in the PrettyPhoto gallery, but exactly as written in the tooltip.

So, if we change the above line to use “alt” instead of “title” we can place plain text in the “title” attribute of our image to display as a tooltip, but place HTML formatted text in the “alt” attribute to allow PrettyPhoto to display a nicely formatted caption under our image in the gallery.

The new line will look like this:
pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("alt")?e(t).attr("alt"):""}):e.makeArray(e(this).attr("alt"));
 And your image code will then look like this:
<ul class="gallery clearfix">
<a href="assets/large/photo-name.jpg" rel="prettyPhoto[galleryname]" title="This is a caption. This caption has no formatting for the title tag, used as a tooltip in the browser.” alt="<h2> This is a caption. </h2> This caption has no formatting for the title tag, used as a tooltip in the browser."><img src="assets/photo-name.jpg" alt="" /></a>
</ul>