Archive for the 'Web Technologies' Category

First Hands-on: Google Wave Development Preview with Sandbox

In case you have not heard about one of the latest products by Google, its called Google Wave. Google Wave is a product that helps users communicate and collaborate on the web. A “wave” is equal parts conversation and document, where users can almost instantly communicate and work together with richly formatted text, photos, videos, maps, and more. Google Wave is also a platform with a rich set of open APIs that allow developers to embed waves in other web services and to build extensions that work inside waves.

Today, I have just received the requested developer account from Google, in order to gain access to the Sandbox. The moment I signed in to the account, I realised that the interface looks quite similar, if not exactly the same in design as the Google Wave Preview Version, just that there is an extra ‘Debug‘ menu on top, which allow developer to test out their robots or gadgets.

 googlewave_devpreview_1

The first thing I decided to try out, is the Embedded Waves, first of all, I went to create a new wave, and then go to the ‘Debug’ menu to get the current Wave ID. With this Wave ID, I will then embed it into the API code provided by Google, and paste them into the webpage. To my surprise, yes the same wave that I have created earlier on, do appear in my local webpage, and I can interact or post reply to the wave, and on the original end of the wave, my reply appears concurrently, it works like live chatting. Kind of interesting to see how it works, and pretty easy to embed. Furthermore, the wave can be configured in the webpage (e.g font, background colour), by using other API available.

Getting a little bit excited, I decided to move on to try out the extensions called Robots, its a little challenging for this one. I tried to follow their tutorial as closely as possible, by installing Eclipse, did all the necessary configuration, paste in their given testing codes, compile and upload to Google App Engine, but in the end its still not working, given a few more tries, but my robot parrot just refuse to give any response, when I try to add it to my contact. I have tested it on both the PC and Mac platforms, but the same errors in the coding still occurs. As for the next extension called Gadgets, its far more straight forward, the codes are based on Javascript, and later on parse to XML for processing.

It’s still very early to see anything now, but there is surely some potential in Google Wave for online communication. The development process now is still very troublesome, as there is no way you can test the robots or gadgets locally, as they are required to upload to the Wave server for live testing. Hopefully, some workaround will be available soon.

References:
Google Wave API
Google Wave Blog

Using manual Excerpt in WordPress for RSS Feed

I have finally abandone Google Ajax Feed completely for tysoh.com, as the functions inside cannot meet my requirement anymore. For example, I am only restricted to display no more than 120 characters for the snippets for each post, have tried the Google Forums and etc., but with no help. I did a bit of research online, and found a brand new script from Dynamic Drive, which allow a similar function as Google Ajax Feed, that is to read in and display the RSS feed content on a separate webpage, but with much more control (e.g Pagination to separate displayed content into pages). It’s basically quite a good script, but with one very important feature missing, I cannot control the amount of texts displayed for the description part! No worry, luckily there is a manual Excerpt feature available in WordPress, just read on…

By default if you are using WordPress RSS to display the content on your webpage too, you should realised that the automatic excerpt will cause the description to cut off after 55 words. Furthermore, these 55 words are abstracted off from your original post first 55 words, and therefore its known as introduction, rather than summary. In other words, it is not a part taken from a post but an extra piece of information added to a post, in the same way that tags are added. And, like tags, it is optional. To add an manual excerpt, you simply write one in the Excerpt box, right under the post editor:

manual_excerpt_wordpress_1

So, what how do I configure the RSS feed?
After you have typed in your manual Excerpt (known as Summary), it can be reflected in your RSS feed, you need to configure the RSS feed under Dashboard > Settings > Reading to display each article in RSS, either in full text or Summary (As shown below). Overhere, we choose Summary. Now go to your RSS feed url in the browser, you should see the manual Excerpt reflected.

manual_excerpt_wordpress_2

Other Useful Resources:
Google Ajax Feed API
WordPress manual Excerpt
Dynamic Drive RSS Display Boxes

Enhanced version of tysoh.com getting more “Ajaxed” and “Slidier” with jQuery

It’s getting a little busy now for the site, in terms of the back-end coding. Almost everything right from the thumbnail boxes with slide-up texts, tabbed pages with sliding transition, to the Contact page with errors validation, its all integrated with jQuery, CSS and HTML. However, its certainly going to be more interactive, consistent and sleeker than before.

Two greatest challenges I have faced this time round, is firstly trying to get the site to look consistent across all major browsers, such as IE7-8, Firefox, Safari and Opera. The main issue actually lies with the tabbed pages, z-index property has to be added to the CSS tabs, in order for the tabs to look exactly what I want under IE7.

Another problem I have faced, is when integrating reCaptcha with jQuery. Although, I have done it with PHP before, but its a little more complicated when working with Javascript. I will be posting a separate tutorial soon, stating the exact problem and solution.

After working with jQuery for the past 2 days, I realised that its not too difficult to implement, as long as the online tutorials are available. However in terms of browsers compatibility, more time is required to test out the site. And for any future modification required for the site, its definitely going to take more time to adapt. Nevertheless, its still fun trying out new things, you should try it out too!

What is jQuery?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. – abstracted from jQuery.com

