Testing Browser Compatibility Made Easier with Microsoft VHDs

When you are a website developer, hardly ever do you get to mandate what browsers your users will use.  At my last employment we built a lot of Intranet web applications for our users, who all used the same version of IE that was managed automatically on their work computers via Active Directory.  That was nice.

At my current position the websites I create are used by a variety of school districts and the public.  While the majority of users are browsing my sites with IE7 and IE8 there are a few Chrome, FireFox, Safari and, yes, IE6 users.

 

There is a great community of software applications and web services to help you test how your site will react with different browsers.  Most of them are fairly static showing you how a page will render, but with highly dynamic sites you just need to see how it will work on the actual browser.

Fortunately Microsoft makes this really easy by releasing VHDs with various operating systems and browsers loaded, from WinXP and IE6 up to Vista and IE8.  That’s not the whole Microsoft gamut but it is a good portion and easy to use.  Just load up Microsoft Virtual PC and you are set to go.

Take a look at Microsoft’s offerings here.

Alternating Ordered List Item Styles

We have Policies and Procedures document that we are making available on our website.  This document in its entirety easily spans several hundred pages and has a pretty lengthy table of contents. 

To help make this easy to navigate and easier to consume we are posting several of the larger topics as individual documents and making them available from a linked table of contents that is created as a web page.

The requirement is that the table of contents uses different numbering styles at each indentation.  So, for instance, the outline below:

Topic A

   Sub-topic A.1

   Sub-topic A.2

      Sub-topic A.2.1

      Sub-topic A.2.2

Topic B

Topic C

would become:

1. Topic A

   a. Sub-topic A.1

   b. Sub-topic A.2

      i. Sub-topic A.2.1

      ii. Sub-topic A.2.2

2. Topic B

3. Topic C

This document isn’t maintained in a database yet so for now the table of contents is created in good old fashioned HTML.  Using a standard <ol> (ordered list) element in HTML looks initially like this:

  1. Topic A
    1. Sub-topic A.1
    2. Sub-topic A.2
      1. Sub-topic A.2.1
      2. Sub-topic A.2.2
  2. Topic B
  3. Topic C

The way to change the numbering style is by using the CSS list-style-type style on the <ol> element with various options such as decimal, lower-alpha and lower-roman.  You can find a great example of this at w3schools.  So, I could manually change the list style of each <ol> tag based on how much it was indented, but this would be a pain to maintain.  Anytime we changed the layout I would have to change the list-style-type styles and be sure to keep everything consistent.  I thought this would be a perfect place to use jQuery.

Using jQuery I was able to define an array of the types I wanted to use.  jQuery would then find all the <ol> and nested <ol> elements and change the style for each indentation.  Once done I could simply maintain the table of contents and jQuery would handle the styling. I couldn’t find any jQuery plug-ins that did this so here is the code I came up with.  If I end up using more than a couple of times I’ll probably create a plug-in for it.

1: function styleOutline() {
2: // List-item-styles we would like to use
3: var olStyles = [‘decimal’, ‘lower-alpha’, ‘lower-roman’];
4:
5: // Process the parent element.
6: styleOl($(‘ol:first’), 0);
7:
8: function styleOl(element, styleIndex) {
9: // Apply style
10: element.css(‘list-style-type’, olStyles[styleIndex % olStyles. length ]);
11:
12: // Call recursively for each nested ol
13: element.children().each(
14: function (i) {
15: var ol = $( this ).children();
16: if (ol) {
17: styleOl(ol, styleIndex + 1);
18: }
19: }
20: );
21: }
22: }
23:

This works great and took me only a couple of minutes to do. Definitely an improvement over the manually written way.  I hope this helps someone else out there!

Business Intelligence vs. Political Correctness in Education

I work for the Val Verde Unified School District and the Riverside County SELPA.  If you don’t know what either of these are don’t worry, just know that we deal with A LOT of student and teacher related data.

That being said, the question that always comes up is, “How we can serve our students better?”  Many people have different ways of interpreting this, whether it is based on grades, overall improvement, discipline, where students head after they graduate, etc.

One area of my particular interest that is starting to seep into the education world is Business Intelligence (BI), or rather the art of turning vast amounts of data into something that is actually useful.  One of our Asst. Superintendents recently said he felt the district was “data rich and information poor”.  He was expressing his frustration that they had an incredible warehouse of data but it was very difficult to analyze or use.  This sounds like a perfect fit for BI.

