My studying notebook

2009/12/24

[Chrome Extensions] QuietRead

12/24/2009 07:55:00 PM Posted by Kai-Chu Chung , , , No comments
Two weeks ago. I went to join Taipei GTUG (Google Technology User Group) Google Chrome Hackathon. At the Chrome Hackathon, the people who attended want to developed few useful, interesting, funny Google Chrome extensions.


In my team (although 2 members) want to develop a useful chrome extensions. Nowadays, it's very convenient to search anything on the internet. Shopping, documents, and news for instance.

You might browse a lot links in one day. How come you could remember all of that links. You might say that you can use bookmark to keep the URL you haven't read it but you interested in it. It's a good method. I use the bookmarks in different browsers too. But, i will keep the link to my bookmarks i thought it's helpful to me. So, i need to any way to keep the URL for a while. That's why QuieRead from.

What's QuietRread?

QuietRead is very simple concept. You might have used the similar service on the internet. What's different between they and QuietRead. I assume you already have a Google Account (If you haven't. Have one). Because QuietRead use Google Documnet List Data API & Google SpreadSheet Data API to save the URL in your Google Docs SpreadSheet.

What does QuietRead do?

Quick answer: Add and remove URL on Google Docs specific SpreadSheet.

How does QuietRead work?

Because QuietRead use Google Documnet List Data API & Google SpreadSheet Data API, you have to login your Google account first in QuietRead extensions Option page. Following are simple step.
  1. Login in your Google Account.
  2. If login is succeed. Then, QuietRead will try to get Google Document List Data API & Google SpreadSheet Data API authorization.
  3. Check "QuietreadQueue" spreadsheet file on your Google Docs.
  4. If "QuietreadQueue" is exist, loading data. If "QuietreadQueue" isn't exist. create new one.
  5. now, you can add and remove URL in Chrome QuietRead Extensions.





Google Chrome QuietRead Extensions

2009/11/12

[Web Tool] SpriteMe

11/12/2009 10:51:00 PM Posted by Kai-Chu Chung , No comments

Recently, I read two books about performance article "High performance web sites: essential knowledge for frontend engineers"[1] and "Even Faster Web Sites: Essential Knowledge for Frontend Engineers"[2] by Steve Souders.

hat two books are very good books let you can understand how to increase web performance. I found few web tools in my searching. SpriteMe is one my want to share you guys. What is SpriteMe?

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

Reference

2009/11/07

Rearrange Blogger Template Related Post & Add New Features

11/07/2009 10:42:00 PM Posted by Kai-Chu Chung , No comments

Today i spent few time to modify Blogger template like:

  • Rearrange related posts code.
  • prettyprint code syntax highlight.
  • Adding FancyBox lightBox and modify new.

I will keep on arranging my Blogger template and help it can more friendly. There had three parts on the above list. Second list is google code pretttify. I change my code syntax from syntaxhighligher to google-code-prettify. Google-code-prettify is using easier than syntaxhighlighter. You can just include two file(prettify.js & prettify.css) add function to execute prettify. Done!! Third list is FancyBox lightBox jQuery plugin. If you are familiar with jQuery. I think it's easy to add that plugin to your web page. About first list is what i want to share how do i arrange the Related Posts.

Related Posts

Until now, Blogger haven't support related posts in your blogger template. If you want to add that feature, you have to modify some template code and add few javascript function to do that.

Scenario

How does related posts work? The scenario is easy to understand. When you want to write new post, you will add Labels for this post on the bottom of Blogger editor. You add tags for the post you wrote. When web user visit your blog, related posts feature will list other relation posts following post content by specific tag. (you have three types can show related posts on your blog depending Blogger template pageType: 'item', 'archive', or 'index').[1]

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
type='text/javascript'>
</script>
</b:if>

I want to show related posts in user view specific page. So, i assign pageType is 'item'. As you can see. you can receive specific tag post content by callback function using Google Data Protocol[2]. Following is complete code to get all tage you add.