What is reCaptcha?
reCAPTCHA is a free CAPTCHA service that helps to digitize books, newspapers and old time radio shows. A CAPTCHA is a program that can tell whether its user is a human or a computer. You’ve probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from “bots,” or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs. – abstracted from reCaptcha.net

Updated on 5th of Dec 2009:
Now even the portion for displaying the RSS feed is based on Ajax. To learn how is that possible, just read here.

Let’s Talk about Embedding ICC Profiles and Converting to sRGB for web images

Are you aware that when you “Save for Web & Devices” in Photoshop, the software might strip out the colour profile? Unless you check the “Embed Color Profile” box when saving out a jpeg to preserve ICC profiles in the Save for Web & Devices dialog. In versions prior to Photoshop 7 you do not have this option which means that, when using the option “Save for the web” there will not be any ICC-profile embedded.

I’m not sure why this “Embed Color Profile” was implemented in Photoshop at a later versions, since there are still not much browsers will read in this embedded ICC profile, even if the colour profile is embedded in the image, most browsers will just simply ignore the embedded color space information and render them as sRGB images. sRGB is pretty much the default color space everywhere you look. This means that most browsers, applications, and devices are designed to work with sRGB, and assume that images are in the sRGB color space.

However, notable exceptions are Safari, starting with version 2.0, and Firefox starting with version 3.0. Although disabled by default in Firefox 3.0, users can enable color management by using an add-on or setting the value “gfx.color_management.enabled” to “true” in Firefox 3′s “about:config” file. Starting from Firefox 3.5 it has color management enabled by default only for tagged images.

So, the first question is should we still embed ICC profile in images, regardless of the little support for colour profile in web browsers? Please bear in mind that the extra ICC profile will probably increase the image size by a few more bytes (sounds pretty ok, but imagine you have tons of images or very large images required to be downloaded). For myself, since the first day I started using “Save for Web & Devices” option, I do not embed the ICC profile for all web images. Hopefully, in the near future more browsers could consider implementing this ICC profile function, to make colour accuracy better on screen.

Another question I have is, when should we convert images to sRGB? I guess that should depend where will you be using the images for, is it for web or print? If you want your images to look the same regardless of where it’s being displayed, you should always publish them as sRGB. This makes it so what you see when you save is what you get when it’s displayed. It helps to simplifies the workflow, and you do not need to worry about color spaces at all if you’re only going to publish your images to your Flickr or personal photoblog.

However, for myself, I do not convert it to sRGB, I would still prefer to work under the Adobe RGB colour space, as it can offer a wider range of colours, and who knows in the near future, I would require those wider range of colours. Please note that, once you have converted the images to sRGB, you cannot convert it back to Adobe RGB.

For now, the choices is really up to oneself, but I do hope that one day the web browsers can really reach up to a more consistent colour standards, thus lessening the burden on designers, as well as providing the best experience for any web surfers who really deserve it.

What is ICC Profile and sRGB?
ICC Profile – Wikipedia
sGRB – Wikipedia

Side Effects for using too much Web Effects

As today’s Internet connection is getting faster and better, many designers will tend to make use of web effects, such as Ajax scripts or Flash, trying to wow the visitors, but we have to think that its still all about the content in the end, we are trying to sell off the products and services to the audience, and not the effect (Unless its some kind of experimental work or portfolio sites, then I think its ok). I’m not sure for you, but when I am surfing the web for information, I would usually prefer sites that have the minimum number of effects or clicks, and yet providing the maximum number of info. Maximum number of info does not mean to the extend whereby it feels overloaded or cluttered, but its adequate enough for me to know what the page is trying to tell me.

There are just too many side effects for using Web effects, I shall name a few, firstly its when the network connection is slow, the site will take an even longer time trying to generate the effects out for the users. The users will become impatient and eventually leave the site. secondly, its the complexity of effects some sites will have fantastic effects, too fantastic that the users not sure how to use. Thirdly, users might get annoyed by the effects, one good example is the mouse-over effects to pop-up additional info, sometimes can be good to replace the clicks, however too much of it will again cause a headache while using the site, as users will tend to accidentally mouse-over something which they are not interested, and intend to move the mouse cursor away (it can be distracting at times).

A good design should really come from the customers point of view, and not from the company perspective. In the end, if the customers don’t find anything useful from the sites, the lose end will still be the company. Therefore building a site which focus on the site content with less clicks, while adding adequate effects to facilitate the browsing process, will certainly make a great experience for the users and company.

Google’s Chrome Operating System (OS) revealed

We already have Windows and Mac OS, and now Chrome has just joined in the fun too! However, this time round its gonna be an open-source OS (integrating with the Linux). Check out the latest product from Google – Chrome OS. Not really a typical full-fledged OS, but more like integrating everything like the web apps (e.g. Gmail, Facebook, Twitter) together with the Chrome browser, the OS doesn’t seem to support SSDs, but able to read USB drive content. Things still look pretty incomplete, more details about the browser will only be announced next year, when its near the launching date. Check out the two videos below introducing the OS, as well as its UI concept. I have yet to find out more about the concept soon…

Sources:
Google Official Blog
Gizmodo: Everything you need to know about Chrome OS
Engadget: Live from Google’s Chrome OS

Travel to top