André van Toly / Weblog

Notelet

2013-05-16T15:03:07Z

Notelet is a very simple text writing and sharing app I developed for iPhone and iPad. Still you can copy, paste, mail, text, tweet, post, print or save your text in Dropbox with it. Use Notelet to simply jot something down. Save it for later, or share immediately. Mail, text, or post on Twitter, Facebook or Weibo. Save to Dropbox, copy to another app, print or use all options ;-)

It is available for download in the App Store.

Copy, paste, mail, text, tweet, post, print or save your text in Dropbox. Ready? Clear and start a new one.
Notelet is a simple iPhone and iPad app for text writing and sharing. It requires iOS 6.1 or later, I believe that means iPhone 3GS and up.

Follow @Noteletapp on Twitter.

Notelet is a rather simple text editor for iPhone and iPad. Still you can copy, paste, mail, text, tweet, post, print or save your text in Dropbox with it.

Your Dropbox texts are automatically saved using filenames with date and time in the folder "Apps > Notelets" (in your Dropbox).

Do you want to post a link on Facebook or Twitter? Include it as the last line, Notelet will extract it and send it automagically as a separate link. Facebook will show a preview of the page next to your text.

Notelet
Notelet app's website

Notelet is available on the App Store

OIPlayer prominent op homepage NOM.nl

2013-01-29T16:47:00Z

OIPlayer staat bovenaan de homepage van www.nom.nl. De video wordt pas geladen als een bezoeker 'm aanklikt. De pagina met video wordt geladen via een jQuery AJAX call, zoals beschreven in een eerdere post van me, de homepage wordt hierdoor niet trager. HTML5 browsers krijgen de video met de nieuwe <video /> tag geserveerd, voor oudere browsers wordt Flash geladen en wordt de stream afgespeeld in Flowplayer.

Video op de sites van de NOM kan eenvoudig in verschillende formaten wordt worden geupload en wordt beheert met MMBase Streams. De nieuwe functionaliteit is deel van een reeks verbeteringen aan de sites www.nom.nl en www.nvnom.com de afgelopen maanden en die nu langzaamaan doordruppelen naar productie.

New Open Images release v.1.2

2012-07-27T18:27:35Z

Open Images released a new version of its media management and transcoding platform. Together with the new release the Open Images website was updated with a bit revamped user interface and other new features like a the download API.
OIP v.1.2 is based on the recently released version 1.9.6 of MMBase.

Main new features include a new API to post media into the platform while users are being authenticated with an API token. The API first featured during the Celluloid Remix contest and enabled users to have the Open Images platform download media for them from other sources, in this case the remixer. Authentication is done with an encrypted API token.

Improved portal editors

Most improvements have been done in the editors that are used by portal managers. Other features included a revamped user interface, a new field 'hasform' to describe the originale media source, true transaction support (with MySQL InnoDB), portal editors, a 'keep me logged in' feature etc.

Open Images source
Information about the platform software, downloading and installing it.

Nieuwe vormgeving NVNOM site

2012-04-28T11:53:33Z

NVNOM heeft voor haar website een nieuw design laten maken door WWWanted. Zij leverden de html, mijn taak was het nieuwe design te implementeren in MMBase. www.nom.nl is nu geheel in de nieuwe huisstijlkleuren. De site bevat nog de bekende onderwerpen om informatie over de noordelijke regio te vinden.

Artikelen worden gerubriceerd naar onderwerpen als Energie, Water, Life Science en ICT die bezoekers de mogelijkheid geven meer informatie over hetzelfde onderwerp te vinden.

N.V. NOM
Inversterings- en ontwikkelingsmaatschappij voor Noord-Nederland

WWWanted.net

OIPlayer example with Ajax

2011-09-01T09:50:56Z

A few weeks ago I wanted a way to place a HTML5 video in a page without Safari immediately downloading it. I came up with a sort of lightbox solution, loading video in a page with ajax.

On the desktop WebKit will normally auto-buffer all video it finds on your webpage. With just one video that is not a problem, but when having multiple video's it may take a while and you may not even wish to play all of them putting an unnecessary strain on your connection and the server. Firefox typically loads just the first part, but the default Safari way made me want to load the video only when requested.

With a few lines of jQuery Javascript and css I made a sort of lightbox like interface to show the video only when a user requests it. This way I can put multiple thumbnails or video previews on a page, make them play almost directly but still have a page that should load fast.

Copy video tag

First make sure you have a html page with working video example. I recommend copying the source right from Open Images, like "Beeldtelefoon" one of our most used and most favorite examples.

