Drupal and Open data

The “open data” topic is always in the air and, thanks to the open source world, it is becoming more and more spread.

When we want to manage open data we need to consider 2 types of software:

  1. linked data applications;
  2. data catalogs.

The first type is oriented towards the use of triple store databases specialized in store RDF triples, we find solutions like:

We find as well some REST API which aim to connect to triple stores:

The second type is oriented to the management of the open data:

Drupal has also a couple of interesting modules to connect to triple stores:

Another interesting module is RDFx which allows to manage RDF mapping with Drupal Content types  and it works in combination with the RESTWS module so you can have the RDF extraction of a content type by simply adding “.rdf” to your node (for example http://localhost/drupal/node/1.rdf)

Well if you find more open source applications, which might connect to Drupal, let me know :-)

 

Advertisements

Connect Drupal 7 and Github via Oauth

In a project where I am working on there is a need to connect Drupal with Github.

Github offers an interesting API which is based on the Oauth protocol like Google and Twitter.

The first thing to do is creating an account on Github and on the profile page add an application url even setup in localhost (like http://localhost/drupal). When done, you will receive a client id and a client secret which will be used by Drupal to connect as client.

I setup Drupal on my laptop via Xampp, which means creating quickly a user “drupal” with a database “drupal” via phpmyadmin and then extract Drupal in my htdocs folder (using drupal as folder name) and follow the instructions at http://localhost/drupal.

On Drupal you need download and setup the Oauth connector module which comes with some dependencies, in particular the Oauth module which can be used for Oauth2.

Once everything is setup you can start to configure and for this you can follow the steps in this guide for  Facebook:

http://fuseinteractive.ca/blog/how-allow-facebook-logins-your-drupal-site#.VRwyEjuUdLZ

with the data used from here (I just forked the original project):

https://github.com/EmidioStani/drupal-oauthconnector-providers/blob/master/GitHub.php

as you can see there is a mapping to be done between the github profile attributes and the drupal profile attributes. Since the Github name attribute is optional I preferred to use the login attribute (you can see some attributes from my profile), so just change it in:

'name' => array(
'resource' => 'https://api.github.com/user',
'method post' => 0,
'field' => 'login',
'querypath' => FALSE,
'sync_with_field' => 'name',
),

Unfortunately the avatar will not be copied but you can contribute to the module :-)

When you will connect to Github you might experience 2 types of problem:

If everything goes fine, at the end you will have a github button at the login which redirect the user to Github and come back to Drupal.

Be careful that when you come back to Drupal you have a session cookie therefore the new user is authorized but, since Drupal by default blocks the user (because by default the administrator should authorize and the account should be confirmed by email), you cannot login with your account; also my Drupal doesn’t send emails. So I suggest to remove the cookie from your browser, login with the administrator and unblock the user (you will be able to login with the github account) and change the options in Drupal to allow people registering automatically without waiting that the administrator unblocks the user.

With the last changes you would expose Drupal to security issue but I didn’t try it a Drupal hosted on a website and with email confirmation.

 

 

 

 

Thoughts on adding javascript without conflicting with web designer

For some project I included Jquery animations in web sites. There are many Jquery scripts on Internet but, of course, not all of them satisfy your requirements.

When creating the animation, the first thing I do is choosing the script animation that can be useful as basis, creating a sort of demo and start to understand the code in order to be changed.

What I don’t see in several scripts is the absence of thinking for web designers, I mean people that know only CSS and html and they are interested on how to modify the classes name or id because they already exist in the website. Usually indeed the names or id have prefix but these variables are spread around the code, instead of being written once.

So I started to use some template system like Dust.js (which has been adopted by Linkedin) or Hogan (adopted by Twitter) to bring the html code and classes/id inside the html and not keeping them in javascript files. For the rest I give the possibility to pass as parameters classes/id to the Jquery script so they can be modified from design point of view.

Still this means that classes and id are duplicated once in the code and once as parameters in the javascript, there must be  a way to reduce the impact. Somebody proposes to use different classes for the style and for the javascript, somebody else uses data-attributes for the javascript which have been introduced by HTML 5 (which seem to be less performant as selectors moreover on IE, see Jsperf comparison and this article).

If I have to introduce some javascript in a website HTML 4 compliant then I would certainly go for 2 classes so the css designer doesn’t touch those for the javascript, even though we still create redundancy.

If have to work with HTML 5, I still don’t know if using data-attributes it is a good idea. In caniuse.com I can see that Internet Explorer 11 doesn’t fully support data attributes and Internet Explorer is still a big player in the browser puzzle, on the other side:

  • Jquery 2.0, which provide support from IE9 onward (major media queries are supported by IE9), has .data or .attr functions.
  • Further there are framework like AngularJS that make use of data attributes, working per injection without add/repeating any css/id which make me think that I should start to explore it since recently they start to make use of animations.

