五行完成網頁多國語系

9,296 views

Published on

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

No Downloads
Views
Total views
9,296
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
48
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

五行完成網頁多國語系

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

×