<div xmlns:dct="http://purl.org/dc/terms/" 
     xmlns:cc="http://creativecommons.org/ns#" 
     class="oip_media" 
     about="http://www.openbeelden.nl/files/23/23180.23172.WEEKNUMMER741-HRE00016E93.ogv">
  <video poster="http://www.openbeelden.nl/images/67910/WEEKNUMMER741-HRE00016E93.png" 
    controls="controls">
    <source type="video/ogg; codecs=theora" 
       src="http://www.openbeelden.nl/files/23/23180.23172.WEEKNUMMER741-HRE00016E93.ogv" />
    <source type="video/mp4; codecs=h264" 
       src="http://www.openbeelden.nl/files/23/23186.23172.WEEKNUMMER741-HRE00016E93.mp4" />
    <source type="application/x-mpegurl" 
       src="http://www.openbeelden.nl/files/23/37679.23172.WEEKNUMMER741-HRE00016E93.m3u8" />
  </video>
  <span class="license"><a 
    href="http://www.openbeelden.nl/media/23173/Eerste_proef_met_beeldtelefoon" 
    rel="cc:attributionURL" property="dct:title">Eerste proef met beeldtelefoon</a>, door 
  <a href="http://www.openbeelden.nl/users/beeldengeluid" 
     rel="dct:creator" 
     property="cc:attributionName">Polygoon-Profilti (producent) / Nederlands Instituut voor Beeld en Geluid (beheerder)</a>, 
     is gelicenseerd onder 
  <a href="http://creativecommons.org/licenses/by-sa/3.0/nl/" 
      rel="license">Creative Commons - Naamsvermelding-Gelijk delen</a>.</span>
</div>

It is quite a lot, but it includes its Creative Commons license information and three kind of video files for all flavors of web browsers, even mobile ones. It looks like this using oiplayer of course since I activate it on all media in my site, yours may look a bit differently without it (more like 'video.html' read below).

Eerste proef met beeldtelefoon, door Polygoon-Profilti (producent) / Nederlands Instituut voor Beeld en Geluid (beheerder), is gelicenseerd onder Creative Commons - Naamsvermelding-Gelijk delen.

The only thing I added to it were width="288" and height="520" in the video tag.
Save it as a seperate html page, for example 'video.html'. This is the page I want to load via Ajax.

What you need for oiplayer

To make sure you have it completely woking with oiplayer you need to include these files in the head of your html document.

<script src="js/jquery-1.5.1.min.js" type="text/javascript"><!-- help ie --></script>
<script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie --></script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />

This enable the black version of oiplayer on top of all media tags in the body of your html page.

$(document).ready(function() {
    $('body').oiplayer({controls:'top dark'});
});

For the sake of simplicity I used the short version without the fallback plugins. More information about how to include the Flash and Java fallback mechanisms can be found at the oiplayer readme, scroll down to the how-to.

Page loading the video

One of the nice things of developing a jQuery plugin is not only that it makes your code easier to use, you can do jQuery like stuff with it like activate it later etc.

Create a new html page and include the jQuery and oiplayer scripts in its head like in the previous paragraph. I saved the previous example as 'video.html' and made a new page 'demo1.html'. Since all the Javascript work will be done now in 'demo1.html' I moved all files from the header of 'video.html' and put them in 'demo1.html'.

Make a div in our new page with a class 'video' that includes a link that points to your video. You could for example put it around a preview image of the video for a nicer look, but in this example it is just a link.

<div class="video"><a href="video.html">Click here to open an historical video</a></div>

Make sure the correct page opens when you click it.

jQuery Javascript 'zooming' the video

The jQuery Javascript piece that doing all the work. This works on the above illustrated div with class 'video'.

$(document).ready(function() {
  // only when there are div's with a class .video
  if ($('div.video').length) {
      
      // append zoom div once to your html page
      if ($('div#zoom-video').length < 1) {
          $('body').append('<div id="zoom-video"><div></div></div>');
      }
      
      $('div.video').find('a').click(function(ev){
          ev.preventDefault();
          var videolink = $(this).attr('href');   // the page to load
          
          $('div#zoom-video > div').load(videolink, function(){
              $('div#zoom-video').fadeIn('slow');
              // activating oiplayer is just one line, yeah!
              $(this).oiplayer({controls:'top dark'});
              
              // close zoomed video when clicked outside video
              $(this).click(function(ev){ ev.stopPropagation(); });
              $('div#zoom-video, a#zoom-video-close').click(function(ev){
                  ev.preventDefault();
                  $('div#zoom-video').fadeOut('slow');
                  $('div#zoom-video > div').empty();
              });
              
          });
      });
  }
});

That all the functionality. You'll only need some css to make it look pretty.

OIPlayer is activated after the jQuery.load() command finishes loading the page with the video tag. The video is loaded in our fullscreen window: 'div#zoom-video > div' created earlier.

CSS to make it work and shine

At last a few lines of css to make it work and look pretty. In case you want to beatify how your video is shown in your page, the Javascript adds a div with an id 'zoom-video' to the page. Within that div is another div that holds the html that is loaded.

div#zoom-video {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(51,51,51,0.9);
}

div#zoom-video > div {
    margin: 10% auto;
    width: 512px;
    border: 8px solid #efefef;
    position: relative;
    background-color: #000;
    color: #efefef;
}

That's it basically. Check the demo.

Autoplay

OIPlayer 'listens' to the standard media player attributes, so when you want the video to auomatically play when you open it add the autoplay attribute to the video tag. Like below:

<video poster="http://www.openbeelden.nl/images/67910/WEEKNUMMER741-HRE00016E93.png" 
  controls="controls"
 autoplay="autoplay">
 ...
</video>

