Your SlideShare is downloading. ×
0
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
五行完成網頁多國語系
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,436

Published on

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

No Downloads
Views
Total Views
5,436
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
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

×