WD-3 - Class 01 - 2011

Subject WD-3 - Web Design 3
Competencies

CUFDIG505A.1 - Design Information Architecture (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/WD3
                         (username & password = student)

 

Introduction to WD-3

Today we will be covering the following topics:

 

Assessment Tasks

See the detailed Assessment Task documents for details - we will be discussing this in class so ask questions if you are unsure of anything.

 

Introduction to jQuery

WHAT IS JQUERY?
jQuery is a free, open-source JavaScript library. It is designed to simplify the task of adding JavaScript functionality to your web pages. It's stored in an external .js file which you can link your HTML page to.

Just store the following in the head element, like a normal .js file:

<script type="text/javascript" src="jquery.js"></script>

jQuery works with all modern browsers, and removes browser specific features. This is great because it allows you to concentrate more on the design of your site rather than wasting time getting it working across all browsers. The library is also extensible, so you can download plug-ins from the jQuery website (http://www.jquery.com) and use them in your site. There are also lots of other web resources around that have built their own tools for jQuery that are free to use & we will be looking at some of these over the coming weeks.


jQuery has the following features:

 

What jQuery looks like

Here's an example of a small bit of jQuery scripting that can detect the user's browser & put that information into the body of the HTML page:

<script type="text/javascript" src="media/js/jquery-1.4.1.js"></script>
<script>

$(document).ready(function(){

$.each($.browser, function(i, val) {

$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body)

})

})

</script>

see it work here - browser.html

 

Launching Code on Document Ready

The document ready event is crucial in many jQuery scripts http://api.jquery.com/ready/.

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); 

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

$(document).ready(function(){ 
// Your code here   
});  

Most of the code we will be using today will occur within the document ready event.

You also often need CSS styles to manipulate what happens on the web page when you run these jQuery events. Here's an example of using jQuery with CSS to style some text and remove paragraphs when you click on them

link.html

Look at the source code for the link.html file to identify what's going on:

We will have a play today with a few simple jQuery exercises that will demonstrate the potential of this powerful library of tools.

Have look at these examples & view their source code:

tooltiptest.html (tooltip example for text & image)

tooltips.html (tooltip example for images)

draggable.html (multi-draggable div elements using click & ctrl-click)

 

If you access the media folder, you can download the HTML files, but you'll also need the image files, and the javascript files, so I've packaged up today's sample files in a zip file that you can download here.

There are so many things you can do with jQuery, and a good place to start looking for ideas is the jQuery Tools site which really shows you types of interactive functionality you can create for your website.

 

Class Exercise:

Here's a challenge - using the samples I have provided today, can you make a web page with 3 image files that are draggable and fade to 50% opacity when clicked?
(hint - put the images into div tags).

 

extra reading & useful links

see the web resources links on the main WD3 webpage which also includes some of these links:

JQuery home

JQuery UI

JQuery Tools

JQuery cheat sheet (your jQuery BFF)

JQuery Tutorial - getting started

 

use the rest of the class to start work on your assessment tasks