For the past two-and-a-half years, I’ve been learning Chinese at University. While progress has indeed been slow, there has been progress. We have great teachers, and much of my progress is due to them. They’re interested in Chinese, and motivated to teach it. Of course, it doesn’t hurt that they have such an excellent tool: The New Practical Chinese Reader. Textbooks and I are not strangers, I have had the the “pleasure” of reading both good and bad examples. Mostly bad. These are either too dry, or (because of attempts by the author to alieviate said dryness) too lame. I studied Japanese for a year in Highschool, and while I don’t remember any Japanese, I do remember the textbooks, which were awful. They were filled with that over the top cutesy crap, with dialogues about how cute kittens are, or how much the main character loves cake. Teenage apathy aside, I couldn't concentrate on such drivel.

The Chinese text books manage to attain a balance: they are neither dry nor lame. The characters could be real people, and the dialogues are believable, even in the first few chapters, where the student is learning "你好" level stuff. At least hald of of the book is devoted to teaching tones, which I view as single most difficult aspect of learning Chinese for a westerner. In my opinion, pronouncing tones correctly is more difficult than remembering to write characters. In the first semester we spent at least 15 minutes per lesson chanting variations of “bā bá bǎ bà” repeatedly. This was necessary - repitition is the only way to learn tones correctly. The book helps the student (and the teacher) by providing lists of different combinations to practice. This part of learning Chinese is unavoidably tedius, but time spent here is well worth it.

Grammar and other important points are highlighted in every chapter, usually in an interesting way. To give an example, take note 1 on page 26:

Tā shì nǎ guó rén? “What’s her nationality? There are two Chinese characters for the third person singular “tā”: one is “他”, used for a male; the other “她”, refers to a female.

Notes usually relate to a portion of one of the texts given in the lesson, and serve to enlighten the student as to the meaning or purpose of the sentence. For those more advanced readers, notice that this note excludes “它”, the third “tā”, used to refer to things that are not people. As the student has not encountered this character, it is left out of this note, which enables the learner to effectively learn the point without becoming overly confused.

The book does not get boring. Throughout the series the characters’ lives’ change, the book describes the different situations they get themselves into with increasing complexity as the student progresses. A memorable chapter, at least for me, is: “我认识一个漂亮的姑娘” Interesting content is not the only reason readers find the book enjoyable - to quote this site this site: “New Practical Chinese Reader does not follow the linear structure adopted by earlier Chinese teaching materials, instead adopting a cyclical arrangement with constant review of language structure and function together with important cultural information” I think this is an important point to make because it means that throughout any course that utilises this book, the reader is being constantly reminded of what he or she has covered in the past. This is a particularly helpful aspect of this textbook, as it means that I have forgotten much less than I could have otherwise.

As the above wasn’t enough, there also exists a companion workbook, filled with exercises related to the text. During my course, students were set various exercises as homework. The exercises cover reading and listening comprehension, grammar understanding and more. There are many different varieties of exercises, for example: “fill in the blank”, grammatical correctness - true/false, re-arrange a given set of characters to create a sentence, and sentence translation, to name a few. The aural section of this workbook is not as large as the more advanced versions, probably because the learner has such a limited range at this level. It mostly consists of tone-related exercises, which I found very helpful. They serve to reinforce what is learned in class, which is very, very important.

All in all, I consider this text/workbook combination to be as close to perfect as one could hope for. It is used around the world as the Chinese language core text. We use it in New Zealand, and I noticed that the Shanghai University uses it too, in their Chinese for foriegn learners course. I would heartily recommend this text for anyone who wishes to take Chinese seriously.

When asked the secret to language acquisition, my University’s Linguistics Professor told me “little and often”. What he meant by this was that if one wishes to master a language, it must become a part of you. The only way this is possible is through constant practice. Language acquisition is not somethign that can be accomplished by devoting “lumps” of time every few days - new words and grammar are forgotten too quickly. About half an hour a day is enough, though a little longer is beneficial. This doesn’t give one enough time to forget new words or grammar. The key, as the Professor said, is truly: “little and often”.

*1 - Learn Chinese - New Practical Chinese Reader

 Subscribe in a reader

 Subscribe by Email

Tags: Chinese | 中文 | Books

This is a tutorial on how to achieve a “flicker-then-fade” effect with jquery, in Rapidweaver. This tutorial was originally posted on the old Rapidweaver forum, and I’ve decided to move it here.

If you like, you can look at the example site first. The effect taught here is the “flash-then-fade” effect that occurs when one hovers over the hearer image.

1) Go here and download jQuery.

Upload it to wherever you are planning on hosting the website. Find this file in a browser, copy the address, e.g.

Code:

http://pagesofinterest.net/jquery-1.2.3.js

Open RW, create a new project. Create a blocks page, select a theme (I recommend "blocksbox"). I advise you to create a duplicate of this theme, as we'll be changing one of the theme's files. To do this, right click on the theme's icon, select "duplicate theme". Name the new theme something like "jQuery Testing".

Right click on the theme's icon, select "Show Contents".

Locate "index.html" in the finder window that opens. Open this file in a text editor, like Text Wrangler. Look for this:

Code:

<script type="text/javascript" src="/rw_common/themes/pagesofinterest/javascript.js">

Beneath this, insert the following. Be sure to replace PATH_TO_JQUERY with the url you copied earlier.

<script type="text/javascript" src="PATH_TO_JQUERY"></script>

Save your changes, close the text editor.

This page is now prepared!

* * *

2) Open the inspector and change the page width to 900px.

Select an image you would like to use for a header. For this tutorial I'll assume you're using the same sized image as me, being 900px x 240px. Choose an image that has some part you'd like to flash then fade back in.

Create another image, of the dimensions of the area you want to flash/fade, and the colour of the area of your header image you want it to fade from. You can see that I have used a black image in my example. I used the dimensions: 345px × 117px. Upload this image to wherever you are hosting this website, find it in a browser and copy the url, like you did above with the jQuery file.

Create a html block, place it over the area you wish to use as your "mouse hover" area. This will be the area the mouse must enter to initiate the effect. We'll be using CSS to define the area, but I find it helpful to be able to refer back to RW's edit page to remind myself where the action will go down. Also it means one doesn't have to mess around with positioning the div manually.

Inside this block, paste* the following:

<div id="headerHover"></div>

Create another html block of the same dimensions as the image you created above, and place it in the area you want to flash/fade when the mouse enters the above html block. This block should contain:

<div id="headerFade"></div>

All will become clear, don't worry.

We're now finished with the drag 'n' drop design, now we've got to move into CSS.

Open the page inspector, select the header tab, then select CSS.

Into this paste the code below, remembering to replace PATH_TO_IMAGE with the url you copied earlier:

#headerFade{
width: 345px;
height: 117px;
background-image: url('PATH_TO_IMAGE');
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
#headerHover{
width: 364px;
height: 237px;
}

Now it is time to move to the Javascript tab.

Into this paste:

$(document).ready(function(){

    $("#headerHover").hover(function(){

      $("#headerFade")

     .animate({opacity: "1"}, 40)
     .animate({opacity: "0"}, 40)
     .animate({opacity: "1"}, 40)
     .animate({opacity: "0"}, 40)

     .animate({opacity: "1"}, 400)

     },function(){
    
  $("#headerFade")
  
        .animate({opacity: "0"},10000)
                            
});

});

Note I have set the opacity to 0 again, ready for the next time this animation is initiated.

Later on, we'll be adding to this. This, however, is all we need for the flash/fade effect.

The following code:

$(document).ready(function() {

});

Needs to be used only once, as it defines the start/end of jQuery code.

Preview your page.

     .animate({opacity: "1"}, 400)
     .animate({STYLE}, SPEED)

