Articles
Archive for the ‘Web Development’ Category
Making Publications Accessible for the Seeing-Impaired
A friend of mine and I helped to publish an online magazine called Interspecies some time ago, where he would do the editing and I would do the publishing. This friend worked with the owner to collect and produce readable copy, who would then turn all the articles over to me, in .txt format at my request, for publishing. I worked in Adobe Illustrator CS2 (I didn't own Adobe InDesign and didn't feel I had much control over Scribus), produced some graphics, integrated some photos, slapped in the text and published to PDF format.
Why did I publish in PDF format? Before PDF was an open standard (ISO/IEC 32000-1:2008) and thus allowed to be openly implemented, the PDF format allowed me, the publisher, to control the design, content, imagery and layout of my publication down to the pixel. The PDF format would encapsulate my images, my vector graphics and even my font-family so that when John The Reader read my publication, it would look exactly the same to him as it did to me.
But what about the seeing-impaired? As a web developer, I try and follow the W3C WAI (Web Accessibility Initiative) and other accessibility standards and initiatives so that I can help aide people who don't have the manual dexterity to use a mouse or people who need a screen reader to view a web page. I've never seen such a person use any of my websites, but I hope by this practice I am making the web just that much more accessible for everyone. But is the PDF format really accessible?
This friend who I did publishing with has finished his undergraduate degree and is on his way to becoming a lawyer. Along the way, he is helping to publish a couple of newsletters (wasn't Barack Obama the editor and then president of the Harvard Law Review? -- just saying) and asked me,
If I am publishing a newsletter online and want people to be able to change fonts (it will be read by the seeing impaired), in what format should I send the newsletter out?
So I responded that the only way I knew how, was to publish on the web and either use (a) JavaScript/HTML/CSS and create buttons for the user to increase or decrease font size or (b) simply publish on the web and let the user use their tools (screen readers, web browser) and let them adjust the font size themselves. For instance, Mozilla Firefox (and many other open source browsers) all the use of [Ctrl] + [+] to increase font size, [Ctrl] + [-] to decrease font size and [Ctrl] + [0] to reset the font size, all on the fly. PDFs do not allow font sizes to be changed, unless you open them in some sort of PDF editor (but who has the time or resources to do that?)
If PDFs are great for strict publishers and the web is better (but not perfect) for accessibility, which one do you choose? What other choices do publishers and editors have to make sure their content can be read by the most amount of people?
Although I published in PDF format in the past, if I were to publish a magazine nowadays, I would publish on the web and allow the user to use their tools to adjust to their viewing needs. That's the suggestion I concluded with for my friend.
What are your thoughts?
Simple jQuery AJAX Tutorial
I'm a huge jQuery fan and use it any time I need to write JavaScript. It's extremely easy to use, more logical than straight JavaScript and can be separated out of HTML allowing for external scripts and easier updates.
If you've ever ran a PHP/Ruby/Python/Perl web script that takes a considerable amount of time to load (5 seconds or more), then you might want to look into AJAX. AJAX essentially allows a page to load while asynchronously loading other scripts, allowing users to navigate to another page or view content on that one page while waiting for another section to load.
It increases usability and eases user frustration dramatically.
Install jQuery
Firstly, we'll load jQuery from Google's caching server, allowing for fast-transfer speeds, lower bandwidth usage on our server and since many other sites use it, the script may already be cached in the user's browser, again saving bandwidth and transfer time.
To add jQuery to your website, add this inside your <head></head> tags:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"
charset="utf-8"></script>
Add an AJAX Request
The AJAX is extremely simple in jQuery and looks something like this:
$.ajax(
{
type: 'POST',
url: 'path/to/php/scripts/script.php',
data: 'data=this_is_some_data&another_variable='+dynamic_variable,
success: function(msg){
$('#result').html(msg)
}
});
How the AJAX Works
First you load the .ajax method, then tell it you want to use POST, then the URL to the PHP script, any data you want to send to it (you can omit this part if you don't accept any variables) and then the success function essentially dumps the return data to <div id="result"></div>. The function also uses the .html method instead of .text so that the HTML is loaded in the browser's DOM and doesn't look like garbage.
Increasing Usability
In between the <div id="result"></div> tag, you may want to add an animated GIF and the text 'Loading...' so the user knows something is about to load. When the AJAX request is complete, the 'Loading...' text and the animated GIF will be overwritten by the results of your script. Not difficult to implement, but gives the user a better indication of what is being performed.
Example
Loading...
(Nothing is actually going to load here, so don't wait for anything. However, do feel free to copy the image and use it within your own website or go to ajaxload.info to find different styles and colours!)
Security
Also, since the URL to your script is now available to the public, make sure you use a different folder path than your other PHP scripts or make sure they're programmed for no direct access.
e.g. index.php (or any directly accessed file) would have:
define('INDEX', true);
while your scripts included from this file would start with:
<?php defined('INDEX') OR die('No direct access allowed.');
That way, if it's a security concern, no one can execute your script directly.
Web Development in Ubuntu, 4-part Series
Between December 2008 and March 2009, I wrote a 4-part series on web development in Ubuntu for the online magazine Full Circle Magazine. All articles have been translated into Chinese, French, Hungarian, Italian, Russian and Turkish.
- Part 1 - Software for web development in Ubuntu (issue 20)
- Part 2 - Basic HTML and CSS (issue 21)
- Part 3 - Install a LAMP (web) server (issue 22)
- Part 4 - Basic PHP (issue 23)
I will be re-posting this series in HTML and extending the series soon.

