Responsive Web Design Challenges

The redesign process is in full swing and up until last week, it was all smooth sail­ing. Then we ran aground as we embarked upon the DESIGN por­tion of our trip. Early in the process, I threw a cur­sory glance at respon­sive web design,  assum­ing that it was some morsel of cod­ing magic that I needn’t worry about because our devel­oper would be the cap­tain of that ship. I was wrong. Not Titanic wrong, but wrong nonetheless.

While it is true that Nick is respon­si­ble for build­ing and cod­ing the site to spec, respon­sive web design required me to think very dif­fer­ently about the con­tent on the pages. So dif­fer­ently, in fact, that after 14 years of doing web work, I stopped and had a Dorothy moment. I’m not in Kansas anymore.Things can move around on the screen: text, nav­i­ga­tion, images, every­thing. It all needs to shift and com­press and breathe to fit vary­ing widths. Con­tent can and should be fluid. Where’s my compass?

So Daisy, our designer, and I took a major, unplanned side trip and delved deeply into RWD the­ory and process. Essen­tially, there are two major camps form­ing on this
topic:

  1. The RWD folks who advo­cate build­ing full-meal sites with all the con­tent and fea­tures for desk­top and then mod­ify the way the con­tent is dis­played for var­i­ous screen widths and devices via the use of media queries and CSS.
  2. The other camp claims this is a faulty approach; among them the ever-controversial Jakob Nielsen who rec­om­mends sep­a­rate mobile-optimized sites that cut fea­tures and cut content.

The real­i­ties of imple­men­ta­tion aside, I would opt for some­thing closer to Nielsen’s approach due to the fact that I am a con­tent per­son. But with­out the proper research on what our users are look­ing for on mobile plat­forms, we are choos­ing the sim­pler RWD route and will mod­ify over time or apply a hybrid ver­sion. We are a uni­ver­sity with lim­ited resources and we have to make com­pro­mises for the sake of mak­ing progress.  Our web­site needs a bail out now.

We decon­structed our process and had a healthy dis­course. We met with David Con­rad, found­ing part­ner at Design Com­mis­sion, who gave us some great guid­ance on how to approach this project.  We read many arti­cles and shared sev­eral exam­ples. We involved BJ Miller, an Infor­mat­ics stu­dent who works in IT, and he brought some good ideas to the wire­fram­ing process. We were finally all on the same page.

Some great resources:
How to Design a Mobile Respon­sive Website

Top Respon­sive Web Design Tools

Respon­sive Web Design by Ethan Marcotte

Grid­pak: The Respon­sive Grid Generator

Pod­cast from The How and Why of Respon­sive Design

Top Respon­sive Web­sites in Higher Education

Exam­ples of Good Respon­sive Design

MySQL + SSL + Drupal 6

I’m in the process of migrat­ing the iSchool web­site to the “cloud”. Our main rea­son for this move is due to the fact that our cur­rent server loca­tion doesn’t have redun­dant power. When the power goes out in Mary Gates Hall, our web­site goes down. This has hap­pened twice in the past year. That’s two times too often. It’s embar­rass­ing to have your web­site down because the power is out.

In the move to the “cloud” I’m also beef­ing up our secu­rity. Now that we aren’t sure where the traf­fic between the DB and Web Server is routed, we decided we needed to encrypt traf­fic between the two.

Here are the steps I took to make this happen:

First gen­er­ate the cer­tifi­cates for the SSL con­nec­tion. I used openssl to do this. These files should be saved in a prop­erly per­mis­sioned folder. A com­mon loca­tion is /etc/mysql/certs/ or /etc/ssl/mysql/, but any­where will do.

Cre­ate the certificates:

Here are the com­mands to gen­er­ate the certs (run these on your DB server):

# Create CA certificate
openssl genrsa 2048 > ca-key.pem
openssl req -new -x509 -nodes -days 1000 -key ca-key.pem -out ca-cert.pem

# Create server certificate, remove passphrase, and sign it
openssl req -newkey rsa:2048 -days 1000 -nodes -keyout server-key.pem -out server-req.pem
openssl rsa -in server-key.pem -out server-key.pem
openssl x509 -req -in server-req.pem -days 1000 -CA ca-cert.pem -CAkey ca-key.pem -set_serial 01 -out server-cert.pem

# Create client certificate, remove passphrase, and sign it
openssl req -newkey rsa:2048 -days 1000 -nodes -keyout client-key.pem -out client-req.pem
openssl rsa -in client-key.pem -out client-key.pem
openssl x509 -req -in client-req.pem -days 1000 -CA ca-cert.pem -CAkey ca-key.pem -set_serial 01 -out client-cert.pem

