Webmaster Bulletin

Kaltura releases All-in-One Video Module for Drupal / Wordpress

admin — Mon, 05 Jan 2009 08:58:10 +0000

Kaltura, the platform that brought open source to video and enabled groups to edit and collaborate with online video, has released a video module for the open source Drupal CMS. Kaltura’s platform includes an easily customizable set of widgets that seamlessly integrate into video applications on web platforms of any kind. Publishers can deploy existing widgets and apps or take advantage of Kaltura’s open architecture in order to develop new ones. Whether you need a basic online video platform or one with a robust set of advanced features – Kaltura has a solution for you. Our open framework provides everything you need to design, develop, and deploy rapid and cost-effective video applications on any site.

The module for Drupal adds 4 content types nodes :

A Kaltura Media Node is a simple method for creating and displaying rich media (Video, Audio or Image). It allows upload from local computer and supports almost all video and audio formats, as well as recording directly from webcam. In addition it supports easy import of all rich media (video, audio, pictures…) from other sites and social networks, such as YouTube, MySpace, Flickr, CCMixter, Jamendo, New York Public Library, any URL on the web etc
A Kaltura Media Remix (image above) is an intuitive way to create a mashup of rich-media. Similar to the Kaltura Media Node, a Remix allows upload and import of rich media, but adds the power of online video editing. Each Media Remix encapsulates a “Remix” button linking to a simple to use online video editor that supports trimming videos, transitions, effects, sound-tracks, remixing, reordering videos, overlays, and collaborative editing
Page / Story with video

Generic Data save with Zend Framework

admin — Sun, 04 Jan 2009 13:32:39 +0000

This technical article hilights one the famous ideal goal we all want to achieve : scaffolding, CRUD, BREAD, call it what you want, all we want is to get rid of repetitive sql query writing. Zend framework provides powerful data abstraction and here are a few tips to use Zend_DB_Table to its best. Of course this article assumes you have an idea of MVC development with Zend Framework.

Why are we doing this ? in the course of writing ajax actions, we needed our controller to react to any POST provided by specific forms : whatever the fields in the form, we want them to be saved to our table. Code below is a specific implementation of a controller that responds to specific ajax queries. Please bear in mind that it is only provided as an example of generic query action. Other protions of code are not optimal, such as viewless actions in the renderAjax method, not the best.

Controller Implementation

Our controller is a simple Zend_Controller_Action. We load the database model at init time, and specify the primary key (node parameter) in a class variable. Note that our data model is also stored in a class variable.

class UserController extends Zend_Controller_Action
{
public function init()
{
$this->session = new Zend_Session_Namespace(‘User’);
// $this->view->translate = Zend_Registry::get(’Zend_Translate’);
require_once ‘models/Users.php’;
$this->data=new Users();
$this->node = $this->getRequest()->getParam(node);
WXC_Log::log("init node : " . $this->node);
}

Quick look at the model

at this stage I specify on particular function I like to implement in Zend Framework Models : the primary key ! Other functions of the model could include add, delete and update : we’ll see below that our generic data admin prefers to do the job in the controller.

class Users extends Zend_Db_Table_Abstract
{
protected $_name = ‘users’;
public function primaryKey()
{
$info = $this->info();
return $info[primary][1];
}
}

Back to the crontroller : the renderAjax method is a quick one that stops the view from being rendered. If you are a specialist of Zend Framework you will notice that this can be better performed with the contextSwitch action helper. Use the code below only for testing, for production you’d rather spend a few minutes learning about helpers !

private function renderAjax()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender();
}

Action !

Listing records is the first thing you want to look for when working at data scaffolding. the code below reads metadata from the table, lists all columns from your table, fetches data and returns them as JSON (ready for extjs grid display, by the way).

public function listAction()
{
$this->renderAjax();
if (null === $select) $select = $this->data->select();
$thRowSet = $this->data->fetchAll( $this->data->select());
$nodes=array();
$arrMeta=$this->data->info();
$arrCols=$arrMeta[cols];
foreach($thRowSet as $row ){
$arr_node=array();
foreach ($arrCols as $v)
$arr_node[$v]=$row->$v;
$nodes[]=$arr_node;
}
echo Zend_Json::encode( $nodes );
}

The next step would be to add records : we have not worked on this yet so you’ll want to try this with tables that have a few records in them. The method below works with two types of data sets.