What kind of data do we have?  Well, just in our Student Information System (we use Aeries from Eagle Software) for each student we have grades, attendance history, class history, demographics (race, address, contacts), test scores, Special Ed info, movement between schools, and discipline records just to name a few.  For our staff we have their classes taught and students in the classes.  We have several other databases as well such as our district-wide library database (we use Destiny from Follett Software), our ASB database that tracks all our student spending for sports, dances, yearbooks and debt and our HR database for staff that includes certifications, degrees, work history, evaluations, etc.

We also use GIS to map students onto our district map allowing a lot of decisions to be made regarding geographic information, such as where to build schools.

With this admin staff and teachers are already attempting to ask questions that will help identify target student groups for extra programs and such.  Some of the work they manually do, such as separating students that are known to disrupt classes if they are put in the same room together.  This is a great start but a far cry of what large companies are doing these days. 

Until recently this type of information analysis has been out of reach for school districts.  While the tools are inexpensive, such as the Microsoft BI stack, there has been very little ability to hire experienced staff or to train their current staff.

Beyond the simple resources though, the real problem is that too many people are concerned about the Political Correctness of the questions they ask.  If any of you have been following the debates in California you know there is a huge controversy over whether the current tenure system should be replaced with a merit based one.  In a merit based system if you don’t perform you may not have a job the next year.  The issue is how to evaluate a teacher’s performance.

Some staff in our district have definitely pushed the idea that we can just be objective and ask the hard questions, but as a culture I fear we are still to sensitive about the outcome.  In my opinion, to really move ahead you have to be willing to ask the tough questions and honestly look at the results.  Why not find out if there is any link between discipline, grades and perhaps where a student lives?  Other good questions are student performance vs the teachers and courses they have.  You always hear about teachers that excel with higher performing students as well as teachers that are great at motivating and educating “problem cases”.  Perhaps there is a link between student performance and debt they carry?  Perhaps there is a link between teacher’s overall class performance and the movement of the teacher’s position?

Imagine a time where a school district takes all this into account and is able to tailor a student’s journey through school based on the teachers and classmates that would be the most beneficial to everyone.  That would be pretty incredible.  As a parent I would love to hear that our school district is doing everything they can, including using BI, to help make sure that my sons and daughter, and their friends have the best environment and teaching for their strengths and weaknesses.  Perhaps a student is starting down a path that will lead to poor performance and more discipline events, and we can put in measures to help them correct their path before we are in the office discussing suspensions and possibly expulsion.  On the flip-side, imagine an incoming teacher knowing they are in a district where their position and students are fine-tuned to provide the most optimal teaching environment for everyone. 

To me that would be pretty incredible.

As some of you know it is my desire to become the Director of IT and this is one area I would really like to see improved.

When Bad UI Sticks Around – JavaScript Alert Boxes

We recently migrated from one online IEP vendor to another.  This is a program for collecting and managing Special Ed information, but it is an enterprise app and worthy of critique and comment.  They do a great job, but there are some small UI issues I wish could be fixed.

For instance, when you enter data onto a form and try to leave the form without saving they do a nice job of alerting you that you are about to lose the valuable data you just entered.  However, there is a catch:

SNAGHTML97e6ac4

Ouch, did you read that correctly?  “Hit CANCEL to Leave this page.”  The problem with that is I would say 99% of users are used to hitting Cancel when they realize they made a mistake and want to undo it.  Several times I’ve had to stop my knee-jerk reaction to hit cancel when I realized I updated something and didn’t hit Save.

Not only are the button actions inconsistent with what users are used to but I would go further and state they are actually opposite, which to me is one of the worst UI anti-patterns.  In addition the buttons are not very informative, OK and Cancel just don’t tell you what they are doing with your data.  Unfortunately I think it might be stuck as it is.  The software now boasts adoption of over half the state of California.  That’s a good sized client base and the current users are already conditioned to hitting OK to go back to the page and hit the Save button.  If the vendor were to reverse the impact of the buttons now I can just imagine the outcry there would be over users losing data because they are simply used to hitting OK.  You see, no matter how many emails, home page news alerts or training documents you give out half the users won’t even bother to read them.  They won’t know there is a change until they have already lost their data.  Not a good thing.

If I were to have to implement this change I would re-label the buttons all together.  This would not only alert the user that something functions differently then what they are used to but it would also make the dialog more usable, which is also a good UI pattern.  Unfortunately you cannot do this with plain JavaScript.  Since the vendor already makes use of jQuery the UI Dialog plug-in is a great tool to use.  It also standardizes the dialog boxes since JavaScript alerts are handled inconsistently between browsers.

Here’s a sample of what I would do using the jQuery UI Dialog plug-in.  I think it is easy to read and clear in informing the user on what they are about to do.  While this would be a change to what users are used to I think it would be one that is easily adapted to.

image