Fire with explosion near Kensington station

10 mins ago I was woken up by an explosion and interval of noise. Then I heard a siren coming far away. I stood up and saw a fire in the park need Kensington station! It was dark, couldn’t see clearly, the noise sounded like a car explosion. I took a picture for this. within a minute the fire was put out. Hopefully nobody gets hurt on this accident.

5oclock

Howto: Show your images using fla-img-sw

“fla-img-sw” is a flash movie clip that enables several images loading by passing the images’ URL to the flash parameter. “fla-img-sw” is annouced by myself, you can get the source code or get the package on http://code.google.com/p/fla-img-switch/ .

Using AJAX to improve the loading phrase of the website is considered to be a good pratice on presentation tier. Actually, Flash movie cilp can do the same thing as AJAX. Imagine there are several images are to be loaded in one page, it takes user’s time on loading the page. If you show a thumbnail in that page, then if users would like to see the detail of the image, they have to click on that image link, your website then pop-up a window to show the original size of the picture. It waste users’ time, according to Even Faster Web Sites (Steve Souders), Life is too short, we should write code faster then even (means saving your users’ life and time :-) 

But I am not here to talk about how to utilize AJAX to improve the website, but gonna show a tutorial on how to use my open source gadget to show images on your website. Before that, just take a look at the example of how the gadget work: (click to enlarge, please note that the demo below is a snapshot of the commercial usage, the open source version is somehow a little bit different from the commercial one, like I depict on the previous post.)
fla-img-switch 
You can see a thumbnail on the right side, and the main picture which is selected will display on the big left side.

It’s easy to use. Once you get the package, you will see a file call “ImgSwitch.html”, that is the demo file, double click this file and you can see a demo locally. If you feel enough for the demo and being inclined to use it, just open the “ImgSwitch.html” and you will see how it works.

Easy to proceed:

  1. Copy “ImgSwitch.swf” to a appropriate position which you can refer from your HTML
  2. Copy the code below to where you would like to show the images:
    <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”690″ height=”492″ id=”ImgSwitch” align=”middle”>
    <param name=”movie” value=”ImgSwitch.swf” />
    <param name=”quality” value=”high” />
    <param name=”bgcolor” value=”#c2b29a” />
    <param name=”FlashVars” value=”picurl=1.jpg;2.jpg;3.jpg;4.jpg;5.jpg&maxpic=5&modelNo=TestTing” />
    <embed src=”ImgSwitch.swf” quality=”high” bgcolor=”#352B68″ width=”690″ height=”492″ name=”ImgSwitch” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” FlashVars=”picurl=1.jpg;2.jpg;3.jpg;4.jpg;5.jpg&maxpic=5&modelNo=TestTing”/>
    </object>
  3. Change the parameters:
    A. Replace “picurl” paramter with your image url, note that if your images are from www, don’t forget to quote the images’ URL starting with “http://”. And the URL is separated by semi-colon(;).
    B. Replace “maxpic” parameter with the actual images quantity you would like to show. 
    C. Replace “modelNo” paramter with the title(name) of this group of images.

Done.

fla-img-sw: yet another open source stuff

I am happy to annouce the release of the following open source stuff which is images rollover flash movie clip (or you can call it HTML flash component). It looks like a gadget other than a whole project. Once you get the source code, you may open the fla source file with Adobe Flash 8.0 or higher version.

This gadget I developed can be dated back to 2 years ago, and the primary progamming language is ActionScript 2.0. My client requires a image rollover component that can easily embed to the existing website, that give me the chance to develop such a flash toy. It is small in size and quite efficient in runtime. The open source version is the original verion. You can find a demo in Product Demo, which is the  commercial version. The commercial one has been changed a little bit to fit my client’s need. The open source one contains smooth transition effects when switching images and browsing the thumbnail. My client don’t like those special effects. 

You can download the full version of the flash image rollover component on: http://code.google.com/p/fla-img-switch/

Or just simply get the source code via: 

svn checkout http://fla-img-switch.googlecode.com/svn/trunk/ fla-img-switch-read-only

Enjoy. :-)

Develop with pleasure, don’t they?

After a trial of using RoR to develop a new website, I could really feel what and how they call Ruby is a programming language of please. It’s so easy to use and change people’s mind on development. I think the reason why RoR becomes a buzzword due to the contemporary client-side web development playing an important part of the development phrase. Technically speaking, RoR simplifies the boring process of website development: also according to DRY principle. Moreover, the build-in AJAX support is inspiring too.  

Have you ever seen the recently movie Red Cliff the 2nd episode directed by John Woo? It tells a story about Three Kingdom period of ancient China. One of the main actor in the movie is called ZhuGeLiang who is well-known and prestigious as a strategist as well as politician in Three Kingdom period. What he said I quoted “Life is colorful if you know everything a little”. That’s true. Back to the scene we just talking. RoR is a good technique that everyone is encouraged to learnt, not because it makes you happy, but also because it changes the way you gonna be happy.

Howto: Import data from Excel to joomla table using Kimport v1.5.0

After proper installation of Kimport component for joomla 1.5.x, you can try to manage the data using this component.

There is something you need to do before uploading the excel file to the component. The most important step to do is mapping the data columns to the excel columns. For instance, you probably have a table like this:

example data table

You can read the data structure by typing “describe [your-table-name]” on the command line or GUI-based mysql admin tools. Then you may now construct your excel file. Create a Excel file in Office 2003 (note that Kimport currently recognizes Excel2003), the paradigm of the excel file should look like: (Click the picture to enlarge the picture below)

excel file with a proper paradigm

