Your SlideShare is downloading. ×
五行完成網頁多國語系
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

五行完成網頁多國語系

5,249

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,249
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 五行完成 網頁多國語系 Amos Tsai August 19, 2012@COSCUP
  • 2. ● 萬華社區大學、救國團 電腦老師● 曾經出沒地: H4, CloudTW, GTUG● 目前擔任 H4 值日生
  • 3. 目前使用的技能 :Nginx, uWSGI, bottle, Python,MySQL, MySQLdb, Javascript,jQuery, HTML5, CSS3
  • 4. amos.tsai@gmail.com amos.tsaiamos-tsai.blogspot.com
  • 5. 五行真的可以開發出網頁版多國語系嗎
  • 6. 係真ㄟ
  • 7. 以前用 gettext 好像有點複雜會不會網頁版也一樣複雜?
  • 8. 不會,反而更簡單!
  • 9. jQuery.i18n 有什麼優點
  • 10. ● 相依性低 – jquery-1.3.0.min.js 以上 – jquery.i18n.js● 體積小,載入速度快 - 3.2KB 無壓縮● 適合各種 framework● 開發速度快● 學習曲線低
  • 11. JQuery i18n● 2009 年由 Bryan W Berry 開發● MIT license● https://github.com/bryanwb/jquery-i18n/
  • 12. 原本的作法
  • 13. <script type=text/javascript src=./jquery-1.3.2.min.js></script><script type=text/javascript src=./jquery.i18n.js></script><script type=text/javascript src=./jquery.ne.json></script><script type=text/javascript src=example.ne.json></script><script type=text/javascript>$(document).ready(function(){ $._.setLocale(ne); $(#example1).append("<div>" + $._(Welcome)+"</div>"); $(#example1).append("<div>" + $._n(90) + "</div>");});</script><div id=example1>Example using strings application-wide <br />
  • 14. 現有作法不足之處
  • 15. ● 手動預先加入語系檔 – 就算使用者用不到也要花費流量讀取檔案● 手動輸入使用者語系 – 可以直接讀取瀏覽器語系設定● 轉換文字必須放在 <script> 中 – 破壞 HTML 文字可閱讀性
  • 16. OpenSource 的精神
  • 17. 覺得少了些什麼?
  • 18. 自己改
  • 19. 緊張刺激的 Demo
  • 20. 其實只有講者會緊張 ....orz
  • 21. 撰寫一個 HTML 檔<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body> <span>Hello</span><span>World</span></body></html>
  • 22. 載入 2 個 javascript 檔案● jquery-1.8.0.min.js● jquery.i18n.js
  • 23. 在要轉換的標籤加上 class=gettext
  • 24. 執行 genLocaleJson.py 產生語系檔
  • 25. 根據每個語系檔進行翻譯
  • 26. 移動語系檔到 language 資料夾
  • 27. // 幫 class="gettext" 的元素增加 gettext 屬性$._.setAnchorByClass( gettext );// 根據語系設定替換網頁文字$._.replaceByLocale( "language/helloworld." + $._.getLocale() + ".json" );
  • 28. Just this!
  • 29. 線上即時轉換語系
  • 30. $(.change).click( function() { // 根據按鈕更改語系設定 $._.setLocale( $(this).text() ) // 根據語系設定替換網頁文字 $._.replaceByLocale( "language/helloworld."+ $._.getLocale() + ".json" ); });
  • 31. 製作語系切換鈕<button class="change">jp</button><button class="change">zh_TW</button>
  • 32. Its All
  • 33. Source Code 下載https://bitbucket.org/amostsai/jquery.i18n
  • 34. 歡迎加入 Hacking ThursdayWelcome to Hacking Thursdayハッキング木曜日へようこそ
  • 35. 1. 討論 web, network, programming, system, blablah….2. 交流系統工具 & 使用技巧3. 八卦
  • 36. 聚會地點店家 : MarketPlace ( 市集 台北 站前 )地址 : 台北市重慶南路一段 1 號 2 樓電話 : (02) 7725-2525時間 : 每週四晚上 19:30-22:00
  • 37. 最後 ...
  • 38. 未來打算建立數位學習平台
  • 39. 如果您對這個計畫有興趣 或是對相關技術有興趣歡迎在任何場合與我聯繫:)
  • 40. Amos Tsai 0982-460-210amos.tsai@gmail.com
  • 41. Q&A
  • 42. thank you

×