Melopia

Melop.net launched

2006-02-11T19:35:00.000+08:00

I decided to purchase my own web space. My new weblog is located here: http://melop.net. I'll move some posts there.

LYRIC - I don't want to say good bye

2006-01-20T11:39:00.000+08:00

From the original soundtrack of Brokeback Moutain.

(Just inferred from song, not free of errors)

I don't want to say goodbye

I don't want to say goodbye
Let the stars shine through
I don't want to say goodbye
All I wanna do is being with you

Just like the light of the morning
After the darkness has come
Shadow of my love is falling
Oh , place where the sun our way shone

Don't you know that's where our hearts both belong?

'Cause I don't want to say goodbye
Let the stars shine through
no I don't want to say goodbye
All I wanna do is being with you

Together our two hearts thus strong(?)
Don't you know that's where our hearts both belong?

'cause I don't want to say goodbye
Let the stars shine through
I don't want to say goodbye
All I wanna do is being with you

All I wanna do is being with you

Bad day for birding...

2006-01-12T22:42:00.000+08:00

Wow, my last exam was over this morning!! Don't ask me what was that, dun wanna talk about it anymore.

So, since I've got plenty of time to kill now, I decided to go around the campus with my friend to do some birding and try to take some photos.

We've got tons of Silvereyes(Zosterops japonicus) here, but those little guyz are so hard to capture 'cause they keep moving in trees all the time. So one of my goal today is to take a pic of this sp. Another target today is the White-breasted Kingfisher, I saw it many times resting on the "island" in the pool, so if I'm lucky, I may get into it.

I can't wait till afternoon, and got out at noon. But I just had no luck. First I saw an Embriza, I think it was probably a E. chrysophrys, and I took many pics of it. Unluckily, I didn't realize my camera's shutter was set to 1/8000 sec. before it flew away. I was totally mad!!

After that, I didn't see any special spp. for today. However, after some try, I finnaly took a clear pic of a Silvereye.

And about manual focus. Since I figured out how to use it, I've been trying to practise this skill. But it doesn't turn out very successful. I missed some great chance of a pic that could've been wonderful. And, there was nothing on the small island.

Anyway, here's the list for today:

Place: Campus of ZSU. Zhuhai, Guangdong, China
Time: 2006-01-12 13:00 - 17:10
Total Species: 11
Personal new record: 1

Scientific Name	Chinese Name	Count	Habitat
Emberiza (chrysophrys?)	黄眉鹀	1	Bush (Accacia sinuata)
Sturnus nigricollis	黑领椋鸟	1	Basketball court
Motacilla alba	白鹡鸰	Everywhere	Everywhere
Prinia inornata	纯色鹪莺	2	Low bush
Hirundo daurica	金腰燕	Many, 10-20 in one flock	Sky, near water
Hirundo sp.	燕	Smaller and than H. daurica, unidentified	Sky, near water
Pycnonotus aurigaster)	白喉红臀鹎	Many	Many places
P. sinensis	白头鹎	2	Many places
Zosterops japonicus	暗绿绣眼鸟	Many, 4-5 a small flock	In trees by road side(Ficus microcarpa, Ormosia pinata)
Tringa ochropus	白腰草鹬	1 pair
Copsychus saularis	鹊鸲	1	"Suiyue lake"

Photos from today

Motacilla alba leucopsis
Zosterops japonicus
Pycnonotus sinensis
P. aurigaster

Latin note: Lesson XXI

2006-01-05T22:51:00.000+08:00

Text: Niobe et leberi sui (NIOBE AND HER CHILDREN)

Apollō et Diāna erant liberī Lātōnæ. Iīs Thēbānī sacra crēbra parābant. Oppidānī amābant Lātōnam et līberōs eius. Id superbæ rēginæ erat molestum. “Cūr,” inquit, “Lātōnæ et liberis sacra parātis? Duōs liberōs habet Lātōna; quattuordecim habeō ego. Ubi sunt mea sacra?”

Lātona iīs verbīs irāta liberōs suōs vocat. Ad eam volant Apollō Diānaque et sagittīs suīs miserōs līberōs rēginæ superbæ dēlent.

Niobē, nūper læta, nunc misera, sedet apud līberōs interfectōs et cum perpetuis lacrimīs eōs dēsīdērat.

My translation (full with errors)

Apollo and Diana are children of Latona. They often prepared rite to that Theban. (The Thabans often prepare sacrifices for them) The townsmen loved Latona and her children. It is the proud of the queen that is troublesome. (It is the troublesome to the proud queen.)

“Why”, she asks, “do you prepare sacrifice for Latona and (his) children?” Latona has 2 children; I have 14! Where’re my rites?”

Latona, angry with those words, calls her children.

Apollo and Diana fly to them and kill the proud queen’s poor children with their arrows. Niobe, used to be happy, now sad, sits among the slain children and long for them with perpetual tears.

