Thứ Ba, 24 tháng 7, 2012

XML vs JSON

I recently read an article on Linux Magazine that suggested JSON is a better tool for data transfer than XML on Android phones.  So I decided to try switching some of QueueMan’s queue retrieves over to JSON.  Eliminating the verbose tags may be much quicker over wireless airwaves.
The choir I tackled was to compare the performance of XML and JSON by downloading the user’s recommendations from the Netflix API. To make testing quick I would make a call to both XML and JSON classes in each loop, and repeat 10-30 times for each sample point.  The sample points were 1,5,10,15,25,50, and 64 discs. (64 being the current # of recommendations Netflix is offering me)
I used org.xml.sax, and org.json. JSON* as the libraries for my parsing.

Why JSON is thought to be superior to XML

So the thought, as I have seen and heard it is as follows:
JSON’s lightweight payload allows for reduced bandwidth needs and faster transfers.
That is particularly attractive for mobile devices.

What my Testing Revealed about XML vs JSON

 XML vs JSON
You can see from the 108 samples above that in the 1-5 disc range that JSON indeed performed a bit quicker than XML. However the numbers quickly turned, and JSON grew exponentially slower as the disc count increased.  XML’s time grew much slower.

Why XML is a better Performer

The argument that JSON’s has a lighter data definition structure is true, but only by 50%.   And the structure for 5 discs is less than 1% of the total character payload  (0.8% in JSONs case, assuming an average label of 12 characters, not counting all the commas, parentheses, and escape characters needed).  And this drops as the numbers increase.  So if you’re just passing a “tag_names” with payloads like “8974″ than JSON would be much lighter.  Once you start passing text that far exceeds your tag lengths, than JSON loses its edge.
Size Matters
{ "average_tag" :  {
 "term1": "it's all about the data",
 "term2": "and the amount of information",
 "term3": "you need to transport"
}
<average_tag>  
 <term1>"it's all about the data</term1>
 <term2>and the amount of information</term2>
 <term3>you need to transport</term3>
</average_tag>
So although the payload is just slightly lighter,  it has one major trade-off.  XML is a parse-once-and-you’re-done deal. The entire XML file is walked once by Sax, and you just build a neat little Object as you go.  With JSON you rely on setting objects to represent the structure of the file and pull pieces using their index.   I suspect the JSON parsers walk though the string numerous times. (hence the requirement for a string, and not an input stream like Sax.)
So, as far as QueueMan and I are concerned, we’ll stick with XML.

(http://www.edwardawebb.com/tips/xml-json)

Thứ Năm, 5 tháng 7, 2012

The XMLHttpRequest Object

XMLHttpRequest Object Methods

Method Description
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method,url,async,uname,pswd) Specifies the type of request, the URL, if the request should be handled asynchronously or not, and other optional attributes of a request

method: the type of request: GET or POST
url: the location of the file on the server
async: true (asynchronous) or false (synchronous)
send(string) send(string) Sends the request off to the server.

string: Only used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent

XMLHttpRequest Object Properties

Property Description
onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number (e.g. "404" for "Not Found" or "200" for "OK")
statusText Returns the status-text (e.g. "Not Found" or "OK")
(http://www.w3schools.com/dom/dom_http.asp)

Thứ Hai, 25 tháng 6, 2012

Phần mềm viết bài cho blog - Windows Live Writer

Khi sử dụng các dịch vụ blog như Blogger, Wordpress, My Space..., mỗi lần muốn viết bài mới thì bạn phải đăng nhập vào trang quản trị, cái khó chịu nhất ở đây là việc viết bài và xem thử kết quả trước khi xuất bản trên trình duyệt phải đợi nó load, nếu kết nối internet chập chờn cộng với việc hosting có tốc độ không được nhanh thì quả là rất mất thời gian để viết được một bài mới.
Bạn download chương trình này tại đây http://explore.live.com/windows-live-writer .Chương trình sử dụng để viết bài không cần đăng nhập vào trang quản trị blog.
Phần mềm Windows Live Writer công cụ hoàn toàn miễn phí của Microsoft, hỗ trợ cho các blogger tiết kiệm thời gian khi viết bài lên các thể loại blog như WordPress, LiveSpace,..


Hướng dẫn sử dụng:
1. Để có thể post bài lên blog WordPress bằng phần mềm thông qua giao thức XML-RPC, bạn nhớ vào phần quản trị blog WordPress—> Settings chọn Writing
Trong phần Remote Publishing đánh dấu chọn vào dòng XML-RPC, sau đó Save lại là xong.
2. Download, cài đặt và sử dụng Windows Live Writer
- Trước hết bạn Download Windows Live Writer
- Cài đặt bằng cách click đúp vào file đã download về. Làm theo trình tự màn hình cài đặt của Windows Live Writer.
- Sau khi cài đặt xong bạn chạy chương trình Windows Live Writer
- Chương trình sẽ hỏi bạn sử dụng với blog nào, sau đó điền username và password

- Màn hình làm việc của Windows Live Writer:

- Các thao tác trên Windows Live Writer rất dễ sử dụng vì cùng 1 cha với Microsoft Office.
- Ngoài ra Windows Live Writer còn có 1 rất nhiều plugin các ứng dụng mở rộng để cài thêm trong phần Insert.
- Để post bài lên blog các bạn click vào nút Publish.
- Windows Live Writer thuộc bộ ứng dụng Live của Microsoft với Sky Driver, Live Messenger, Photo, Movie Maker.... Với phần mềm này thực sự việc viết blog sẽ đơn giản và hiệu quả hơn nhiều.

(http://inet.edu.vn/tin-tuc/2285/Phan-mem-viet-bai-cho-blog-Windows-Live-Writer.html)

Cài đặt Facebook Comment cho website

Giới thiệu
Facebook ngày càng phổ biến và trở thành công cụ kết nối hoàn hảo trên mọi phương diện. Nhờ có hệ thống API mở nên hầu hết các hệ thống web đều có thể kết nối với Facebook. Đây là mối quan hệ tương hỗ cùng phát triển: Facebook sẽ được nhiều người biết đến, nhiều website kết nối tới, ngược lại các website thu được một lượng traffic đáng kể từ facebook.
Facebook đã phát triển một hệ thống Social Plugins rất hữu dụng để cho các website có thể kết nối với Facebook một cách dễ dàng!
I. Cài đặt Facebook Comments Plugin
Các bạn vào địa chỉ sau để tìm hiểu tính năng của Comments Plugin:
http://developers.facebook.com/docs/reference/plugins/comments
1. Cài đặt Facebook Comments Plugin cho WordPress: các bạn có thể tham khảo WordPress Plugins sau:
http://wordpress.org/extend/plugins/facebook-comments-for-wordpress/
2. Cài đặt Comments Plugin cho Website nói chung, các bạn tiến hành theo các bước sau:
Bước 1: Tạo 1 ứng dụng (Application) để lấy mã Unique ID:
- Để tạo một Application trên Facebook ta vào địa chỉ sau:   http://developers.facebook.com/setup/

- Nhập Site name, Site URL, Locale và nhấp vào nút “Create application” bạn sẽ có một ứng dụng cho riêng mình với các thông số sau: 

Bước 2: Hệ thống sẽ cung cấp cho bạn ID của ứng dụng, bạn sẽ lấy mã này để điền vào mục tạo mã cho Facebook Comment Plugins như hình sau:
http://developers.facebook.com/docs/reference/plugins/comments/

- Tùy chọn số lượng Comments hiển thị và độ rộng của hộp comment.
- Sau khi nhấp vào nút Get Code chúng ta sẽ được một đoạn mã HTML. Bạn copy đoạn mã này và dán vào bất cứ phần nào trên website mà bạn muốn. 

Bước 3: Thử nghiệm
- Facebook Comment Plugin sẽ hiển thị trên website của bạn giống hình sau:

- Facebook Comment Plugin chỉ hoạt động hiệu quả khi người dùng đã đăng nhập tài khoản Facebook
- Nếu đánh dấu chọn mục “Gửi bình luận lên trang Facebook cá nhân của tôi” thì comment sẽ tự động hiển thị trên trang cá nhân của người comment.

Phân tích, đánh giá
Facebook Comment cũng không khác nhiều lắm so với nút “Share” hoặc “Like” tuy nhiên nó có tính gợi mở nhiều hơn!
1. Mặt lợi
- Facebook comment giúp webmaster linh động trong việc chèn comment vào bất kỳ chỗ nào trên website
- Có thể thay thế cho hệ thống comment sẵn có của Blog.
- Facebook comment có khả năng lan truyền mạnh mẽ trên mạng xã hội Facebook, nhờ đó website của bạn sẽ được nhiều người biết tới, tạo nên hiệu ứng dây chuyền.
- Dùng kết hợp với FBML để tạo mục sự kiện hoặc đánh giá sản phẩm trên trang Landing Page của Facebook
2. Mặt hại
- Load lâu do phải kết nối với Facebook.
- Không lưu trên hệ thống CSDL của website, chỉ lưu trên Facebook, đối với 1 Blog thì comment là một trong những tài sản quý giá cần được lưu giữ. Do đó nó sẽ là con dao 2 lưỡi khi blog của bạn hoặc facebook gặp vấn đề!

(http://inet.edu.vn/tin-tuc/91/cai-dat-facebook-comment-cho-website.html)

Chủ Nhật, 17 tháng 6, 2012

Fix YouTube iFrame Overlay and Z-Index Issues

YouTube's new iFrame player is a nice refresh to the ugly embed code that we have been using, but if you are placing it on pages with content that overlaps or overlays on each other or uses things like lightbox, you may notice that the videos appear on top of content. It's very easy to fix the issue when we use the standard embed code by simply adding a paramater to the code itself. With this new code, we simply don't have the ability to edit the code directly, but the YouTube team has made it easy for us to control this.

Default Embed Code:

Modified Embed Code:

To fix this, we simply add a small snippet to the end of the URL to let the page know that we want it to add these paramaters. Add "?wmode=opaque" to the end of the URL.
Hope this helps someone - took me a while to find it. Enjoy!
Update: If this doesn't seem to work in Chrome, try wmode=transparent instead of wmode=opaque!

Update 2: Automate This With jQuery!

A user posted a jQuery code snippet in the comments that allows us to dynamically make this change! I have not tested this personally, but it looks like it should work fine - jQuery is required for this to work and I reccomend posting this in a $(document).ready(); function or at the bottom of your page.
$("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "?wmode=transparent";
      $(this).attr('src',ifr_source+wmode);
});
This code will automatically apply itself to EVERY iframe element - so if you use iframes frequently ( Facebook Like Buttons, anyone? ), you may want to use jQuery to check to see where the URL is coming from. This is a basic snippet posted to get you started that will take every iframe on the page and adds '?wmode=transparent' to the end of it - it's quick and easy!
Update Again: This code snippet will check to see if there is already a query string present - if so, it will simply append the new string and value pair.
$("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=transparent";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);
});
Update To That: If you want to place our wmode parameter to the beginning of the query string, we can do something like the following:
$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});
(Thanks to Michael O for perfecting that last snippet.

Update 3: Concatenating With An Existing String

As one of my readers points out, some of your URLs will already have a query string attached. As an example:
http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0
If you were to attach "?wmode=opaque," it probably would not work. To get around this, simply use an & instead of a ? to add on to what we would call the query string.
http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque
 
(http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/)