Here is a simple steps to install JSON for PHP in *nix server. The sample command below are running under Centos OS.

yum update "*php*"

Make sure you have install PHP Pear.
yum install php-pear

and The pecl command can then be found at /usr/bin/pecl

Then, we can start install PHP JSON.
pecl install json
cd /etc/php.d/
echo “extension=json.so” >> json.ini
service httpd restart

If you are using JQuery with JSON, take a look at this JQuery Json Library. Easy to use and simple.

ImageMagick PDF to Image conversion or Vice versa

Using Linux version of ImageMagick to convert PDF to Image

convert -density 140 test.pdf -resize 25% -quality 100 -colors 256 test.png

You can even use PHP ImageMagick library to convert pdf to image file.

For more information can be view from here :

Allow Apache PHP to access Unix Command or software.

Recently i was working with ImageMagick software (Open Source), basically a very powerful image suite to create, edit, and compose bitmap images. It can manipulate any sort of image just by using command line. Image using Photoshop with command line.

But calling an ImageMagick command using PHP Web pages required some configuration in the visudo files. Apparently, by default unix os will restrict any call or process that do not have any permission to access the internal command. If you wish to execute ImageMagick, you either required to use root user or user who is allowed externally to access the command. One of the way is to enable apache user, remove the Required TTY with visudo and add this to line into visudo (APACHE ALL = (ALL) NOPASSWD). I won’t say this is the only way, but this is one of the most easier. You can either use the PHP ImageMagick library or create and assign a group for apache that are only allowed it to access certain thing in the unix.

But the problem with using ImageMagick PHP library packages is that you can’t have much flexibility and control compare of using the command line.

THIS STEPS BELOW ARE NOT RECOMMENDED IF YOU DO NOT WANT TO RISK YOUR WEB SERVER.THIS SOLUTION ARE ONLY FOR TEMPORARILY RELIEVED UNTIL YOU FOUND A SAFER SOLUTION.

1. Open up your sudo configuration using visudo command.
2. Find the line Required TTY and comment it out using #Required TTY
3. Add another line that remove required password when apache trying to use the command. : APACHE ALL = (ALL) NOPASSWD
4. Restart your apache and you are done with service httpd restart. Check your apache error log if you still can’t run the command to access ImageMagick.

Here are the list of ImageMagick PHP Packages :
———————————————-
MagickWand for PHP (PHP)
IMagick (PHP)

Higlighting Table row in JQuery

Recently when refactoring the JQuery old code, about a year ago and i found an old and un-JQuery solution where using inline Javascript in HTML. Inline Javascript are bad which are the curse of HTML.

For example :

 <table> 
    <tbody>
       <tr onclick="rowClick('carID') onmouseover=rowOver('carID') >
          <td>whatever here </td>
       </tr>
   </tbody>
</table>

1. Above inline Javascript will not be cache. Every time when the user refresh the page, it have to be reloaded again.
2. Hard to maintain and read something. You have to write everything in 1 line if the line is too long else you will get an error message like this “unterminated string literal” due to line break.
3.It is bad for javascript handling because it wont be able to access event object and
by reading you cant decide what this references to

One of the way to improve the code using jquery and using html class attribute.

<table> 
    <tbody>
       <tr class="carDetails">
          <td>whatever here </td>
       </tr>
   </tbody>
</table>

Since the mouse over event are tie to “this” object, we can get or do anything that are wraped around this object.

$(document).ready(function() {

   $('tr.carDetails').mouseover(function(e) {
       $(this).closest('tr').addClass('highlightSelectedRow');
   });

});

To get the selected row index you can follow the example. Using JQuery closest is one of the way :

    //this will return the row index
    var rowIndex = $(this).closest('tr').parent()[0].sectionRowIndex;

or

    //this will return the row index as well
    var rowIndex = $(this).closest('tr').removeClass('highlightSelectedRow').prevAll().length;

In the above example, when the user move the mouse over the table row, the tr will be added with css class ‘highlightSelectedRow’ to highlight the row color. You can see that we are using JQuery traversing/closest which are available in JQuery 1.3. The new version of JQuery 1.4, allowed array to be passed in. What it does are it get a set of elements containing the closest ancestor element that matches the specified selector, the starting element included.

New example :

<div id="a">
   <div id="b"><b class="carName">ABC</b>
   <div id="c"><b class="carName">CDE</b>
   <div id="d"><b class="carName">DEF</b>
</div>
$(document).ready(function() {

   $(".carName").mouseover(function() {
      //return id of div b or c or d which depends on the text that the mouse event is trigger.
      var id = $(this).closest("div").attr("id"); 
   });

});

Quote from JQuery website :

Closest works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn’t match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.

Saving MySql from Oracle.

Since Oracle take over MySql due to SUN MircoSystem acquisition, I worried that Oracle will kill MySql slowly or make MySql as commercial products. Who knows? Do you know? No. I have used MySql since my study in University and to my today worklife. Why? It is easy to set-up, work well with cross OS platform, and huge support developer community. This does not mean that i do not wish to use other dabatase products, but worried that I cannot no longer used free and powerful database server as what MySql have offered.

Oracle have this massive big huge of complicated database system which is hard to use (configuration for small and medium size projects) by the way. I will continue support the creator of MySql to fight Oracle to release MySql to the public as how it does before.

Please help to spread the world to free MySql from Oracle or at least leave MySql development to public. Or else all MySql user have a price to pay.

Read more from the MySql creator site : Monty
To sign up petition : SaveMysql

My Web Design Process – Part 1

Before graduated from University, i though i know a lot of thing about software life-cycle. Well, after step foot into real world of IT Industry, the thing that i know is i know nothing. Fortunately, working with couple of clients include small and medium size projects, several freelance projects and with my passion along, i quickly grasp the fundamental of design process. Below are the process how i used to iterate on each project that i have been involved with :