STYLE can be almost any css styling (so far as I am aware). separate each item with ",".

SPEED is the speed of this animation. One can use either a numerical value, milliseconds, or "slow" "fast" "normal". If using one of the latter three, remember to include the quotation marks.

Examples:

   .animate({opacity: "1", left: "100px", width: "300px"}, 400)

The above won't be pretty. It is just an example of the syntax.

Other than .animate, there are more effects.

Below is an animation similar to the one described above. If uses slideDown/slideUp instead of fading the cover image away.

$(document).ready(function(){

    $("#headerHover").hover(function(){

      $("#headerFade")
         .animate({opacity: "0.2"}, 400)

     .animate({opacity: "0.2",width: "0"}, 4000)

     },function(){
    
  $("#headerFade")
       .animate({opacity: "1", width: "345"}, 40)

.slideUp("slow")
.slideDown("fast")
     .animate({opacity: "0"}, 400)

});

});

There you go!

For those who are unafraid, use the jQuery API Reference to learn more. There are a lot of things to play with, jQuery is very powerful.

Remember to select the pasted code and either choose “Format > Ignore Formatting” from the RapidWeaver menu, or press “⌘ + .”

Always do this when pasting code. Always.

If you don’t do this, there is a good chance that the code will break. Always do this!

As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.

 Subscribe in a reader

 Subscribe by Email

Tags: Rapidweaver | jQuery | Tutorial | RW Tutorial

It took awhile, but I’ve finally written Roy’s Tag Cloud into the Idiom Database page!

I’ve configured it to show 60 random keywords each time the page is loaded. There are two reasons for limiting it this way: one is that it looks better, more than 60 gets too crowded; the second is that with all keywords (only 200 or so for the 80 idioms currently entered) it runs far too slowly, which does not give a good effect.

As there are not so many keywords in there yet, one will sometimes get a cloud that consists of keywords that are all the same size. This is because the random selection of keywords all have the same count (probably 1), which will mean that they will be given identical font sizes. As more keywords are added, and more idioms are tagged with keywords that already exist, this situation will become less likely.

In the future I’d really love to change this cloud to display idioms by the number of times each idiom has been viewed. There are two barriers that would need to be overcome before this could happen though: the tag cloud cannot currently display Chinese characters*, and I haven’t written the code to record each time an idiom is viewed. Coding that is simple in theory, but (probably because of the convuluted code I’ve writted) it proved to be impossible for me. I’ll have to rewrite the database pages after exams.

You’ve finished reading - go over to the Database and add an idiom!

*There are actually a lot of Chinese keywords, but they don’t get displayed. The flash cloud still includes them, and if one moves the mouse about within the cloud’s boundaries one will occasionally come across a “blank square” keyword - if this happens, congratulations! You’ve located a Chinese keyword.

 Subscribe in a reader

 Subscribe by Email

Tags: Idiom | Database | PHP | Programming

-> Revised (23/09/08) <-

MAJOR UPDATE: This tutorial has been updated to work with the new version (1.14) of Roy's Cumulus Tag Cloud. The embed script has changed significantly. If you had trouble with the last version, give this one a try - it has been improved a lot!

If you scroll down and look left, beneath the menu you’ll see a new addition to the page.

I’ve managed to find a way to integrate Roy’s awesome tag cloud plugin with Rapidweaver’s blog page.

And now that you’ve seen it, I figure you’ll want it too - and this is how to do it:

Note: requires php - will NOT work on .Mac.

This tutorial has been written with the “code-phobic” in mind. It may bore you with details that you feel are obvious. If so, just skim read until you find the parts that interest you. I’ve included screenshots of various steps in the process - to view the full size images, just click on the thumbnail of each image. The image will load on top of this page.

If you feel that this tutorial is too complicated, or you run into any problems, please let me know by posting a comment below.

As long as your server has PHP, I am confident that you/we will be able to get this beatiful tag cloud going.

