All Articles Web
The Future of the Web is Here: Using jQuery, HTML5 and CSS3 to Market your Music Online
Andrew Turner on Sat, June 4th | 0 comments
jQuery is a JavaScript library written by John Resig which makes it easy to make interactive web applications. jQuery has the ability to load code from other javascript files in order to create rich u

jQuery is a JavaScript library written by John Resig which makes it easy to make interactive web applications. jQuery has the ability to load code from other javascript files in order to create rich user experiences such as interactive menus, forms, animations, and user interface elements. In fact, jQuery can populate a webpage with components that you define programatically. It is a rather compact and sensible language to work with and you can use it for displaying your music and video for the web to experience.

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.  


01 - jQuery

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:

http://www.electronicmusic101.com/jqslideshow.html.

Figure 1: A div showing one of 5 rotating images, with an audio element and html5 multimedia “trophy” logo, rendered in Safari

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.


02 - HTML5 Adoption

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.


03 - Less is More

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.

Any text editor can be utilized (even notepad or text editor) to create the code necessary for making a web page with multimedia content. As Code Listing 1 suggests, a series of images are loaded and displayed via the browser, with defined dimensions and various other parameters. There are virtually unlimited possibilities for presenting your content on the web, but those options can be organized into three main technologies: css, javascript, and html.  jQuery falls into the JavaScript category, which is mostly used to outline the flow of control of webpages. In other words, the order in which the pieces of a website appear, and the location on the page of those elements are choreographed by your JavaScript code.  

Notice in Code Listing 1 (Code Listing 1 Download) that img_1.jpg is a certain size. This must match the actual dimension of the image, so that code should be updated per your image’s size, of course. In fact, many JavaScript libraries are like this, they contain the main routines for making your webpage behave a certain way, but leave a few parameters that you can customize to suit your individual creative needs.


04 - The Future of the Web

Even though becoming intimately familiar with JavaScript would yield a lifetime of productive work in the web design field, you may only need to understand a small subset of JavaScript to utilize its potential.  That subset, in this case, is jQuery.

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!


05 - Page Structure

For beginner developers, it is important to understand that a webpage only works if the images, javascript, and other files are in the correct folders. All of the html files should be in the root directory, that is to say, the directory that contains all the others.  All of the image files are usually stored in a folder within the root directory called “images” or “img”.  All of the JavaScript files are stores in a folder called “js”, and all the cascading style sheet files (css) are stored in, quite obviously, “css”. This way, the html code will refer to the right places when pulling in resources like a javascript file or an image file. The beauty of using jQuery is that it leverages the JavaScript files that you can download in the form of plugins like cycle.js, and have a web page that features appealing behavior with only a slight modification in the original JavaScript files, in addition to adding a little code to your html files that represents the jQuery syntax itself.  

The main structure of a webpage, in a nutshell, is a head and a body, wrapped in an html container. In the head section, you can insert javascript and css code directly, and in the body you define the visible and audible media, such as images, video, and audio of various formats.  


06 - The Social Aspect

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.


07 - Taking it Further

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!


Download Code Listing 1 Here.

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: