Category Archives: Web

intro to web accessibility

Posted on by
Reply

Someone asked me what someone should know/read as a crash course on web accessibility.  This seemed like too good a question not to blog about so he can read the answer here!

There are three main areas of web accessibility:

  1. W3C’s WAI (web accessibility initiative) has WCAG 2 (Web content accessibility guidelines) which are summarized on one page.  There’s a lot more to it than the one page, but it does represent the spirit.
  2. WAI also has ARIA (accessibility rich internet applications).  This is my favorite description.  Mozilla also has a good guide as does Opera.  In a nutshell, ARIA solves the problem of “how does a blind user know something on the page has changed.”  With AJAX and even DHTML, just because you made something available isn’t enough.  Be forewarned that older browsers have lousy ARIA support if any at all.
  3. Section 508 is in the same space as WAI except for government website.  It is part of the American with Disabilities Act.  It is more specific in some ways than WAI.  If you aren’t working on a government website, I’d focus on WAI.  Note that Section 508 is an OLD law and in theory they are working on a refresh.  I say in theory because I haven’t seen updates in a while.  There is a mapping in section 1194.22 between Section 5098 and the WCAG 1.0 guidelines.  Yes, 1.0.  Did I mention that Section 508 is old?  The government has free training.

The least you need to know for testing:

  • Make sure your application works without using a mouse.  Seriously, actually navigate your application without a mouse.  (Remember tab changes fields and space selects a checkbox.)  If it isn’t possible to use the application without the mouse, you have failed accessibility miserably.
  • Make sure you aren’t using color alone to convey information. Blind people will be using a screenreader and need alternate textual ways to derive this info. Colorblind can’t see the difference between red and green and won’t be using a screenreader so won’t see your alternate text.
  • Until you are REALLY familiar with how text only navigation works, use a screenreader emulator like the Fangs Firefox plugin and/or turn off stylesheets to see what your page looks like.
  • If you can afford a license for Jaws, it is helpful in testing that your application is accessible in practice and not just theory.

The least you need to know for coding:

  • For any image that conveys information, have an alt attribute.
  • Use form labels for all form elements so a screenreader can read what the form element is all about.
  • Use row and or column headers for all data tables so a screenreader can provide assistive text on where the user is in the table.  (And for the love pete, don’t complicate things with the navigation tables of the 90s)
  • I recommend automation to ensure you KEEP compliant.  It’s a pain to test this all once manually.  You don’t want to have to make sure the new person on your team remembered his/her alts.
  • Watch how you use JavaScript: Remember we need to work without a mouse.  That means an onchange handler in a pull down is the path to madness.  I want the fifth element so I tab to the field, choose the second, watch the page refresh, tab to the field again, choose the third, watch the page refresh and then decide never to do business with you again.
  • Some JavaScript libraries have accessible widgets.

Wikipedia SOPA Protest Easy Workaround

Posted on by
4

After hearing all the media buzz around Google and Wikipedia protesting SOPA, I expected to go to Wikipedia’s website and see the entire website disabled. To my surprise, the Wikipedia worked just fine for me this morning. I asked friends and colleagues if they could access Wikipedia and they could not. Then I realized the reason… I use a JavaScript blocker that requires me to enable JavaScript per-site and Wikipedia’s block amounts to a post-load JavaScript hack. Simple and easy to implement, but also easy to defeat.

If you want to continue using Wikipedia today, install a JavaScript blocker into your browser and set it to block anything from “wikimedia.org”. In Firefox, I recommend NoScript and in Google Chrome I recommend NotScripts.

I fully support Google and Wikipedia in their efforts to block SOPA. I just found it interesting that Wikipedia’s block implementation was so trivial, anyone could get around it and access the website as normal. Once you finally do enable JavaScript the page looks like this:

Liferay Standard Development Environment

Posted on by
Reply

I wrote a post a while back outlining the general set up we use when running our Liferay plugins through Continuous Integration, but it occurred to me that there should be an article that comes before that one which outlines the set up of the development environment. Many of the results of the decisions and best practices can be seen in that post, but there is still plenty that can be covered with respect to setting up a development environment for Liferay plugins.

Development Environments

