Class notes

November 21

Class 12

Class 12 – Topics

Web Typography
JavaScript
jQuery Basics
Embedding swf file
Lightbox Demo
How to embed a YouTube video
Assignment: Work on final project
Quiz 4

Please read the assigned reading:
Chapter 22 : Accessibility Intro
Chapter 23 : Accessibility Helps
Chapter 24 : Accessibility Testing

Class 12 – Assignments: Due Monday, November 28

1. If you haven’t already done so, embed a font(s) into your HTML form. Here’s information on how to embed using @font-face: http://boldperspective.com/2011/how-to-use-css-font-face/

2. Find a jQuery plug-in or code for a slideshow or gallery you can use for your final project. You may use the resources in the class notes below or do a Google search of your own. (The slideshow you pick can’t be the panning slideshow I demonstrated in class!) Create a “test” HTML page for this slideshow or gallery using the jQuery plug-in. Be sure to keep your files organized correctly! Use this as an opportunity to get a head start on creating this section of your website for your final project. This exercise doesn’t necessarily need to have the final images you’ll use for your final project, as it is a beta test.

3. Continue working on your final project. I’ve changed the required pages for the final project from 8-10 to 6-8 pages. A design comp of your home page and at least one landing page is due next week, Monday, November 28. If you complete it sooner, you’re welcome to email me and have me look at it sooner.

Your final project pages will include:

Home page
Our Work/Portfolio (or named something similar) with slideshow or gallery feature
Contact page with form
3-5 additional pages

Quiz 4

Click here to take Quiz 4

Web Typography

Review: everything about web: Web Typography

Web Type CSS Properties

Fundamental to understanding web type is understanding the properties over which we have control. There is some analogy to print design in terms of vocabulary, although the implementation in CSS syntax may be slightly different. Here are some examples:

Tracking = Letter Spacing: http://www.w3schools.com/css/pr_text_letter-spacing.asp

Leading = Line Height: http://www.w3schools.com/cssref/pr_dim_line-height.asp

All Caps, Sentence Case, Lowercase: http://www.w3schools.com/Css/pr_text_text-transform.asp

But what about Kerning you ask? The holiest of practices, that which separates designers from the writhing unkerned and ill-spaced masses? i.e. adjusting the letter spacing between some letter pairs in headlines and titles especially.

Well there are no kerning pairs per say, although using the <span> tag, classes/IDs, and Letter Spacing property we can do a decent job if needed.

Use the following website to further explore and compare web type properties. It also generates style sheets which you can download and use in your sites: http://www.typetester.org/

Webfont Resources

A number of vendors have appeared for webfonts. Some license directly from foundries, others use typefaces with web licenses, some are free, some are freemium.

Here’s a list of some of the major players. Also, look at some of your favorite type foundries as most are offering some sort of webfont licensing these days. As always you get what you pay for…so support your local type designer and buy a web font or two on your next project.

Free:

A great place to start. The are some decent freely licensed typefaces for webfont use.

http://code.google.com/apis/webfonts/
http://www.fontsquirrel.com/
http://openfontlibrary.org/fonts

Freemium or Pay Vendors:

Better typefaces, and almost all have some free or trial version. Often need a user account.

http://typekit.com/
http://fontdeck.com/
http://www.fontspring.com/

Foundries:

Short list, but again most foundries are offering a la carte webfont licensing these days.

http://www.exljbris.com/

http://processtypefoundry.com/

So maybe you find a font you like from one in the list above. The next steps are to include the font files with your site files and use the @font-face property in your CSS. Most vendors have instructions about how to get their fonts up and running on your site.

JavaScript

What is it?

Javascript is a programming language that forms the the last leg of the modern web design and development trinity: HTML, CSS, and Javascript. It allows for interactivity and greater control of web pages in the web browser. If HTML deals primarily with structure, and CSS deals with visual presentation, then Javascript is the brains or logic.

There are a number of code frameworks(jQuery, Moo Tools, Prototype) that have become prominent for their ease of use, most of which are within the reach of designer’s to learn a bit about and use to create new experiences. We will focus on jQuery, primarily because of the large community of developers and availability of useful plug-ins.

Where does it go?

JavaScript is commonly included in the head tag of web pages. Much like style sheets it can be embedded in the document or linked to an external file. To include an external file such as a plug-in we use something like the following piece of code:

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

Embedded JavaScript looks like the following:

<head>
<script type="text/javascript">