1. Very straightforward and basic. Gather requirements from the client. Learn how to scope and say no to the client. Understand what your client is looking for, include profiling he/her business environment. Aware of their competitors, buyers and their budgets. What sort of technology to be used? How long is the website is going to be up? 2-5 years? This steps are the most essential before you can start to design a website for them.

The power to say no is the one of the most important during requirement gathering. Note that, this process will be kept iterating like a spiral process model. Prove them that their idea might a bit off. You need to show them your professionalism. That’s your job. You worry you will lose your customer during argument of what the design should look like. Find a way to solve it. Discuss with them politely and again that’s your job. If you thought creating software is easy as baked a pie (even pie is not easy to baked), then you might have to consider another career path.

Give you a scenario.
Client A : Hey i want something creative, inspiring and cool to my buyers.
Me : Yea, ok. I will figure out how to make it.
Client B : Yea, i want more color. Something more colorful like web 2.0 style. Clean and simple.
Me : Yea. Colorful sounds good.
The design idea in my mind look something like this :

Some Good Layout Design

Some Good Layout Design

Marketer C: Can you design with a flash or something blink blink to attract the visitor.
Marketer D: Yea. More ads. That’s what we do.
After several conversation to add something that is weird and their it is cool.

Me : Oh come on. If i say yes. the web page will look like as below :

Worst Design Sample

Worst Design Sample

2. With the above data collected, before you even start to sketch or design your website using “your little design tools”, you must define the workflow and process how user can get the most out of the website when their are visiting. Define the possible logical steps and the expected user behavior when their visiting your sites. Think of what information you want them to see within 10-20 seconds.

By workflow, let’s start with the root of the problem and from there to how users can navigate to the content that their wish to viewed. Normally i used several tasks and scenario type design. Using task and scenario type design can be tricky. You must not think as a designer or developer mind model because you know how and where to get the data that you needed.

Imagine as a user who does not know anything about the site content. Think as a user who only have less than 30 seconds to spend on your website. Nowadays, users are internet savvy. If their found your website a bit doggy like, poor design, and poor visual data arrangement the user might just left. You have lost one of your customer.
In my culture, if you don’t know how to do something, then the other guy will said. “Hey my grandmother can even do that.” That’s true, if any baby boomer generation how to use your website easily and get the data without frustrate them, you have done your job.

Let’s move on with out example :

*For example : Customer A visit http://www.example.com to check out what services did example.com offers and how much will it cost them. Do their have any special offers or credited reputation? How can i ask them a question regarding to my business need? any pricing models?

Workflow A :

      1. Customer A visit example.com and reach main website.
      2. Customer A look at the main page for services offering or pricing.
      3. Their might be looking at the navigation bars or the middle section of the contents.
      4. Found the link to the services offering and click on the link.
      5. The web page shown up and display all the relevant information their are expecting to see, if not guide them in the very same page.

[The workflow above only cover for success scenario, we need more type of scenarios.]

I use open source Mind Maps tools, which are easy to show to clients in an simple and easy understandable concepts. Support Open Source!!

Note * : This workflow are an example. You can learn more from Microsoft Workflow Design process. It can be more details and you must try your best to cover all types of tasks and design. Sometimes, workflow cannot cover all the scenarios but the most important thing you must covered is what your business trying to offer and find a creative and easy way to reach your clients.

Question : You might ask, i don’t have much time for this workflow thing for my projects due to very limited time and budget.
Answer : Before you start any project, i recommended you to learn and figured out some standard templates for the workflow that you are going to used. It doesn’t have to be complicated, as long as it cover the most important thing that you wish your potential visitor to grab most out of it. Visit Microsoft Workflow Design process to learn more about workflow process.

Once, we have enough workflow and task scenario in hand we can start to sketch the layout design for the web page. For mine, i sketch around 5-6 different web layouts. Each layout have a different arrangement of data, function, navigation bar and etc. With all the workflow and each sketches, present it to your clients. Get feedback from. With the feedback received, progressively improve the design. Reply back again with the new design. Let them be part of the design process so that their can assume that where are the money spent.

Do not put any color on the layout design. The color process will be last step after you have a clear working copy of Web version. With the 5-6 paper sketch design, i will pick the best features and combine into everything and remove any redundant or ambiguity. I learn this process from Apple design process. More about it later on. Continue with part 2.

Tools i have been using :
——————————
Mind Maps tools
Balsamiq Mockups

Some of the very good book for user web usability :
—————————————————————–
Don’t Make Me Think : Steve krug
Designing Web Usability
Designing Web Interfaces : Principles and Patterns for Rich Interactions
Form that work

Some of the very good sites to refer to :
—————————————————
CSS Zen Garden
Smash Magazine
AlistPart
Stackoverflow

Microsoft Innovation Day AU 2009

Went to Microsoft Innovation Day in Melbourne last Wednesday. The presentation was good and inspiring. Their talk about UX design, Silverlight 4 beta, Window 7, Window Touch, SharePoint 2010, Dallas, xRM and etc. I like the idea of Silverlight 4 beta, with much more improvements over the old version and Flex. Silverlight 4 beta allows user drag and drop from web to desktop, support smooth image or video rendering and more. I hope that Silverlight will not repeat the same mistake as ActiveX or Java Applet.

The food was nice but still topped under 3 of the best free food during seminar events. Below i posted the PDF with full links, description and powerpoint slides hosted under slideshare.net

The pdf files that contains lots of useful links : Links and resource pointers for Innovation Days Roadshow 2009

The powerpoint slide for the presentation could be view from slideshare.net
———————————————————————————————–
The Age Of User Experience
Innovation on the web with Silverlight
Not Just Better, Faster – Expression and Sketchflow