There a few slight changes to the setup described in the previous article, but we’ll assume that a Liferay project always requires the following tools:

  • Liferay Development Studio (LDS). This is essentialy the Eclipse IDE plus some Eclipse plug ins to assist Liferay development.
  • Liferay Software Development Kit (SDK). This does most of the work with respect to building the plugins and the ANT tasks can be used from the command line without requiring the LDS.
  • A Liferay Bundle. A bundle is a pre-packaged Liferay server instance and in our case we tend to use Liferay bundled with Tomcat almost exclusively during development. The other benefit is that the Tomcat bundle is already assumed and pre-configured for some of the steps below and hence simplifies set up and reduces the work and chances of getting things wrong later.
  • Liferay Source. This isn’t essential to the set up, but when creating a new development environment we always do this at the same time and there or little additional effort required.

Recipe

Install Liferay Development Studio

You can install the LDS to the location of your choice and you can use the same LDS instance to manage multiple Liferay project workspaces, but more on this as we go. If you have already installed LDS then there is no need to do it again.

Create a new workspace directory for the Liferay project. For the sake of this article we’ll call the directory workspace.

Note that the Liferay source, SDK and bundle in the next steps should all be for the same version. Don’t mix them up. You have been warned.

Install Liferay Software Development Kit (SDK)

Copy the Liferay SDK zip file eg liferay-plugins-sdk-6.0-ee-sp1.zip to the workspace. Unzip the file so that there is a directory with the same name eg liferay-plugins-sdk-6.0-ee-sp1.

If your operating system does not allow soft links to directories, rename the SDK directory to plugins. Otherwise (and preferably) create a soft link to the SDK directory called plugins. By pointing external configuration at the plugins directory rather than at a specific SDK version, it makes it easier to upgrade your development environmnet later on.

Hopefully it gives you something like this in the workspace directory.

drwxr-xr-x 13      4096 2011-05-26 12:00 liferay-plugins-sdk-6.0-ee-sp1/
-rw-r--r--  1   9358463 2011-03-09 23:38 liferay-plugins-sdk-6.0-ee-sp1.zip
lrwxrwxrwx  1        71 2011-05-26 08:17 plugins -> liferay-plugins-sdk-6.0-ee-sp1/

Install the Bundle

Very similar to the previous step, copy the bundle zip file to the workspace, unzip and either rename or soft link as bundles. The bundles name is important here, so don’t get creative.

This adds the following to our directory:

lrwxrwxrwx  1        66 2011-05-26 08:18 bundles -> liferay-portal-6.0-ee-sp1/
drwxr-xr-x  5      4096 2011-05-26 16:32 liferay-portal-6.0-ee-sp1/
-rw-r--r--  1 187336800 2011-03-09 23:37 liferay-portal-tomcat-6.0-ee-sp1.zip

Install the Source

Once again copy the source zip file to the workspace directory, unzip and rename or soft link as source.

drwxr-xr-x 20      4096 2011-05-26 09:47 liferay-portal-src-6.0-ee-sp1/
-rw-r--r--  1 230320369 2011-03-09 23:37 liferay-portal-src-6.0-ee-sp1.zip
lrwxrwxrwx  1        70 2011-05-26 08:18 source -> liferay-portal-src-6.0-ee-sp1/

The complete Workspace

Remove the zip files if you want, but personally I just leave them there. The parts we’re interested in are the bundles, plugins and source directories. 

lrwxrwxrwx  1        66 2011-05-26 08:18 bundles -> liferay-portal-6.0-ee-sp1/
drwxr-xr-x 13      4096 2011-05-26 12:00 liferay-plugins-sdk-6.0-ee-sp1/
-rw-r--r--  1   9358463 2011-03-09 23:38 liferay-plugins-sdk-6.0-ee-sp1.zip
drwxr-xr-x  5      4096 2011-05-26 16:32 liferay-portal-6.0-ee-sp1/
drwxr-xr-x 20      4096 2011-05-26 09:47 liferay-portal-src-6.0-ee-sp1/
-rw-r--r--  1 230320369 2011-03-09 23:37 liferay-portal-src-6.0-ee-sp1.zip
-rw-r--r--  1 187336800 2011-03-09 23:37 liferay-portal-tomcat-6.0-ee-sp1.zip
lrwxrwxrwx  1        71 2011-05-26 08:17 plugins -> liferay-plugins-sdk-6.0-ee-sp1/
lrwxrwxrwx  1        70 2011-05-26 08:18 source -> liferay-portal-src-6.0-ee-sp1/