Correct translation!

Apollo and Diana were children of Latona. The Thebans prepared frequent sacrifices to/for them. The townspeople loved Latona and her children. This was troublesome to the proud queen. “Why?” said the queen, “are you preparing sacrifices for Latona and her children?” Latona has two children; I have fourteen. Where are my sacrifices?” Latona, angry because of these words, calls her children. Apollo and Diana fly to her, and destroy the wretched children of the proud queen with their arrows. Niobe, recently happy, now wretched, sits among her slain children and longs for them with perpetual tears.

Errata Mea

Latona is a goddess, I should say "she" not "he". What a shame. :(
Thēbānī is the nominative plural form of Thēbānus (the Thebans), I mistook the whole sentence and the subject-object.
A similar error occurs later in the sentence "Id superbae rēginae erat molestum. "

And there're still some other minor mistakes, I must work harder now...

First birding in the new year

2006-01-01T19:16:00.000+08:00

Today I went birding with my parents , cousin and grandma. They don't actually birding, but just spending some time with me. lol.

Place: Qi'ao island, near my campus. Zhuhai, Guangdong, China
Time: 2006-01-01 10:00am - 2:00 pm
Total Species: 16
Personal new record: 1

Qi'ao island is a small island in Zhuhai, it's has a conservative mangrove which attracts lots of birds (waders, herons etc.).

Today I saw the following spp .:

Scientific Name	Chinese Name	Count	Habitat
Acridotheres cristatellus	八哥	Many, 10 in flock	Open, near water
Sturnus sinensis	灰背椋鸟	Many	Open, near water
Motacilla alba	白鹡鸰	Several, seen 3	Everywhere
Cisticola exilis	黄头扇尾莺	One	Shrub, near water
Egretta garzetta	白鹭	Many, 10-20 in one flock and some flying individuals	Mangrove, water
Egretta alba	大白鹭	About 1/10 of E. garzetta	Mangrove, water
Egretta intermedia	中白鹭	About 1/10 of E. garzetta	Mangrove, water
Pycnonotus sp. (P. aurigaster/P. sinensis)	鹎	Many	Mountain foot
Tachybaptus ruficolis	小	2	Water
Anthus richardi?	理查德鷚	1	Dry open ground
Apus affinis	小白腰雨燕	6-10	Flying in the sky
Milvus lineatus	黑耳鸢	2	Flying in the sky
Buteo buteo	普通鵟	2	Flying in the sky
Halcyon smyrnensis	白胸翡翠	1	Near water
Charadrius dubius	金眶鸻	3	Long grass
Streptopelia sinensis	珠颈斑鸠	2, and hear some	Flying pass

Photos from today

Cisticola exilis
Egretta alba
Egretta garzetta

Opera 8.51 has an overlapping bug?

2005-12-30T20:38:00.000+08:00

Today when I just finished the about page and start testing it in various browsers, I found some problem when I try to render the page in Opera 8.51. That's the part of code that causes the problem, where I try to add an image list.


lt;dl class="img_list">

<div>

<dt><a href="/examples/SoundClip/names/Acentrogobius_caninus.mp3" class="latin sound_clip">Acentrogobius caninus</a></dt>

<dd><a href="http://www.flickr.com/photos/melop/65387663/" title="Acentrogobius caninus">

<img src="http://static.flickr.com/34/65387663_814411604e_m.jpg" alt="image of Acentrogobius caninus" />

</a></dd>

</div>

<div>


 <dt><a href="/examples/SoundClip/names/Tridentiger_trigonocephalus.mp3" class="latin sound_clip">Tridentiger trigonocephalus</a></dt>

  <dd><a href="http://www.flickr.com/photos/melop/65461169/" title="Tridentiger trigonocephalus">

  <img src="http://static.flickr.com/31/65461169_d9282679a4_m.jpg" alt="Tridentiger trigonocephalus"  /></a>

  </dd>

  </div>

  </dl>

And the css code as follows:


dl.img_list {

}

dl.img_list div, dl.img_list div dd {

  float:left;

  }

dl.img_list div {

  margin:5px 5px 5px 0;

  }

dl.img_list div dt {

  font-weight:bold;

  padding:0 0 4px 2px;

  border-top:1px dotted #069;

  }

dl.img_list dd {

  border:2px solid #000;

  padding:5px;

  background:#fff;

  }

With most modern browsers, ff and Internet Explorer display the image lists correctly. Opera 8.51 works well at first, but once the Sound clip script executes, the two images (the <dd> element) overlapps. But when resize the window, it returns to normal.

Then I load the page in previous versions of Opera. And found it to be an old problem. In Opera 7.0, you don't have to execute the script to see the overlap. This may due to the miscaculating of the width of the div from it's non-float child (that is, the dt element).

Playing short sound clips with XHTML and Javascript

2005-12-29T20:34:00.001+08:00

How often do you need to play a short sound clip on a webpage? I recently come across the problem. It sounds like easy isn't it? In the old days we have the <bgsound> tag, and <embed>, now we have some choices of popular player plugins like WMP, Quicktime, Real Player and even Flash player can do it. So why bother? Well, sure it's not hard to acheive the effect , I mean playing sound clips, but how can I make my markup neat and clean? It's essential because I need to insert lots of clips on a webpage, and I want the user could play it at once as well as download it later. To begin, you may want to see the final example at once, or download the zip pakage.

The best thing that XHTML taught me is that I need to be meaningful(or semantical), that is, the attributes should really mean something instead of telling the browser how to render the content (as we all known, that's Mr. CSS's business). The [class] attribute is what I'm going to use. I can't imagine why this cute attribute is just used by css rules only, isn't it intended for classification? Actually, lots of great minds have already thought about it. The use of classification is limitless (some guyz even make animations out of it!) .

Here's the markup I'm going to deal with:

<a href="names/Acanthogobius_flavimanus.mp3" class="latin sound_clip">Acanthogobius flavimanus</a>

Fairly simple, isn't it? Any human could understand its meaning. Now if you load it in a web browser, a normal link will appear and when clicked on it, the browser will show a download dialog to the user.

Ouch, don't throw eggs at me, stop... not now..;(. I haven't begin yet. OK, next, I need to prepare an audio player to handle the mp3 files I'm going play. Since Flash is said to be "installed on nearly 98% of the world's computers", let's make an audio player out of Flash. Though I call it a "player", it just have two most simple functions: play and stop, remember we are playing short clips ?

Since Flash 5 (or earlier?), Macromedia introduces an actionscript object called "Sound" , which allows the player to load external mp3 files and play it. That's just what I need! You can load and play a file like this (example in Actionscript 2):

var sndTrack:Sound = new Sound();

  

  //Load sound:

  sndTrack.onLoad = function(bSuccess:Boolean) { //When the file loaded 

if (!bSuccess) {
// Failed to load sound

} else { // Success! 
 
this.start();//Play sound


}

};

sndTrack.loadSound("SomeSound.mp3" , false); // begin loading the sound

But wait, you may say, how will I know which file is going to play? That would be easy to use the url parameter! For example, if I "query" the swf file like this: player.swf?file=abc.mp3, then actionscript will know a variable named "file" is "abc.mp3", and this "query string" can be generated by javascript later. OK, problem solved! Now I'm getting to create this player, first, drag two buttons (Pause and Play) on to the stage(size 16 x 16 px), then give them instance names "btn_Play" and "btn_Pause" so that I can control them using AS. Then create another layer named "as" which the scripts goes. Here's the actionscript code for the layer:

var sFile:String = (file == undefined) ? null : file; // Detect the parameter passed by external js var sndTrack:Sound = new Sound(); // Create the sound object //Set the onLoad handlersndTrack.onLoad = function(bSuccess:Boolean) { if (!bSuccess) { // Failed to load sound SetUIState("failed"); } else { SetUIState("stopped"); //this.setVolume(60); } }; sndTrack.onSoundComplete = function() { SetUIState("stopped"); // When sound ends, reset the buttons }; btn_Play.onRelease = function() { // When "Play" button clicked SetUIState("playing"); // Set button states sndTrack.start(0, 1); // And play the file }; btn_Stop.onRelease = function() { // When "Stop" button clicked sndTrack.stop(); // Stop playing SetUIState("stopped"); // Reset the buttons };function SetUIState(sState:String) { // The function use to handle the buttons states if (sState == "loading") { btn_Play._visible = false; btn_Stop._visible = false; } if (sState == "failed") { btn_Play._visible = true; btn_Stop._visible = false; btn_Play.enabled = false; } if (sState == "playing") { btn_Play._visible = false; btn_Stop._visible = true; } if (sState == "stopped") { btn_Play._visible = true; btn_Stop._visible = false; trace("set state: stopped, btn:"+btn_Play.onRelease); } } //End of preperation! //Begin Load sound SetUIState("loading"); if (sFile != null) { sndTrack.loadSound(sFile, false); // Try to load sound; } else { SetUIState("failed"); // No sound file specified; }

Publish the SWF file and the player's done! So far, the XHTML page looks the same, because we haven't "connect" the player with the markup yet. Now that's what I'm going to do. All I need to do is to enumerate all the <a> tags with the class name "sound_clip", and insert this player before the link. Note that I haven't used the standard DOM methods since it's more complex, instead innerHTML is used for manipulating the markup. Here's the Javascript code:


  var SND_CLIP_PLAYER = "player.swf"; // Define the player's name 

  var SND_CLIP_LINK_TITLE = "Click the arrow to play clip."; // Title text 

  function SndClip_Init() // Init the sound clip links 

  {

var arrLinks = document.getElementsByTagName("a"); // Find all anchors 

var arrTargetLinks = new Array(); // The array for anchors with the className "sound_clip" 

for (var i=0;i<=arrLinks.length-1;i++) {

var oLink = arrLinks[i];

if ((new String(oLink.className)).toLowerCase().indexOf("sound_clip")=="-1") continue;

arrTargetLinks[arrTargetLinks.length] = oLink;

}


  for (var i=0;i<=arrTargetLinks.length-1;i++) { // Manipulate the link one after another 

    var oLink = arrTargetLinks[i];

    //document.write(SndClip_GenCode(oLink.href));

    oLink.innerHTML = SndClip_GenCode(oLink.href) + oLink.innerHTML;

    oLink.title += "\n" + SND_CLIP_LINK_TITLE;

    }

    }


  function SndClip_GenCode(sSoundFile) { //Helper function to generate html code 

    var sRet = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';

    sRet += 'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"'

    sRet += ' width="16" height="16" class="sndclip_obj" align="absmiddle">';

    sRet += '<param name="allowScriptAccess" value="sameDomain" />';

  sRet += '<param name="movie" value="'+ SND_CLIP_PLAYER +'?file='+ escape(sSoundFile) +'" />';

  //Pass the parameter here, use escape to avoid encoding problems 

  

  sRet += '<param name="loop" value="false" />';

  sRet += '<param name="menu" value="false" />';

  sRet += '<param name="quality" value="high" />';

  sRet += '<param name="scale" value="exactfit" />';

  sRet += '<param name="bgcolor" value="#ffffff" />';


   sRet += '<embed src="'+  SND_CLIP_PLAYER + '?file=' + escape(sSoundFile) + '" ';

    //Pass the parameter here, use escape to avoid encoding problems

    

  sRet += 'loop="false" menu="false" quality="high" scale="exactfit" ';

  sRet += 'bgcolor="#ffffff" width="16" height="16" name="player" align="absmiddle" ';

  sRet += 'allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';

  sRet += '</object>';


   return sRet;

    }


 function fnAddEventListener(obj, name, handler)

    {

    //alert(typeof(obj.attachEvent));

    if (typeof(obj.attachEvent)=="object") {

    obj.attachEvent("on" + name, handler);

    } else {

    obj.addEventListener(name, handler, false);

    }


 };


  fnAddEventListener( window , "load", SndClip_Init);

fnAddEventListener() is used to attach the SndClip_Init function to the window.onload handler, so that when the page finishs loading, all links on that page will be changed into playable.

The benefit for this method is that the markup is totally standard and compatible with any user agents, hence assesible. And advanced browsers would allow the user to preview as well as download the sound files. To enhance the method, you can pass more parameters to the player such as begin point, loop times etc.

A new look for my blog

2005-12-28T20:10:00.000+08:00

New look, new begin.

OK, may be you have no idea what I'm talking about. If you don't, it means that it's your first visit. :D. Actually the original style provided by blogger did not survive for a day and frankly speaking, I dun like it. So after a night's struggling, I decided to spend the whole afternoon working on a new look for the blog.

Most markup remains the same with some minor changes compared to blogger's default template. And the design can work in most modern browsers. I would like call this layout Motacillae, still in testing, please comment.

Melopia, jumps back to blogger again.

2005-12-27T20:19:00.000+08:00

Melopia-ae, f. The place of melop.

After some months since I registered with blogger and found blogspot.com had been blocked in China, I finally come up with a way round to deal with it.

As you can see, the blog is now hosted by http://www.sitesled.com, the free space provider, I can continue posting on blogger, and blogger will update this site for me. Sounds like a good idea, isn't it?

OK, since I've got my blog now, I can't promise to update it too often, really. I registered on every FREE blog space I come across on the web, but I don't really write something before the account closes. I have to confess I'm lazy. But anyway, I'll try to do better this time.

I like to call my blog Melopia, some friends ask me why. Well, first, I study biology, and you know, biologist name all things they see(not all,but,lol,just myself) in Latin. Since my net name is "melop"(Derived from the scientific name of a bird I like), I just append -ia to make it looks like a Latin word which can be translated as The place of melop.

Then, it's time to plan what I should write on my blog. I love birding, so I may keep a birding log here. Web designer is what I am in free time, so I may write some stuffs on the web. I'm teaching myself Latin and do exercises every day following the book Latin for beginners, so I may post some topics about that as well.

Finally, about language I'll use. Chinese is my mother tougue, writing in Chinese sounds like natural. But, frankly speaking, my Chinese composition is not that good. Thus, English I will use most of the time. Web 2.0 brings more interactions to the web, and you should see my flickr page and last.fm for my photos and recent tracks.

So keep an eye on my blog, cu later!