These attributes can be left empty in html5, this for example is valid:<video autoplay controls>, but I like to write proper xml since I normally work with jspx templates.

Webkit and HTML5
Here is some information about using HTML5 video and audio and Webkit.

Redesign Van Gogh Museum website

2011-06-03T16:07:36Z

The Van Gogh Museum introduced a new design and we had the privilege to apply it to their website. Besides a new logo, a new font and an overal new look, they decided to recreate the homepage of www.vangoghmuseum.nl without the use of Flash with just html, css and Javascript. The homepage contains a jQuery carousel that can be filled with images and text.

The former website had a lot of custom elements that had to be redesigned. Take a look for example at the 'Permanent collection' or the 'Vincent van Gogh' sections of the site.

New international website NVNOM.com

2011-04-08T10:43:20Z

Recently NOM released their completely renewed site for international visitors www.nvnom.com. NOM is a development or investment agency for our three northern provinces. The site is completely renewed version of their former international site www.nvnom.eu.

As found on their new site: "NOM is the foreign direct investment agency for the Northern Netherland, the region consisting of the provinces of Groningen, Fryslân and Drenthe". The site explains why to invest in the North and shows in a series of videos the experiences of several foreign investors.

The site's graphic design including Flash, the greater part of html and css was done by www.Wwwanted.net, a young agency based in Groningen and Amsterdam. André van Toly, d+g design was responsible for coding the back-end and some of it's javascript, html and css.
The site runs on one of the latest versions of MMBase and it's repository is completely integrated with the other NOM sites - like www.IJkdijk.nl and www.NOM.nl - making it possible to share content like articles, images, topics and videos across all domains.

Open Images v1.1

2011-03-30T09:12:25Z

A few days ago I build a new a new version of the open source software the website runs on, with quite a lot of new features.

Some of these new features are: thumbnail generation of video's when uploading, ability to create a portal with a its own collection of media, a new wider format, better tagging, searching, improved player, a 16:9 format, support for WebM, news article section and more.

The language features were improved. Not in the least because Open Images is now supported by TranslateWiki.net providing translations in dozens of languages. The release notes contain a complete overview of everything new and fixed.

Copy a media tag including all license information

The following piece of code contains everything you need to show the next video - in a html5 savvy browser of course. You'll find the tag - and other options - when you click the 'Share' button.

<div xmlns:dct="http://purl.org/dc/terms/"
     xmlns:cc="http://creativecommons.org/ns#" 
     about="http://www.openbeelden.nl/files/63/63473.63465.WEEKNUMMER644-HRE0001A794.ogv">
  <video controls="controls">
    <source type="video/ogg; codecs=theora" 
            src="http://www.openbeelden.nl/files/63/63473.63465.WEEKNUMMER644-HRE0001A794.ogv"/>
    <source type="video/mp4; codecs=mpeg2" 
            src="http://www.openbeelden.nl/files/63/63479.63465.WEEKNUMMER644-HRE0001A794.mp4"/>
    <source type="application/x-mpegurl" 
            src="http://www.openbeelden.nl/files/63/63494.63465.WEEKNUMMER644_HRE0001A794.m3u8"/>
  </video><br/>
  <a href="http://www.openbeelden.nl/media/63466/Zuid_Limburg_in_herfsttooi"
     rel="cc:attributionURL" property="dct:title">Zuid-Limburg in herfsttooi</a>, 
     by <a href="http://www.openbeelden.nl/users/beeldengeluid" 
           rel="dct:creator" 
           property="cc:attributionName">Polygoon-Profilti (producent) / Nederlands Instituut voor Beeld en Geluid (beheerder)</a>, 
     is licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/nl" 
                          rel="license">Creative Commons - Attribution-Share Alike</a>.
</div>

Zuid-Limburg in herfsttooi, by Polygoon-Profilti (producent) / Nederlands Instituut voor Beeld en Geluid (beheerder), is licensed under Creative Commons - Attribution-Share Alike.

Media items can easily be copied, pasted and used in other contexts including all needed create commons license information.

N.B. I've added a poster to the video tag since the first frame is black and the attributes width and height. OIPlayer jquery plugin, which is also improved by the way, was attached automatically to tag.

Release notes Open Images v1.1
Complete release notes in the Jira issuetracker.
Download Open Images v1.1
Download package containing a WAR file and instructions

Streams for mobile devices on Open Images

2013-03-21T09:38:47Z

We've retranscoded our streams and added new transport stream (ts) segments with playlists (m3u8) to support playing on cellular networks (f.e. 3G). One of the coolest movies I watched while doing that is this first airmail trip to Marseille in 1926. At 2:54 they arrive at Marseille and are escorted by their French colleagues to the airport.

The movie can also be viewed at Open Images.

It includes a segmented stream for devices on a cellular network, which means you can play it on your iPhone to kill some time while riding the train to work.

Met de Fokker VII en de eerste luchtmail naar Marseille (1926), door eye film instituut nederland, is gelicenseerd onder Public Domain Mark.

Below a fragment showing the video tag. The last source file is a m3u8 playlist containing 36 segments of 10 seconds.