1) Make a blog page. At this time, the script does not work with Rapidblog. I will look into this when I have finished a few other projects I have going.










2) Add some blog entries.











3) Download the tag cloud file pack here. This It contains a snippet that is used to insert the cloud, the swf file, "swfobject.js" and “cloud_creator.php”, that gets tag information.






4) Upload both “tagcloud.swf” and “swfobject.js” to your server. Note URL that points to these files. If you’ve uploaded them to the root directory of your server, then the path will look like: “http://your_doman_name.com/tagcloud.swf” and “http://your_doman_name.com/swfobject.js”.


5) Upload the “cloud_creator.php” file to your blog’s “files” directory. The directory will either be called “files” or “blog_name_files”. The first image shows an example of each. The second image shows an example of how the blog files directory should look before the “cloud_creator.php” file has been uploaded.















6) Open “cloud_creator.php” in your browser. You should see a blank page.








7) Make sure “cloud_creator.php” is working. Check that “cloud_file.html” has been created in the blog files directory.







8) Change the page’s extension to .php.











9) Change the sidebar to HTML











10) Drag the snippet into the sidebar. Change the addresses to match your site. If you aren't happy with the default tag text colour, change the last 6 numerals of:

0x333333

to any hex colour. I use The RGB Colour Calculator to get my hex values.

11) Change the URLs in the following two lines to match your site, then paste them into the header.

For example, from:

<script type="text/javascript" src="http://pagesofinterest.net/mikes/swfobject.js"></script>
<? include('http://pagesofinterest.net/mikes/blog_of_interest_files/cloud_creator.php'); ?>

To:

<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
<? include('PATH_TO/cloud_creator.php'); ?>

12) Publish your page - you’re done!

13) With the updated version of the flash file, there are a few extra options worth mentioning:

    so.addVariable("tspeed", "100");
    so.addVariable("distr", "true");

The first controls the speed of rotation. Increase it for faster rotation, decrease it for slower. I use slower rotation for bigger clouds, and faster for smaller to be best.

The second tells the cloud whether to attempt to spread the tags out evenly throughout the sphere. Change "true" to "false" to disable this (why would you want to disable it? I don't know).


Thanks for reading - if you like this tag cloud, head over to Roy's Site and let him know!

It has been brought to my attention that some hosts do not allow standard use of the “include(‘URL’)” function. If you get a message that looks similar to this:

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /a/path/to/a/domain.com/index.php on line XX

In your "include" parts (there are two, one in the snippet, one that gets pasted in the header in step 11), instead of using this (with paths changed to suit your site):

<?php include("http://pagesofinterest.net/cumulus_test/blog/cloud_creator.php"); ?>

Do this (changing the paths to suit your site):

<?php  include($_SERVER['DOCUMENT_ROOT']."/files/cloud_creator.php");  ?>

The $_SERVER['DOCUMENT_ROOT'] asks the server for the path to the current file, ."/files/cloud_creator.php" appends the path to the file we want.

The snippet's include should look something like:

<?php  include($_SERVER['DOCUMENT_ROOT']."/files/cloud_file.html");  ?>

When you get it working, or get stuck - I want to know! Leave a comment and I’ll respond as soon as I am able.

 Subscribe in a reader    Subscribe by Email

Like this post? Move it on along with:

Email  |   delicious  |   Digg  |   Reddit  |   Newsvine  |   Furl  |   Google | Stumble | HaoHao

(0 Comments) 
Scroll to top

Tags: Rapidweaver | Tutorial | Flash | PHP | RW Tutorial

A few days ago, while Googling whatever, I happened to see this:

I was shocked and alarmed, I tell you. I poked around the internet, and found this post by Dimitar explaining why.

He says they changed it because they needed something that scaled better on the newer platforms.

Fine. But I liked the old one!

What do you think?

 Subscribe in a reader

 Subscribe by Email

Tags: Google | Shock