web

That pesky IE compatibility view... how to turn compatibility view off

Internet Explorer is a tricky browser to design for. I, like others, spend countless hours making my web standards pages work in IE, too. 

Here's a patch/hack/fix I applied today to fix the problem of Internet Explorer rendering my web page differently to a user with IE's compatibility view "on" than "off." Just as a note, You can tell if IE compatibility mode is on if the little page icon in the browser shows up as a solid color instead of an outline.

You might need this method applied if your site works well without compatibility view (or in webkit browsers), but does weird things due, usually, to stylesheets using conditional formatting or for html5 compatibility.

<meta content="IE=8; IE=9" http-equiv="X-UA-Compatible" />

For a list of the different meta content options to include, this article was phenomal.

Make this be the first meta tag in the list of metas, otherwise IE9 won't be happy.

When the above meta tag is included in the <head> element of your page, the user is no longer presented the option to "toggle into" compatibility view. In my case, they don't need compatibility view. This is a great hack if rendering the page to work without compatibility view is not an option.

 

 

Note: This workaround won't do it for you if the user has already added your website specifically to the Compatibility View list from within IE's compatibility settings. You may have to direct them to instructions to remove it, if that's the case. But... let's face it, if they figured out how to add it to that list, then either they aren't in control (a domain policy may add the site via security settings) or they already know what they are doing and will probably google it faster than you can walk them through it.

 

 

 

Enable Cross-Origin Resource Sharing to Allow Cross-Site JSON

We just discovered our open data wasn't nearly as open as we believed.  Turns out for true cross-site requests of JSON data you need to add a HTTP Reponse Header:

 Access-Control-Allow-Origin: "*"

The method one uses to do so vary widely by webserver and host.  In our case, for IIS7 the simplest method was to configure it in the web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

For more information on the why and how as well as directions for other webservers visit enable-cors.org. The folks behind hacks.mozilla.org also offer a solid overview of Cross-site XmlHttpRequest with CORS.  Use the form at http://enable-cors.org/#check to see if your site is CORS enabled.

At this time only IFWIS Core is CORS-Enabled on IDFG's website.

Displaying Recent Roadkill on your Webpage

You can use the Roadkills API to display the most recently reported roadkill on your webpage.

Passionate about Mule Deer perchance?  In a couple quick steps you can add a real-time list of the Recent Mule Deer Roadkills using the magic of JQuery and the Roadkills API.  First, a demo, then the code.

Demonstration

Recent Mule Deer Roadkill

    Loading Roadkill...

The Code

<ul id="roadkillfeed">Loading Roadkill...</ul><script type="text/javascript" src="http://www.google.com/jsapi?key={YOUR GOOGLE API KEY}">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
        google.load("feeds", "1");

        google.setOnLoadCallback(function () {
            initializefeeds()
        });

        function initializefeeds() {
            var feed = new google.feeds.Feed("http://fishandgame.idaho.gov/ifwis/core/view/roadkills/list.rss?species=16300&start=-365&end=now&pageSize=25&cachebuster=" + parseInt(Math.random() * 99999999, 10));
            feed.setNumEntries(25);
            feed.load(function (result) {
                if (!result.error) {

                    var content = document.getElementById('roadkillfeed');
                    var html = '';

                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];

                        html += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';

                    }
                    content.innerHTML = html;
                }
            });
        }
    </script>

Substitute your Google API Key and your customized URL and you're live!  Well, not the roadkill, but the page is displaying live data as it arrives!

Background on OpenID and oAuth

OpenID

OpenID explained - a federated passport for the web
http://openidexplained.com

Making openid pretty
http://stackoverflow.com/users/login

Built using jquery openid plugin
http://jvance.com/pages/JQueryOpenIDPlugin.xhtml

Another implementation w/ extend properties
http://www.zoho.com

OAuth

OAuth a Valet Key for the Web
http://hueniverse.com/oauth/guide/intro

Beginner's Guide to OAuth - Workflow
http://hueniverse.com/2007/10/beginners-guide-to-oauth-part-ii-protocol-workflow

Demo of OAuth
http://pikchur.com or http://yfrog.com

Twitter has a good explanation of OAuth 1.0a with workflow
http://dev.twitter.com/pages/auth

OpenID vs OAuth (federated vs delegated login)
http://hueniverse.com/2009/04/introducing-sign-in-with-twitter-oauth-style-connect

Library we will be using for implementation
http://www.dotnetopenauth.net/

Database Documentation Made Easy

Data Dictionary Creator is a simple application which helps you document SQL Server databases. It stores all the information in Extended Properties, so it's easier to keep the documentation in sync with the database as it changes.  The tool is open source and available as an executable and source code on codeplex.  The first code release was November 2006 with over 40 releases and patches up until today.  Authored in C#.Net.

Database Dictionary Creator

I could go through a step-by-step, but there is already a great walkthrough online.

The html grouped option was great for me - it even creates the anchor tags to jump from the table list to the table details. 

The only step remaining in my mind was to link the database diagram to the table details by exporting a diagram from sql server and adding an image map.  Since those steps are custom, I'll document them here:

Exporting a SQL Server Relationship Diagram

  1. Right-click in the diagram pane
  2. Choose "Copy Diagram to Clipboard"
  3. Paste in an image management destination program and save as image

Creating an Imagemap

  1. Open an online imagemap creator such as http://www.maschek.hu/imagemap/imgmap
  2. Upload an image or provide a url to an image and click "accept"
  3. Draw a box around each table in the diagram.  Add hypertext references (href) and alternative text (alt) attributes for each hyperlink.  Href's should link to the anchors in the format "#dbo.{tablename}", alt tags are displayed on hover, "View {tablename}" is probably appropriate.
  4. When all tables have been outlined and linked, click code and copy the text

Putting it all together

  1. Open the html produced by the Database Documention Creator in export grouped mode
  2. Just inside the body tag (after <body>), add a reference to the image you created (hint: it must be accessible to the html you are viewing - it is easiest to place it in the same directory).  An html image is referenced like the following <img src="imagename.format" alt="Alternative Text to Display" />
  3. After your image paste the code you copied.  This is the imagemap it must be using the same copy of the image that your used to create the imagemap.  If the image has been resized or modified the coordinates will no longer match.
  4. Link the imagemap to the image by copying the map id from the map code to the image tag like the following: <img usemap="#map id value" src="imagename.format" alt="Alternative Text to Display" />.  Notice I have added a pound symbol before the id attribute.
  5. Save your html and view it in a browser.  The product should resemble http://fishandgame.idaho.gov/ifwis/core/home/model.

How this could be better

The source code for both applications I have used are available online.  The Database Dictionary Creator is available for free and the Imagemap Creation Tool for a modest donation.  The whole process might be slightly smoother if we write some code to wrap together the imagemap creation and publishing to the web.  I'm thinking we use the existing Database Dictionary Creator to export the grouped html, then have an upload page which accepts the created html and an image.  The user then adds an imagemap and the script cleans up the html, puts it all together into one page and publishes the product.