<b:loop values='data:post.labels' var='label'>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
type='text/javascript'>
</script>
</b:if>
</b:loop>

Finial, you need to render those data to web page. You can have simple function to do that like this.

After solving how receive data from Blogger template Layout data and render to web page. The key point of Related posts is parse data you need.

We receive Blogger template Layout data by callback function and return JSON data. The render data include post url, post title and post date (depending what you need). It's better to keep value in an object. Object is easier to understand and manipulate.

function RelatedLabels(json) {
var entries = json.feed.entry;
for (var key in entries) {
if (entries[key]) {
var item = {};
item.title = entries[key].title.$t;
item.url = entries[key].link[4].href;
item.date = entries[key].published.$t.substr(0, 10);
relatedPosts.push(item);
}
}
}

You might add multiple tags in different posts, and therefore might receive the same post in different tag by loop. There are many solutions to solve duplicate post in an object.

I push related post in one object. We can extend Array.prototype.push() function to detect should we add this post to our object. If you are familiar with Javascript syntax. It's simple to manipulate DOM using Javascript like document.write(). If you concern web page performance, you should decrease manipulate DOM directly[3]. Following is complete code.

var relatedPosts = [];
relatedPosts.push = function (data) {
var _push = true;
var length = this.length;
for (var i = 0; i < length; i++) {
if (this[i].url == data.url) _push = false;
}
if (_push) return Array.prototype.push.call(this, data);
else return this;
}

function RelatedLabels(json) {
var entries = json.feed.entry;
for (var key in entries) {
if (entries[key]) {
var item = {};
item.title = entries[key].title.$t;
item.url = entries[key].link[4].href;
item.date = entries[key].published.$t.substr(0, 10);
relatedPosts.push(item);
}
}
}

function ShowRelatedPosts(PostUrl) {
var count = 0;
var eleLi, link, date, fragment = document.createDocumentFragment();
for (var key in relatedPosts) {
if (typeof(relatedPosts[key].url) != 'undefined' && relatedPosts[key].url != PostUrl && count < 5) {
eleLi = document.createElement('li');
link = document.createElement('a');
date = document.createTextNode(' (' + relatedPosts[key].date + ')');
link.setAttribute('href', relatedPosts[key].url);
link.innerHTML = relatedPosts[key].title;
eleLi.appendChild(link);
eleLi.appendChild(date);
fragment.appendChild(eleLi);

count++;
}
}
var eleOl = document.createElement('ol');
eleOl.appendChild(fragment);
document.getElementById('relatedPosts').appendChild(eleOl);
}
reference

2009/11/04

Inner Google Docs Quickly View Alternate URL by Chrome Extensions

11/04/2009 11:43:00 PM Posted by Kai-Chu Chung , , 3 comments

If you paid your attention at Google Docs service, you will found Google Docs team announce few new feature like View online files using Google Doc Viewer, Shared folders and more in Google Docs, Taking charge of your document sharing etc. One of my favorite new feature is Google Docs Viewer. Google Docs Viewer let you quickly view documents online without leaving your browser. You don't need to download it if you just want quick it.

Google Docs Viewer is a very convenience tool let you increase browser experience. But, it's still have few restrained. It's just support three file format: PDF documents, PowerPoint presentations, and TIFF files now. Beside file type part, you need put documents on the internet.

I like search documents on the internet when i don't know somethings. I type keyword in search engine and combine search file type. Google search engine started support QuickView new feature few weeks ago. It does work very well. But, there isn't every pdf or ppt item has QuickView button on the list. It's a easy way to solve this problem. Copy target doucment URL and paste it in Google Docs Quickly View. Then, Done!! It sounds great, right? Not at all, how could we do this job more convenience. I choose Chorme Extensions.

What's Chrome Extensions?

Extensions are small software programs that can modify and enhance the functionality of Google Chrome.

You write them using web technologies like HTML, JavaScript, and CSS. So if you know how to write web pages, you already know most of what you need to know to write extensions." - Defintion in Google Chrome Extension: Development Documentation

The Basic of Chrome Extentsion

"An extension is a zipped bundle of files — HTML, CSS, JavaScript, images, and anything else you need — that adds functionality to the Google Chrome browser. Extensions are essentially web pages, and they can use all the APIs that the browser provides to web pages, from XMLHttpRequest to JSON to HTML5 local storage.

Many extensions add UI to Google Chrome, in the form of toolstrips (toolbar additions) or page actions (clickable badges in the address bar). Extensions can also interact programmatically with browser features such as bookmarks and tabs. To interact with web pages or servers, extensions can use content scripts or cross-origin XMLHttpRequests." - OverView

As you can see above paragraph. We can almost do anythng you want from add Google Chrome UI to use content script to manipulate DOM tree. How do we slove problem we told in Chrome extension? The scenario is very simple. Using content script manipulate DOM tree and innert Google Docs Quick View URL in each target document.

Content Script

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM)," - Content Script

At my last post. There has a new search engine let you can search PDF file type ebooks. So, i holp content script can execute in two part. "Google Search Engine" and "PDFBooks search engine". First, we need to get target documnet url in DOM tree. There are few tools can help me to inspect current location in DOM Tree. I chose Google Chrome Developr tools (Ctrl+Shift+J).

PDFBooks


Google Search Engine
if (doc.URL.toString().match(/^http:\/\/www.google.com/)) {
links = doc.querySelectorAll('h3 > a.l');
}
if (doc.URL.toString().match(/^http://pdfbook-s.com/)) {
links = doc.querySelectorAll('div#menu + a');
}

We inspect target documents url by querySelectorAll.

for (var i = 0, len = links.length; i < len; i++) {
var link = links[i];
if (link.toString().match(/pdf$/) || link.toString().match(/ppt$/)) {
var docViewer = document.createElement('a');
docViewer.setAttribute('href', 'http://docs.google.com/viewer?url=' + link);
docViewer.setAttribute('target', 'blank');

var favicon = document.createElement('img');
favicon.src = 'http://docs.google.com/favicon.ico';

docViewer.appendChild(favicon);
link.parentNode.insertBefore(docViewer, link);
}
}
Then, we can parse each hyperlink to insert alternate Google Docs Quick View URL if hyperlink has "PDF" or "PPT" keyword in a simple loop.

Registered your content script

Content script needs to register in a extension's manifest.json file. like so:

{
"name": "Insert Google Doc Quickly View URL",
"version": "0.1",
"description": "Insert Google Docs Quickly View for PDF & PPT file format link",
"content_scripts": [
{
"matches": [
"http://www.google.com/search*",
"http://www.google.com.tw/search*",
"http://pdfbook-s.com/*"
],
"js": ["insert_docs_quickly_view_url.js"]
}
]
}

Everything you done. What's different after using this extension.



Reference
  1. Google Chrome Extensions: Developer Documentation
  2. pdfBooks - Pdf Books search engine

Download: insert_docs_quickly_view_url.js

Download: insert_docs_quickly_view_url.crx

PDFBooks

11/04/2009 11:26:00 PM Posted by Kai-Chu Chung No comments


I think you guys have searched any kink file type in Google search engine or others search engine. I often search PDF file on the Internet like PDF, PPT etc. It's a good choice to research something you don't know on the Internet. You might get few information on the way!!

There has another way you can find many PDF file type books on the specific search engine. It's PDFBooks. Type the keyword you want and click the search button. You will get PDF file type list. You can download that file to your local disk or view it online (It's using Scribd flash viewer).

Link

2009/11/02

JSONC Of Picasa Web Ablum

11/02/2009 11:14:00 PM Posted by Kai-Chu Chung , , , No comments
What is JSON and JSONC?

JSON, short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects). - wiki

JSONC: Clean, Compact, and Customizable. Minimize the number of JavaScript objects

You guys might have used a lot of JSON data in your web page, web application etc. If you are familiar with Blogger template, you might ever received your Picasa web album JSON format data by calling Javascript function in your blogger by using this URL
http://picasaweb.google.com/data/feed/api/user/userID?alt=json&callback=?

Whatever you receive JSON data by Javascript callback function or jQuery Ajax callback funtion. You need to parse callback json data and get the data what you need. There are too many objects in that data. It's a little complicate to get current fields you need.

Google Data Protocol support JSONC data format return in Google Web Album. That let you guys can receive data from Google Web Album more easy than before. What do we receive the JSONC format data. Changing feed URL to
http://picasaweb.google.com/data/feed/api/user/userID?v=2&alt=jsonc&callback=?

Conclusion

It's a easy way to receive your Google Web Album data by modify feed URL arguments. The simple object data means you can decrease callback response time and increase the web page performance. If you are interested in performance articles, you should read following link

Reference

2009/10/15

Our Earth Need Your Help!!

10/15/2009 10:02:00 AM Posted by Kai-Chu Chung No comments
Aug 8th, 2009. It's a really a longest and very worse Fathers Day for most Taiwanese. In south of Taiwan attacked by super typhoon Moraka and caused the most serious damaged in Taiwan history. It rains over 3000 mm one year annual rainfall only in three days. Many people were homeless in the aftermath of typhoon Moraka. Unfortunately, my parent and others family members were one of the homeless people. We lose anything expect life.


Until now, i can't accept the truth sometimes. but, i have to learn accept that and thinking what should we do after damaging? Rebuild our home and back to normal life as soon as possible. What do we learn aftermath the typhoon Moraka? What are reasons cause such as this damage? Something are changed.


I think you guys have heard some issue about Global warming. Our atmosphere has too much carbon dioxide and cause the Earth temperature growth up too fast. You may think some big issues like that should be government's responsibility. Because most people can't lead relation political policies. Climate change is a human issue. What could we do be a person living in the Earth?


There are many resources you can find on the internet. Visit Climate change in the Google Earth, Explore the Climate Orb to concern what company learn for the stories behind the human face of climate change, Educate our kids about science of global warming etc. You can follow the tail of above issues and think about what "You" really can do to help the Earth. For me, i try to reduce my "carbon footprint" in my life. What's carbon footprint?

"A carbon footprint is "the total set of greenhouse gas (GHG) emissions caused directly and indirectly by an individual, organization, event or product". For simplicity of reporting, it is often expressed in terms of the amount of carbon dioxide, or its equivalent of other GHGs, emitted." - definition by wikipedia


There are many online carbon calculator you can figure out what yours is. You can understand that your impact is on climate change. Those online carbon calculators may not to help you figure out your carbon emission. It can remind you to change your life style to reduce the impact on climate change. Try to take public transportation, try to buy product from local area, chose low-power electric equipments etc. You could fine you way!!


Our Earth need your help!!


2009/10/12

Few New Google Chrome Video From GoogleJapan

10/12/2009 07:22:00 PM Posted by Kai-Chu Chung , 1 comment
Have you seen the so~~~~~o cute Google Street View Video by Google Japan. If you haven't seen that video. Click here to see that. I very recommend you guys to have a look even you just a end user. The video can give you a skeleton concept of Google Street View.


As you can see. It's a good introduction video from Google Japan. It's show time again but the main character change to new super star "Chrome". I think that "Speed" will be one of the good browser experience of Chrome for you guys. You guys may have few browsers in the computers like me. That mean you are pay attention in browser developing. If you should be. Following has few new Chrome video by Google Japan. Have a look!!!



速い + SUPER MONKEY BALL: Google Chrome アーティストテーマ




Google Chrome アーティスト テーマ スライドショー




速い + NINTEA: Google Chrome アーティストテーマ




速い + ART: Google Chrome アーティストテーマ




Reference

2009/10/11

WhatTheFont

10/11/2009 02:20:00 PM Posted by Kai-Chu Chung No comments
I wrote a article ([Javascript & Css] CountDown) about Google Code Jam 2008 main page countdown. It does work using Javascript + CSS + DHTML and following is sniper image.





