Cùran's life
A Debian Developer's observations

2nd March 2011 16:20 (GMT)
Embedding license information in a XHTML-valid way

When you want to offer creative work, or at least your blog posts, under a license which gives the receivers a lot of freedoms, you'll sooner or later come across the Creative Commons licenses. And after you've selected a license of your liking, you'll be presented with a little XHTML snippet. Nice. What's not so nice is, that you'll break the validity of your website as soon as you put that snippet somewhere on your homepage. What to do?

Easy. Ask the W3C for help (ok, don't call them, just use a search engine). Since Tim Berners-Lee is promoting the semantic web for some time now, there must be some conformant way to add the information, which hopefully is also supported by standard-compliant browsers. The answer is a W3C recommendation. The recommendation talks only about XHTML 1.1, but there's also a XHTML 1.0 DOCTYPE (If you don't care about IE, you can use the XHTML 1.1 variant, at least the last time I checked, IE failed miserable with XHTML 1.1. Admittedly, it has been a while since I looked this up.). Just put:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

at the top of your document. Depending on what RDF namespaces you want to use (and how often), you can add more namespaces than the default one to your html tag. So a template for a "XHTML 1.0 + RDFa" document might look like:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:cc="http://creativecommons.org/ns#" xml:lang="en">
    <title>An XHTML 1.0 + RDFa standard template</title>
    <meta http-equiv="content-type" 
      content="text/html;charset=utf-8" />

     <p> Your HTML content here </p>
     <p><span href="http://purl.org/dc/dcmitype/Text"
       property="dct:title" rel="dct:type">[Website Title]</span> by <span
       property="cc:attributionName">[Author's Name]</span> is licensed under
       <a rel="license"
         Commons Attribution-ShareAlike 3.0 Unported License</a> unless
         noted otherwise.

When you're finished, you can start adding licensing information (and other relations) to your website as this little blog is doing.

Permalink | creativecommons, licensing, meta, xhtml.
11th May 2011 11:29 (GMT)
Flattr "released" donation button

Some might remember, that I have been asked in the past to add Flattr to the available support models. And after considering this a little more, I wanted to add support options to my blog too. So I looked into the different options already available and found, that while Flattr offered a donation option, they had no graphic available like the PayPal donation button. Thus I contacted the Flattr guys and they responded almost immediately by sending me a tarball with two images and an example HTML file. You can see that in action below (this is the ECMAScript version, the CSS version can be seen on the right side of this website):

Flattr donation button

If you want to use it on your own homepage here is, what you need to do:

  1. Download the images (normal, hover) to your server/webspace.
  2. Add the following to the page(s) where you want to see the Flattr donation button:
    <a href="https://flattr.com/donation/give/to/[USERID]"
      title="Donate (via Flattr)"><img
        title="Support my Debian work (Flattr)"
        alt="Flattr donation button" />

    You need to replace [USERID] with your registered user name.
  3. You're done!

You can, of course, also just download the first image and skipt the whole hover effect stuff. And, of course again, you can also use CSS to implement the hover effect, as I do it on this site. In that case just remove the img tag from the code snippet above, add a unique id (let us assume it is flattrDonate) to the a tag and add the following to your style sheet:

#flattrDonate {
        display:        block;
        background-image: url('/imgs/flattr_donate_normal.png');
        width:          56px;
        height:         21px;

#flattrDonate:hover {
        background-image: url('/imgs/flattr_donate_hover.png');

Obviously you need to change the URL to point to your copies of the two images.

Permalink | flattr, meta, xhtml.
28th October 2011 19:16 (GMT)
Google recommends using OpenStreetMaps/OpenLayers

Maybe you've already heard, that Google is starting to charge a fee for using the Maps API (Google may decide you're an non-profit organization and waive the fees). That is, in my opinion, Google telling you to look for better alternatives. And thanks to the awesome effort of the OpenStreetMaps community, there is such an alternative.

Thus today's addition to the mini-tips series will tell you, how you get an OpenStreetMaps-powered map on your website.

  1. First you need to determine the coordinates, where you want to center, the map. You can do this with OpenRouteService.org. Just search for the address, right-click on the marker highlighting the result, and set it as e.g. your start point, that'll give you the coordinates in the start field on the left. Alternatively you can just move your pointer over a place on the map and have a look at the lower right corner, where the current coordinates for the pointer position are displayed.
  2. Then you need to add a few things to the website, where the card is to be shown:
    • Include the OpenLayers script in the <head> of your webpage:

      <script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript" />
    • Add a short ECMAScript snippet right after that, which will initialize your map:

      function osmInit() {
        document.getElementById("ol_map").style.display = 'block';
        var lonLat = new OpenLayers.LonLat(13.376096, 52.518598) // Center of the map
          new OpenLayers.Projection("EPSG:4326"),   // transform from WGS 1984
          new OpenLayers.Projection("EPSG:900913")  // to Spherical Mercator Projection
        var map = new OpenLayers.Map("ol_map");
        var osmlayer = new OpenLayers.Layer.OSM();
          16 // Zoom level

      The first line is not needed, but I find it nice to hide the map on default, in case the user has disabled ECMAScript they haven't a large empty area somewhere on the website. The first line changes then the display value from "none" to "block". The rest is, I hope, already explained by the code itself.

    • Now only two more changes are needed, first you need to add onload="osmInit();" to your <body> tag. And afterwards an element (say a <p>) with the ID ol_map somewhere in the website <body>. You should set a width and height for that tag (style is your friend), otherwise the map might be bigger than you like.
  3. Done. Enjoy your free (not just as in free beer) map!

You can, of course, customize your map further by adding additional layers and changing the available options (e.g. the zoom level). If you would want to mark a location on your map, you'd need to add something like

var markers = new OpenLayers.Layer.Markers("POI1");
markers.addMarker(new OpenLayers.Marker(lonLat));

to your ECMAScript snipped after you added the OpenStreetMaps layer. These three lines would mark the location given by the variable lonLat.

For further information, you can check out the OpenStreetMaps wiki and the OpenLayers documentation.

In case you wonder, where my coordinates from this example point, you can check. Oh, and don't forget to consider a donation to OpenStreetMaps, so the project can pay the bills for its servers.

Permalink | cheat-sheet, debian, proprietary-formats, xhtml.

Common Blog License: Creative Commons Attribution-ShareAlike 3.0 Unported License | Imprint (Impressum) | Compiled with Chronicle v4.6


Support my Debian work!