The problem more over is that you start from a built in CMS so adding a javascript which uses the current classes/id is easier that touching the html generated.

Create, release and find your own font

Recently I had a look to the fonts, yes those that you use in your office suite or web browser, so moved by curiosity I checked out utilities and other things related to fonts.

First of all for the creation of the font you can use Fontstruct.com, this website uses a Flash application (I know some purist wouldn’t like) to create your font through predefined bricks and it allows you to share it with others. The application is quite user friendly and it allows to share your font in one of these licenses:

  • Creative Common Attribution Share Alike (CC-BY-SA)
  • Creative Common Attribution Non-commercial Share Alike
  • Creative Common Attribution (CC-BY)
  • Creative Common Attribution Non-commercial
  • Creative Common Attribution No Derivatives
  • Creative Common Attribution Non-commercial No Derivatives

The font is then saved in TTF format.

Among those above the CC-BY license is the only one considered in the list of good licenses for font in Fedora list, although the preferred one is the SIL Open Font License.

For Debian they accept CC-BY-SA and the Sil licences.

An application that you could use is FontForge (I didn’t personally try) but it seems well advanced. FontForge is released with BSD License and you can find also the binaries for Windows. Although the interface looks not the best one, it allows to manage different font formats.

If you are searching for inspiration you can also go on other websites like:

Sometimes you really want to know which font is used inside an image, there are 2 websites which can help you:

  • WhatTheFont, where you can upload an image directly and by matching the characters you can be lucky to find the right font. They also release mobile applications (so maybe you just found  a shop with a nice sign and you can take a photo and upload it directly on WhatTheFont) which you can download for free. I tried the Android version on a DVD title and it worked very well
  • Identifont, a web site where you can search fonts by Appearance, using a wizard that helps you to identify the font (it really helped me to find out a font used in a jpg), by Name, by Similarity, by Picture and by Author. They also have a section of free fonts

As Firefox extension I found Font Finder, which I still have to try but looks useful for font designers; for what I can see you can also use Firebug and look at the font rendered with the help of FireFontFamily extension.

Concerning the format you have to know that one of the recommendation (just recent – 11 October 2012) of the W3C is to use the WOFF format , which is a wrapper for TTF font (and other types). Since the SIL license allows to compress the font you could use some tool like sntf2woof that can help you in doing that (the author of the tool is one of the author of the WOFF specifications)

Concerning performance there some of considerations you can take in account:

  • you can reduce the size of the font by selecting the subset language alphabet you need only (latin instead of cyrillic if the font contains it) or even simply selecting only those characters that you really need (in a logo you already know), this is possible through the Google Web Font API and through the font squirrel service in expert mode with custom subsetting. If you don’t want use a service you can have  a look to the font-optimizer released by Philip Taylor under MIT license or having your own loader from Artz Studio.
  • Another consideration is the caching with Google Font Loader that apparently can change depending on the version.
  • The other consideration is about IE browser that you have to put the @font-face declaration before the script tag accordingly to Steve Souders blog post.

Enjoy you new font !

JAXB and the root element

Recently I helped a friend to implement the client of a web service using Axis2 and Tomcat, developing the client first and the jsp after. After testing the web service with SoapUI we started to develop the client with Eclipse.

The problem with this web service is that the body of the method is an entire xml string contained in a CDATA element, not only for for the request but also for the answer, of course this creates problem to generate the java objects from the wsdl file since the element is not defined as XML.

Luckily we received the xsd files so we generated the java classes with JAXB data binding which is implemented, and it can be executed, through the application xjc that you can find inside the bin folder of the Java Virtual Machine. Note that JAXB is the default databinding of Apache Cxf.

JAXB worked nicely but we had the problem to extract from the xml string the node container which needed to be declared as root element, in other words you need to use the @XMLRootElement annotation otherwise you can have the exception:

unexpected element (…) , Expected elements are (none).

when you unmarshal (from string to java object) the element.

 

JSLint4java, Jenkins and Violation plugin

In a previous article I told you about the existence of the violation plugin for Jenkins which can take in consideration the output generated by jslint4java.

jslint4java has an ant plugin which can be easily integrated in your environment and you need just to configure it for your javascript.

Let’s suppose you have a javascript file, in my case user-extensions.js coming from Selenium, in your repository.

At the same level create a folder named “jslint”. Under this folder place the jslint4java-2.0.1.jar file that you can find inside the zip file of jslint4java and create a build.xml file with the following content:

<project name="proj" default="main" basedir=".">
<target name="main" depends="jslint"/>