When gen­er­at­ing these, be sure to use unique com­mon names for each cert.

Edit my.cnf

Now edit the my.cnf file on the DB server. This might be located in /etc/mysql/. Add these three lines under [mysqld] but replace /etc/mysql/certs/ with the path to your cer­tifi­cate files.

ssl-ca=/etc/mysql/certs/ca-cert.pem
ssl-cert=/etc/mysql/certs/server-cert.pem
ssl-key=/etc/mysql/certs/server-key.pem

Restart mysql on the DB server. (tail the mysql error log to see if every­thing starts up alright)

Cre­ate the SSL restricted user:

Hop in to MySQL as root (or another user with grant):

mysql -u root -p

Cre­ate the new user and give them access to your data­base from the IP of the web server. I added –ssl to the user­name to eas­ily remind us that the user requires ssl.

grant all privileges on YOUR_DATABASE.* to 'YOUR_USER-ssl'@'192.168.0.1' identified by 'PASSWORD' require ssl;

Copy certs to web server

Next securely copy the fol­low­ing files over to your webserver.

ca-cert.pem
client-cert.pem
client-key.pem

Edit my.cnf on the web server

Then edit the my.cnf file on the Web Server and add these three lines under [client]

ssl-ca=/etc/mysql/certs/ca-cert.pem
ssl-cert=/etc/mysql/certs/client-cert.pem
ssl-key=/etc/mysql/certs/client-key.pem

Test the connection

Try con­nect­ing to your DB server as your ssl user

mysql -u YOUR_USER-ssl -h yourdb.domain.com -p YOUR_DATABASE

If this doesn’t work, check your error log on the DB server to make sure MySQL started prop­erly with SSL.

Mod­ify Dru­pal Core so it can sup­port MySQL over SSL

We’re using the MySQLi exten­sion for Dru­pal 6. To get it to sup­port SSL I had to edit my settings.php file for the site, as well as /includes/database.mysqli.inc and /includes/database.inc

This is a bit hacky, and when updat­ing Dru­pal these changes will need to be re-applied.

Add the fol­low­ing 3 lines to your settings.php file:

$db_url['certs']['key'] = '/etc/mysql/certs/client-key.pem';
$db_url['certs']['cert'] = '/etc/mysql/certs/client-cert.pem';
$db_url['certs']['ca'] = '/etc/mysql/certs/ca-cert.pem';

These are the paths to your cer­tifi­cate files. (note: if you have a data­base named certs that you are using with dru­pal, you’ll need to think of a dif­fer­ent approach for this part)

Also within settings.php be sure to set the proper DB user­name and pass­word in the $db_url[’default’] vari­able. Here’s what that vari­able should look like:

$db_url['default'] = 'mysqli://YOUR_USER:PASSWORD_HERE@database.domain.com/YOUR_DATABASE';

Remem­ber, we set YOUR_USER to be someuser-ssl

Now edit /includes/database.inc :: within func­tion db_set_active() there is a line call­ing db_connect(). I added 1 vari­able to the db_connect argu­ment list:

$db_conns[$name] = db_connect($connect_url, $db_url['certs']);

Then edit /includes/database.mysqli.inc

Change the func­tion db_connect() argu­ment list to the include following:

