< DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CS325: Interacting with Text

Interacting with Text


Topics

  1. Creating Images of Text
  2. Using TextWrangler
  3. Animating Images on a Web
  4. How to Transfer Files to Hercules
  5. References
  6. Exercise

Please get the code examples and images used in this lab, by clicking here


1. Creating Images of Text

Some of you might be wondering why we have to create images of text. Well, sometimes you want to create labels on a webpage with a font type that is not standard for web browsers. The goal would be that someone half the world away would see the same font as you. One way to guarantee the same font (with non-standard types) is to use an image of the text. Normally, you can create images of text using a fancy application like Photoshop or Illustrator. Both of these packages are quite large. Instead, we are going to cheat by using something easy, and then capturing the font as an image using a "screen capture".

1.1 Using TextEdit

1.2 Capturing and Cropping

1.3 A Note on Installing Font

There are some really neat fonts "out there". You can install fonts that you download from the internet. The following website has some cool ones that are free or on a donation basis:

To not rehash what has already been done, the following page has instructions on how to install the fonts: http://www.dafont.com/faq.php

When you are professionally creating webpages with non-standard fonts, you should consider using CSS for the fonts (instead of images):


2. Using TextWrangler

We are going to take a look at some web files (.html and .js) provided as sample code to this week's lab. The problem is that if you try to look at them using TextEdit, you will see the "web browser" version of the page and not the underlying code. You can view the code behind these webpages using another application called TextWrangler:

  1. Use Spotlight to look for and start TextWrangler

  2. Under the main menu, choose File > Open.... Browse to find the index.html file included in this lab's sample code. Be careful: if you double click on folders, TextWrangler will show your directory structure in a pane to the left. The following is what you will see when you open index.html:
    TextWrangler opens index


  3. Open the callPlax.js file included under the scripts folder included in this lab's sample code using the same method as above. You should now see something like the following:
    TextWrangler open CallPlax

    Note a couple of things:

That's it! That's all! A crash course in TextWrangler.


3. Animating Images on a Web

You guessed it! We are going to animate our images of text on the web. The code sample that is provided with this lab animates some round spheres based on mouse movement over a web page. You can take the ideas from the code samples and modify them to work with some text images.

In the following subsections we are going to answer the questions of "what is this code?" and "what do we have to change?". Before we get into those details, you might want to check out these animation examples that make use of the code that we are going to discuss:

3.1 What is JQuery and Plax?

You might already be familiar with JavaScript, but if you were told that the code we will be looking at is written in JQuery with a plug-in called Plax, your eyes might start glazing over. The next couple of subsections will define JQuery and Plax and where you can get more information about them.

3.1.1 JQuery

JQuery is a free, open source JavaScript library that has been designed to simplify client side scripting. In particular, it makes it easier to navigate a document, create animations, handle events, and perform Ajax operations. JQuery is extensible in that people have written plug-ins (specialized functions) that are freely available. These plug-ins make adding animation or, for instance, sorting table information as easy as calling a function.

If you would like to "install" JQuery, all you have to do is download the file available at: http://jquery.com/ and make it accessible to your target webpages. You will have to add the following code between the opening and closing head tags of your webpage:

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

This assumes that the jquery file is available in your current directory. If you are storing your work on Hercules and do not want to upload an extra file, you can use the version of JQuery that has been made available in the CS325 directory:
src="http://www.cs.uregina.ca/Links/class-info/325/InteractiveText/Examples/scripts/jquery.min.js"

3.1.1 Plax

One of the cool plug-ins for JQuery is called "Plax", apparently, short for parallax. The idea of parallax is that depending on your line of sight, an object may appear to move (in relationship to a background or in relationship to another object). One example of this is: if you put your index finger up about six inches in front of your nose and then alternate closing your right and left eyes, it will appear like your index finger is moving quite a bit in relationship to the background. In technical terms, things that are closer have larger parallax. As you move your index finger farther away it seems to move less. The following webpage, https://github.com/500 gives the feeling that the sign is closer. Why?

Your lab instructor has provided you with a package that contains Plax. If you would like to know where Plax came from or look at more examples, you can click on this link: https://github.com/cameronmcefee/plax (click on the "Zip" icon to download everything). If you are a minimalist and know how things work, then all you really need is plax.js, which contains the function, plaxify. We will look at how we can call this function in the following subsection.

3.2 Working with the Example Code

In the example code that is provided with this lab there are a few things to point out in the index.html file:

  1. There are several scripts that are being linked to between the opening and closing head tags:
    <script type="text/javascript" src="./scripts/jquery.min.js"></script>
    <script type="text/javascript" src="./scripts/plax.js"></script>
    <script type="text/javascript" src="./scripts/callPlax.js"></script>
    
  2. When the images are being added to the webpage, there are additional attributes included in the img tag. Two examples are:
    <img src="img/plax_sphere_large.png" width="215" height="215"
             data-xrange="10" data-yrange="10" id="plax-sphere-2"/>
    <img src="img/plax_sphere_small.png" width="93" height="92"
             data-xrange="40" data-yrange="40" data-invert="true" id="plax-sphere-3"/>
    
  3. An internal cascading style sheet is part of index.html. For the image with id of plax-sphere-3, the following "property: value" pairs are specified:
    img#plax-sphere-3 {
      position: absolute;
      top: 35px;
      left: 32px;
      z-index: 1;
    }

Next, if you look at callPlax.js, you will see the following code:

$(document).ready(function () {
     $('#shell img').plaxify()
     $.plax.enable()
})

Let us explain the code line by line:

As a side note, this is just one way of calling plaxify. If you are curious, you can see another way of calling plaxify at the following location: http://www.fadadance.ca/js/home.js.

Questions to Test Your Understanding


4. How to Transfer Files to Hercules

Once you have done all of this work, you might want to transfer your work up to your own personal website on Hercules. On the Mac, you can use an application called Filezilla (sorry, there is no WinSCP for macs; but this is almost better!). It is free to download for all platforms. To use Filezilla:

  1. Use Spotlight to look for and start Filezilla.
  2. In the lab, you will see the following "Site Manager" dialog window.
    Filezilla on Open
    Ensure that hercules is selected under "Predefined Sites", then click on the "Connect" button.

  3. You will see the following dialog box to fill in your username:
    Username
  4. The first time that you run Filezilla, you might get the message shown below. Check off "Always trust this host, add this key to the cache" and click on OK:

    Hercules Authentication
  5. Fill in your password:
    Filezilla Password

  6. You are now good to go. The left pane is your local host. The right pane is hercules. The idea is that you can change directories by clicking on their names. To transfer files, you can drag and drop files and directories from one side to another.
    Drag and Drop

Note: If you are at home, you will not see the "Site Manager" dialog. Another way of connecting is by entering the information in the "Quickconnect" bar:
Connect At Home



5. References


6. Exercise

The goal of this exercise is to animate some images of text using the Plax plug-in for JQuery.

More Details