After i wrote this article. I try to search this font on the inter and ask my colleagues. What's this font? Until today i still haven't gotten exactly this font. But, i found iPhone app WhatTheFont in one iPhone Home screens of First & 20. First & 20 is a collection of Home screens of some of the best and brightest developers, designers and tech writers.

What does WhatTheFont[app store link] do? It's very clear to understand as app name - Identify the fonts in a photo or web graphic!! Following is the simple step i try to identify the font i didn't know.


Using WhatTheFont app on your iPhone or iPhone touch.
  1. Sniper the photo of font and crop image. Then click upload

  2. Check Chars and click identify!

  3. You will get few font matches.



Using WhatTheFont web page to identify the fonts.
  1. You can upload a file or paste a specify image url.


  2. Check selection characters. Leave character boxes blank if no valid character is highlighted. Then, click continue.


  3. You will get few font matches as App version.



Summary

Compare WhatTheFont App version and WhatTheFont web page font identify. I get more font matches by using App version than using web page font identify. But, as you can see. Using web page font identify is more easy than App version. Whatever you chose which one. If you get the anwser like me. I think it's a good solution at least.

2009/10/09

Quickly view formatted PDFs in your search results

10/09/2009 10:33:00 PM Posted by Kai-Chu Chung , No comments
Two weeks ago. Google announced Google Doc Viewer. You can embed formatted PDFs in your web page more easily. Just Go Google Doc Viewer and fill it up and copy paste the link to your web page. Done!! (Just pay attention in one thing. you must let your PDFs can access on the internet)


If you often search information in google search engine and assign filetype as "pdf" like me. The new Quick view function is very convenience for us. You don't download that PDF file anymore before you sure it's you want.


Until now, Google Doc Viewer support three types(PDF document, PowerPoint presenetation and TIFF files). Only two of three can match search filetype filter(PDF & PPT). But new Quick view function just support PDFs now. I think Google may announce Quick view PPT file too.

2009/10/07

BambooBig.blogspot.com LiveDemo Gallery

10/07/2009 09:08:00 PM Posted by Kai-Chu Chung 2 comments

Few days ago. I spent few time to change 竹部落 (bamboobig.blogspot.com) a new blog template. I hope new template can decrease browser page loading time. Cause the loading preference, i took off few javascript blocks like Anobii (my bookcase in Anobii), etc.

After modifying my new template. I build a demo gallery (BambooBig.blogspot.com LiveDemo Gallery) by Google App Engine. I will put all new blog post live demo in here. Sure, i will transfer 竹部落 (bamboobig.blogspot.com) exist post had live demo to here too. I hope that demo gallery could let you guys to understand what i said in my blog post easier.


link

2009/10/03

Come back to Dropbox!

10/03/2009 11:45:00 AM Posted by Kai-Chu Chung No comments

Hi Kai-Chu,

