Obama 當選演說

演說錄影全文。我最感動的部份是這段,試翻譯如下:

This election had many firsts and many stories that will be told for generations. But one that’s on my mind tonight is about a woman who cast her ballot in Atlanta. She’s a lot like the millions of others who stood in line to make their voice heard in this election except for one thing — Ann Nixon Cooper is 106 years old.

這次選舉有許多的史無前例,有許多我們可以世世代代傳頌的事蹟。但是今晚在我心中的有一件事,關於一位在亞特蘭大投票的女性。她就像其他數百萬的選民一樣,在投票所門口排隊,為了就是表達自己的意見。但是有個特別之處 —— 她,Ann Nixon Cooper,已經 106 歲了。

She was born just a generation past slavery; a time when there were no cars on the road or planes in the sky; when someone like her couldn’t vote for two reasons — because she was a woman and because of the color of her skin.

她生在奴隸制度剛被廢除的下一代;一個路上沒有汽車,天上也沒有飛機的時代;像她一樣的人在當時,因為兩個原因無法投票 —— 因為她是女性、因為她的膚色。

And tonight, I think about all that she’s seen throughout her century in America — the heartache and the hope; the struggle and the progress; the times we were told that we can’t, and the people who pressed on with that American creed: Yes we can.

而今晚,我思考著她活在美國親眼所見、親自跨過的世紀 —— 她的痛心與希望;她的掙扎與上進;那個別人說我們不行,但我們把自己寄託在美國的信念:是的,我們可以。

At a time when women’s voices were silenced and their hopes dismissed, she lived to see them stand up and speak out and reach for the ballot. Yes we can.

當女性的權利與聲音被消除,她們的願望被駁回,她活在那個時代,站起來勇於爭取她應得的投票權利:是的,我們可以。

When there was despair in the dust bowl and depression across the land, she saw a nation conquer fear itself with a New Deal, new jobs and a new sense of common purpose. Yes we can.

當絕望取代了我們的薪糧且蕭條掃過了土地,她見到一個國家戰勝了恐懼,以羅斯福的新政、新工作機會與新的共同奮鬥的目標:是的,我們可以。

When the bombs fell on our harbor and tyranny threatened the world, she was there to witness a generation rise to greatness and a democracy was saved. Yes we can.

當敵人空襲我們的港口,當獨裁政權威脅世界,她在那裡目擊一個世代的人們奮起且延續了民主:是的,我們可以。

She was there for the buses in Montgomery, the hoses in Birmingham, a bridge in Selma, and a preacher from Atlanta who told a people that “We Shall Overcome.” Yes we can.

她在那裡眼見 Montgomery 的巴士、Birmingham 驅除群眾的水管、Selma 被示威民眾佔滿的橋,與一位亞特蘭大來的牧師對人們說「我們能克服」(譯按: 指黑人民權運動)。是的,我們可以。

A man touched down on the moon, a wall came down in Berlin, a world was connected by our own science and imagination. And this year, in this election, she touched her finger to a screen, and cast her vote, because after 106 years in America, through the best of times and the darkest of hours, she knows how America can change. Yes we can.

當人到達了月球、柏林的圍牆倒塌了、我們的想像與科技緊密的連接了世界。今年,她用手指輕觸螢幕,投下她的一票,因為在 106 年後的美國,經歷了最好的時光與最黑暗的時刻,她知道美國可以怎麼改變。是的,我們可以。

America, we have come so far. We have seen so much. But there is so much more to do. So tonight, let us ask ourselves — if our children should live to see the next century; if my daughters should be so lucky to live as long as Ann Nixon Cooper, what change will they see? What progress will we have made?

美國,我們已經走過這麼多了。我們已經經歷這麼多了。但是還有很多事情等待我們完成。所以今晚,讓我們捫心自問 —— 若我們的孩子能活到下個世紀;如果我的女兒們夠幸運,能活的和 Ann Nixon Cooper 一樣長壽,她們能看到什麼改變?我們能完成什麼樣的進展?

曾經有個說法,美國為何是個民族「大熔爐」,而不是一盤民族「大沙拉」,就是因為美國本身在這些文化互相衝擊的過程,社會和民主制度能不斷成長。Obama,做為美國熔爐的最佳代表,當選演說也寫出了這樣的價值。