Multiple column form submit :this would be the classical response to a from submission, where each field bears the NAME of the database field, and obvisouly the value is the data. Such forms are transmitted via FORM array with key / value pairs. We read the POST (getRequest->getParam) that match metadata built from the database table column array. We then provide a clean arrData array of new data for the update() method of our Zend_Db_Table instanciation. This method takes two arguments: the first is the associative array mapping columns to change to new values to assign to these columns. The second is the where clause that we built from the primary key
Single column submit : the technique is useful when working with extjs in place editing, where one piece of code can edit multiple fields. The field variable contains the database column name and the value is the data. We add a check that matches the field against database table column names

public function saveAction()
{
$this->renderAjax();
$id= $this->node;
$key = $this->data->primaryKey();
$strWhere = $key. ‘=’ . $id;
$arrMeta=$this->data->info();
// all columns submit
$arrCols=$arrMeta[cols];
$arrData=array();
reset($arrCols);
while (list($k,$v)=each($arrCols))
{
if ($v!="parent_id" && $v!= $this->data->primaryKey()
&& array_key_exists($v, $this->getRequest()->getParams()))
{
$arrData[$v]=$this->getRequest()->getParam($v);
}
}
//single column submit via field/ value
if ($this->getRequest()->getParam(‘field’)!="")
{$field = $this->getRequest()->getParam(‘field’);
$value= $this->getRequest()->getParam(‘value’);
$arrData[$field] =$value;
}
if (is_array($arrData))
{
try{ $this->data->update($arrData,$strWhere);
echo 1;}
catch(Zend_Exception $e){ echo 0;}
}
else echo 0;
}

A good start for extjs development : Hope this is useful for you !!

Ajax webmail on your server

admin — Fri, 02 Jan 2009 12:13:09 +0000

For maniacs who have not yet switched their mail operations to the ever growing gmail storage offer, a few opensource web based email players will provide efficient ajax webmail operations. Choosing between IMAP and POP3 shouldn’t be a problem but bear in mind the basic difference between them : IMAP stores emails on the mail server while POP3 needs the client to perform this. As a result you will find it harder to implement POP3 storage from the client perspective, and this is why it took a long time for companies such as AfterLOgic to release their client. WebMail Lite is a very efficient web client that comes opensource with multiple templates and complete source code. In its time we reviewed RoundCube, that only works with IMAP. Same for new player biuCentrax Mail Center, image above, that demosntrates extjs library integration. Of course, for non ajax playing you can count on the old but reliable Horde framework IMP client.

Prestashop : How to setup thumbnail / combination link

admin — Tue, 23 Dec 2008 13:42:57 +0000

The ability to make mulitple products out on one for size, color or other speicifications, is a great feature of Prestashop, but on small display trick is missing. Prestashop’s default template (v1.1) includes the automatic resizing of multiple images for a product. It also allows the administrator / editor to specify one of the product images for each combination. As a result, the front end display of the product will let the combination select box interact with the mbig image display : here we explain how to modify the product template to let the thumbnail click act onthe combination choice.

For jquery experts only !

the first hing to know with prestashop front end is that the nice functions your customer experiences each times he pays a visit to your shop are all implmented via jquery calls. Jquery is a nice and very efficient library but it is a little difficult to understand when looked over by someone who has not been involved in the development. Everything here happens in your theme javascript folder, in the product.js file.

First thing to do is deactivate the link on the thumbnail : this cannot be done by removing the url because it used for hover effect that displays the big image. We only want to stop the popup from popping and replace the click action by an option change : just remove the THICKBOX class attribute (line 209 of a 1.1 product template page). the trick then is to add a javascript handler on the click event :

onclick=”setCombination{$image.id_image}();return false;”

we declare here on function per image id. A cleaner way to do this would be to builld an array instead of multiple functions. Please go ahead and send us the code.

Very specific functions !

the code below does the job of changing the selcet value when the thumbnail is clicked. Please note this is done with static variables names and WILL NOT WORK on your prestashop theme and product combinations : modify the group_4 reference (check the gnerated product page for select box identifyer)

DEMO : on prayandcomfort religious product shop (created by… the usual suspect).