function db_connect($url, $db_ssl=null) {

Now right above the mysqli_real_connect() call, add this:

  if(is_array($db_ssl) && sizeof($db_ssl) > 0)
  	mysqli_ssl_set($connection, $db_ssl['key'], $db_ssl['cert'], $db_ssl['ca'], NULL, NULL);

This line sets mysqli to use SSL and it sets the paths to the given cer­tifi­cate files.

With these in place, you should now be able to con­nect to the DB.

There are many steps to get­ting this setup prop­erly. Just remem­ber to watch your error logs to fig­ure out what is going wrong and where. Test­ing out your SSL con­nec­tion with a very basic PHP Con­nec­tion test script might also help elim­i­nate some of the vari­ables that Dru­pal intro­duces. Here’s a sam­ple test script:

$connection = mysqli_init();
mysqli_ssl_set($connection, '/etc/mysql/certs/client-key.pem', '/etc/mysql/certs/client-cert.pem', '/etc/mysql/certs/ca-cert.pem', NULL, NULL);
mysqli_real_connect($connection, 'database.domain.com', 'YOUR_USER', 'YOUR_PASSWORD', 'YOUR_DATABASE', 3306, NULL, MYSQLI_CLIENT_FOUND_ROWS);

3306 is the default MySQL port, this could be dif­fer­ent for you.

Survey of First-year Informatics Students

In Feb­ru­ary 2012 the iSchool sent out a sur­vey to our first-year Infor­mat­ics stu­dents. 61% of the first-year stu­dents took the sur­vey, and all of the respon­dents said they would rec­om­mend Infor­mat­ics to another stu­dent inter­ested in the infor­ma­tion field. The sur­vey also showed that the unique iSchool com­mu­nity plays a key role in the learn­ing expe­ri­ence and stu­dent sat­is­fac­tion in the program.

To help dis­play and com­mu­ni­cate what we learned from the sur­vey, our Graphic Designer, Dasiy Fry, took these results and turned them into the fol­low­ing info­graphic. Click the pre­view below to see the full infographic.

Informatics Infographic

Hello, my name is…

I’m Lisa Get­tings, the newish Web Pro­ducer for the iSchool. I’m the first to occupy this much needed position.

The web team is intact and the project has begun. I joined the iSchool a lit­tle over a month ago and plunged head­l­long into plan­ning out the web redesign of our main, public-facing web­site.  It’s an ambi­tious task on a tight time­frame and it’s a chal­lenge I relish.

I spent the first month on dis­cov­ery, research and plan­ning. Upon first view of the site, my thought was, “This is a rat’s nest of a nav­i­ga­tion.” It was born out of the com­plete lack of cen­tral­ized con­tent over­sight and IA strat­egy. Too many cooks with­out any recipes. Also lack­ing is a coher­ent voice and sound edi­to­r­ial judgement.

There is noth­ing I like bet­ter than bring­ing order to chaos, orga­niz­ing ideas, cat­e­go­riz­ing con­tent and mak­ing infor­ma­tion flow. I’m in the right place.

We set up the project in Base­camp and I cre­ated sev­eral plan­ning and process doc­u­ments. I’m post­ing them here for any­one to check out and use. I’ve ben­e­fited so many times from var­i­ous uni­ver­sity blog­gers who have posted their web redesign doc­u­men­ta­tion that its time I return the favor.

 

 

FAQs With Style

I was recently tasked with mak­ing some improve­ments to sev­eral messy pages on the iSchool site to improve the read­abil­ity and over­all appear­ance. One of these pages was an FAQ page, one of many on the site, which was con­structed from just a bunch of text and cer­tain lines in a bold font to sug­gest that they were the ques­tions. My first thought was that this page was just a wall of text that a lot of peo­ple would just sim­ply skip over rather than try to read.

Old FAQ Page

An old FAQ page

My goal with this page was to re-design it in a way that made it seem more like a real FAQ page and become more read­able and scan­able to both a passer by and some­one look­ing for a spe­cific answer to a spe­cific ques­tion. To do this, I started off by adding some more con­trast between the ques­tions and the answers as well as adding some more space and divi­sion between the dif­fer­ent question/answer pairs. The first step here was to increase the size of each ques­tion to 18px and mak­ing the text a deep pur­ple color to con­trast the 12px black default text style of the answers. Then I added some spac­ing between each question/answer pair and throw­ing in a sub­tle light gray bor­der to clearly dis­tin­guish between dif­fer­ent ques­tions. Then, after look­ing at many exam­ples of FAQ pages on dif­fer­ent web­sites, I noticed that many sites label their ques­tions and answers with a big “Q” and “A” respec­tively. I felt that this made the site feel like even more of an FAQ page as well as adding a bit to the ease of scan­ning through the con­tent so I added these labels to the left of each ques­tion and answer, again in an 18px font.

This spe­cific FAQ page I was work­ing on had the ques­tions divided up into sev­eral sec­tions, each with their own header. The 18px font of the ques­tions, how­ever, broke the hier­ar­chy of scale with the sec­tion head­ers because they were a smaller font. A sim­ple fix for this would have been to increase the size of the sec­tion head­ers to some­thing like 24px, but after try­ing that out, It just seemed too big. I was really happy with how the ques­tions and answers were look­ing so I didn’t want to tweak the ques­tion font size at all. Instead, I came up with a dif­fer­ent approach to mak­ing the head­ers become more defined with­out going crazy with the font size. The first thing I tried was to give the head­ers a light gray back­ground to make them stand out and really divide each sec­tion. This looked alright, but with the padding of the con­tent con­tainer keep­ing the gray back­ground of the header from span­ning across the entirety of the con­tent box, I felt like it still needed some­thing to help divide the sec­tions and stand out as more promi­nent than the ques­tions. To fix this, I just took the gray box I had formed by giv­ing the header a back­ground and stretch­ing it hor­i­zon­tally so that it extended 4px past the white back­ground of the con­tent box.

New FAQ Page

The final look after all of the changes

After all of the tweaks, I was quite happy with the read­abil­ity and over­all appear­ance and so was Nick so I went ahead and applied the new styles to all of the FAQs on the site.

The one draw­back to the new style is that it involves adding a fair amount of cus­tom mark-up to the page con­tent which makes it a lit­tle tricky to do things like adding or remov­ing ques­tions and sec­tions with the WYSIWYG edi­tor. The eas­i­est way to address this issue for the time being was to just let the page own­ers know that they will have to con­tact the web team in order to do these types of changes.

With the new iSchool site cur­rently in the works, we are able to address this prob­lem in a much more ele­gant and usable way. Instead of just adding the extra markup to Page con­tent, we are work­ing on a FAQ con­tent type that uses a cus­tom field to cre­ate new ques­tions and answers and add them to an FAQ page.

FAQ Submit tool in D7

What the FAQ con­tent type might look like in the new Dru­pal 7 site.

Servers

Part of my job here at the Infor­ma­tion School is plan­ning our web server struc­ture, what goes where, who should have access to what, and so-on. Luck­ily I also have a great server admin who has given me free reign over all things web.

Zach and I spent the bet­ter part of the past two weeks get­ting two new servers (both VMs in a clus­tered envi­ron­ment) set up and decom­mis­sion­ing an old one. Before recently we had a devel­op­ment server that was multi-purposed to also host LTS, our in-house open source dae­mon that han­dles secure con­nec­tions between web ser­vices and our apps that want to use them. Basi­cally it’s a middle-man stan­dard­ized API that inter­acts with var­i­ous ser­vices avail­able on cam­pus. So to start, one of our new servers is an appli­ca­tions server specif­i­cally for LTS and any other ran­dom app that we cre­ate that needs to be up and secure more than a devel­op­ment server could guar­an­tee. The appli­ca­tion server is also setup to host mul­ti­ple sites so future non-production server wor­thy tools could live here.

Our sec­ond new server is purely for test­ing and devel­op­ment. We set it up to host mul­ti­ple domains and have moved the devel­op­ment ver­sion of our cur­rent site over. In this move we also adjusted our strat­egy for ver­sion­ing. In the past the entire dru­pal site lived in a GIT repo hosted inter­nally. We shifted from that strat­egy to only hous­ing cus­tom code (mod­ules, themes, and misc stuff) in indi­vid­ual repos on bit­bucket. LTS and some of our Dru­pal mod­ules are open source, but we also have pri­vate repos for our theme and var­i­ous other mod­ules that aren’t yet, or won’t be open source.

Our new strat­egy par­tially elim­i­nated GIT as a backup strat­egy, so we also set up a snap­shot script that syncs a weeks worth of nightly snap­shots of our sites direc­tory into a snap­shots direc­tory (on the same server). Since this is our devel­op­ment server, and we have our hand coded stuff in repos, we cur­rently don’t have an off­site backup strat­egy in place for it, like we do with our pro­duc­tion server.

I also spent a good bit of time tweak­ing set­tings on the new dev server so exter­nal traf­fic wouldn’t be able to view the site or get to things that should be inter­nal only. Since all iSchool com­put­ers are on the 172.28 sub­net it was really easy to only allow inter­nal traf­fic. For exter­nal folks need­ing to get to the site, VPN allows them to. To quell any con­fu­sion, we redi­rected all exter­nal traf­fic over to a land­ing page on the live site explain­ing why they couldn’t access our devel­op­ment site, and how to VPN to gain access.

With every­thing off the old devel­op­ment server, it was able to be decom­mis­sioned. Our next step is to fig­ure out what we want to do with our pro­duc­tion server. Our goal is to move pro­duc­tion out of our server closet and either into the cloud or over to a reli­able ded­i­cated host. While we have some redun­dancy in our server closet as far as hard­ware goes, we cur­rently have no redun­dancy for power fail­ure. With a site re-launch in the works, we’ll likely fig­ure out our server solu­tion for the new site and leave the cur­rent site where it is until we launch.

Committees

Today I was a guest for an iSchool “Intranet Com­mit­tee” meet­ing. I was brought in to dis­cuss the pos­si­bil­ity of some Intranet data (specif­i­cally Poli­cies & Pro­ce­dures) being moved or pub­lished to the pub­lic fac­ing iSchool web­site. The result of the com­mit­tee meet­ing more or less ended with the deci­sion that we’d keep every­thing the way it is. The thing is, some of the poli­cies and pro­ce­dures are already on the pub­lic site (the vast major­ity of the stu­dent poli­cies), then some of the intranet info in P&P is actu­ally more like knowl­edge base arti­cles, which are sort of pro­ce­dures (how to get toner for copiers, how to use voice­mail). The idea behind this sec­tion was to have a sin­gle source for fac­ulty, staff and PhD stu­dents to go to, but we also have the pub­lic site, an IT knowl­edge base and indi­vid­ual depart­ment pages within the Intranet that have some of that info too.

But enough about how some of our infor­ma­tion is scat­tered every­where, this post is about com­mit­tees. The result of the com­mit­tee meet­ing pretty much rein­forced my belief that com­mit­tees as work­ing groups is a bad idea. The model that was used in this case, where the com­mit­tee comes together to brain­storm and try to fig­ure out how some­thing should be done is bro­ken. The result is that 45 min­utes of a 1 hour meet­ing were spent dis­cussing the same sin­gle issue with­out ever com­ing to any con­clu­sions or plans for the future. So essen­tially time was wasted.

A bet­ter model (this is all of course just my opin­ion based on pre­vi­ous expe­ri­ences) would be to form a small (<= 5) per­son work­ing group full of experts that would be tasked to come up with a solu­tion to a given prob­lem (in this case cre­at­ing a sin­gle point of con­tact for all staff, fac­ulty and PhDs to get infor­ma­tion). This work­ing group could meet and work on this prob­lem as much or lit­tle as they need to. After they come up with a solu­tion, they present it to the com­mit­tee (usu­ally 10+ peo­ple). The com­mit­tee can then pro­vide feed­back on the pro­posed solu­tion and also ask for changes where they see addi­tional needs or where needs weren’t met. Then the Work­ing Group would make those changes and present their refined pro­posal, even­tu­ally result­ing in the pro­posal being accepted by the com­mit­tee (ideally).

In my model, instead of 10+ peo­ple “work­ing” on the solu­tion, you have 1–5 doing the bulk of the work and the com­mit­tee is there to guide the solu­tion to the desired out­come and ulti­mately endorse it as a com­mit­tee backed solu­tion. The trick here is to keep the com­mit­tee on track and keep them from fix­at­ing on tiny details that won’t make a sig­nif­i­cant (if any) dif­fer­ence to the out­come of the project.

Setting up Shibboleth: Ubuntu + Apache + Drupal

Here at the UW we use Shib­bo­leth as a sin­gle fed­er­ated login solu­tion. There are fall backs and legacy options avail­able, so before recently the Infor­ma­tion School was using LDAP for login. The major advan­tage (and main rea­son cen­tral UW wants every­one to use Shib­bo­leth) is that the login cre­den­tials are sup­plied only to the cen­tral UW IdP (Iden­tity Provider). This makes login safer and more secure for the user.

So what is Shibboleth?

I asked the same ques­tion when I first heard about it. It’s a weird name and I’ve never heard of it before. Shib­bo­leth is a prod­uct of the Internet2 con­sor­tium. In the­ory, Shib­bo­leth should catch on all across higher ed and maybe the whole inter­net. Now that we’re using Shib­bo­leth, the iSchool could allow folks with other InCom­mon fed­er­a­tion mem­ber accounts to login with their native cre­den­tials on our site. We don’t cur­rently have a need to do that, but in the future, who knows?

So how did I get it to work?

It’s really not as straight for­ward as I was hop­ing. The doc­u­men­ta­tion in the IT wiki seems to be a bit out dated, or maybe just dif­fer­ent than an Ubuntu pack­age setup, so it wasn’t easy. First, and fore­most, what we are doing is set­ting up a Shib­bo­leth SP (Ser­vice Provider); we are not set­ting up an IdP (Iden­tity Provider). The IdP is hosted cen­trally by UW and already run­ning. What we need is a Shib­bo­leth SP, with which we will con­nect to the IdP (and the InCom­mon fed­er­a­tion, if you choose to).

The doc­u­men­ta­tion on the Shib­bo­leth site sup­ports Red­Hat, SUSE, and Open­SUSE instal­la­tions well. These are the offi­cially sup­ported Linux Dis­tros. Of course, we’re using Ubuntu, so it seemed I would have to com­pile from source. This didn’t make me happy and I didn’t want to have to do that. So I went Googling and found out that Ubuntu has some pack­ages avail­able through apt-get that will work.

From a con­glom­er­a­tion of sites I fig­ured it all out, but there are a lot of steps to get this to work. To get started we first have to install the Shib­bo­leth SP which will run as a dae­mon (ser­vice) on the same web-server that will need to authen­ti­cate. At the iSchool we’re run­ning Apache so we’ll also need a shib­bo­leth mod­ule. The apt-get pack­age will also require some depen­dency pack­ages, but that’s all han­dled for us by apt-get.

To per­form this setup you will need sudo or root access to the server that you’re installing Shib­bo­leth on, and you’ll need to know your way around Linux a bit.

The install

I’m assum­ing you have Apache installed and work­ing, as well as SSL work­ing on Apache.

First off, we need to grab some new pack­ages, many of these have depen­den­cies which apt-get will also be installing. Go ahead and update apt-get:

sudo apt-get update

Now start off by grab­bing the shib­bo­leth packages:

sudo apt-get install libapacahe2-mod-shib2 shibboleth-sp2-schemas

If you didn’t get any errors, you should have a /etc/shibboleth direc­tory now. You should also have mod_shib_22.so in /usr/lib/apache2/modules, and you should have an Apache mod­ule load file in /etc/apache2/mods-available called shib2.load.

Now you’ll need to enable the Apache module:

sudo a2enmod shib2

Then restart Apache (this may be a dif­fer­ent com­mand for you):

sudo service apache2 restart

At this point, you can go ahead and start the Shib­bo­leth dae­mon and see if things are some­what working.

sudo service shibd start

You should see a mes­sage say­ing “Start­ing Shib­bo­leth 2 dae­mon: shibd”. To test it out point your browser at your.domain.uw.edu/Shibboleth.sso/DS. This should redi­rect you to the place­holder URL https://ds.example.org… If it did, con­grats, you have a work­ing Shib­bo­leth dae­mon. Now you have to con­fig­ure it to work properly.

Con­fig­ur­ing Shib­bo­leth at the UW

This is where I had a heck of a time fig­ur­ing out what to do. The install doc­u­men­ta­tion in the UW wiki didn’t have much info about the con­fig file, but after dig­ging deeper I real­ized that there are sep­a­rate arti­cles beneath the Shib­bo­leth Ser­vice Provider Sup­port arti­cle (use the left nav to get to them).

The file you need to edit is /etc/shibboleth/shibboleth2.xml. This file will be full of exam­ple con­fig­u­ra­tion SAML. You can either down­load this file from your server and open it on your desk­top, or you can edit it in place with your favorite edi­tor. Do note that the file is owned by root, so sudo when you open this file before you make all these changes if you’re using a com­mand line edi­tor (it sucks to for­get to do that).

There are a few changes you’ll have to make in this giant file.

  1. In the InProcess block change the name attribute of the Site ele­ment to be what­ever the domain name for your shib­bo­leth install will be. For us it was ischool.uw.edu. In the same ele­ment, I added scheme=“https” and port=“443” attrib­utes, to spec­ify SSL.
Here is what your InProcess block should look like now:
<InProcess logger="native.logger">
    <ISAPI normalizeRequest="true" safeHeaderNames="true">
        <Site id="1" name="your.domain.uw.edu" scheme="https" port="443" />
    </ISAPI>
</InProcess>
  1. In the RequestMap­per block, change the name attribute on Host to your.domain.uw.edu too.
  1. Now in the Appli­ca­tion­De­faults block, change Enti­tyID to https://your.domain.uw.edu.
This is what it should look like:
    <ApplicationDefaults id="default" policyId="default"
        entityID="https://your.domain.uw.edu/shibboleth"
        REMOTE_USER="eppn persistent-id targeted-id"
        signing="false" encryption="false">
  1. Fur­ther on, there’s a Enti­tyID attribute on Ses­sion Ini­tia­tor which needs to be changed to urn:mace:incommon:washington.edu and an ID attribute which needs to be changed to UW.
This is what that block should look like:
<SessionInitiator type="Chaining" Location="/DS" isDefault="true" id="UW"
        relayState="cookie" entityID="urn:mace:incommon:washington.edu" forceAuthn="true">
    <SessionInitiator type="SAML2" acsIndex="1" template="bindingTemplate.html"/>
    <SessionInitiator type="Shib1" acsIndex="5"/>
</SessionInitiator>

In the above block, the forceAuthn=“true” tog­gle forces the user to re-enter their pass­word on login even if they have a valid webauth ses­sion. We opted for this option since many of our users have web edit­ing priv­i­leges on our site and the added secu­rity just made sense to us. If you don’t have a need for the extra secu­rity, you can go ahead nad change forceAuthn=“true” to forceAuthn=“false”.

  1. Now you need to remove or com­ment out the fol­low­ing two Ses­sion­Ini­tia­tor blocks. The only active Ses­sion­Ini­tia­tor block should be the one above.
  1. Fur­ther down, you’ll find a Meta­dat­aProvider block. Uncom­ment this block and make the changes as seen below:
<MetadataProvider type="XML"
        uri="http://wayf.incommonfederation.org/InCommon/InCommon-metadata.xml"
	backingFilePath="InCommon-metadata.xml" reloadInterval="7200">
    <MetadataFilter type="RequireValidUntil" maxValidityInterval="2419200"/>
    <MetadataFilter type="Signature" certificate="incommon.pem"/>
</MetadataProvider>
  1. Con­fig­ur­ing logout requires a cou­ple more changes. This time in /etc/shibboleth/localLogout.html add the fol­low­ing meta redi­rect below the content-type meta tag:
<meta http-equiv="Refresh" content="0;URL=https://idp.u.washington.edu/idp/logout"/>

And that was the last required change. There are also error con­fig­u­ra­tions that can be set, but for more info on that you can check out the Shib­bo­leth Wiki.

Save and upload your shibboleth2.xml file.

Next you’ll need to edit the /etc/shibboleth/attribute-map.xml. For info on what to edit here, see the UW doc­u­men­ta­tion on this page.

You’re almost done! Now, if you want to you can revisit the test url I gave above: your.domain.uw.edu/Shibboleth.sso/DS and you should be see­ing a new error. Some­thing along the lines of opensaml::saml2md::MetadataException, Unable to locate meta­data for iden­tity provider (urn:mace:incommon:washington.edu). If you see that, it means your con­fig­u­ra­tion file is (at least mostly) work­ing as it should. Now you just need to com­plete a few more steps.

Secu­rity keys

The rea­son it’s unable to find the Iden­tity Provider meta­data is due to a lack of the InCom­mon fed­er­a­tion cert. The cert is linked to in the UW doc­u­men­ta­tion and can be found at https://wayf.incommonfederation.org/bridge/certs/incommon.pem.To get it on your server, you can just run this command:

sudo wget -O /etc/shibboleth/incommon.pem https://wayf.incommonfederation.org/bridge/certs/incommon.pem

Alter­na­tively you could just open the /etc/shibboleth/incommon.pem file for writ­ing and paste the cert in, or FTP it up.

You also need to cre­ate a self signed cert for Shib­bo­leth to use. The result will be a key file and a cert file. If you need help fol­low steps 1–4 in this tuto­r­ial. You’ll want to name these files sp-key.pem and sp-cert.pem, and copy or move them into /etc/shibboleth/.

Now you need to restart the Shib­bo­leth daemon:

sudo service shibd restart

Hit the test url again and it should be for­ward­ing you to idp.u.washington.edu/idp/profile/SAML2/Redirect/SSO. Your new error should be “Error Mes­sage: SAML 2 SSO pro­file is not con­fig­ured for rely­ing party ‘https://your.domain.uw.edu/shibboleth”. That means Shib­bo­leth is con­fig­ured to send your users over to the UW IdP. We’re almost done.

Reg­is­ter­ing with the IdP

Now you need to reg­is­ter your SP with UW and option­ally reg­is­ter your SP with InCom­mon. The UW doc­u­men­ta­tion is great here. We chose to only reg­is­ter with UW for now, so I’m not sure what the process is like with InCom­mon, but with UW it was pretty pain­less. One thing to note; You’ll need offi­cial domain access rights to reg­is­ter with UW.

After reg­is­ter­ing it takes a lit­tle while and after that the test URL should resolve to a work­ing UW webauth login form. The next steps in this post are just about get­ting Shib­bo­leth Auth set up in Drupal.

The Dru­pal Module

Now that we have Shib­bo­leth up and work­ing, we need to install the Shib­bo­leth mod­ule for Dru­pal. This mod­ule works in both Dru­pal 6 and 7. We are cur­rently using Dru­pal 6 for our pro­duc­tion site, but we have a test server up with Dru­pal 7 on it. Both are using Shib­bo­leth for auth.

This step is impor­tant and easy to miss. Add a few lines to your .htac­cess file:

AuthType Shibboleth
ShibRequireSession Off
ShibUseHeaders On
require shibboleth

Now to con­fig­ur­ing your new mod­ule. Nav­i­gate over to the shib_auth mod­ule con­fig­u­ra­tion screen at /admin/user/shib_auth. You’ll need to change these Attribute set­tings (you can ver­ify the accu­racy of these vari­ables by print­ing out $_SERVER after you are logged in via Shibboleth):

Server vari­able for user­name: HTTP_UWNETID
Server vari­able for e-mail address: HTTP_EPPN

Over on the advanced tab I also added in a URL to redi­rect to after logout. After that, all that’s left is adding the Shib­bo­leth login block to your site. This will vary by site, so I’m not going to go over that beyond men­tion­ing that the shib­bo­leth mod­ule includes a login block that you can place on your site. How you want to get that there is up to you and your theme.

The goal of this post is to raise aware­ness of Shib­bo­leth, and to assure every­one that it is pos­si­ble to get it work­ing with Dru­pal on Apache in Ubuntu. It’s also for our own step by step record of how to repro­duce this in the future.

IE 6 really is dead.

It has been my habit to make sure my sites work in all rel­e­vant browsers. IE 6 has been on my list for quite some time and it really sucked that it is. Recently B.J. Miller and I were check­ing out the browser usage sta­tis­tics on ischool.uw.edu and wow was I sur­prised by what we saw.

It turns out Inter­net Explorer isn’t king when it comes to iSchool fans, not by a long shot. On top of that when I drilled down into the IE ver­sions I found even greater news.

Less than 2% of our IE users are using IE6. That means 1.9% of 27.2% of our users, 0.5% of our total user base, is on IE6. That num­ber is finally low enough to really con­sider ceas­ing sup­port for IE6. This seemed to good to be true, so my first thought was that all of our lab com­put­ers run­ning IE9 must be off­set­ting these num­bers. But I looked into it, fil­tered by exter­nal traf­fic only, and it turns out that num­ber isn’t much dif­fer­ent. Only 0.7% of our exter­nal users are using IE6.

A really neat fact is that more of our users browse from Android than from IE6. We def­i­nitely need to get our mobile style in check.

Does that mean I won’t check sites in IE6 anymore?

I will likely still be ver­i­fy­ing that sites are usable in IE6. I am also con­sid­er­ing adding a dis­mis­si­ble notice to our site that would show for IE6 users, let­ting them know that their browser isn’t fully sup­ported and their expe­ri­ence on our site will be degraded while using IE6.

But as for hav­ing an IE6 only style sheet that swaps all those PNGs out for GIFs, I won’t be doing that extra work anymore.

Doing things wrong, just to get them done

It was wrong, and I know it. It goes against every thing I stand for and every­thing I push for. It is the Infor­ma­tion School Cen­ten­nial mini-site. A year or so ago, some­one was tasked to setup and build out a cen­ten­nial web­site for the iSchool; this was before my time here. Unfor­tu­nately not much came of the project. I’m not sure why, or what hap­pened, but the project fell to the way­side. I wasn’t made aware of the project or the need for a cen­ten­nial site until well into the cen­ten­nial year. Need­less to say there was a sense of urgency to get some­thing, any­thing, up on the web.

In the first day, we came up with some ideas. We weighed out the pros and cons of keep­ing it sim­ple and being a bit extrav­a­gant. Obvi­ously peo­ple wanted it to be “cool” and “awe­some”. The UW 150th site sure was, why shouldn’t our 100th be? The time crunch was here, we had some­where around a week or two to get it up. Oh boy! So we did. The result was actu­ally fairly decent, the site looks okay, even though the design wasn’t pol­ished and mas­saged for weeks. The func­tion­al­ity is all there and it works within Dru­pal and within the cur­rent site’s template.

So what did I do wrong?

The time­line requires Javascript and doesn’t ele­gantly degrade. This is some­thing that gets under my skin. This is some­thing that I com­plain about when I look at other people’s work. And here I am, guilty as charged, a hyp­ocrite. Why did I do it? The lim­i­ta­tions of the cur­rent site tem­plate cou­pled with the lim­i­ta­tions of Dru­pal and the time it would take to build out a cus­tom mod­ule to make this work the right way cre­ated a wall that would pre­vent the time­line from being enhanced by the “two months ago would have been ideal” deadline.

What’s so bad about requir­ing Javscript?

Every­one has Javascript sup­port these days, right? Well, no, not really. There are plenty of peo­ple out there with old browsers and old devices. Then there are oth­ers who turn Javascript off for secu­rity rea­sons, or maybe to pre­vent pop­ups, or maybe JS slows their machine down. There are count­less rea­sons a user might turn Javascript off. What we cre­ate should be acces­si­ble to those users no mat­ter what their set­tings might be.

What should I have done?

I should have made the time­line work just fine with­out Javascript. Then, once that was work­ing, I should have added the Javascript layer to make it cooler for peo­ple who have Javascript capa­bil­i­ties. In this par­tic­u­lar case, the cost would have been a fair deal of time, per­haps twice as much or more, and we sim­ply didn’t have it. What’s stop­ping me from fix­ing it now? Still time. We’ve moved on to the next project, and the next project is big.

So far, no one has com­plained that the time­line doesn’t work for them. I’m not even con­vinced we’ll hear a sin­gle com­plaint. But the fact is, I did it wrong, and I’m cer­tainly not proud of that.