法文練習曲:: 來自鐘樓怪人的 Belle

這幾天聽了幾首法文歌 (chanson) 來練習發音。最後選了音樂劇 (la comédie musicale) 鐘樓怪人 (Notre-Dame de Paris) 裡的美麗佳人 (Belle) 來做筆記。不過筆記內容跟發音沒有關係，反而我在讀歌詞時，對法文句子的新認識與一些和基督教有關單字，所以我對中文版影片的翻譯做了一點小小修改，不一定比較正確，只是希望白話一點比較好記；也寫了一些單字片語句型等的小筆記。這是我念法文三個月以來第一次遇到這麼多比喻的文章，讓我想起國高中時的中文課..

開始前先來聽一下這首歌吧，歡迎 Belle..

Belle !
C'est un mot qu'on dirait inventé pour elle
Quand elle danse et qu'elle met son corps à jour, tel
un oiseau qui étend ses ailes pour s'envoler
Alors je sens l'enfer s'ouvrir sous mes pieds
J'ai posé mes yeux sous sa robe de gitane
A quoi me sert encore de prier Notre-Dame ?
Quel
est celui qui lui jettera la première pierre ?
Celui-là ne mérite pas d'être sur terre
O Lucifer !
Oh ! Laisse-moi rien qu'une fois
Glisser mes doigts dans les cheveux d'Esméralda

Belle !
Est-ce le diable qui s'est incarné en elle
Pour détourner mes yeux du Dieu éternel
Qui a mis dans mon être ce désir charnel
Pour m'empêcher de regarder vers le Ciel
Elle porte en elle le péché originel
La désirer fait-il de moi un criminel
Celle
qu'on prenait pour une fille de joie une fille de rien
Semble soudain porter la croix du genre humain
O Notre-Dame !
Oh ! laisse-moi rien qu'une fois
Pousser la porte du jardin d'Esméralda

Belle !
Malgré ses grands yeux noirs qui vous ensorcellent
La demoiselle serait-elle encore pucelle ?
Quand ses mouvements me font voir
monts et merveilles
Sous son jupon aux couleurs de l'arc-en-ciel
Ma dulcinée !
Laissez-moi vous être infidèle
Avant de vous avoir menée jusqu'à l'autel
Quel
est l'homme qui détournerait son regard d'elle
Sous peine d'être changé en statue de sel
O Fleur-de-Lys !
Je ne suis pas homme de foi
J'irai cueillir la fleur d'amour d'Esméralda

J'ai posé mes yeux sous sa robe de gitane
A quoi me sert encore de prier Notre-Dame
Quel
est celui qui lui jettera la première pierre
Celui-là ne mérite pas d'être sur terre
O Lucifer !
Oh ! laisse-moi rien qu'une fois
Glisser mes doigts dans les cheveux
d'Esméralda

美人
是為她創造的專有名詞
當她舞蹈將身子嶄露在白日下，像
展翅開始飛翔的鳥
而我感到地獄在我腳下張開口
我的注視穿透她的吉普賽衣袍
還祈求聖母什麼更好的恩賜？
誰
忍心對她投擲第一顆石頭？
這個人根本不配活在世上
喔 撒旦啊！
就讓我求這一回
讓我的手指穿過艾絲梅拉達(她)的長髮

美人
她難道是魔鬼化身？
讓我的眼神離棄永恆的主
誰用這肉體的慾望誘惑了我
阻擋我的視線望向天國
她的身上帶著原罪
渴慾她是否使我成為罪人？
她
一個歡場女子一個什麼都不是的人
竟然背負人們的十字架
聖母啊！
就讓我求這一回
讓我推開她花園的門扉(心扉)

美人
在教人銷魂的黑眼睛後面
她可能還是個純情少女嗎？
她舉手投足讓我看見
無限風情
藏在她的彩虹裙下
吾愛
就讓我不忠這麼一回
在我們步上紅地毯前
誰
能夠把眼光從她身上移開
冒著變成鹽柱化石的痛苦
喔 百合！
我不是個忠實的男人
我要去摘艾絲梅拉達的愛之花

