|
SetupForXhtmlAndCss
*MOVED TO WIKI Setting up to work with XHTML and CSS
ToolsHere'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.) SetupTo make your life and the life of your Rails Coders compatriots easy, please do use the following directory structure!
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 ProjectScriptaculous DemoThis will help you get your feet wet with Scriptaculous!
<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>
/* basic stylesheet */
.target {
border: 1px solid red;
background-color: #000;
color: #fff;
font-size: 2.0em;
}
ValidationAll 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). |
I think we also might was to consider testing for Section 508 validation as well. Perhaps using something like Cynthia Says?
--Tom (Starfleet Captain)
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)
s/was/want
--Tom
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! :) )