We noticed that you signed up for Dropbox a while ago. Recently your Dropbox has been feeling kind of lonely :-(

As a reminder, Dropbox lets you:

- Sync files between your computers and the web
- Backup your files online and access them from anywhere
- Share large files and photos easily

Your Dropbox hopes you'll come back!

- The Dropbox Team

This morning. I got a E-mail from The DropBox Team. I'm amazing a little bit. Even this E-mail generate by server automatic. Maybe somebody think it doesn't matter. but, i think The Dropbox Team can attract users to use their services more. They are really want everyone know that they concern every user and provide good services.


Reference:

2009/06/25

2009/06/02

Google Docs Support .xlsx and .docx Now

6/02/2009 10:10:00 PM Posted by Kai-Chu Chung , No comments
Until now, i start use Google Docs more and more. It's easy to collect information by Google Docs Form. You can build a Simple Form, Edit, Share and Send it to anybody of your Gamil contacts.

I will upload few documents to Google Docs like PDF, doc etcs sometimes. Beacuse i can accept these files when i logon Google Docs by computer or mobile device. Now, it'a good news for Microsoft Office 2007 users. Google Docs support user can upload .xlsx and .docx now. But not including .pptx.



2009/05/08

App Engine TemplateSyntaxError

5/08/2009 06:17:00 AM Posted by Kai-Chu Chung , No comments
from google.appengine.ext.webapp import template

def HtmlRender(self, template_file, template_values):
temp = os.path.join(os.path.dirname(__file__),
'templates/'+template_file)
self.response.out.write( template.render(temp, template_values) )


template_values ={
'url' : self.request.url,
'my_dictionary' : { 'item1' : 1, 'item2' : 2}
}


url: {{ url }}
{% for key, value in my_dictionary.items %}
{{ item.key }} : {{ item.value }}
{% endfor %}


As you can see above code. you can app engine template to generate HTML than before generate code from within strings in the Python..

"TemplateSyntaxError: 'for' statements with five words should end in 'reversed': for key, value in my_dictionary.items".

Yes, you will get one error message. What? It looks as normal python code and seems does work. Because Google App Engine now support Django 0.96 version. If you want to receive a dictionary data type from python. You must modify Django template in HTML page.


more detail information:

2009/04/08

Free iPhone Application Programming by Apple & Stanford

4/08/2009 05:19:00 AM Posted by Kai-Chu Chung No comments
If you have a iPhone or iPod touch. You may install many apps form Apple App Store. It's very interesting and challenge a little bit [1].

When you enjoy these apps. Have you ever thought that you can try to develop some apps or games by yourself. If the answer is YES or you did it. Congratulation!!

Now, there is a good free iPhone Application Programming by Apple & Stanford. you can download the videos from Stanford on iTunes U and visite the CS193P iPhone Application Programming class by Stanford. Enjoying and try to do some interested apps!!!

  1. You can use AppSniper to track apps form app stroe on your iPhone or iPod touch. Or, you can visite AppShopper.com that you can track apps on web too.

2009/03/20

Let's Golf for iPhone

3/20/2009 10:12:00 PM Posted by Kai-Chu Chung No comments
Few dasy ago. gameloft announce a new golf game. after few months waitting. i bought it from app stroe right now. It's a nice golf game. You can enjoy palying golf even just use your fingers.





you can see more detial about Let's gold and others game made by gameloft

2009/02/23

Google Calendar Primary Calendar Change

2/23/2009 11:44:00 PM Posted by Kai-Chu Chung , No comments
Problem

when i add new calendar event in iPhone. There isn't another calendar that you choose. Default setting is primary calendar(the first calendar of your calendar lists). I often review the schedule and want to add in my wall street calendar in the Wall Street. How to Change the Google Calendar primary calendar.



Solution

When you log in your google calendar. you can see the calendar lists of Calendar Settings/Calendars. The first one (show in list is enable) is your primary calendar. You can't delete primary calendar or unsubscribe it. Maybe you had added some events in these two calendar. How to change your primary? 
  1. backup your calendar (export these calendars).
  2. delete the calendar that you want to change to primary calendar.
  3. delete the primary calendar (you can't delete this calendar truly. just clear events).
  4. this stage. you have two empty calendars.
  5. change the primary calendar name what you want. (ex: Wall Street).
  6. import backup calendars to your primary calendar

  7. create new calendar(your original primary calendar)
  8. import backup
  9. done

Conclusion

In fact, you can add new event in your different google calendars use computer easily. But when you use mobile device and this way can solve the requirement of add new event outdoor.

2009/01/08

Audio Player Wordpress Plugin Wizard

1/08/2009 10:57:00 PM Posted by Kai-Chu Chung , , , No comments
Google like Audio Player WordPress Plugin Wizard

Background:

In my another blog www.cage1016.blogspot.com. I wrote a post about a mobile answer tone 別別掛. The point is i found many audio(mp3) players that i can embed mp3 in my blog easily. Final, i found a post Inline Mp3 Player(WordPress version) and talk about a simple inline audio player. It's Audio Player Wordpress plugin. The audio player support you can setting simple options to change the look of palyer. for example: background color, Text color, enable auotplay and enable loop play.


<object id="audioplayer1" height="24" width="290" data="http://cage.chung.googlepages.com/player.swf" type="application/x-shockwave-flash">
<param value="http://cage.chung.googlepages.com/player.swf" name="movie"/>
<param value="playerID=2&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xF06A51&rightbghover=0xAF2910&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile=xxxx" name="FlashVars"/>
<param value="high" name="quality"/>
<param value="false" name="menu"/>
<param value="#FFFFFF" name="bgcolor"/>
</object>


Above code is the audio player plugin syntax. we can see that there are few options are relative to Color bg, leftbg etc. It's a little difficult to setting these color to product a beautiful look. Or if you don't real understand the html color hex code. I think that the best way is you can change the option color directly. And few ago, when i studied Google Static Map API. In button of Static Maps API Developer's Guide has a firendly wizard(Goolge Static Map Wizard) support a simple UI-dirven way to generate static maps via a simple UI interface.

So, i wirte some javascript to support a similar simple UI-dirven way to generate Audio Player Wordpress Plugin. Just 3 steps and few settings. You can get the beautiful audio player.

Explain:

The Audio Player WordPress Plugin Wizard is Google style like. Build All by whole javascript and use excellent sliders are courtesy of Erik Arvidsson over at WebFX. The simple UI-dirven way let you can build your player look easily and only 3 steps.

Audio Player Color Schema:

As you can see. There are 9 color you can change.

Step1: Customize your audio player setting


First, you have 3 things to do. Choose the Audio Player Plugin play.swf url and choose the auido file url you want to embed in your blog (This 2 items have default, if you want test first and don't mind it). Then, there are 3 color schema patten. Choose one and you will see the colors bind to table of step2.

Step2: Customize audio player options of colors, autoplay and loop



After the color schema binded. I set autoplay and loop field are ture. If the player url and audio file url are current. Now you will listen to the music. In this step, you can change the color of palyer you want. Click the ratio button of option column. The color picker will be setting to equal the option color you click. You can change the color by darp the red, green and blue or type the html color hex code directly. The player will update if you any change the color, autoplay, loop setting and.

step3:Generate audio player embed code



Now, you can copy this code to embed in you blog.

enjoying~~~


2009/01/02

Feed media:thumbnail Item

1/02/2009 10:22:00 PM Posted by Kai-Chu Chung , No comments

In my early two posts(I,II). I talk about Blogger in Draft new features, the Geotagging. There are many blogger discuss the new feature in comments of New feature: Geotagging by Blogger In Draft. Now, maybe you don't understand that this post i will talk about feed item and why i will remind it.

If you had read the post of blogger draft new feature. You will notice that the author offer a Gagdet(here). It's add a google map in you blogger that parser feed georss:point data of your post feed. And i found Blogger Developers Network announced a feature about media:thumbnail(here). It's talk about you can get a 72x72 pixel image in your feed if you add first image in your post. Those give me a idea. I modify my blog template that just list the post if you click the older post link in the footer of blog.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Show article title only -->
<div class='thumbnail_'>
<table>
<tr>
<td>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;callback=GetThumbnail&quot;'
type='text/javascript'>
</script>
</td>
<td>
<h3 class='post-title' id='list-title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</h3>
</td>
</tr>
</table>
</div>
<b:else/>
<b:include data='post' name='post' />
</b:if>


function GetThumbnail(json) {
var url = (typeof(json.entry.media$thumbnail) != 'undefined') ? json.entry.media$thumbnail.url : &quot; & quot;
if (url.length & gt; 0) document.write('&lt;img src=\&quot;' + url + '\&quot;/&gt;');
else document.write('&lt;img src=&quot;http://lh3.ggpht.com/_R8RzIm7ykRo/SV4RzpSayLI/AAAAAAAAHwI/MH3vuAtAzMA/nopic.gif&quot; /&gt;');
}

The above code. javascript code pass one feed by pass data:post.id and execute callback functionGetThumbnail to write the image url.

get your blogger thumbnail←←