In this example, I will show you how to use the jQuery cycle plugin in order to make a simple slideshow with parameters controlling speed and fade in/out. With this basic technique completed, you can expand your site quickly and conveniently.
Figure 1 shows a screenshot of a webpage running the jQuery code. This builds on the previous post I submitted showing how to use the new audio element in html5. Code Listing 1 shows the actual file in its entirety. You can view an example of the result at this link:
Figure 1: A div showing one of 5 rotating images, with an audio element and html5 multimedia “trophy” logo, rendered in Safari
You can download the jQuery cycle plugin here http://jquery.malsup.com/cycle/. From that point, it’s just a matter of opening photoshop or your image editor of choice to define the size and name of each image in the slideshow.
Browsers such as internet explorer do not yet have the ability to parse the schema of new html5 standards. A schema is just a fancy way of saying that there is a rhyme and reason to the parts of a collection. The parts of html5 consist of elements that give meaning to search engines, browsers, and web developers. jQuery is able to overcome the limitations of the incompatibilities of browsers such as internet explorer by doing the heavy lifting for you, by inserting the correct semantic syntax from the code to the browser.
Modern browsers such as the webkit family of Mozilla Firefox, Safari, and Firefox are prepared for the future of web developers’ needs by adopting the html5 standards before the specification is approved by the World Wide Web Consortium (w3c). Luckily for us as multimedia developers, we are able to reach audiences on the web with rich media and interactive experiences to showcase our audio and video, while improving our search engine optimization (S.E.O.) in order to expand that audience.
As the web surpasses the coverage of television and radio programming, it becomes increasingly important for artists to harness the power of the internet in order to reach those who have commonalities with themselves. Collaboration through web applications like Facebook and Twitter can improve your horizontal and vertical reach. That is to say, you not only increase the number of skills learned, but also can deepen your understanding of those skills by researching techniques found on the internet and can attach your contributions to those resources, facilitating learning on a global scale.
Pictures speak a thousand words, as they say, and usually users will expect to find out why your site is interesting within a matter of seconds of visiting your site. How many of us judge music by the first few bars that we hear? Probably most of us can decide if we like a particular medium rather quickly, and on the flipside, we as Artists must keep that in mind when creating a website. The old rule applies here: less is more.
Future technologies such as CSS3 will allow you to transfer your existing Adobe Flash skills across all modern browsers, even to those that do not support Flash! Wallaby is the name of the Adobe feature that lets you change Flash to the css3 transitions that simulate Flash’s smooth, slick user experience. The good news is that html5, css3, and jQuery all go hand in hand. One technology enhances the others, and getting a firm grip on these emerging standards will put you in a good place as an Artist in this exciting new age of multimedia reborn on the web. A great tutorial to check out is Geoff Blake’s Flash CS5 101 course.
You can copy/paste the code from Code Listing 1 into your text editor of choice, and upload it to your web host to get up and running quickly with this jQuery slideshow. I use apple’s mobile me service for hosting my website, but in a future article, we’ll discuss how to create your own webhost!
I am of the opinion that a web page should be very simple for an Artist, to showcase pieces of work with a minimal investment by the viewer. In other words, there should be little up-front effort spent in experiencing the artwork that you create and post to the web. This is because the perceived quality of art forms are highly subjective to us as humans, and no 2 people may respond in the same way to a piece of art. Music is a very emotional art form, and the listener may be very particular about the type of feeling that the music portrays.
With the web becoming a social venue more and more, a simple slideshow with a little music in the background makes for a nice diversion in a busy environment, be it work or play. In fact, a section of a web page can be made visible inside another section of another web page. This is the essence of web applications, as opposed to web pages, in that there is an interchangeable capability of your content on the web, to multiply exposure and usability across many contexts. For example, a news site may be able to directly access the newest piece of your website which showcases a particular area of interest or new release.
As your understanding of how web sites behave becomes more detailed, you can start to develop more sophisticated web pages, and perhaps even produce pages for other Artists in a collective such as a net label or even a fully-fledged production company. You can then integrate your content into commerce or syndication in the digital domain. Many youtube submissions have earned hundreds of thousands of dollars just from the ad revenue placed alongside the media! Imagine how many ways your content can be accessed just by integrating it into the world wide web. It’s quite overwhelming when you really stop and think about how quickly content is redundantly distributed online.
Next time, I will explain the details of how to go about adding your content to the web, by detailing the steps I walked through in order to setup my own web server, so that you and I can create websites for friends and clients, while avoiding the substantial costs that can accumulate when hiring a company to host your website for you.
I hope that you will be able to use this jQuery slideshow technique to enhance your web pages, or just to achieve the milestone of adding your own content to the web “with your own bare hands.” The web is waiting, now...shine!