Crash Courses

This page has a bunch of “crash course” topics.

FireFTP
FTP (File Transfer)
Codetch HTML Editor
Web Developers Toolbar
Firebug HTML & CSS debugger
jQuery Javascript Library
Dynamically-Generated Web Sites

Using FireFTP (FTP program embedded in FireFox)

The FireFTP extension provides an easy-to-use graphical browser for copying files between computers, using a program (protocol, really) called FTP. This solution works on both PCs and Macs, and the software is installed on all computers in the lab.

To install FireFTP on another computer, see the pointer on the Firefox Web Tools page.

Run it in FireFox with Tools > FireFTP, or click on the FireFTP icon in the Firefox toolbar. It pops up a window (or it can be another tab). Near the top left, there’s a button called Manage Accounts. Choose New Account, then fill in the settings in the box, and click OK:

Account Name is a label for this group of settings, so you can use it the next time.
Host: your Web server hostname
Login: the login ID for FTP for your account
Password: the password for FTP access

You should then be able to select the connection by the Account Name you gave it, then click Connect. That should open up the right side pane to show the files on the Web server, and the left pane will be the files on your computer’s hard drive.

Create a directory on your hard drive to use for projects, then guide the left-hand side of FireFTP to that location. Then connect on the right side to the Web site…. Once connected, you can select a file on either side, and then use the arrows in the middle to transfer it to the other side. So, for the purposes of argument, you connect on both sides to the proper location. Then select the file on the right side (the Web server), then click the left arrow to copy it to the left side. Edit that file on the left side — the one on your hard drive. Save it, then use FireFTP to select it on the left side, then use the right arrow in the middle to copy it back to the Web server.

At that point, your modified file should be accessible via the external URL.

The main thing is to remember that the left side always shows files on your local computer, and the right side is always the external Web server. Then it’s just a matter of keeping tabs on which version of the same file is the most recent as you move it back and forth…. Left is Local, Right is Remote!

FireFTP does have a Synchronize function under the Tools menu, but it isn’t very useful. It gets confused about whether files are different, because it doesn’t take into account the different end-of-line styles across operating systems (files appear to be a different size, even though they really aren’t).

FTP (low-level file transfer)

FTP (File Transfer Protocol) is both a protocol and a program for transferring files between computers. There are many graphical FTP programs, including FireFTP in FireFox. It is also possible to use FTP from a command-line interface, which is available on Windows, Macs (which are Unix machines), and Linux and Unix machines. Here are the primary commands:

ftp <hostname> : invokes the program, initiates connection to <hostname>. You’ll be prompted for user name and password.
If successful, you’ll be connected to the server computer.
dir or pwd : shows the current directory on the server.
cd : change directory to a new location
lcd : change the current directory on your computer
ascii : use text mode for transfers
binary : use binary mode for transfers
get <filename> : copies <filename> from server to your computer
mget <wildcard> : copies all matching files from the server
put : copies a file from your computer to the server
mput <wildcard>: copies all matching files to the server
quit : exit the program

Firebug

The Firebug debugger is the biggest rival to the Web Developer Toolbar for being considered the most useful Web development tool. Firebug takes you under the covers to see everything you need about a page: HTML, CSS, Javascript, DOM nodes, color information, layout, and more.

To open Firebug, either use Tools > Firebug or click on the little bug icon at the bottom of the Firefox window. This splits the current browser window, opening a pane at the bottom that provides access to the Firebug functions. The top-level Firebug tabs are:

HTML: view the current page HTML (and applicable CSS as you hover)
CSS: view the applicable CSS
Script: look at the operation of Javascript. This is a full Javascript debugger, allowing you to set breakpoints and to inspect and edit internal values in operational Javascript. You can even log items to the Javascript console from your Javascript, which can be very useful when debugging (and much more graceful than using alert).
```
 console.log(‘width: %d height: %d’, width, height);
```
DOM: shows the page’s DOM, the hierarchical tree of objects that are the internal representation of the HTML page in the browser
Net: lets you monitor network activities, load time
Cookies: examine the cookies used by Web sites you visit. You must have FireCookies installed to see this tab.
YSlow: if you install the YSlow Add-on, it adds this tab to Firebug. This tool from Yahoo examines your pages and tells you how the performance can be improved. It is really aimed at high-traffic sites, but many of the suggestions will apply to all sites.

Codetch—HTML Editor for Firefox

The Codetch HTML editor can be opened in a separate tab (Tools > Codetch > Tab) or a separate window (Tools > Codetch > Float). I find that the separate window is more useful, but YMMV. Once Codetch is open, it splits the window into 3 panes: the left side has a file browser for choosing files and locations. The right side (much bigger than the left) is used for editing HTML files. This main section also uses tabs, so you can have multiple files open at the same time. The toolbar for the main section has a choice to toggle display of the file browser, so you can use the entire window for editing. At the bottom of the current file (the current tab), there are 4 buttons:

Code: this shows you the raw HTML code.
Design: this attempts to show your page as a browser will display it.
Preview: actually preview the page in a browser
Reference: access to HTML, CSS, Javascript, jQuery and other references via gotAPI.com. Quick access to info about HTML tags.

Below these 4 buttons, there is a small pane called Results. This gives you access to the Error Console to see Javascript errors and warnings from loading your page. It also displays the results of searches within source files.