$(document).ready(function() {

var randomImages = ['picture01','picture02','picture03'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("body").css("background-image","url(images/" + randomImages[rndNum] + ".jpg)");

});

</script>
</head>

There is also a practice of including scripts in between the </body> and the </html> tag at the bottom of page. This allows the page to load before runing any scripts. I’ve seen primarily for google analytics scripts, although it may be useful for others. Although the document ready function takes care of this for the most part.

jQuery Basics

See http://jquery.com/

jQuery is an open source library of javascript objects that we can use in our front-end web development and design. These objects are referred to as Plug-Ins and includes things like galleries, animation, as well as control of page elements through the DOM (Document Object Model) and much more.

Where do I start?

First step is to include the jQuery library in our pages:

Link to the Google CDN hosted jQuery library:
Google API Documentation: http://code.google.com

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>

Or alternately you can download it and include locally on your site:

Download the jQuery library and include it in a folder in your site structure:

http://docs.jquery.com/Downloading_jQuery

Example: Random Background Image

Create a Random Background image

<script type="text/javascript">

$(document).ready(function() {

var randomImages = ['picture01','picture02','picture03'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("body").css("background-image","url(images/" + randomImages[rndNum] + ".jpg)");

});

</script>

Here’s the example: http://www.everythingaboutweb.com/classes/examples/background_image/

Here are the files: http://www.everythingaboutweb.com/classes/downloads/background_image.zip

jQuery Plug-ins

Plug-Ins expand the function of the jQuery library. Our next step is to find a plug-in we want to use.

There are a couple of ways to search for plug-ins. One method is to search for them on jQuery. The interface is a bit lacking, but almost all plug-ins listed feature link to the plug-in site, which usually has the download and an example.

The other method is to leverage the wonders of the internet and search the blog lists for plug-ins. Articles abound. Pick a recommended plug-in, download and get it going.

We can inlcude plug-in files locally(a .js file in your js folder) and sometimes they are hosted on another site and we can just link to them like we do to include the jQuery library hosted at Google.

jQuery Slideshow and Gallery Resources

http://www.noupe.com/tutorial/more-on-jquery-slider-plugins-and-tutorials.html
http://www.smashingapps.com/2011/01/07/awesome-jquery-techniques-to-create-visually-impressive-photo-galleries.html
http://www.htmldrive.net/categorys/show/2/Slideshow+%26+Scroller
http://www.htmldrive.net/search?q=gallery&yt1.x=0&yt1.y=0&yt1=submit

List of jQuery Slideshows

http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-simple-itunes-like-slider/
http://www.serie3.info/s3slider/demonstration.html
http://www.htmldrive.net/items/demo/1060/super-cool-multiple-style-Slideshow-effect-with-jQuery
http://www.htmldrive.net/items/demo/928/Countdown-jQuery-Slick-Image-Slider-Plugin
http://www.htmldrive.net/items/demo/815/jQuery-Accordion-slide-Plugin

Check out this resource —> jQuery for Designers

Panning Slideshow Demo

http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/

http://www.everythingaboutweb.com/classes/examples/jQuery_slideshow/final_web/

Embedding swf file (Flash movie) into HTML page

How to insert a SWF file

1) Define your site by going to Site > Manage Site (or New Site) and defining the local root folder by selecting the folder where your local files live. (See notes below.*)

2) In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:

In the Common category of the Insert panel, select Media and click the SWF icon .
Select Insert > Media > SWF.

3) In the dialog box that appears, select a SWF file (.swf).
A SWF file placeholder appears in the Document window.

4) Save the file.

Important Notes:
Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved to a Scripts folder in your site. Don’t forget to upload these files when you upload the SWF file to your web server. Browsers can’t display the SWF file properly unless you have also uploaded these dependent files.

* To ensure your Scripts folder gets saved to your local files, be sure to define your site using Site > Manage Site. By defining your local files, Dreamweaver will know where the files live on your computer. If you define your site, your Scripts folder, and the links to the expressInstall.swf and swfobject_modified.js in your HTML file, will be saved correctly.

Adding Multimedia to your website

Lightbox Demo

Here is an example of the Lightbox demonstrated below:
http://www.everythingaboutweb.com/classes/examples/lightbox_demo/

You may download the files I use for this demonstration here:
http://www.everythingaboutweb.com/classes/downloads/lightbox_demo.zip

Basic instructions are located here:
http://www.everythingaboutweb.com/classes/examples/lightbox_demo/lightbox/index.html
YouTube video: http://www.youtube.com/watch?v=NfK2KqtcThM

The basic instructions are found in the link above but I have altered the code so it reflects placing all your files for the Lightbox feature in a folder named “lightbox.” If you place all your files in a folder named “lightbox,” you will need to add the code as outlined below.

Part 1 – Setup

1) Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

2) Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). Include the link to the lightbox CSS file in your header.

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

3) Check the CSS file called lightbox.css and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location.

I had to link to my images using an absolute address. For some reason it did not work as a relative link. Note the bold text in the example below.

#prevLink:hover, #prevLink:visited:hover { background: url("http://www.everythingaboutweb.com/classes/
 examples/  lightbox_demo/lightbox/images/prevlabel.gif") left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url("http://www.everythingaboutweb.com/classes/
 examples/  lightbox_demo/lightbox//images/nextlabel.gif") right 15% no-repeat; }

4) Check the js file called lightbox.js. Make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

fileLoadingImage: 'lightbox/images/loading.gif',
fileBottomNavCloseImage: 'lightbox/images/closelabel.gif',

Part 2 – Activate

5) Add a rel=”lightbox” attribute to any link tag to activate the lightbox. For example:

<a href="lightbox/images/image01.jpg" rel="lightbox[group01]" title="my caption"><img src="lightbox/images
/thumb01.jpg" width="425" height="319" border="0" /></a>

Optional: Use the title attribute if you want to show a caption.

6) If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Notice in my example I have my lightbox gallery linking from a single image. To do this, I used the following code:

<a href="lightbox/images/image01.jpg" rel="lightbox[group01]" title="my caption"><img src="lightbox/images
/thumb01.jpg" width="425" height="319" border="0" /></a>
<a href="lightbox/images/image02.jpg" rel="lightbox[group01]"></a>
<a href="lightbox/images/image03.jpg" rel="lightbox[group01]"></a>

Side note: If you want to group images, create a name and define them all as part of the group. In the first example, it is “roadtrip,” I used the name “group01″ — it doesn’t really matter what you call it but of course try to use something useful that will help you identify the group.