我的注視穿透她的吉普賽衣袍
還祈求聖母什麼更好的恩賜？
誰
忍心對她投擲第一顆石頭？
這個人根本不配活在世上
撒旦啊！
就讓我求這一回
讓我的手指穿過她的長髮
艾絲梅拉達

名詞解釋

belle  =  beauty 美麗佳人；原本是形容詞，這裡拿來當名詞代表女主角。
在迪士尼電影美女與野獸也是這樣用的：
La Belle et la Bête = Beauty and the Beast
celui = ce + lui <- this / the one
celle = ce + elle <- 這裡的她也是指女主角，艾絲梅拉達。

單字片語

：基督教相關
Dieu  =  God 主，耶穌基督
Lucifer; le diable  =  Satan; devil 撒旦；惡魔
le Ciel  =  heavy 天國，天堂；原本 le ciel 是天空 (sky) 的意思。
le paradis  =  paradise 天堂
l'enfer  =  hell 地獄
un péché  =  sin 罪
une peine  =  penalty 罰；而在俄國小說罪與罰則是用另外兩個字：
Crime et Châtiment  =  Crime and Punishment
la statue de sel  鹽柱；源自舊約聖經，創世紀裡對所多瑪與蛾摩拉城毀滅的紀載。
la croix  =  cross 十字架；porter la croix 背負十字架。
l'autel  =  altar 祭壇；如果在教堂舉行婚禮，這就是宣示成為夫妻的地方。

片語句型

on dirait  =  people say, looks like..
elle serait-elle encore pucelle
這兩個句子都用 conditionnel 來表示不確定性。

poser mes yeux  =  look at, star at 注視；原本 poser 是放置 (pose, place, put) 的意思。

laisse-moi rien qu'une fois 用 rien que 來強調就這一次。rien = nothing。
une fille de rien 一個什麼都不是的女人；de rien 單獨使用是不客氣的意思。
une fille de joie 這是含蓄的表示一個人是妓女的意思。

mon être  =  my living body 我的身(肉)體；être 原本是 be 動詞，這裡則是名詞。

monts et merveilles 直譯是山與奇景，用自然景觀來誇飾一切美好的意思；舉例來說
Il promet monts et merveilles. 在英文裡也有類似的用法
He promises her the earth but... or He promises her the moon but...
不過這裡則是指不可能實現的諾言。

第二堂 JavaScript:: 2dolist

之前提到的：
HTML5 = HTML markup (架構) + CSS style (外觀) + JaveScript APIs (行為)

或許每個人對於這些名詞的定義與從屬關係有不同的看法，不過可以確定的是
JavaScript is the default language of HTML5.

關於 JavaScript 以下有兩本我覺得很有幫助的參考書：
 - JavaScript: The Good Parts (蝴蝶書)
 - Maintainable JavaScript (烏龜書)

當然，使用 HTML 和 CSS 就可以寫出非常好看的靜態網頁，有興趣可參考 Zen Garden 裡的 中 | 英 文說明範例；然而，如果想要跟上 web development 的時尚腳步，做出 Chrome Experiments 裡的互動網頁，讓朋友在 fb 上分享，JavaScript 是其中不可缺少利器之一。So, let's take some time and have a little fun with a simple example :]

如何讓 HTML 裡的 element 由 JavaScript 來控制做出互動效果呢? JavaScript 和 HTML 之間的溝通需要靠另一位小幫手 Document Object Model (DOM)。DOM 怎麼來的？

當瀏覽器 parse HTML 檔案的同時，它會產生一個像樹狀的圖 (也就是 internal model)，這個圖解構 HTML 檔案裡所有 element 的關係。JavaScript 也就是靠著 DOM 對 HTML 的了解，取得這些 element 的資訊再加入互動行為。當 JavaScript 完成修改後，我們的瀏覽器會動態更新而成就互動網頁，可參考此關係圖。以範例中的 text input, button 和 displaylist 來看它們如何對話：