{foreach from=$combinations key=idCombination item=combination}
function setCombination{$combination.id_image}()
{literal} { {/literal}
var chosenSelection = {$combination.list};
var idChosen = {$idCombination|intval};
{literal}
$("#group_4").val(chosenSelection);
//$("#group_4").trigger(’change’);
$(‘#idCombination’).val(idChosen);
}
{/literal}
{/foreach}

How to install magento free themes

admin — Mon, 22 Dec 2008 22:17:47 +0000

Well you’ve finally decided you’re going to switch to Magento for building ecommerce website. While new versions of Magento coming up regularly make the learning curve easier to climb, be prepared for at least a few days before you can use magento’s features to its best. This article explains the few tricks and tips that will start you off with variations on the basic design of magento’s default installation.

The first thing to do after you’ve installed Magento is to check out the files in skin/frontend/default : you won’t find much here except the stylesheet and a few images. This is the directory of your frontend but you should read carefully the concepts behind Magento’s implementation of design and layout. Much more complex than the usual single folder theme system one can find in wordpress for instance, Magento’s design process works with four types of instances :

Layout ( app/design/frontend/your_interface/your_theme/layout/)
These are basic XML files that define block structure for different pages as well as control META information and page encoding.For in-depth look into layouts, read Intro to Layouts)
Templates (located in app/design/frontend/your_interface/your_theme/template/)
These are PHTML files that contain (X)HTML markups and any necessary PHP tags to create logic for visual presentation.
Locale (located in app/design/frontend/your_interface/your_theme/locale/)
Theses are simple text documents organized on a per language basis that contain translations for store copy.
Skins (located in skin/frontend/your_interface/your_theme/)
These are block-specific Javascript and CSS and image files that compliment your (X)HTML.

This article covers only the installation of a free theme, that can be found under the community section of the Magento Connect pages. Get the extension key (an url) of the thme you’like to try and type that in your own extension manager that Magento provides in the backend ( admin / system / Magento Connect / Magento Connect Manager). The first installation of any extension might look frightening because the manager will perform all sorts of necessary upgrades and dependencies to your installation or extension (in that case, a theme). Version 1.1.8 on xampp did the job right but I remember being put off on previous versions after a failed extension download. Once you’ve see the green screen messages rolling down like a Unix console you’ll be delighted to be greeted by a nice success message “Procedure completed. Please check the output frame for useful information and refresh the page to see changes.”

Once you’ve passed the 2 minutes that the procedure above requires, go back to the admin and follow the simple instructions to change your theme, as described in Magento’s design guide. Go to System/ Configuration / Design and type the name of your theme under the theme section : save, job done.

Be naughty : try another extension ! This nice and quick experience took me to other extensions such as the french language pack : I was happily suprised to find out that the installation of this extension automatically turns the whole shop to french. Reversing to english was then as easy as going back to the admin / system / configuration / general / local options / locale setting. Of course that only impacts magento ’s front end setting : the back end language can be switched any time from the language select in the admin footer.

host videos with ostube

admin — Fri, 19 Dec 2008 17:52:39 +0000

(Press release) we are pleased to announce the availability of osTube 2.3!

Our core development team for the osTube 2.x branch again did an amazing job and brought over 150 enhancements and bugfixes to the framework. Moreover, the database and their queries were optimized so that the performance of database queries could be significantly increased (up to 150%, depending on the queries).

And the very best: Our flash developers finished the new media player so that we could bundle it with the current release. The new player is now widescreen (16:9), faster (ActionScript3 code) and has a lot of new settings that you can play with. All osTube Professional (Plus) Edition owners will be happy to hear that all video ad’s are now fully integrated directly into the player and that external websites (when embedded) will also show the advertisements.

As you know, AUVICA introduced a daily forum support since version 2.0 in 2007. This year AUVICA has sponsored a new core developer that will take care of the future updates in the next years. His name is Andreas and you will see him around here or in the forum once in a while.

Andreas will also take care of regular minor updates where needed.

The most important enhancements for 2.3 are:

• Easy updater for osTube versions 2.0, 2.1 and 2.2
• Brand-New ViMP Mediaplayer in widescreen (16:9) with even more options
• Sidebar integration for related or further media directly in the media player
• “Lights off”-Mode that will automatically darken the browser window when watching videos
• Google Maps Support to geotag media and users
• Optimized Rich-Text-Editor for description fields
• Easy Google analytics integration from within the admin panel
• Database and SQL Query optimizations
• Refined template structure to add custom layout
• Thumbnails are optimized
• plus over 150 smaller enhancements and bugfixes

Alain Coadou, artist in Brittany

admin — Thu, 18 Dec 2008 15:16:46 +0000

Alain Coadou is a water colour artist who works in the old village of Locronan, in the west of Brittany. Designed by PoleOuest, his portfolio implements Silverstripe content management framework along with our own modified jquery gallery module.

Silverstripe : tinymce improvements for image handling

