Archive for the ‘Technologies’ Category

Jquery portal interface

Jquery §ui  and other libraries can allow you to build a modular web page. here is a list of interactive  layout solutions

How I installed sub labels on gmail

while gmail is certainly one of the most professionnal email readers, I still like to sort messages in folders and sub folders the way I used to do in old outlook clients. Even though google tries to promote its wonderful search capabilities, argumenting they remove the need for hierarchical labelling, I can’t get it out of my mind, and I ‘m not the only one. As of today, is takes a few minutes to configure your PC / chrome navigator to process sub folders.

  1. download the sub folders script from the adresse below and save it  to chrome’s directory :
    http://arendvr.com/folders4gmail/
    Local Settings\Application Data\Google\Chrome\User Data\Default\User Scripts
  2. enable user script on your chrome application by using the –enable-user-scripts command line tag,a s sexplained here
    http://arendvr.com/folders4gmail/

Magento : how to learn from free templates

The power of Magento is great but it requires long days of learning and suffering to get through relative simple features, such as the now common front page slide banner. I had a quick look at magento free templates on google and was conquered by Magento ’s classic theme, the kind of  stuff that’s really given free of charge when I would have paid for it. It actually comes with an interesting development of Magento’s block systems, and demonstrates how to add a custom block between navigation and content : the prototype glider that scrolls images is defined a cms static block, which is then called in the home page CMS  custom xml definition, with a reference to the slider block that’s positionned in phtml files and declared in the xml layouts as a core/text_list type . Impressive stuff : that’s pure  magento design and illustrates how versatile the system is.

Links : 25 free templates for Magento

Use Zend_Form to create SQL table

A quick code snippet that uses a Zend form (in the case below, with subforms) to generate a SQL table create statement. Useful for scaffolding : create your form with Zend Form Elements then the SQL table automatically.

  1. <textarea rows="50" cols="80">
  2. create table yrbeaute (`id` int(10) NOT NULL AUTO_INCREMENT,<?
  3. foreach($this->form as $k=>$subform)
  4.     {
  5.         foreach($subform as $k=>$element)
  6.     { if (get_class($element)!="Zend_Form_DisplayGroup")
  7.      {
  8.    if ($element->getType()=="Zend_Form_Element_Select") $type="varchar(50)";
  9.     if ($element->getType()=="Zend_Form_Element_Radio") $type="varchar(50)";
  10.    if ($element->getType()=="Zend_Form_Element_Text") $type="varchar(255)";
  11.    if ($element->getType()=="Zend_Form_Element_Textarea") $type="text";
  12.    if ($element->getType()=="Zend_Form_Element_MultiCheckbox") $type="varchar(255)";
  13.          ?>
  14.  <?=$element->getName() ?> <?=$type?>,
  15.          <?
  16.     } else
  17.           foreach($element as $k=>$elem )
  18.               {
  19.                   ?><?=$elem->getName() ?> varchar(50),
  20.                   <?
  21.               }
  22.  
  23.     }}
  24. ?>  step int(5), `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  25.   PRIMARY KEY (`id`))</textarea>

ixedit : Jquery development without coding

IxEdit is a JavaScript-based interaction design tool for the web taht gives designers and developers a few ready to use jquery tools, such as animation, form enhancements (date picker), and DOM manipulation, all designed within a web based interface. It uses GEARS, a tool developed by google that interfaces browsers with desktop, and the only requirement to start working on a web page is to include the ixedit javascript, plus the jquery libraries.

http://www.ixedit.com/

Prestashop, how to transfer cart to order manually

Prestashop has a nice feature that allows administrator to view a customer’s shopping cart : while the shopping cart is relatively easy to use for novices, the number of steps involved in completing the transaction can discourage some users, who might be tempted to ask you for help. What can you do apart from helpinog the guy to fill in forms ? The technique below illustrates how to simulate a payment using the Cheque payment type, via the creation of a hard coded validation page. Be careul, this is for good PHP coders only as you have to interfere with low level classes from Prestashop.

  1. go to Modules / cheque / validation.php and duplicate the file to validationManual.php
  2. Paste the  code blow under the includes  to instanciante the shopping cart using the ID of the shopping cart you want to transfer to an order, here we have the id 9304
  3. change the currency id to reflect the currency you want to use, you’ll find the currency id in the currency module of the prestashop administration interface
  4. call the module/cheque/validationManual.php from the browser, s if it was called after a valid paymen
  5. Go to Prestashop administration interface to check that the order has been created
  6. you might be wise to try to place a new order for testing that the manual process has not disturbed prestashop’s database integrity
    // 1 . get currency ID
    $currency = new Currency(1);
    // 2 get cart id
    $cart = new Cart( 9304);
    $total = floatval(number_format($cart->getOrderTotal(true, 3), 2, '.', ''));
    $mailVars =    array(
    '{cheque_name}' => Configuration::get('CHEQUE_NAME'),
    '{cheque_address}' => Configuration::get('CHEQUE_ADDRESS'),
    '{cheque_address_html}' => nl2br(Configuration::get('CHEQUE_ADDRESS')));
    
    $cm = new Cheque();
    $cm->validateOrder($cart->id, _PS_OS_CHEQUE_, $total, $cm->displayName, NULL, $mailVars, $currency->id);
    $order = new Order($cm->currentOrder);

Jquery drop down menu, named mega

I usually take superfish for granted when working on a jquery based drop down menu : based on regular ul / li tags, it uses CSS layout directives to position menu items, which I have tried up to 3 levels of navigation. I have just found another good example of submenu implementation that demonstrates the ability to write paragraphs inside the sub layer, as  shown in the illustration below. The tutorial written by Jon Philipps on The Web Squeeze explains how CSS3 manages to implement rounded corners while jquery deals with the drop down effect. Nothing really new, just another way of working with Jquery and layers, but nice.

jquery-dropdown

Web stats open source

I’ve been using Analytics for a while but I think more and more of switching back to a tool I’ve tested already : Piwik is the former PHPvisites and it now incorporates heat map features, a tool that lets you see graphically where visitors clicked on your web pages. On the other hand, open Source Analytics seems to be a good bet too. Both have the real advantage over Analytics in that they provide real time tracking.

Web development for IPHONE

Iphone sales are rocketting they say, and I supsect the quality of web browsing on the Iphone is partly responsible for this tremendous success.  Stéphane Caron is a webdevelopper living in Montreal, who has developped a PrettyMobile,a specific web / jquery development framework that produces perfeclty Iphone calibrated web pages. As explained on the PrettyMobile blog page, “prettyMobile is an iPhone/iTouch website development toolkit. It provide you will all the basics you need to make a mobile version of your website. It makes extensive use of CSS transformations making sure the animations will be as smooth as they can be. Plus, it’s only 13kb gzipped and minified“. The framework includes formatting for a content page, but also for a photo gallery, tabbed content. I’ve tried it on ipoud touch  and it’s quite interesting but the back button is not very useful as it is implemented, it only reproduces the integrated  safari back button.

Make site maps from HTML lists with slickmaps

slickmap-css-sitemap

It’s amazing what one can do these days with jsut HTML and CSS. Slick map css builds a visually attractive sitemap that could also be used to build organigrams, straight from a single line of ul / li HTML tags. It formats ul tags up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. Designed by Matt Everson, Minnesota.