How the parts interact

Before we complete the configuration, we’ll pause and look at how the parts interact.

Liferay Development Studio (LDS) and Software Development Kit (SDK)

The LDS provides some wizards, configuration checking and general assistance in building and managing Liferay plugins, but mostly it delegates to the SDK to perform the actual build and deploy work.

Therefore in just a second we’ll tell the LDS where the SDK is but first a word of warning…

Excuse me for shouting, but only ever register a single SDK with a Liferay workspace, and make sure it is the one in the workspace called plugins. Having multiple SDKs registered with in a single workspace can cause confusion or worse, and doesn’t add benefit to the environment. Please don’t do it.

LDS and the Bundle

LDS is able to start/stop the bundle but is also able to shortcut the deployment process and deploy straight to the bundle without needing help from the SDK.

Depending on the LDS version used, you may be asked to point to a bundle (or Liferay Runtime) the first time you point the LDS to a new workspace. Be sure to point to the workspace/bundles directory.

SDK and the Bundle

The SDK uses the libraries in the bundle to compile the plugins, and it also needs to know the location of the bunlde directory so that the deploy target can copy the WAR files to the Liferay Runtime

Configuration

As pointed out above, you should only configure a single SDK in the LDS for a given workspace. When you point the LDS to another workspace you are able to specify a different SDK as this value is configured against the workspace and is not global to the LDS. This will come as a major relief as the alternative would be incredibly restricting.

Furthermore, the plugins also have the registered name of the SDK included in their project properties, so it is important that all team members use the same name to describe the SDK within the LDS. I believe our default is liferay_sdk but it doesn’t matter what is selected provided everyone uses the same value. If not, you’ll be forced to fix this value every time someone else changes it in version control, and you’ll be unable to build or deploy until it is corrected. It is very annoying.

We may have already specified the Liferay Runtime when first pointing the LDS at the new workspace, but if not go to the LDS menu and select Window > Preferences and on the Preferences screen select Server > Runtime Environments, select ‘Add’, select the Liferay version for your bundle from the servers available and then point to the workspace/bundles/tomcat directory.

The next step would be to configure the SDK and bundle to work together, but as hinted earlier we don’t need to. If you look into the workspace/plugins/build.properties default settings, the server is already set to tomcat and the server location and deploy folder location are already correct because we have a directory called bundles pointing to the Runtime home directory.

Finally, right click on some spare space in the Package Explorer in the LDS, import, general, import and existing Eclipse project, navigate to the workspace directory, click OK and then select the source directory to import. This is useful for development and debugging.

Creating a new Plugin

When you create a new plugin project in the LDS, the wizard wants to know which SDK to use and since we have a single SDK there is no problem. The wizard ends up creating a new project in one of the subdirectories under the plugins directory, but within the LDS the project will display as if it were in the root directory of the workspace. It isn’t, but it is worth knowing the difference. If you get confused, right click the project in the LDS, go to the properties and look at the resource location.

Plugin Version Control

It is a bad idea to check the entire SDK into version control, so it is lucky that the LDS places them at the base of the Project Explorer. Right click, team, share, happiness.

Adding a Liferay plugin project from version control back into the LDS has some tricks to it.

Firstly, you’ll want to place the plugin project in the correct subdirectory in the SDK. When you import the project from version control, the second screen in the import wizard prompts you to import into the default workspace location. Don’t do this, and instead select the correct SDK subdirectory for that Liferay Plugin project type. But that’s not all.

Unless the bug has been fixed since the last time I checked, importing from version control will get the project into your LDS workspace, but the plugin will be imported as a Java project and not a Liferay Plugin Project; some of the Eclipse facets are lost. This matters. To fix it, right click and delete the project(s) that you just imported from version control but do not delete from the file system. Once again right click on some free space in the LDS Package Explorer, import, LIferay > Liferay Plugin SDK Projects, select the one and only SDK, select the project(s) to import and then they get imported correctly as Liferay Plugin projects.

Conclusion

So while I haven’t spelled out all of the learnings and reasons which has led us to this set up as our preferred Liferay Standard Development Environment, I hope that there are enough reasons provided for you to consider this approach and I hope that there are sufficient instructions provide to recreate the same in your own workspace.