Few weeks ago, I participipated to the eZConference & Open Nordic 2008 in Skien in Norway. There's some things you must now about Norway :
- It's difficult to get there, even by plane, or car or camel...
- It's absurdly expensive (150€ to do 40km in cab)
- There's no night
- Most of Norvegian is speaking english, hopefully !
- They eat caviar for breakfast
- Salmon is absurdly cheap
By the way, as you can imagine, Norway is a big country with few persons in it. So there's a lot of space and they are very concerned by the quality of their life : cities are clean and services are perfect.
Open Nordic 2008
The conference stood in the Skien Ibsenhuset, a very large conference hall, where both conferences, eZConference and Open Nordic, happened.
The main subject on eZ were :
- Multiple file upload in 4.1 : it has been made in complement of the webdav feature which does not work on all platforms (Did I say Windows ???).
- OE 5 : integrating Tiny MCE, this WYSIWG editor rocks ! After having worked with HTMLArea, FCKEditor and the former OE, it seems to be the more powerfull and intuitive work ever done. At least, it is a very visible work.
- Support for OpenOffice.org and Microsoft Office document import and export in eZ via a nested toolbar in the editor : you can open content directly on an eZ instance via a Java connector and modify it as you want. When you save it, it will send the data to the eZ instance and update your website. Very powerfull and I guess very similar to the Sharepoint feature.
- Site factory and CSS Editor : two features which are made to ease the deployment and configuration of eZ websites. The first is a console tool allowing to deploy in one command an entire site with a specified configuration (it uses REST). The second one is a kind of webmaster gadget in full java which will allow people to modify their design in few clicks : you activate a design mode on your frontend and then you can select each element of the page and then change some defined css values, like background-color or what you want.
- ezComponents integration : eZGuys are close to completely lighten the kernel libs by integrating the eZComponents. The most important change will happen when the integration of the ezcTemplate will be effective. It's a big step for the eZCommunity because we will have to deal with a strict template engine (at last !).
- And some new components like Document and Search.
By the way, it was a great time, sharing our knowledge and drinking beers at the at the pub...
Oslo
And then I travelled a bit to reach Oslo... Country, sea and half-light :
Conclusion
It was a great trip, lot of emotions, lot of exchanges between people from different countries, and one pledge : next year I will be there, Monseigneur.
:-D
After a fruitful conversation with Nicolas Pastorino, he said me that he was waiting the new version of eZDebug. I was focusing on other extension so I completely forgot that. So, I've started the development of the version 1.0 fore Firefox3, in six monthes dev tools have evolved (happily for me) and it will be easier to test and develop. I will make the following arrangements :
- It won't be in a new window but in the sidebar or in a new tab (like the magic CTRL+MAJ+C).
- It won't be necessary to hack the kernel --> So it can be used for any eZ instance.
- It will be possible to filter by category or by typing something.
- A clear "debug button" will allow to hide the debug in the internet page.
If you got some remarks or suggestions on this, just leave a comment.
Exciting ! Only two days before eZConf and the eZAwards !
So a year is gone since last time I trampled the Norvegian floor and I'm ready to go there again. Why ? Simply for the best :
- The bigger CMS conference in the world
- The eZAward after party
- Salmon
- Grenland
As a nominee, I would like to wish a good luck to everybody.
However, I've got bad news for everyone, it won't be a pleasure like last year. It seems that we will have bad weather suring the conf but it will be better just after.
And now, a little trick in order to make accept eZFlow by women.
See you in Skien !
It seems that the first version of the jQuery Who's Who library is finished. I present here what I've done and some feedbacks on the use of jQuery.
How it works
It is very simple to use. You just have to include the javascript files (jquery and jquery.whoswho) and the stylesheet files (a CSS file I provided for the example). Then you must configure it :
- IMAGE_ID : this the id of the image you would like to tag.
- JSON_URL : URL which will provide content to the list. The format of this file must be :
{
10:{"first_name" : "Kylie","last_name" : "Minogue"},
20:{"first_name" : "Robbie","last_name" : "Williams"},
30:{"first_name" : "Mickael","last_name" : "Jackson"},
40:{"first_name" : "Madonna","last_name" : ""},
50:{"first_name" : "Christina","last_name" : "Aguilera"},
...
}
- SQUARE_BOUNDARY : size of the square. By default, I set it to 100px.
I have tested it a lot but some bugs may remain. Just tell me.
Structure of the package
This is how I have organized the package :
- data : some data for the tests
- lib : where the libs are placed : jQuery 1.2.3 and jQuery Dump Plugin (for debug and dev purpose only)
- packed : the packed versions of the jQuery Who's Who library and the CSS file.
- source : the source. :-D
- LICENSE : the license : GPL 3.0.
- pack.bat / pack.sh : a little script to easily pack the files (reduces the files size to 50%). It requires the YUI Compressor (BSD).
- README : the readme file, describes how to install this plugin.
- test.html / test.packed.html : a test file to demonstrate the use of the jQuery Who's Who library.
Best practices
And a little feedback of my jQuery's use.
It's very easy to use it and to bind functions to events, however, this tutorial recomands to bind a function to an event only when it is required.
It may occur that the DOM you would like to access doesn't exist at the moment you are running it. It means that if your code is appending HTML after a DOM node on a button click, you would like to access and manipulate this new fresh inserted code. It is not possible unless you call the bind function at the perfect moment.
$(document).ready( function(){
$("#button").click(function(){
$("#test").append('<div id="inner"></div>');
});
});
In this exemple, when we click on the button element (could be a real HTML input button, or not), jQuery inserts some HTML (a new div in this case) at the end of the inner HTML of the test element. So you have a new div which wasn't there before.
Then you can bind some event on this new element by adding code just after the append function has been called. The issue is that at each click, you will bind the event. Then after two clicks, the HTML code will be appended two times rather than one time as expected. The solution is to separate the functions adding content to the DOM and the functions that bind it. The way to do it is to concretely create a function outside the click bind and put our new bind inside it. Then, at the end of the click bind function, we just call the function we have created.
The other point is the way to develop and to debug your own application :
- the visibility of the function and the variables is reduced to the anonymous function declared in the $(document).ready() call. So it's a bit difficult to access it from outside and to know what is the value of the variable. I've found the provided plugin on the net, it is very useful and allow to easily debug your application.
- the use of FireBug allows to quickly test the javascript, line by line. Moreover, you can test a piece of script in the console command line and inspect it in the DOM Inspector.
| Command line |
|
| DOM Inspector |
|
Next Step
And finally, the next step is to integrate this library in eZPublish, I thought about some interesting features like a generic db connector to extract data from db and output JSON. By the way, it will use eZComponents...
During a mission, I discovered jQuery : a javascript library providing facilities and strong functionnalities to static web pages.
jQuery
The use of this library is very simple. It has been made to use the developper's life and specially the maintenance of functionnalities. The javascript entered is shorter and more simple. It has few concepts so it is very quick to learn.
There is only one entry point in jQuery : the $ function. It allows you to access some standard functions to select nodes in the DOM, to manipulate them or to handle events.
The selectors are very useful because you can select almost every item in the DOM using id, css class or javascript variable name. Then, if there is more than one occurence, the function will result an array. Moreover, you can use XPath expression as filters, to reduce the number of object returned.
The strength of jQuery is the chainability of the functions. It allows to increase readability and maintenance of a javascript. You can also combine jQuery with classical JavaScript scripts.
The Challenge
To test this library, I've decided to develop an eZPublish extension integrating the jQuery library.
As a user case, I've chosen the Facebook tagging functionnality : you choose a picture, you tag your friends, you save it, hovering the head of a friend, the name is shown...
I have first worked offline to design the javascript. Here's a snapshot of what I have done : image gallery
Conclusion : it's very easy to come to grips with jQuery and a bit hard to debug. So I've searched and found a plugin to debug my script. See below.
Other interresting libraries...
I also heard about the ExtJS library which is a professional javascript library providing user interface components to build professional applications. jQuery is also experimenting this way by launching jQuery UI. It will be at the end equivalent I guess, but you will be able to still use the jQuery library as an independant library.
Ressources
Here's some ressource :
jQuery : http://www.jquery.com
Visual jQuery : http://www.visualjquery.com/1.1.2.html
Dump Plugin for jQuery : http://www.netgrow.com.au/files/javascript_dump.cfm
Javascript benchmark : http://flesler.blogspot.com/2008/04/benchmarking-javascript-variables-and.html
Snack Culture
Last week, I went to the eZSystem's Partner Day which was organized at Apple France headquarters. Vincent Bellissen's first slide was about Snack Culture, a new consumption habit based on bite-sized products. Minimal invest and maximum entertainment. You want to change, you can and it is easy.
A typical example is the success of the iTunes music library : once registered in the iStore, you can buy music files in just few clicks. The Amazon website allows too to buy books or dvds in two clicks maximum (one to login and one to buy).
So the consumption habit has evolved in the way that you can enjoy little part of a product instead of the full product. If we check the ratio part of product / price, we can see that the producer gets always great benefits. It's not new, you may buy a big pot of mayonnaise for 10€ or a tiny one for 3€ but you won't get the third of the big pot. What has changed is the way we can buy it, the product's availability and the way we can use it. You can check your mails while waiting a friend in a bar, watch a movie clip in the tube or even surf the net during a fly.
However, it's a bit threatening. I was thinking that in ten years, children won't read books anymore...
99 Francs
Still digesting this inner revolution, I watched the day after a French movie called “99 Francs”. The story is about a creative publicist who is working in the larger advertisement company in France and who has some issues with girls, drugs, his boss and the whole meaning of his life... I guess it is a good movie and it makes me wonder some things.
Our consumption habits are also enclosed in our today life. We are more receptive to advertisement using some classical symbols and values than original scripts and out of sequence art design. So, if we change the way to consume products by adding mobility and specific parts of products, may be we can break free from this chasm of consumption, classical one.
Moreover, I thought that it might be a catalyst for new shape of art and techniques. With smart phones, we will be able to add high enhanced applications as interactive games, shared software and other funny stuff (video chat or whatever).
Co ?
So, this is what we do. Causing people to buy our products or our services. We are creating desire around functionalities and freedom for a more or less convinced set of people.
The limit is what we can do to be pertinent : what functionality can I imagine that will be sold in the real life ? The business is restricting the scope of our ability and by this way only focusing on what is really important : users need.
That's why changing our consumption habit may change the way we are doing things. We may experiment some new techniques as the impact on bite-sized consumption is very thin.
Still trying to find ways to improve eZPublish, I've thought about a simple process to resize pictures without having to download the picture, to resize in whatever image software and then, upload it again in eZPublish.
My aim is resizing and not scaling. It means that we are losing some information by cropping the picture that we are not losing by resizing. I'm just specifying this point because it's not a extension of the image.ini / image_class mechanism, but a new functionality which allow the user to cut himself a square in his picture. I guess a picture of the result is more obvious :
You can download it as usually on ez.no.
It uses a JavaScript library coded by David Spurr and the Scriptaculous library.
eZ Systems has included in their last release of eZ Publish a client for the Red5 video streaming server.
The documentation is a bit short and you don't necessary have all the elements to complete a full installation. After two hours of hanging about, I succeeded. :-D
Apache configuration
About the Apache configuration, you must add the following lines :
"Listen 100
NameVirtualHost *:100
<VirtualHost localhost:100>
<Directory path\to\Red5\webapps>
Options FollowSymLinks
AllowOverride None
Allow From All
</Directory>
DocumentRoot path\to\Red5\webapps
ServerName localhost
</VirtualHost>
"
The first two lines are declaring to Apache the use of port 100 and that some virtual host will listen to it.
The second part is the virtual host as well, what I've added is the "Allow From All" directive that forbidd everyone to access the video. We can tune that.
Content configuration
The Red5 flash client is set up with the content published. In the eZ Flow site package, you have a content named "Live Recorder" which will support the recoder and which can be configured by editing its content. We have three attributes:
- Name : the name of the content : whatever.
- Stream Server : it is the URL to the Red5 server. The protocole used is RTMP (watch out the spelling) and you must finish it by a slash :
"rtmp://localhost:1935/test/
"
- File Server : it is the URL of the Apache file server which deserves the saved files. It's not streams/streams like in the screenshot.
"http://localhost:100/test/streams/
"
And then you plug your webcam and you can start to make some funny films... live !
Conclusion
This feature is very powerful and stunning, however, I didn't find how we can put a live stream online and how we can list all the video we have taken.
Main concept
A year ago, I was working on a project where we were confronted to a certain problematic. We had a lot of classes which really looked like each other and had the same schema of class. So, when we had to modify a class because an attribute was missing or not in the right datatype, we have been obliged to modify all classes and it's very very long when you've got a lot of content types. We were thinking at a solution : creating a class wich willl be a parent class for all the other classes. For exemple, your customer is selling furniture products via the webshop and here is a detail of how this solution could be applied :
- You create a class Furniture Product with those very generic attributes : Name, Description and so on.
- Actually, you have three types of furniture products, Table, Cupboard, Settee. In the normal way, you will have to create three different classes with common generic attributes and specific attributes. There, you will just create a class with the specific attributes, and choose via a list of classes from wich one you would like to inherit.
- After that, when you are editing and publishing content, the content schema is based on the merge of the parent class attributes and the specific class attributes.
Implementation
To realize that, here's what I was thinking about :
- Modify the SQL schema of the ezcontentclass table to add a integer attribute called parentclass_id.
- Modify the kernel/classes/ezcontentclass.php file to add parentclass_id to the definition of the object.
- Modify the kernel/classes/ezcontentclass_attribute.php file to process all the attributes, main class and parent class attributes, when we use a function.
- Modify the design/admin/templates/class/edit.tpl file to add the list of classes who can be parent.
- Modify the kernel/class/edit.php file to save the information.

Add comment