How we integrated the Tavultesoft KeymanWeb web keyboard into Wikipedia: it was just a few small steps and a couple of hours of graphic design.

We recently published a KeymanWeb Wikipedia Plugin to allow you to use KeymanWeb anywhere in Wikipedia — editing pages, searching for information, or participating in discussions.  In this post, I wanted to talk about the process of integration from beginning to end.

The whole process took us about 4 hours.

  1. We created a free subscription for KeymanWeb at http://www.tavultesoft.com/account/home/kmw/  We followed the steps in the subscription process, added every keyboard for every language, and added the domain "en.wikipedia.org" as the primary domain for the subscription.  (We later extended the subscription to every Wikipedia domain).
  2. Next, we created a new plugin Javascript file at http://en.wikipedia.org/wiki/User:Keymanweb/keymanweb.js which linked to our KeymanWeb subscription and imported the KeymanWeb Javascript components as the page loaded, using the Wikipedia Monobook function addOnloadHook:
    addOnloadHook( function() {
    document.writeln("<"+"scr"+"ipt type='text/javascript' "+
    "src='http://r.keymanweb.com/code/?domain="+
    location.hostname+"&id=243&page="+
    encodeURIComponent(location.pathname)+"'>"+
    <"
    +"/"+"scr"+"ipt>");
     
    document.getElementById('bodyContent').innerHTML =
    "<div id='KeymanWebControl'></div>"
    +
    document.getElementById('bodyContent').innerHTML;
    } );
  3. Also in the same Javascript file, we inserted an element at the top of the bodyContent as a container for the KeymanWeb toolbar:
    importStylesheetURI(
    'http://en.wikipedia.org/w/index.php?title='+
    'User:Keymanweb/keymanweb.css&action=raw&'+
    'ctype=text/css'
    );
  4. At this point, we had KeymanWeb working within Wikipedia, and could select a keyboard and type with it in any edit box in Wikipedia.
  5. However, we decided that the normal KeymanWeb toolbar was too intrusive for Wikipedia, and replaced it with a new, smaller toolbar.  This took the most time, including drawing, scaling and modifying the CSS rules for displaying the toolbar.  We recorded our CSS changes in http://en.wikipedia.org/wiki/User:Keymanweb/keymanweb.css.  Firebug in Firefox was an invaluable tool for tweaking the CSS to get it just right.
  6. Finally, we took some time to write up the instructions for integrating KeymanWeb into your own user profile in Wikipedia.

As you can see, the actual integration process was dead easy.  Most of the time we spent was taken on polishing the look and feel of KeymanWeb for a better fit into Wikipedia.  We were surprised ourselves by how straightforward it was to get the basic integration right.

Try it yourself at http://en.wikipedia.org/wiki/User:Keymanweb!


1 thought on “How we integrated KeymanWeb in Wikipedia”

Deksiyos Desta · December 16, 2009 at 7:54 am

it is good Aportunity to youse on oure languge
very Good thanks
—–
PING:
TITLE: Using KeymanWeb in Wikipedia
URL: http://blog.tavultesoft.com/2010/01/using-keymanweb-in-wikipedia.html
IP: 10.17.151.36
BLOG NAME: Typing around the world
DATE: 01/05/2010 10:34:29 AM
A month ago we blogged about our new KeymanWeb Wikipedia Plugin. Now you can use KeymanWeb to type in your native language anywhere in Wikipedia. That’s right – without a specialised keyboard, you can edit pages, search for information, or…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Developing Keyman

Keyman Update for 27 September 2024

This blog reports on significant Keyman product and keyboard development updates over the period from 16 September 2024 — 27 September 2024. As always, you can follow all of our development online at github.com/keymanapp/keyman, and Read more…

Developing Keyman

Keyman Update for 13 September 2024

This blog reports on significant Keyman product and keyboard development updates over the period from 02 September 2024 — 13 September 2024. As always, you can follow all of our development online at github.com/keymanapp/keyman, and Read more…

Developing Keyman

Keyman Update for 30 August 2024

This blog reports on significant Keyman product and keyboard development updates over the period from 19 August 2024 — 30 August 2024. As always, you can follow all of our development online at github.com/keymanapp/keyman, and Read more…