My favorites | Sign in
Project Home Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
SetupForXhtmlAndCss  
*MOVED TO WIKI Setting up to work with XHTML and CSS
Updated Apr 13, 2008 by medea...@gmail.com

Tools

Here's the set of basic tools that we'll be using. Please install all of these, even if you have similar tools that you already like -- it will make life easier if we are all using the same set of tools.

In general, the way we will work on projects is to first get them working and looking good in Firefox, and then move to cross-browser compatibility towards release time, since this almost invariably involves putting in all sorts of kludginess. So we all want to be using the same browser.
This is a Firefox extension that gives you all sorts of handy developer tools in a toolbar and in the right-click context menu.

Fangs is another Firefox extension that emulates screen reader software. If you run Fangs on your page, it will show you the content as it would be read out loud by a screen reader.

This tool validates web pages to see if they meets the XHTML standards. You don't need to install anything, just bookmark it to keep it handy.
This tool validates CSS stylesheet files to see if they meet the CSS standards, just like the markup validator. Again, just bookmark it.

Rails has the Scriptaculous Javascript library built in, so you will want to get familiar with it. This allows you to easily do all sorts of useful effects and also many silly ones. You don't actually need to know Javascript yourself -- just stick the library files in and learn a few basic patterns you can copy and paste (see below), and off you go.
A note on accessibility -- whenever using Javascript, you must remember to check what your pages look like when you have Javascript disabled (hint: once you have Web Developer Toolbar installed, it lets you disable/enable Javascript easily) and make sure they still function. Scriptaculous effects degrade in an okay way out of the box, and we will be talking more about other ways to ensure accessibility along the way, but keep it in mind.
(If you hate Javascript, please go with us on this. Bad Javascript makes baby unicorns cry! But when used right, it lets us make pages that are dramatically more usable and reduce load on our servers by doing some of the work in the user's own browser.)

Setup

To make your life and the life of your Rails Coders compatriots easy, please do use the following directory structure!

  1. Make a folder somewhere on your computer called otw projects or something similar. This will hold all the projects you do.
  2. Within this folder, create a folder called website template
  3. Within this folder, create three additional folders. It is important to use these exact names because this mimics the structure of a Rails web application.
    • stylesheets
    • javascripts
    • images
  4. Find the scriptaculous zip or gzip file you downloaded earlier and unzip it. Inside the unzipped package, take all the javascript files (.js) out of the lib and src folders, and copy them into the javascripts directory.

Your website template folder is now set up. From now on, whenever you start a new OTW webpage project, just make a fresh copy of this entire folder and you will be set up with the starting setup in Rails. This makes it easy for a developer to drop your spiffy webpages into their app, and also keeps the code you write for different projects separate.

First Project

Scriptaculous Demo

This will help you get your feet wet with Scriptaculous!

  • Make a copy of your website template folder and rename the copy scriptaculous demo
  • In scriptaculous demo create a file called demo.html -- any plain text editor, Notepad or TextEdit, will do fine for this -- and paste in the following:
  • <html>
    <head>
        <script src="javascripts/prototype.js" type="text/javascript"></script>
        <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    
        <link rel="stylesheet" href="stylesheets/stylesheet.css" type="text/css" media="screen" />
    </head>
    <body>
    
        <div id="controls">
        <p>Click on the controls to see the effect.</p>
    
        <p onclick="new Effect.BlindUp(document.getElementById('demo-stuff'));">
            <b>Control 1 -- BlindUp<br>
               Makes the text below roll up like a venetian blind.</b>
        </p>
    
        <p onclick="new Effect.BlindDown(document.getElementById('demo-stuff'));">
            <b>Control 2 -- BlindDown<br>
               Makes the text below roll down like a venetian blind.</b>
        </p>
    
       <p onclick="new Effect.toggle($('demo-stuff'),'blind')">
            <b>Control 3 -- Toggle<br>
             A little trickier, this one will toggle the blind-up/blind-down.</b>
       </p>
       </div>
    
        <div id='demo-stuff' class='target'><h2">Wheeee!</h2></div>
    
    </body>
    </html>
  • Next, in scriptaculous demo/stylesheets create a file named stylesheet.css and paste in the following:
  • /* basic stylesheet */
    
    .target {
        border: 1px solid red;
        background-color: #000; 
        color: #fff;
        font-size: 2.0em;
    }
  • Open up demo.html in your web browser and try it out. You should see the "Wheeee!" roll up and down when you click on the controls.
  • Now try some of these things:
    • Edit the stylesheet and HTML file to make this page look less hideous.
    • Make images for the controls and/or the "Whee!" and put them in, in place of the text. The effects should still work just fine.
    • Try replacing BlindUp/BlindDown with any of these: Appear, Fade, Puff, SwitchOff, SlideDown/SlideUp, DropOut, Shake, Pulsate, Squish, Fold, Grow, Shrink, Highlight.
    • Try adding a second item like "Wheee!" with a second set of controls. Hint -- the way the controls work is by using document.getElementById('demo-stuff') to find the item on the page named with id='demo-stuff'

Validation

All our code should be compliant with web standards, for reasons of accessibility and maintainability. Also because then we can stick spiffy "validated!" bragging boxes on our sites.

Take the demo.html and stylesheet.css files you created above and validate them using the ValidatingCssAndXhtml tutorial. Try fixing whatever errors you find until it validates (note -- the errors are often in pretty obscure language, so please ask for help in chat or on the mailing list if you can't figure one out).

Comment by tompre...@gmail.com, Feb 6, 2008

I think we also might was to consider testing for Section 508 validation as well. Perhaps using something like Cynthia Says?

--Tom (Starfleet Captain)

Comment by mercury....@gmail.com, Feb 6, 2008

Oh! <3 I love that the procedures are very similar to my personal procedures! hugs Firefox I also love that I already have everything but Scriptaculous. XD

Mercury (First Officer)

Comment by tompre...@gmail.com, Feb 6, 2008

s/was/want

--Tom

Comment by helens78, Feb 11, 2008

If anyone else had trouble with Fangs (output was blank no matter what page you selected), it's because of a known bug in the installer.

Instructions on the fix here.

You'll need to add two strings to your about:config preferences in Firefox:

extensions.fangs.output.defaultlang --- en extensions.fangs.output.style --- default

(And if it was just me, well, more information is still better than less information! :) )

Powered by Google Project Hosting