STEP1. Set up an event handler: when the button (id="btn1") is clicked..
STEP2. Write the handler to get the value from the text input (id="wt2do").
STEP3. Create a new "li" element to hold this value.
STEP4. Add the element to the page's DOM ("ul" id="displaylist").

2dolist.html

<!doctype html>
<html>
  <head>
    ...
    <script src="2dolist.js"></script>
  </head>
  <body>
    <h1>2 Do:</h1>
    <div>
      <input type="text" id="wt2do" size="30" placeholder="What's in your mind?">

      <input type="button" id="btn1" value="add">

      <input type="button" id="btn2" value="remove list">     
      ...
    </div>
    <ul id="displaylist"></ul> 
    ...
  </body>
</html>

2dolist.js

var todolist = null;

function init(){
  /* add event handler for button add*/
  document.getElementById("btn1").addEventListener('click', onClickedBtnAdd);  //STEP 1
  ...
  /* load todo list from the storage; or if none, create a new one*/
  todoList = loadDisplaylist();
  if (todoList === null){  
    todoList = document.getElementById("displaylist");
  }    
}

function onClickedBtnAdd(){

  /* get the input text */
  var input = document.getElementById("wt2do").value,  //STEP 2
      todoItem = null;
       
  /* if the input value is available, add to the list */
  if (input !== ""){
    todoItem = addTodoItem(input, todoList);
    save(todoItem);
  }
  ...
}

function addTodoItem(item, ul){   
  li = document.createElement("li");  //STEP 3.1

  li.textContent = item;              //STEP 3.2

  ul.appendChild(li);                 //STEP 4

  ...
  return li;
}

想了解更多關於 Event Handler，這裡有兩篇不錯的文章：
 - Traditional model: Ex. element.onclick = doSomething;
 - Advanced models: Ex. element.addEventListener('click',doSomething,false);

或許有人會覺得，怎麼好像沒看到 HTML5 的半點影子呢？嘿嘿，最後就讓我們利用一下 HTML5 的 localStorage 把 displaylist 存起來吧！

2dolist_storage.html

var STORAGE_LIST_KEY = "displaylist";

function save(item){
    var displaylistArray = getStoreArray(STORAGE_LIST_KEY);
    displaylistArray.push(item.textContent);
    localStorage.setItem(STORAGE_LIST_KEY, JSON.stringify(displaylistArray));
}

function clearDisplaylist(){
    localStorage.clear(STORAGE_LIST_KEY);
}

function loadDisplaylist(){
    ...
    return list;
}

function getStoreArray(key){
    var displaylistArray = localStorage.getItem(key);
    if(displaylistArray === null || displaylistArray === ""){      displaylistArray = [];
    } else{
        displaylistArray = JSON.parse(displaylistArray);
    }
    return displaylistArray;
}
...

法文練習曲:: Santé 健康快樂!

Lady: Bonjour. ...
Pomme: Bonjour. I have an appointment today.
Lady: (shaking her head) J'ai pas compris!
Pomme: m.. J'ai.. J'ai un rendez-vous.. J'ai pris un rendez-vous.. aujourd-hui..
Lady: !@#$%^...
Pomme: Merci!

最近看醫生，遇到護士都不會講英文，我只好用破法文拼湊些句子。
看來還是惡補一下跟身體健康和看醫生等相關的對話和句型比較實用！

PART1 | 表達身體不舒服的句型：

J'ai mal à.. la tête/la gorge.  (我.. 頭/喉嚨 ..痛。)
J'ai mal aux dents.  (我牙齒痛。)
J'ai mal au.. dos/ventre.  (我.. 背/肚子 ..痛。) or 也可以反過來說...

Ma.. tête/gorge ..me fait mal.
Mes dents me font mal.

Je ne me sens pas bien.  (我不舒服。) <- se sentir = feel 覺得；可能是身體或心理上的不適。
Je ne vais pas bien.  (我不舒服。) <- 比起前一句，這個說法直接表達"身體"上的不適
Je suis malade.  (我生病了。)

[家裡1]

A: Ça va? Tu as mauvaise mine.
B: Je ne me sens pas très bien.
A: Qu'est-ce que tu as?
B: J'ai mal à la tête.
A: Tu veux prendre un médicament?
B: Oui.
A: Ça va mieux.

A: 你還好嗎？你的氣色不好。
B: 我不舒服。
A: 你哪裡不舒服？
B: 我頭痛。
A: 你要吃藥嗎？
B: 好。
A: 好點了嗎？

bien < mieux < le/la, les mieux  =  good, better, best
mauvais(es) < plus mauvais(es) < le/la, les mauvais(se)  =  bad, worse, worst

[家裡2]

C: Il faut de l'aspirine, du désinfectant, et des pansements
D: J'ai très mal à la gorge. Tu peux acheter des pastilles, s'il te plaît?
C: D'accord.

C: 我需要阿斯匹靈、消毒劑和一些膏藥。
D: 我喉囉很痛，可以請你幫我買藥(錠片)嘛？
C: 好。

[藥局]

C: Bonjour. Vous avez de l'aspirine*, s'il vous plaît?
E: Oui, bien sûr. Pour enfant ou pour adulte?
C: C'est pour moi.

C: Je voudrais aussi des pansements et du désinfectant, s'il vous plaît.
E: Voilà, Monsieur.
C: Merci.

C: Mon ami a mal à la gorge. Vous avez quelque chose pour ça?
E: Bien sûr. Voici des pastilles. Cinq ou six par jour.
C: Merci beaucoup.

* Aspirin is not dispensed for children any more.
Paracetamol is now recommended for children under 16.

C: 你好，請問有阿斯匹靈*嗎？
E: 當然有。給小孩還是大人服用的呢？
C: 是我要的。

C: 我還想要一些膏藥和消毒劑，謝謝。
E: 你要的都在這裡。
C: 謝謝。

C: 我朋友喉嚨痛，有沒有什麼可以給他服用的？
E: 當然，這裡有些錠片，一天吃五到六顆。
C: 非常感謝。

pouvoir  =  can 能/可以:  Je peux, Tu peux, ...
vouloir  =  want 想要:  Je veux/voudrais, Tu veux, ...
devoir  =  have to 必須:  Je dois, Tu dois, ...
Ex. Je dois partir parce que j'ai un rendez-vous.

Il faut: must 用來表達義務
Avoir besion: need to 表達需要某人某物
~ + de + 名詞
~ + 原形動詞  
Ex. Il faut dormir en avance et bien manger pour santé.

[家裡3]

F: Tu vas bien? Tu tousses!
G: Non, je ne vais pas très bien. Je suis malade depuis 3 jours.
F: Tu as attrapé la grippe?
G: Je ne sais pas. J'ai mal partout et je ne suis pas en forme.
F: Tu veux voir un médecin?
F: Je peux prendre un rendez-vous pour toi.

F: 你還好嗎？你在咳嗽。
G: 不好，我身體不舒服，我生病三天了。
F: 你得了流行性感冒嗎？
G: 不知道。我全身痠痛無力。
F: 你想看醫生嗎？
F: 我可以幫你預約掛號。

[診所]

G: Docteur, je ne me sens pas bien.
H: Voyons.. qu'est-ce qu'il vous arrive?
G: J'ai des frissons, je crois que j'ai de la fièvre et puis j'ai mal à la tête et je tousse.
H: Bon, déshabillez-vous, je vais vous examiner.
H: Eh bien, vous avez une bonne grippe! Ce n'est pas bien grave. Je vais vous faire une ordonnance.. aspirine, antibiotique et un sirop pour la toux.
G: Je dois rester couché?
H: Bien sûr, je vais vous faire un arrêt de travail, et surtout, reposez-vous!