<taskdef name="jslint"
classname="com.googlecode.jslint4java.ant.JSLintTask"
classpath="jslint4java-2.0.1.jar" />

<target name="jslint">
<jslint haltOnFailure="false" options="sloppy">
<predef>selenium,Selenium,storedVars,LOG,Assert</predef>
<formatter type="xml" destfile="jslint.xml"/>
<fileset dir="../" includes="user-extensions.js"/>
</jslint>
</target>

</project>

In practice in the taskdef tag we say where the jar file is located (same folder), in the jslint tag I specified:

  1. haltOnFailure=”false”, to not  make stop and fail the plugin if a violation is found (in this way the entire job in Jenkins will not fail)
  2. options=”sloppy”, to disable the strict control in the file (used for ECMAScript 5)
  3. using predefined variables like “selenium” with the predef tag
  4. specifying the output file (in the same folder) in xml format (useful for the violation plugin)
  5. specifying just the input file that I have (which is in the top folder)

Once the folder is created with the 2 files (build.xml and jslint4java jar file) in the repository let’s go to the Jenkins job to install the violation plugin and configure the job.

First let’s configure the ant task in the Job (my directory is under trunk/test):

Ant configuration

Then we configure the Violation plugin in the Job:

Violation plugin configuration

Let’s save and run the build and we should see a graph the following in the Job page:

Violation graph in job page

If you click on the left menu on Violations (or in the graph) you will see the same graph with the number of violations per file:

Number of violations per file

If you click on the filename you will see all the violations with the respective row numbers:

Violations in a file

If you click on the row number you can see the line of the code (just below):

Photobucket

Enjoy fixing your javascript file :-)

Selenium, JSLint and editors

Testing with Selenium can require adding a user-extensions.js to your Selenium IDE and Server.

While modifying the user-extensions.js you could need a javascript editor with a JSLint plugin suggesting how to make your code better.

Among open source solutions with JSLint plugin I found: Notepad++, jEdit, Netbeans, Eclipse and Aptana (please suggest others if you know).

Notepad++ (5.9.6.2) has a good plugin updated to 2011 (I can see the Node.js option) and you can put the variable Selenium in the options (Predefined field) of the plugin. The errors are displayed in the JSLint panel which is good but you cannot order them by error description. The only problem is that Notepad++ is for Windows (I have seen people using it with wine for Linux).

Notepad++ doesn’t provide a function navigator but it is possible to setup a Function List plugin manually (put the dll in the program files directory and the rest in the %appdata%/Notepad++/plugins/config with the xml in readonly) and add a rule as explained in this blog.

jEdit (4.5.1 pre1) is a good multiplatform editor. It has a function navigator (you have to install Sidekick plugin with the XML plugin) and it has a JSLint plugin (0.8)

The JSLint plugin is old (in the page you see that the latest release is in 2009) and indeed you don’t see the Node.js option, further you need to add /*global Selenium */ inside your script to make disappear the undefined variable Selenium message. The errors are displayed in the Error List panel and underlined in the file andyou cannot order them by error description

Netbeans (7.0.1) has his own JSLint plugin, with a configuration under Tools->Options->Miscellaneous->JSLint but the Predefined field doesn’t seem to work so you need to add /*global Selenium */ in your script. The error are displayed next to the file and under the Task list (see the instructions) and you can order them by error description.

With Netbeans you can see the function navigator in the Navigator panel. Compared with others IDE (Eclipse/Aptana) you can do the check on a file or in a project while the others can work only in the project.

For Eclipse (Indigo) I setup the JSLint plugin using the update site:

http://update.rockstarapps.com/site.xml

When you have setup the plugin, you see a RockStarApps menu and, as you can notice, the plugin is not updated to the last version of JSLint (Node.js is not there) but the Predefined field works.

The errors are displayed next to the file and under the Problems panel and you can group them by error description.

For the function navigator Eclipse has a JavaScript Development Tools plugin that you can setup using the following site under WTP 3.3.1:

http://download.eclipse.org/webtools/repository/indigo

Then open the perspective Javascript and you find the function navigator in the Script Explorer panel.

Concerning Aptana Studio 3, there is a native JSLint plugin to be enabled under Window->Preferences->Aptana Studio->Validation->Javascript. I don’t see the configuration panel like in the other plugins so you need to add all the options in your javascript file but you can fiter some warnings.

The errors are displayed next to the file and under the Problems panel and you can group them by error description. It doesn’t look to me stable for the moment (it seems not all the warnings I get with the others plugin are there).

Aptana has a function navigator in the Outline panel.

At Continuous Integration level I found a Jenkins Violation Plugin or just using jslint4java which has an ant plugin on which is based the Sonar plugin.