台灣呢?一世紀之後,我們這一代能完成什麼可以傳頌的事蹟呢?我們是否在大國的夾縫中解決了台灣「問題」,找到保障台灣永遠民主、自由、繁榮的地位與方法?我們自認我們的社會制度已經夠完美了,還是我們能謙虛的說,還可以做的更好?我們已經保障了所有人的人權與民權嗎?

很遺憾的,我在檯面上的政治人物看不到這樣的宏觀。要統一、獨立,要緊密合作、或是謹慎封鎖,大家各有看法;但是,我找不到一個論述告訴我這樣就能保障台灣的永遠民主、自由、繁榮。這是我認為的最高價值,也是應該要留給島上後代子孫的寶物。

Mozilla 的手機瀏覽器 Fennec

Fennec 計畫,你大概已經聽過了,是 Mozilla 試著將 Mozilla application framework 放到手機上,順便做個新 UI 給手機版 Firefox 的計畫(還是反過來?笑)。

Alpha 1 最近出了,Mozilla Links 有做介紹。Fennec Alpha 1 提供了三大桌面作業系統的版本供沒有智慧手機的使用者下載嚐鮮。初步嚐試,覺得 UI 設計的不錯;若有觸控螢幕的話,這種瀏覽器可以當作簡潔、方便,連阿嬤也會用的 kiosk 瀏覽器。

很剛好,前天才寫了手機瀏覽器對網頁寬度的處理。這裡順便補完 Fennec :

  • Fennec 似乎認為自己是寬度為 800px 的桌面瀏覽器。800px 可能只是桌面測試版的預設值而已,因為在 Windows 上它的視窗可以縮放,然後重新載入網頁之後就會用不同的寬度處理網頁。。倒是 Nokia N810 的螢幕還真的是 800 x 480;這代表 Fennec 的寬度是 device-dependent ?
  • Fennec 會將超過寬度的網頁 full page zoom 縮小到不出現橫向捲軸的程度。在 800px 的畫面下,1024px 的 Yahoo! 奇摩首頁看起來文字大小還可以。好功能,希望這個模式可以反過來出現在 Firefox 上面(好啦,我知道 Desktop Opera 早就有了,請愛用者不要特別寫回應來科科)。
  • 和其他手機瀏覽器一樣,使用者可以放大縮小某個範圍的畫面(桌面測試版上此功能指定在捲動滑鼠滾輪)。
  • Fennec 不像 Opera Mini 一樣,會處理 handheld stylesheet 或是 media query 過的 screen stylesheet,也不處理 Apple 為 Mobile Safari 定義的 viewpoint meta tag (前天的文章我有詳述)。加上前面寬度的怪事,我想 Fluid Layout 在真正手機上的 Fennec 排版會被擠的很慘。對於努力擁抱標準的 Mozilla 來說,沒有處理這個實在很糟。或是說,Fennec 打算它支援的手機螢幕寬度都從 800px 起跳?

這是 alpha,代表開發團隊還沒把所有大功能全部寫完,所以一切還有待觀察囉。至於文章開頭說的反過來,我是認真的:我認為 MAF 能活在 x86 以外的機器,比起做出另一個手機瀏覽器來的重要的多。除了 Alpha 1 已經有的 Maemo 平台(Nokia N810 的作業系統,Linux 系)版本,正式版據說還會 Windows Mobile。Android 和 iPhone 版本會因為一些八卦不會由 Mozilla 正式推出,但我猜 commiunty port 應該很快就會出現。

網路越來越熱鬧了呢。

Fluid Layout

我對 fluid layout 還滿堅持的,只要有辦法,我都會把自己做的 Web app/page 調成比例寬度(甚至高度!例如演示實驗網站的首頁)。但我現在發現並不只是把兩攔的寬度改成比例一切就完成了,要把 Fluid Layout 做好還有很多需要處理的地方。最近尤其關注在手機瀏覽器上 Fluid Layout 的解法,總之把一些知道的事情新的舊的統統寫出來:

Design:

  • 充分利用空間:人們(我?)常說固定寬度最大的缺點是無論別人螢幕多大,兩側總會有 padding 完全浪費掉。但Fluid Layout 不一定比較來的容易充分利用空間,尤其是內容牽涉到圖片的時候。如果沒有仔細處理內容,讓寬度隨之縮放的話,那只是把固定寬度浪費的空間分散到內容各自的 padding 而已。而且版面反而更散亂。這實在沒有什麼解法,只能把一個一個元素慢慢刻。處理不好這個的話,那不如做個固定 1004px 寬度的版面,然後期待買寬螢幕/大螢幕的人都會用 Firefox 3 的 Full page zoom 功能算了…
  • 文字攔寬:文字似乎不會有上述的問題,同段落的文字會全部排上來,頂多就是網頁變短而已。但是若設計者做了一個在 1280px 的瀏覽器底下文字攔寬長達 1024px 的網頁,那讀起來其實也很辛苦。我自己對付這個問題的解法是盡量不要讓某攔的寬度超過 55% ,如果只有兩攔的話,那就放棄掉一些左右的空間吧 (囧)。Stellarium 中文包的網頁是個範例。這就是個 design 的兩難了:55% 的感覺是基於寬度 1280px 的螢幕與我習慣的字級、行距,寬度更大的螢幕還是可能產生閱讀問題;另外的兩難是,在利用空間這件事情上,寫一個 design principle 跟前面那項牴觸實在是很心虛呀…

Implantation:

  • Mac OS X 上的 Safari 在遇到 fluid layout 的網頁時,按視窗的「+」按鈕無法把自己放大到「適合」的寬度/高度。我很喜歡 OS X 的 UI 在「+」按鈕的行為(澄清:我沒有 Mac ,也沒有收蘋果的錢XD),但是 fluid layout 這種內容寬度 = 任意寬度的網頁,「+」按鈕無從處理(不信的話,拿一台 Mac 去演示實驗網站試試看)。結果不會變得無法閱讀啦,只是版面會看起來窄窄的(這可能要拿多一點網頁測試確定一下)。
    倒是 Mac OS X 上的 Firefox 沒有這個問題。牠(狐狸XD)的問題反而是「+」按鈕的行為和作業系統不同,變成跟 Windows 一樣,視窗佔滿螢幕放到最大。
  • Mobile Safari (iPhone & iPod Touch 上的那個)會無法偵測適合的寬度(再次澄清:我沒有這兩台機器,誰要捐給我)。幸好,根據 ADC 上的文件,Mobile Safari 這時似乎把自己當成一個寬度 980px 的瀏覽器;這個寬度各種 fluid layout 應該都活的不錯。如果不希望它自作聰明調整寬度的話,ADC Web Apps Dev Center 上面也有關於 viewpoint meta tag 的文件可以 follow (Guideline 那篇文章,要先登入會員才能點)。
    一言以蔽之,如果你的網頁在 980px 下活的不錯,直接加上這行就對了:
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

    最好還是找台機器測試比較保險。
  • Opera Mini 不用 Apple 那套自訂的 meta tag,它用既存的 CSS Media queries 標準。乍看之下比較麻煩,但這樣做才能真的滿足在不同手機上不同寬度的 Opera Mini ,且讓設計者完全掌握網頁在手機上應有的樣子。不要看到 @media 就暈了(準備 screen Stylesheet 又準備 print Stylesheet 還要準備另一份?),比較輕鬆的作法(其實 print stylesheet 也應該要這樣做才對) 不是為不同的 device 準備不同的 CSS 檔再用 <link media=”” /> 去指,而是準備一個大的 CSS 檔案,把所有 screen 用的 Style 放在 @media 外面,再用 @media print { … } 和 @media handheld { … } 去包其他裝置需要的 CSS 修改。
    一言以蔽之(again),如果你的 blog 等地方的 CSS 和「普通人」一樣沒有 @media 段落,Opera Mini 4 的 Desktop rendering mode 又會寬度偵測失敗的話,那只需要在 CSS 的最後面加上這段:
    @media screen and (max-device-width: 640px) {
    html { min-width: 640px }
    }

    如果要控制 small screen rendering 的 style (SSR 會忽略某些 style,像是 float,就算在這裡指定也沒用),它的 media query 則是:
    @media handheld and (max-device-width: 980px) { ... }
    相關資料可以看 Dev.opera 上的這篇文章。要測試的話有 Live Demo 可以用(需要 Java),不要傻傻的在手機上點點點捐錢給電信公司呀 … Desktop Opera 似乎也可以跑 SSR 模式,還請常用 Opera 的大神們開釋。

就這樣啦,以上是我的小心得,如果有任何疏漏請留言多多指教,感謝。