<video poster="http://www.openimages.eu/images/600320/Fokker_Marseille_42339_2.jpeg" controls="controls" width="512" height="288">
  <source src="http://www.openimages.eu/files/19/128354.19484.Celluloidremix-MetDeFokkerVIIEnDeEersteLuchtmailNaarMarseille19266mi732.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="http://www.openimages.eu/files/19/19493.19484.Celluloidremix-MetDeFokkerVIIEnDeEersteLuchtmailNaarMarseille19266mi732.ogv" type="video/ogg; codecs=theora" />
  <source src="http://www.openimages.eu/files/19/19499.19484.Celluloidremix-MetDeFokkerVIIEnDeEersteLuchtmailNaarMarseille19266mi732.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" />
  <source src="http://www.openimages.eu/files/19/36996.19484.Celluloidremix-MetDeFokkerVIIEnDeEersteLuchtmailNaarMarseille19266mi732.m3u8" type="application/x-mpegurl" />
</video>

The first part of the m3u8 file looks like this:

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://www.openimages.eu/files/19/36996.19484.Celluloidremix-MetDeFokkerVIIEnDeEersteLuchtmailNaarMarseille19266mi732-1.ts
#EXTINF:10,
http://www.openimages.eu/files/19/36996.19484.Celluloidremix-MetDeFokkerVIIEnDeEersteLuchtmailNaarMarseille19266mi732-2.ts
#EXTINF:10,

etc.

When you're on G3 your device should choose this if everything is correctly configured.

OIPlayer: HTML5 media player with fallback

2013-03-20T10:42:00Z

One of the main goals of Open Images was to be as open as possible inluding using the HTML5 video and audio tags to play uploaded video and audio, with a fallback mechanism for less modern browsers. The jQuery plugin OIPlayer is a result of that effort.

Branden vernielen honderden hectare natuurgebied, door Polygoon-Profilti (producent) / Nederlands Instituut voor Beeld en Geluid (beheerder), is gelicenseerd onder Creative Commons - Naamsvermelding-Gelijk delen.

OIPlayer uses FlowPlayer - a Flash based player for mp4, flv and h.264 - and Cortado - a Java based player for Ogg (ogv, oga) - as its fallback when a browser does not support HTML5 video or audio. I've included the main controls that Firefox and Safari support and even included a 'fullscreen' (fullwindow really) button.

You will need to include all these files in the head of your html document:

<script src="oiplayer/js/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script src="oiplayer/js/jquery-ui-1.7.2.slider.min.js" type="text/javascript"> </script>
<script src="oiplayer/js/jquery.oiplayer.js" type="text/javascript"> </script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />

The first two Javascripts are jQuery and jQuery UI for the slider, next is OIPlayer and its css styles. You may use jquery-1.4.2.min.js and jquery-ui 1.8.2, it is jQuery 1.4 compatible. After including these, activitating the script on all video and audio tags in your page is very simple and consists of just one jQuery statement.

$(document).ready(function() {
    $('body').oiplayer();
});

It activates OIPlayer on all video and audio tags in the body. When you are familiar with jQuery you'll see that any jQuery selector should work.

Fallback to Flash and Java

The fallback mechanisme consists of the Flash player FlowPlayer and the Java applet Cortado. Allmost all browsers support Flash, but Flash can only play some MPEG variants: moste likely flv of course, but also mp4 and h.264 which can be a bit tricky to encode correctly. Cortado plays Ogg media (ogv, oga) , typically encoded with FFmpeg2Theora.

When you need Flash fallback you'll need to include an extra script for FlowPlayer.

<script src="oiplayer/plugins/flowplayer-3.1.4.min.js" type="text/javascript"> </script>

Besides that you need to configure OIPlayer so that it can locate the needed Flash files and Java applet jar. The setup on www.openimages.eu is more or less as follows and normally suffices for playing media located from there.

$(document).ready(function() {
    $('body.oiplayer-example').oiplayer({
        server : 'http://www.openimages.eu',
        jar : '/oiplayer/cortado-ovt-stripped-wm_r38710.jar',
        flash : '/oiplayer/plugins/flowplayer-3.1.5.swf',
        controls : 'white'
    });
});

Especialy Java applets have very restrictive security settings and that is why it is needed to specify the server and the exact path were the applet can be found. When you want to serve Ogg media from your own server you need to have Cortado living somewhere on that server. The applet may even complain that the Javascript is not on the same server, if you haven't placed it there, when it tries to direct its commands at Cortado.

Different controller skins

OIPlayer currently has two skins for its controls: white and dark. Both can placed on top of the player or below it. Default, when you don't configure anything it places the white controls beneath the player. Other options are:

'top' - the white controls on top of the player (same as 'white top');
'dark' - black and grey coloured controls in stead of white below the player;
'dark top' - the dark controls on top;
'white' - same as 'true', which is default when specifying nothing and show controls below; or
'false' - no controls at all in which case you need to have controls enabled in the video- or audio tag.

I think I like this one most:

$('body').oiplayer({ controls : 'dark top' });

The configuration is translated to css classes upon the div that wraps the controls. Whenever you specify 'top' the controls are placed on top of the player.

Other configuration