admin — Mon, 15 Dec 2008 14:12:39 +0000

The image button on the tinymce instance of silverstripe html text fields is really nice and well layed out : it gives editors one of the best text / image integration, with a minimum user actions that’s both powerful, intuitive, and reactive thanks to AJAX calls to the folder structure.

One small drawback is that it comes with one small feature that can be annoying at times, especially when you’re looking for inserting images without resampling them, especially for transparent images or tight image integration / quality that Silverstripe resampling functions (PHP based) cannot match (check out the original image hack).

Image size limit feature

In silverstripe, when you select a big image, width and height are automatically resized to a maximum of 600 pixels. Quick hackers might want to deactivate this feature by commenting the resize algorithm in cms/code/ThumbnailStripField.php (lines 73/80 of 2.3 rc2).

But for those who want the best of both worlds (enjoy limitation AND allow original size), here is a hack that will allow editors to choose between the limited image size (max 600, very useful for huge uploads straight from high definition camera) and the original size (very useful for reasonable image size, like example here of 800). Next trick would be to allow editor to type in width and height with automatic calculation of the image proportion. We’re getting closer to photoshop indeed.

Usage : check or uncheck ‘OriginalDimension’ BEFORE image selection. Please comment below or in the dedicated thread on Silverstripe forum.

Hack for silverstripe 2.3rc2 :

\sapphire\forms\HtmlEditorField.php:438
add new checkboxfield :
1. new CheckboxField(_t(‘HtmlEditorField.ORIGINALIMAGEDIMENSIONS’, ‘OriginalDimensions’), ‘OriginalDimensions’)
cms\code\ThumbnailStripField.php:72
add original size in class attribute of the image
1. $originalWidth=‘,originalwidth=’ . round($width) . ‘,originalheight=’ . round($height) . ”;
and at line 84
1. ‘ . round($width) . ‘,destheight=’ . round($height) . $originalWidth . ‘" src="’. $thumbnail->URL . ‘?r=’ . rand(1,100000) . ‘" alt="’ . $image->Title . ‘" title="’ . $image->Title . ‘" />’
jsparty\tiny_mce_improvements.js:440
test checkbox before entering image width and height
1. if($(‘Form_EditorToolbarImageForm_OriginalDimensions’).checked)
2. {
3. $(‘Form_EditorToolbarImageForm_Width’).value = imgTag.className.match(/originalwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
4. $(‘Form_EditorToolbarImageForm_Height’).value = imgTag.className.match(/originalheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
6. }
7. else
8. {
9. $(‘Form_EditorToolbarImageForm_Width’).value = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;

$(‘Form_EditorToolbarImageForm_Height’).value = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null; }

GOOD LUCK AND LET US KNOW HOW IT GOES FOR YOU !!

100 best Content management solutions

admin — Sun, 14 Dec 2008 18:29:35 +0000

EcontentMag, onlinep publication that reviews content management software, has just issued the result of the eighth annual EContent 100, a list of companies that matter most in a digital content industry that involves many domains : Classification & Taxonomy, Collaboration, Content Commerce, Content Creation-Production- and Digital Publishing, Content Delivery, Content Management, Content Security, Fee-Based Info Services, Intranets & Portals, Mobile Content, Search Engines & Technologies, Social Media. The 12 categories that structure this yearly competition illustrate the complexity of an industry that’s slowly growing to the age of adulthood : opensource and proprietary solutions compete in a universe where even the low wage workers of India are quickly switching to western standards. The global economic crisis will certainly highlight the difficulty to maintain costly and complex solutions while simple, efficient and often free solutions will prove stronger as ever. By the way, Worpress 2.7 is out !!

Magic toolbox Zoom, magnify, thumbnail : how to convert opensource

admin — Tue, 09 Dec 2008 20:52:09 +0000

Go for a ride on magic toolbox ’s website, try the 3 effects, and be tempted to purchase the tiny javascript that does the job for you : yes, the packed file you will receive after this small contribution is worth the money asked. But a few clicks away lies… the same magic, with opensource license and no server count obligation. Look no further : Jquery has its own magnify effect, implemented by Huy Dinh. TJP ZOOM is another example of the effect, implemented with plain DHTML / Javascript. For the thumbnail effect, look for one of many light box implementations, such as ThickBox (nice), LightBox (very nice) or NyroModal (not bad either). And for the zoom effect, we’ll leave you back to your imagination and javascript skill, combined with various samples from plugins above. Or alternatively you can come back to magic toolbox and give a few bucks.