F: 醫生，我覺得不舒服。
G: 我們來看看怎麼一回事。
F: 我在發抖，我想我發燒了，我頭痛還咳嗽。
G: 恩，你得了流感！但不是很嚴重。我開處方給你.. 阿斯匹靈、抗生素和咳嗽糖漿。
F: 我必須躺著休息嘛？
F: 當然，你得暫停工作。最重要是休息。

PART2 | 最好不需要用到的單字：P

une dent cariée  =  decayed tooth 蛀牙
le traitement de racine   =  root canal treatment 根管治療
une dent enlevée  =  tooth removal 拔牙
détartrage et polissage  =  scale and polish (or hygiene clean) 洗牙
remplissage / couronne / pont  =  filling / crown / bridge 牙齒填充物 / 牙冠(牙套) / 牙橋
appareil dentaire / une fausse dent / un implant dentaire
=  braces / dentures (or false teeth) / implants 牙套(矯正) / 假牙 / 植牙
rayon X panoramique  =  panoramic X ray 照X光

(more detail in English)

now, let's relax a little bit :]

  

以上情境對話資料來源：
BBC Language, 法語輕鬆學, 圖解法語王

第一堂 HTML5 Intro:: Hello World

開學囉，今天開始新的自主練習寫 HTML5。從小被老師寵慣的我，總是有考試和 deadlines 逼著我念書，要自己主動學習，似乎變得不太自然。經過幾番掙扎後，還是不免俗的來一個 Hello World：

headfirsthtml5.html: from HTML to HTML5 (code with black color)

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="first.css">
    <script src="first.js"></script>
  </head>
  <body>
    <div id="counterInJS"></div>
    <h1>Hi, HTML5</h1>
    <p>
      <img src="html5_back_cover.gif" alt="reference page">
    </p>
    <p>
      <div>Reference books:
      <ul>
        <li><a href=".. ">Head first HTML5 Programmin</a></li>
        <li><a href=".. ">JavaScript: The Good Parts</a></li>
      </ul></div>
      <div class="note">
        Yoopii! This is the starting my HTML5 and Javascript!<br>
        - by Pomm (-:</div>
    </p>
  </body>
</html>

first.js: a counter example

var c = "";
var count = 300;
var counting = setInterval(function(){counter()},1000);

function counter(){
   
    if (count > 0){
        c = "Javascript is loading in.. " + count;
        count = count - 1;
    } else {
        c = "Congrats! Loading completed!!";
        clearInterval(counting);
    }
    document.getElementById("counterInJS").textContent = c;
    //why textContent rather than innerHTML?
    //http://dochub.io/#dom/element.innerhtml
}

window.onload = counting;
//vs. using element.addEventListener()!?
//http://dochub.io/#dom/window.onload

first.css: formating

/*HTML Elements*/
body,
h1, h2, h3,
p {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
}
h1 {
    color:orange;
    text-shadow: 0 0 0.2em #CCC;
}
a:link, a:visited {color:grey;}
a:hover {color:cornflowerblue;}

/*Page Elemets*/
#counterInJS {
    font-family: courier;
}

/*Other classes*/
.note{
    font-size: small;
}

HTML5 is made up of a family of technology. In the book of Head first HTML5, it give an unofficial definition: HTML5 = HTML markup + JavaScript APIs + CSS. (also see another intro in Chinese.) One of the design principles behind HTML5 is to allowed your pages to degrade gracefully.

Software Requirements:
To write HTML5 and Javascript, you are good to go with a text editor, a brower, and sometimes a webserver. There are many editors available for Windows users such as PSPad, TextPad, EditPlus, Notepad++, or Notepad (if this is all you have). It's also encouraged to use more than one browsers for testing. Chrome and Safari, in general, are the most up-to-date. Other major browsers including Firefox, Opera, and IE are also worth to try. I'm currenlty practicing on Notepad++ with Firefox(firebug) and Chrome(developer tools and Javascript console).

Reference:
http://dochub.io/ (Mozilla Documentation)
W3School vs W3Fool (debate articles: 1 2.. )
caniuse.com (So, who is ready for up to date HTML5 and CSS?)