Except for the controls it follows the configuration of the video- or audiotag itself. The poster attribute is translated to an image that can be clicked to start playing, height and width are used, as well as preload and autoplay are supported (loop was later added to the specs and I haven't implemented that one yet).

The mediatag relies on the mediasource itself or by way of http headers that are send to the browser to find the length of a mediafile. Allthough the Open Images Platform is correctly configured to do so, I have had quite some difficulties getting to that information when OIPlayer initializes. Currently not all HTML5 browsers are capable of detecting the durations of mediafiles. I made a workaround by putting a special css class on the mediatag.

<video class="oip_ea_duration_149 oip_ea_start_0"
    poster="mahnamahna.png"
    width="320"
    height="240">
    <source type="video/ogg; codecs=theora" src="mahnamahna.ogv" />
    <source type="video/mp4" src="mahnamahna.mp4" />
</video>

In the above example a specified the duration of 149 seconds with 'oip_ea_duration_149', short for Open Images Platform Extra Attribute Duration. The start time - allthough not yet implemented - a few seconds into the media file can be specified with 'oip_ea_start_0'.

I maintain a how-to page within the Open Images repository. Whenever I think I've made some significant changes I update its equivelant at the website as well http://www.openimages.eu/oiplayer More information may be found there.

HTML5 video tag
W3C Editor's Draft
OIPlayer's jQuery plugin pages
I make release versions available in jQuery's plugins directory, download it here.
OIPlayer svn directory
The most recent, development version can be found in the MMBase repository
FlowPlayer
Flash based mp4 player
Cortado
Cortado is at present mainly maintained by the Wiki people

Download Open Images

2010-02-24T10:04:56Z

Download it to use it for yourself. Develop and improve OIP or manage your own media. I just finished creating a download package and publishing an article about it at the Open Images website. The platform is published under GPL. Visit the download page or download it straight from here by following the second link.

Download page OIP 1.0
The first release of the Open Images Platform
Download package of OIP 1.0
Zip with war, installation instructions etc.

Configuring mod_jk on Snow Leopard

2010-11-22T16:06:26Z

A few months ago I wrote about building mod_jk for Mac Leopard. I was glad to learn last weekend that my notes were still correct while I build a recent version of mod_jk for Mac Snow Leopard. This post is about how I configured mod_jk to make the Apache webserver and Tomcat work together.

I installed Tomcat by copying the complete contents of the downloaded 'apache-tomcat-6.0.20.tar.gz' to the directory '/Library/Tomcat', thus effectively installing it in this directory. I've followed http://wiki.apache.org/tomcat/TomcatOnMacOS to make it automatically startup on starting my Mac. Reason why I usually use the script configured in StartupItems to restart Tomcat, allthough it can still be started with:

/Library/Tomcat/bin/startup.sh

And still stopped with 'shutdown.sh' is in that same directory.

The main link between Tomcat and Apache is the 'workers.properties' file. I usually create one in Tomcats config directory - in this setup '/Library/Tomcat/conf/workers.properties' - and never touch it again.

# from workers.properties.minimal
# provides minimal jk configuration properties needed to connect to Tomcat.
# The workers that jk should create and work with
worker.list=ajp13w
worker.maintain=60

# Defining a worker named ajp13w and of type ajp13
worker.ajp13w.type=ajp13
worker.ajp13w.host=localhost
worker.ajp13w.port=8009
worker.ajp13w.socket_keepalive=1
retries=3

This example ports the localhost webapp 'ROOT' to Apache. But other contexts can be configured in Tomcat, for example in 'server.xml', in a similar way.

<Host name="localhost" 
  unpackWARs="true" autoDeploy="true"
  xmlValidation="false" xmlNamespaceAware="false">
  <Alias>www.toly.net</Alias>
  
  <Context path="" docBase="/Users/Shared/webapps/ROOT" 
    debug="0" />
</Host>

The rest of mod_jk is configured in a file included in httpd.conf. Apple sometimes changes or overwrites configuration files when you update your machine so I configured most of mod_jk outside of it. I just made a link between both applications in a file '/private/etc/apache2/mod_jk.conf'. Note, that to change 'httpd.conf' and save 'mod_jk.conf' next to it you need to be root or use 'sudo'.

Include /private/etc/apache2/mod_jk.conf

It first includes the module, and contains the configuration for mod_jk: its log file, path to workers.properties etc.

# <IfModule !mod_jk.c>
 LoadModule jk_module  /usr/libexec/apache2/mod_jk.so
# </IfModule>

# Configure workers.properties, logging to Tomcat's logdir 
JkWorkersFile /Library/Tomcat/conf/workers.properties
JkLogFile /Library/Tomcat/logs/mod_jk.log
JkLogLevel info 
JkLogStampFormat "[%a %b %d %H:%M:%S %Y] "

The virtual hosts that run in Tomcat.

NameVirtualHost *:80

<VirtualHost *:80>
 DocumentRoot /Users/Shared/webapps/ROOT
 ServerName www.toly.net

 <Directory "/Users/Shared/webapps/ROOT">
  Options Indexes MultiViews
  AllowOverride None
  Order allow,deny
  Allow from all
 </Directory>
 # handle all urls with tomcat
 JkMount /* ajp13w

 # apache handles certain static links
 JkUnMount /*.css ajp13w
 JkUnMount /*.ico ajp13w
 JkUnMount /*.js ajp13w
 JkUnMount /*.html ajp13w
 JkUnMount /*.png ajp13w
 JkUnMount /*.txt ajp13w
</VirtualHost>

The above example describes the ROOT webapp but other virtual hosts are similar. Notice that in this setup Tomcat will handle all url's. It states specifically all file extensions you want the Apache to handle. You want this when you create 'nice' links or SEO links for your content.
This a bit easier example is a virtual host that includes just a few url's of a Tomcat webapp 'test', only jsp files and servlets.

<VirtualHost *:80>
 DocumentRoot /Users/Shared/webapps/test
 ServerName demo.toly.net
 
 JkMount /*.jsp ajp13w
 JKMount /servlet/* ajp13w 
</VirtualHost>

That's it. Test whether you configured Apache correctly by typing:

sudo apachectl configtest

Which should return 'Syntax OK'. If OK restart it.

sudo apachectl restart

Visit it to check.

Apache Tomcat mod_jk connector
More information and download of the mod_jk connector.

Sheets of my presentation at the MMEvent

2009-12-15T21:46:27Z

A PDF dump of my Keynote presentation at the yearly MMBase event today.

Open Images is live!

2010-11-30T13:14:26Z

The Netherlands Institute for Sound and Vision and Knowledgeland yesterday released the Open Images (or Open Beelden) website: www.openimages.eu or www.openbeelden.nl

If your browser supports the html5 video tag you'll see a movie called 'The Quiet Beach' from 1923. Otherwise use the provided link, the site provides alternative plug-ins.

http://www.openbeelden.nl/media/1479/Het_stille_strand

With a html5 capable browser you would have a more satisfying viewing experience.

video: Beeld en Geluid licensed under Creative Commons - Attribution-Share Alike

Open Images or Open Beelden aims to offer on-line access to a selection of archive material to stimulate creative reuse. Reuse includes remixing of archive material in new works. Open Images also supports interlinking with other data sources (like Wikipedia), allowing the easy creation of mash ups. Access to the content is based on the Creative Commons model.
It is based upon MMBase and makes heavy use of FFmpeg to transcode the uploaded content to other preferably open source formats. Every uploaded piece of media gets transcoded to another format: video to Ogg Theora, audio to Ogg Vorbis and images to PNG. To ensure the availability of media to a broad range of browsers video or audio gets transcoded to H.264 and MP3 as well. It is like an open source YouTube. This all done within a new MMBase application Streams, an extension to the already existing Media application in use by some Dutch broadcasters.

Multilingual

What I like a lot about this site is that there is lots of new stuff in it, stuff that's new for MMBase but most of all stuff that is even new to most websites. Like the multi-language support depending on your browser or computer preferences. Open Images (or Open Beelden) is published in English and Dutch, but it supports almost any language. Plus, you can change it if you don not like it. We past the language you prefer upon the url, so you won't lose it. It is a lote like the way www.creativecommons.org does it, but in Open Images we use dots ('.nl') in stead of slashes ('/nl').

Transcoding to open formats

Every uploaded media file gets transcoded to an open media format: OGG for video and audio, and images to PNG. We have created the MMBase streams application for this to complement the already existing media application. Streams uses FFmpeg, FFmpeg2Theora and ImageMagick to convert every uploaded media file to several new files.

HTML5 video and audio tags

Another cool aspect of the website is its use of the HTML5 video tag. The above video is embedded without using a plug-in, basically like the following snippet of code which includes four videosources since Firefox, Google Chrome and Safari have different preferences in the kind of formats they support. You can copy this piece of html to include it in your website:

<video controls="controls" width="320" height="240">
  <source type="video/ogg; codecs=vorbis" src="http://www.openbeelden.nl/files/BG/WEEKNUMMER231-HRE000123E9-512.ogg"> </source>
  <source type="video/mp4" src="http://www.openbeelden.nl/files/BG/WEEKNUMMER231-HRE000123E9.mp4"> </source>
  http://www.openbeelden.nl/media/1479/Het_stille_strand 
</video>

An be sure to attribute the owners by including a reference to the Creative Commons license, in this case I added: "video: Beeld en Geluid licensed under Creative Commons - Attribution-Share Alike".

Overheid.nl en NOM.nl

2009-08-10T09:47:22Z

De afgelopen twee maanden zijn twee sites waaraan ik veel heb bijgedragen 'live gezet': www.overheid.nl en www.nom.nl.Overheid.nl kreeg een geheel nieuw ontwerp om de site beter toegankelijk te maken en volledig te laten voldoen aan de zeer strenge Webrichtlijnen. De site bevat informatie van de Nederlandse overheid, zoals wet- en regelgeving, vergunningen en officiële publicaties.

N.V. NOM had reeds een website gebaseerd op MMBase, maar een waarmee de organisatie niet uit de voeten kon. De site is van de grond of herbouwd, waarbij alle reeds ingevoerde gegevens bewaard bleven. Daarnaast is de site beter toegankelijk gemaakt en heeft het mens- en zoekmachinevriendelijkere url's gekregen.

Open Images Platform

2009-06-11T11:09:54Z

I have been very busy the last couple of months with a new video, audio and images platform. It's prototype is nearing completion. I am currently working on the player. HTML5 includes a video-tag but implementing a player that support as many (modern) browsers as possible still takes me back like 10 years or something.

The Open Images Platform aims to be as open as possible. Access to the content will be based on the Creative Commons model, but implementing a player gives me headaches. There are some solutions available but they all use Javascript to detect which browser you use and what media and plugins it supports. Wikimedia uses a script called 'oggplayer.js (which is not only about Ogg ;-) containing 753 lines of code. Takes me be back to the days of HTML 4 ...

Zogenaamde legale SPAM. Ik erger me suf!

2009-01-14T14:16:24Z

"Via dit netwerk mag alleen e-mail worden verzonden op basis van permissie. Ervaart u deze e-mail als ongewenst, klik dan hier." Hoe kan men in vredesnaam beweren dat ik allerlei obscure e-mailadressen bij hun heb opgegeven. Volgens mij start zo'n bedrijf iedere keer een nieuw bestand als ik me uitschrijf. Zo kunnen ze oneindig doorgaan en toch beweren dat ze legaal bezig zijn."U heeft deze e-mail ontvangen omdat u zich eerder heeft ingeschreven op deze nieuwsbrief of omdat u een klant relatie heeft met de afzender. Indien dit niet het geval is dan kunt u zich uitschrijven (gebruik hiervoor de 'uitschrijven' button onderaan de e-mail) en misbruik van de afzender van de e-mail aan ons (de beheerder van het netwerk) rapporteren." Oja?! En als dat al het geval is, dan wil ik wel eens weten bij wie ik me opgegeven heb. Dat is nergens terug te vinden.

MMBase 1.9 released

2009-10-26T00:17:21Z

This release adds functionality for component based development to MMBase. Components are applications or pieces of functionality that can be used in very different MMBase environments like Didactor or CMSC as long as the component framework is implemented.

MMBase ships with a basic implementation of its framework, all administration pages are now component based and feature an urlfilter to beautify links. Components can be easily installed, like this example:

<mm:component name="mynews" />

Which adds the well know MyNews example to your webpage: a magazine with some articles complete with some userfriendly and search engine optimized urls.

MMBase downloads
The most recente releases as well as the nightly builds of MMBase

HollandOpen 2008: 18/9 & 19/9

2009-10-25T16:28:15Z

In a few weeks the 4th Holland Open conference will start. This year with keynotes about Second Life and the open technology behind Web 2.0, Serious Gaming & Virtual Worlds. Yeah well, buzzwords galore, but that is what conferences are about are they not?

The central theme is of this years conference is 'Open Up!' with tracks named Spectrum, Professionalisering, OpenOffice.org and Open Educatie.

Again this year I had the privilege to design and maintain its website. It includes several new features like a PDF generator that creates your entrance ticket using FOP which in turn includes a barcode generated with Barbecue. It has been added as a new application to the speeltuin in MMBase cvs.

Holland Open Software Conference
18 & 19 september 2008

Beeldbank widget

2009-10-25T17:02:30Z

Ik heb daarnet de Schooltv Beeldbank widget afgerond. Dit is een stukje code waarmee je eenvoudig een eigen zoekboxje voor de Beeldbank in je website kunt opnemen. De zoekresultaten worden meteen zichtbaar. Hieronder staat ie, probeer hem uit! Het Javascript maakt geen ;-) gebruik van AJAX, dat zou niet werken omdat veel browsers om veiligheids redenen zogenaamde 'crosssite scripts' niet ondersteunen. Het maakt echter wel gebruik van een aantal andere XML en DOM features in Javascript.

Het is de bedoeling dat vooral scholieren het makkelijk in hun eigen webpagina's, bijvoorbeeld voor een werkstuk, kunnen opnemen. Ik denk dat het daarin wel geslaagd is. Voor een werkend zoekboxje volstaat het opnemen van de script-tag:

<script src="http://www.schooltv.nl/beeldbank/scripts/bbwidget.js" type="text/javascript"><!-- help IE --></script>

De vormgeving wordt bestuurd met een link naar het stylesheet dat in de head van de html-pagina moet komen te staan:

<link href="http://www.schooltv.nl/beeldbank/css/bbwidget.css" rel="stylesheet" type="text/css" media="screen" />

Schooltv Beeldbank 2.0

2008-01-11T19:27:46Z

Het afgelopen half jaar bestond één van mijn belangrijkste projecten uit het geheel opnieuw bouwen van de Beeldbank. www.schooltv.nl/beeldbank bevat ruim 1500 educatieve clips van 'Hoe groeit een tomaat' tot de 'Romeinen in ons land'.

De site is uiteraard met MMBase gebouwd. Er komt eveneens een Teleac Beeldbank, dit alles in opdracht van Teleac/NOT. Ik was verantwoordelijk voor de conversie van de oude data naar de nieuwe site, xhtml en css en uiteraard de implementatie in MMBase van de editors, templates en hier en daar wat Java code.

Het meest beroerde aan dit project was de conversie van de gegevens van 1500 clips naar het nieuwe formaat dat Schooltv wenst te hanteren. Het mooiste vond ik echter dat het tonen van gerelateerde clips op basis van gedeelde trefwoorden meteen werkte: ik kon niet meer stoppen met browsen door alle clips die om welke reden dan ook iets met elkaar te maken leken te hebben.

Gerelateerde clips

In de oude Beeldbank hadden redacteuren aan elke clip een aantal trefwoorden toegekend die helaas opgenomen waren in het clipobject zelf. Via de XMLimporter van MMBase ben ik erin geslaagd van alle trefwoorden afzonderlijke objecten te maken, terwijl ze toch de relatie met de clips behielden waaraan ze waren toegekend. Oftwel: het trefwoord 'duin' kwam zowel voor in een clip 'De duinen' als in de clip 'Meeuwen'. Via de XMLimporter is het mogelijk om daarvan één trefwoord node te maken in MMBase dat relaties heeft met de nodes voor beide clips. De import resulteerde in ruim 5000 afzonderlijke trefwoorden.

Building mod_jk for Apache 2.2 on Leopard

2007-12-13T13:50:23Z

Well, I did it again but it took some figuring out. I suppose it is not very common to run Tomcat via mod_jk on Mac OS X 10.5.

You will need to have Xcode 3.0 installed for the right compiler, Xcode 2.5 may suffice but I haven't tested it.

In short

Download the mod_jk source distribution from Apache's website (at time of writing version 1.2.25): http://tomcat.apache.org/connectors-doc/index.html
Unpack the archive and open Terminal. Enter the directory you just unpacked, then enter the following commands. We will generally follow the with the source code provided instructions in 'BUILD.txt'.
Change to the directory 'native', start a script that configures your source distributions build, change to the Apache 2 directory, edit the build script, build your mod_jk connector (with 'make') and finally install and copy it to the directory where it will be used by your webserver. With a little help from this blog post: http://egopoly.com/2007/10/29/how-to-install-tomcat-mod_jk-on-mac-os-x-leopard/

cd native
./configure --with-apxs=/usr/sbin/apxs
cd apache-2.0

Here you will need to edit 'Makefile.apxs' (see the Egopoly blog post). Edit the line after 'mod_jk.la' like this:

mod_jk.la:
    $(APXS) -c -o $@ -Wc,"${APXSCFLAGS} -arch x86_64 ${JK_INCL}" "${JAVA_INCL}" "${APXSLDFLAGS} -arch x86_64 " mod_jk.c ${APACHE_OBJECTS}

After you have edited that line type:

make -f Makefile.apxs
sudo make install

These commands are rather different from the instructions in 'BUILD.txt' but have the same effect without the need to become superuser. You may test if Apache is OK with your setup by trying:

sudo apachectl configtest

I will write in a different post about configuring Apache and Tomcat.

Configuring mod_jk on Snow Leopard
How to install Tomcat with Apache on a Mac.

HOSC 2007 gestart

2007-06-12T16:42:48Z

Je kunt conferentie volgen via een weblog dat op www.hosc.nl wordt bijgehouden door een aantal mensen van Kennisnet.De Holland Open Software Conferentie is van start gegaan vandaag met presentaties van Wikipedia, Google, Yahoo en vele andere prominenten en prominente organisaties die open source, open standaarden en open content een warm hart toedragen. Does open innovation make a difference; Do 'open source, open standards and open content' help to create equal chances and challenges.

Holland Open Software Conference
18 & 19 september 2008

Nieuwe conferentie site van start

2007-04-27T09:22:53Z

Deze week heb ik de conferentie websites van Holland Open verhuisd naar een nieuwe server. Na twee jaar komen de de sites www.hosc.nl en www.hollandopen.nl bij elkaar op één server te staan, op een plek waar ik er gemakkelijk bij kan.Op de nieuwe server kan ik makkelijker updates plaatsen, dat op de vorige lokatie van www.hosc.nl erg lastig was, ik kan de logs bekijken en zelfs de servers herstarten (!). InterNLnet heeft zich opgeworpen als sponsor voor de hosting.

De Holland Open Software Conference 2007 wordt wederom gehouden in Amsterdam op 11 en 12 juni, belangrijkste lokatie is de Aula van de Universiteit van Amsterdam aan het Spui. Het thema is dit jaar: "Does open innovation make a difference; Do 'open source, open standards and open content' help to create equal chances and challenges."

my_editors

2007-03-04T00:22:38Z

Het heeft me wel even gekost maar nu heb ik my_editors dan eindelijk herschreven naar xhtml 1.1. Ik heb ze daarnet ingechecked.

Ze zijn geheel herschreven in xhtml 1.1. Er zitten een aantal nieuwe features van de MMBase taglib in, maar helaas nog geen validatie met de <mm:form /> tag. Daarvoor heb ik nu hopelijk de basis gelegd.
my_editors zijn ontwikkeld op MMBase 1.9, de templates zijn echter geheel compatible met 1.8 heb ik gemerkt.