You can see that the first column of the Excel is reserved to further use,  then the first row have to be IDENTICAL with the columns’ name of your data table. The second row is the data type property of the column. For instance, product_sku should be string, so the data type is written “string”.

Okay, now you know that the excel’s paradigm is to map the data meta information of the actual data table. The yellow high-lined part of this excel means the reserved information. Please also note the “sheet name” below. The sheet name should be the EXACTLY same as the table’s name. After the excel file is prepared, you can proceed to upload the file to the component.

Two steps are need to perform upload:

  1. Select “Kimport” from the top menu “Components”. (click the image below to enlarge)
    step 1
  2. Select the Excel file from the local computer. Then click “Save” on the top-right of the page. (click the image below to enlarge)
    step 2
  3. If upload is succeed, you can see a information notification on the page. (click the image below to enlarge)
    step 3

Easy, huh? But Still need to keep in mind when you arrange the Excel data:

  • The first column of the excel file is reserved.
  • The first row without the first column is mapped to the columns’ name of the data table.
  • The second row without the first column is the data type of the column
  • The sheet name of the excel file should rename to the EXACT name of the data table.

Kimport v1.5.0 installation guide

Just like the other components, you need to install Kimport before using it.

Pre-requisition:

  • Have joomla 1.5.x installed.
  • Login to joomla adminitration page as Super Administrator role user.

Installation: (3 Steps)

  1. Select install/uninstall from the main menu. If you can’t see the sub-menu on top, please confirm if you have an Super Admin role privilege.
    install step 1step 1
  2. Select the com_kimport.zip on your local folder. Press “Upload File & Install” button.  
    step 2step 2
  3. After a short while (com_kimport is small size), you can see the successful post-screen.     
    Step 3step 3

Now you can see “Kimport” sub-menu on the “Components” menu on top.

Kimport v1.5.0 for joomla 1.5.x Released

If you have ever been a web master, you would probably know joomla project or even use it for managing your web contents. It is easy to use and deploy. The only thing to do before using joomla should you have Apache and Php 5+ installed on your own server or hosting server. For SEF convenience, better have mod_rewrite on Apache server.

During the mainteinance of the joomla website, I was getting tired for adding new articles and other contents, that is, you have click on the “Add” button, type all the contents(or copy them from your notepad) to the relevant page, then press “Save” or “Apply” so that the new article is post. Then if you have another article to post, you have to go back to ground-zero and repeat the steps. 5 articles in all in one time gonna kill me, how about you get 20 more to post in one time? So that is the original idea for me to design a joomla component called KIMPORT. That component save my time adding the new contents. KIMPORT now becomes an administrator-oriented utility for manipulating the data table. Before adding new contents, you just fill in a specific excel file (2003) in a certain paradigm and then upload the excel with the component, then you got your data filled in the data table. The setup and the instruction guides please refer to the new post of my blog.

The initial version of KIMPORT is 1.5.0, which means it’s native for joomla 1.5.x. Since joomla 1.5.x is GPLv3.0, the license for KIMPORT is GPLv3.0 as well.

kimport

You can download the project source code with any SVN client:

svn checkout http://kimport.googlecode.com/svn/trunk/ kimport-read-only

Or just only download the package for installation:

http://kimport.googlecode.com/files/com_kimport.zip

SEO tips

ecently I was assigned to optimize a website for search engine recognization.  Here are some points which I think should be important to optimization.

1. Not Keywords But Keyphrase

In some books and some readings,  they encourage optimizing keywords first. Actually, I think first to do is not to arrange “keyword” but keyphrase. There are tonnes of keywords which are ignored by search engine, what make you think google prefer your words? The different between keywords and keyphrase is that keyphrase is oganic group of several keywords, better group in meaningful phrase. For instance, “melbourne, cellphone, nokia” should be re-group to “melbourne nokia cellphone”. it is said that 3-4 words phrase is effective and thrift. You can have several keyphrases.

2. Don’t use image navigation nor javascript 

unfortunately, search engine is not eligible to read the contents from image even flash. If you insist using images as navigation menu, don’t forget to add “alternative” to the image tag.  I prefer UL and LI plus image listing type to represent navigation menu.

3. Wrap product name or article name in H1 (H2, H3…)

That’s also a way to increase readable by search engine.  Also don’t forget to mention more keywords as possible inside the HTML BODY section.

4. Use meaningful URL

Thanks to many SEF utilities. They provides URL-rewrite capablity for web server. Those techniques can easily turn your URL “http://xxx?id=yyy&title=zzz” to “http://xxx/title-zzz_id-yyy” in a breath. Actually web server like Apache provides url-rewrite module that you can add the rewrite rules to the website by yourself.

5. Re-consider where and how AJAX is performed

AJAX is a great method to improve user’s experience of your website. But it comes with some short-comings. If you render your web contents all by AJAX, search engine will stop indexing your page. Like I said on the point 2, search engine will not be smart enough to execute your javascript.  So I think AJAX will be good when you:

  • Proceeding user’s feedback on the page (such as  post comments and re-render the comments).  
  • Add to shopping cart behavior. 
  • Performing some post data validations, such as checking availability of user name on register page.
  • Interacting with user on management pages, for instance, user information or user account management page. Since those pages should not be crawled by web-spiders. You can use javascript arbitrarily. But still keep in mind that NEVER force the page to be javascript support ONLY, i mean don’t force user to see the page only if javascript is enable. 

Hmmm, easy to read is the 1st priority

What the…? My blog renew with a ugly face.. Because I think easy to read is most important, then the priority will be wide use, i mean the blog ought to be read by not only modern browsers but also handheld devices. Last should be the beautiful face, an attractive look of the website is less important than the contents. agree? :-)