One nice feature of Codetch is that it provides a simple template facility. Using their templates or adding your own, you can fill an empty file with a copy of the template. Once you develop the look and layout of your Web site, you can save the HTML and CSS in a template. Every time you start a new file for your site, you simply create a new copy of the template (File > New > Templates > Your Template Name) and type away. Unlike Dreamweaver, new files created from the template have no further relationship to the template. Even if you subsequently edit the template, the changes will not be reflected in old files that were created from the template. To take best advantage of this facility, you will want to be pretty clear about the layout of your site before you start cranking out pages based on the template. You can easily tweak the single CSS file to modify the appearance and position of elements, but you can’t add a new sidebar or a new column without hand-editing every single file you had already created from the previous version of the template.

The Tools menu provides some very useful functions:

DOM Inspector: examine the internal object representation of the page
FireFTP: open up the FTP client in a tab within Codetch.
Validate HTML: uses a Web-based service to validate your HTML
Validate CSS: uses a Web-based service to validate your CSS

jQuery—Javascript Library for Web Developers

This section will discuss the use of jQuery in Web development.

Why use jQuery?
- Simple way to add complex effects and new functionality: jQuery offers a huge library of effects and functions that can be used in combination.
- Intuitive access to page elements: the syntax for choosing page elements is exactly like that used in CSS selectors.
- Chaining: you can apply effects serially to a group of page elements without having to locate them again for each operation.
- Simplified Ajax: jQuery has Ajax functions that take care of the messy setup of connections.
- Simplified event handling: they greatly simplified the way you hook up actions to mouse events.
- Lbraries of free code: by building in an extension mechanism, hundreds of developers have added their own modules for additional functionality.
Loading and Using jQuery.
- Download the Code: jQuery.com for core system, and jQuery UI for optional user interface extensions. You can also have your HTML pages load the code from code.google.com, rather than your own server’s cached copy. Spreading the HTTP requests out to different servers actually saves a little time by spreading the load around. It is an insignificant saving except for high-traffic sites, so I don’t do this so that code doesn’t change underneath me on somebody else’s server.
- How to load it (all of these declarations go in the <head> section):
  - <script type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></script> : load core jQuery
  - <link rel="stylesheet" href="CSS/CIS86-Tabs.css" type="text/css" media="screen" /> : load CSS for jQuery Tabs
  - <script type="text/javascript" src="jquery/jquery-ui-tabs.min.js"></script> : load jQuery Tabs (from UI module)
  - The jQuery Web site lets you pick and choose which user-interface functions you want in the UI library, so that you only pay the cost of exactly what you are using. It also lets you download a packed version of your customized library, where extraneous space is squeezed out of the code.
  - Here is an example of loading the code from Google:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- How to invoke stuff.
  - Normally, you load code in the <head> section of your pages, and then initialize it for action. In some cases, the code performs its function right then (such as setting up tabs). Other times, it registers event handlers so that specific actions (e.g., wait until the user clicks on div #test) will cause your code to run.
  - <script type="text/javascript">
    $(function(){
    $("#tabs > ul").tabs({ fx: { opacity: ’toggle’ } });
    });
    </script>
  - The green portions of the code are the boilerplate that you insert into the <head> section to set up your jQuery functions. The purple in the middle is an example used to create the tabbed interface for this page. You can add as many statements as you need in this section.
VisualjQuery.com is a great resource for using jQuery—visual and fast: click, click, click! The jQuery site has added an API browser, too.
One of the great things about jQuery is the plugin mechanism. There are well over a thousand jQuery modules that provide extended functionality, and possibly even a starting point for developing your own code.
It is easy to use Ajax to load a chunk of HTML into an area of the page without a page refresh. Simply select the element you need and use the load() function. Here’s an example:

$("#showajaxlink").click(function () { $(’#showajax’).css(’display’,’block’).load(’examples/ajaxload.html’); })
Some useful snippets:
- $(‘p:first’).css(‘background-color’, ‘yellow’); }
- .addClass("red") & .removeClass("red") & hasClass("red") }
- .css("border", "2px solid #fff") }
- .data("key", "value") } : store arbitrary data in an object
- .attr("src", "image.jpg") } : reset an attribute
- if ($(‘#myname’).length) { } : checks for existence
- .click(function() { code here } ); : run function when something is clicked. }
- .hover(function() { code here }, function() { code here } ); : run functions on mouseover, mouseout }
- .text(‘the new text’);
But what does it DO? Here are some pointers to see what you can easily do with jQuery:

Dynamically-Generated Web Sites

This section will discuss how dynamic Web sites work. A dynamically-generated Web site creates HTML files only as they are requested, by essentially cut-and-pasting database information into an empty HTML file called a template. You won’t see HTML files for a site like this; instead, you’ll see a lot of PHP (a programming language used by Web servers) files. These PHP files contain a mixture of PHP and HTML, and the info from the database is inserted into PHP placeholders in the HTML code.

A simplified view of how a static Web site worksStatic Web Sites, both in usage and administration.
This shows how both processes change when the pages are being created dynamically, as with the blogging engine WordPress.Dynamic Web Sites

Now, we will take a look at a functioning WordPress installation (MendocinoFun.com) to see how it looks from the inside. Here are 3 views of the same thing:

View 1: a post as it looks to a personHuman View of Web Page
View 2: the same post in the database editorDatabase Editor View of Web Page
View 3: the HTML template for showing the page, where the “holes” get filled in with info from the database.Machine View of Web Page