[jQuery Mobile 範例] 如何建立一個訂餐 web app

2012 年 10 月 27 日 發表留言

最近在學習 jQuery Mobile 的過程中,發現此份教學文章很好理解,先 Memo下來。

原文:(作者:Stephanie Walter,內容比較豐富)

  1. jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
  2. jQuery Mobile Tutorial: Creating a Restaurant Picker Web App Page 2

線上展示 | 檔案下載


翻譯

    (51CTO.com 的翻譯)

  1. 使用jQuery Mobile創建餐廳訂餐應用(1)
  2. 使用jQuery Mobile創建餐廳訂餐應用(2)
  3. 使用jQuery Mobile創建餐廳訂餐應用(3)
  4. 使用jQuery Mobile創建餐廳訂餐應用(4)

    (杰克知足的博客園,簡體字,可最為參照用)

  1. [翻譯]jQuery Mobile教程-創建一個訂餐web應用(上)
  2. [翻譯]jQuery Mobile教程-創建一個訂餐web應用(下)
分類:HTML5 標籤:,

HTML5 遊戲開發範例整理(1-10)

2012 年 10 月 14 日 1 則迴響

整理自 Script Tutorials 上的 HTML5 Game Development 一系列課程,每個課程都有 Live Demo、Download Source 和簡單解說,整理在這,以備不時之需。

備註:圖片、Source、Live Demo 連結都來自於  Script Tutorials 。


第一課:HTML5 Game Development – Lesson 01

在第一篇文章中,將涵蓋基礎知識 – 在畫布上,創建簡單的對象,填寫,並通過鼠標的一些鏈接的事件處理程序。

Live Demo
download

第二課:HTML5 Game Development – Lesson 02

告訴你如何填充漸變色的對象,繪製文本,使用自定義的字體繪製文本,基本的動畫,最重要的 UI 元素 – 按鈕。

Live Demo
download

第三課:HTML5 Game Development – Lesson 03

開始添加動畫,和一些更有趣的功能。我們的演示將包括一艘太空船飛越時空,和一個新的元素 – “對話”。對話將包含兩頁,按鈕打開對話框頁面 + 隱藏對話框上的第二次點擊。

Live Demo
download

第四課:HTML5 Game Development – Lesson 04

今天要學的:有聲動畫精靈和基礎性工作。在我們的演示中,你會看到一個飛龍。在所有時間我們將聽到翅膀的聲音(我們將循環這個聲音),另一種聲音 – 龍的怒吼(mouseup 事件)。最後,我們會教我們的龍的鼠標光標(當我們按住鼠標)。
(Demo 測試:沒聽到聲音)

Live Demo
download

第五課:HTML5 Game Development – Lesson 05

音樂的例子。
主要學習優化 CSS3,讓 JavaScript 更簡化,提高效率。
(Demo 測試:沒聲音、滑鼠鍵盤都沒反應)

Live Demo
download

第六課:HTML5 Game Development – Lesson 06

模擬早期的舊電腦遊戲 – 坦克大戰。我會教你使用替代陣列的地圖,再加上我將顯示 – 如何檢測碰撞的活動對象(坦克)與環境(基於陣列的地圖)。

Live Demo
download

第七課:HTML5 Game Development – Lesson 07

模擬早期電玩店或街邊的打磚塊遊戲。在這一課中,主要學習如何檢測基本的碰撞和 HTML5 本地存儲。您可以使用鼠標和鍵盤(左 / 右按鈕)。我們將經過時間和碎磚(點)的量存儲在本地中。

Live Demo
download

第八課:HTML5 Game Development – Lesson 08

演示如何使用 Box2D 的一些物理引擎應用到您的項目中。 Box2D 是流行的開源 2D 物理引擎模擬的應用。 2D 物理引擎是遊戲開發的一個熱門話題。隨著物理引擎的幫助下,我們可以很容易地創建一個可玩的遊戲,只是定義一個環境和一個簡單的規則。

Live Demo
download

第九課:HTML5 Game Development – Lesson 09

使用第四課的畫布遊戲,並增加了火球,敵人和碰撞檢測。所以,現在我們的龍可以施放火球術和殺死敵人,讓這個遊戲是互動性更強。

Live Demo
download

第十課:HTML5 Game Development – Lesson 10

這是一個飛行模擬器 – 天行者,飛機,多個敵人。我們的目標 – 到終點線。旁邊還有主要特點:使用精靈的飛機和爆炸,可能按多個鍵(如 – 在同一時間,你可以移動和攻擊),有一定的水平長度,增強了碰撞檢測(現在的敵人可能會損壞我們的飛機) ,生活和分數 PARAMS。

Live Demo
download

以上,到目前總共 10 堂課。

分類:HTML5, 源碼 標籤:, ,

HTML5 Game 微軟九宮格速讀(源碼下載)

2012 年 10 月 14 日 發表留言

出自微軟的 HTML5 Game,是一個想了解 HTML5 & CSS 的好範例。

不得不說,Microsoft 這個 Demo 很有愛,很有教學示範的 Fu

因為:

如果不嫌麻煩的話,其實這個原始碼很好自行下載。
先從一開始的 Default.html 查看內容,再一一根據內容的連結,建立 Folder 和下載 png, css, js 等,這樣自己做過一遍之後,對於整個檔案架構也都了解完了。

九宮格數獨,是一種源自 18 世紀末的瑞士,後在美國發展、並在日本得以發揚光大的數字謎題。數獨盤面是個九宮,每一宮又分為九個小格。在這八十一格中給出一定的已知數字和解題條件,利用邏輯和推理,在其他的空格上填入 1-9 的數字。使 1-9 每個數字在每一行、每一列和每一宮中都只出現一次。

這種遊戲全面考驗做題者觀察能力和推理能力,雖然玩法簡單,但數字排列方式卻千變萬化,所以不少教育者認為數獨是訓練頭腦的絕佳方式。

演示 (DEMO)下載 (FILE)

PS. 下載連結的源碼已做了部分繁體中文化,僅作為研究用途,如有侵權請通知我移除,謝謝!!

分類:HTML5, 源碼 標籤:, ,

HTML5 遊戲開發資源

2012 年 10 月 14 日 發表留言

請原諒我的英文非常破,所以只好借用 Google 翻譯,讓自己多少能看懂一些。部分懶的調整翻譯了,簡單寫上了一些自己的理解和筆記。(藍色字部分)


翻譯來源:HTML5 game development resources

原作者 James 和 Josh 整理和收集了一些很有幫助的資源列表。並且發布和分享在自己的 Blog 上。

Me and Josh have been working hard on getting our first game Back To Earth out of the door. During this development, we’ve been collecting a pretty nice list of resources that have been very helpful for us. Why not wrap this up into a blog post and share with the world? I will continue to update this post whenever I get more information.




遊戲開發庫 (Game development libraries)

這是一個專業級的 JavaScript 遊戲庫和平台,可以開發出令人驚嘆的桌面和手機的 HTML5 遊戲,有自己的 2D 關卡編輯器 (Weltmeister) 和調適工具。參考資源如下:

  1. HTML5 遊戲開發工具推薦:IMPACT (簡體)
  2. Weltmeister 的介紹 (Vimeo) 
  3. Weltmeister 介紹 & 教學影片 (Youtube) 

This is a fantastic JavaScript game library, which the creator has admitted to it being perfect for arcade/platform games. It’s beautifully put together, comes with a great level editor and just works. There is a license fee, but it’s been worth every penny. 

這是一個輕量、模塊化的 JavaScript 遊戲引擎,內置動畫、事件管理、碰撞檢測等等。這個 JavaScript Engine 頗有趣的,比較注重接口和模塊。

    I’ve always found this framework interesting. You can make games with either canvas or DOM, it has a great entity component system and it keeps it’s base codebase small and promotes the use of plugging in modules to bring new functionality.

    突然出現的,但目前還很少人關注,作者似乎很有興趣,但是還沒開始嘗試。一些顯著的特點是它的瓷磚地圖格式,補間效果非常強大,跨瀏覽器支持多個音頻通道。

      This framework seems to pop up here and there though we’ve not tried it ourselves. Some notable features are it’s tiled map format, tween effects, very strong cross browser support and the multiple audio channel support (something very interesting which we would like to try out).

      在 GitHub 上,這是一個很好的資源,它幾乎列出了每一種 JS 遊戲庫。

        This is a great resource on GitHub, it lists pretty much every JS game library out there. 


        遊戲開發網站 (Game development websites)

        提供最新的遊戲開發各方面的新聞。它有很多高質量的文章和鏈接,用 RSS 訂閱它吧,讓自己隨時都能看到有趣的文章。

        This one to us is the daddy of the blogs. Just subscribe to it, and it will ensure you’re up to date on all sides of game development news. It’s has quality articles, quality links and it’s always very, very interesting. 

        另一個很好的資源,有幾個部分不只是新聞,如教程,演示,工具等,這將是另一個值得放進您的 RSS 閱讀器的好資源。

          Another great resource that has a few more sections than just news, such as tutorials, demos, tools etc. Another great resource which is worth putting in your RSS reader.


          遊戲開發播客 (Game development podcasts)

          I love these guys. Geoff Blair and Matt Hackett have a real chatty style and they have great chemistry, which makes every one of their podcasts fun and interesting. One of their podcasts featured an interview with the creator of Impact JS Dominic Szablewski which was very interesting to us as Impact is our game development framework of choice. Really recommend this podcast, not only is it interesting to hear how they’re building their indie game shop Lost Decade Games but they have lots of great topics to talk about too.

          Though this isn’t targeted totally at HTML5, we’ve still found this an interesting and enjoyable podcast. They’re currently covering the huge topic of game design, which has been very relavant to us so far. Definitely worth a good listen.


          其他 Impact JS 資源 (Other Impact JS resources)

          這是一個很好的資源,致力於影響 JS 的開發。它包含了很多的框架,資源,教程和插件,包括遊戲的亮點。如果也在 Impact JS 上製作一些東西,或是有興趣,這是一個不錯的參考地方。

          This is a great resource dedicated to Impact JS developers. It includes lots of highlights including games made with the framework, resources, tutorials and even plugins that were made. If you do stuff in Impact JS too, or you’re interesting in it, this is a great place to visit.

          這是一本不錯的書。不知道有沒有發行中文版本。

          這是一個非常整潔的小本子,很容易閱讀和學習。

            This is a very neat and tidy little book on getting up and running with Impact JS very quickly. Jesse Freeman did a great job on making this very easy to read and learn. In a good weekend you can get up and running with Impact and have a fully functional game. We hope to do a full review soon.





            其他 JavaScript  資源 (Other JavaScript resources)

            姑且稱之為討論區吧,這裡的討論涵蓋了許多有趣的 JavaScript 主題。

            This is a great podcast that I’ve been listening to recently. Though it has nothing to do with game development as such, it’s a great podcast that covers many topics to do with JavaScript in general. Saying that, there was a recent podcast where they talk to a professional Flash game developer. They discussed if HTML5 could (or could not) replace Flash fully on the web. Worth a listen. 

            用一個好的、現代的方式來學習 JavaScript。有助於了解一些陌生的概念的語言。

              A great, modern way to learn JavaScript. It definitely helped to understand some of the strange concepts of the language. 

              這不適合初學者,但是可以了解到很多相當優秀的 JavaScript Parts。

                This book has nothing to do with game development as such, but seeing that HTML5 game development is mostly about JavaScript, this is still a great resource. It’s written by Douglas Crockford and it’s a pretty definitive resource on JavaScript. It’s certainly not for beginners, but it’s definitely helped me step up to being a better programmer.

                分類:HTML5 標籤:,

                解決 WordPress 國外 Theme 無法顯示中文標題的方法

                2012 年 04 月 13 日 發表留言

                最近在玩 WordPress ,找了一些國外的 Theme 來玩
                發現很多地方設定成中文顯示時都顯示不出來
                所以上網搜尋了一下

                主要參考文章:
                1.解决国外WordPress主题不显示中文标题的方法
                2.WordPress佈景主題中文亂碼解決方案

                以上二種方式可解大部分的中文顯示問題!!

                分類:Wordpress 標籤:

                OneNote 2010 需要安裝【桌面體驗功能】

                2011 年 07 月 26 日 發表留言

                安裝完 Office 2010 之後,首次執行 OneNote 2010 時,出現如下畫面:

                image

                【桌面體驗】功能安裝方式如下:

                1. 1.開啟 [伺服器管理員]:按一下 [開始],指向 [系統管理工具],然後按一下 [伺服器管理員]。或是在命令列上輸入 servermanager.msc 。
                2. [功能摘要] 區段中,按一下 [新增功能]image

                3. 選取 [桌面體驗] 核取方塊,然後按 [下一步]

                4. 按一下 [安裝] 完成精靈。

                分類:軟體, 辦公應用 標籤:

                【工具軟體】管理 Outlook 附件 OutlookAttachView

                2011 年 07 月 25 日 發表留言

                在長期使用 Microsoft Outlook 之後,郵件內的附件,通常都是造成整個【個人資料夾】肥大的兇手,或者當有需要查找附件時,操作上其實也很麻煩。

                今天看到 綠色工廠 Easylife Blog –  OutlookAttachView 1.71 – 附件格式瀏覽Outlook,快速找到檔案 這篇文章,測試了一下 OutlookAttachView 這個免費軟體,還真的不錯用。

                用途:

                1. 清理(刪除)不必要的、或是重複的附件,減少【個人資料夾】容量大小。
                2. 批量下載附件,方便備份和保存。(可使用郵件日期當成檔案日期)

                   例如:備份 Exchange 上的公用資料夾之後,可使用此工具一次性將附件備份存檔。

                官方網站上雖然沒有繁體中文的翻譯檔案,但是有簡體中文的檔案可以下載,只要用類似 ConvertZ 的簡繁翻譯軟體轉換一下即可。

                image

                解決ie9無法打開.mht的解法

                2011 年 06 月 30 日 1 則迴響

                這二天尋找IE9無法打開.mht的方法,在此找到一個可用的解法

                http://www.jb51.net/softjc/26196.html (為簡體網站,廣告有點多,要小心)

                測試過後,確實可用。

                以下程式碼,請複製,存成 .reg。(例如:IE9-mht.reg)

                再 DoubleClick 執行即可。

                REGEDIT4 
                [HKEY_CLASSES_ROOT\.mht] 
                @="mhtmlfile" 
                "Content Type"="message/rfc822" 
                [HKEY_CLASSES_ROOT\.mht\ShellEx] 
                [HKEY_CLASSES_ROOT\.mht\ShellEx\{BB2E617C-0920-11d1-9A0B-00C04FC2D6C1}] 
                @="{EAB841A0-9550-11cf-8C16-00805F1408F3}" 
                [HKEY_CLASSES_ROOT\mhtmlfile] 
                @="MHTML Document" 
                [HKEY_CLASSES_ROOT\mhtmlfile\BrowseInPlace] 
                @="" 
                [HKEY_CLASSES_ROOT\mhtmlfile\CLSID] 
                @="{3050F3D9-98B5-11CF-BB82-00AA00BDCE0B}" 
                [HKEY_CLASSES_ROOT\mhtmlfile\DefaultIcon] 
                @="C: \\Program Files \\Internet Explorer \\iexplore.exe,22" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell] 
                @="opennew" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\open] 
                @="Open in S&ame Window" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\open\command] 
                @="\"C: \\Program Files \\Internet Explorer \\iexplore.exe\" -nohome" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\open\ddeexec] 
                @="\"[url= file://%251/]file://%1\",,-1[/url],,,,," 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\open\ddeexec\Application] 
                @="IExplore" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\open\ddeexec\Topic] 
                @="WWW_OpenURL" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\opennew] 
                @="&Open" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\opennew\command] 
                @="\"C: \\Program Files \\Internet Explorer \\iexplore.exe\" %1" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\opennew\ddeexec] 
                @="\"[url= file://%251/]file://%1\",,-1[/url],,,,," 
                "NoActivateHandler"="" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\opennew\ddeexec\Application] 
                @="IExplore" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\opennew\ddeexec\IfExec] 
                @="*" 
                [HKEY_CLASSES_ROOT\mhtmlfile\shell\opennew\ddeexec\Topic] 
                @="WWW_OpenURLNewWindow"
                分類:軟體, 辦公應用 標籤:,

                【HTC Desire HD】第一次刷ROM紀錄及機器達人參考文章

                2011 年 01 月 28 日 發表留言

                HTC Desire HD 買了二週了(1/12晚上購買),終於在第14天(1/25),還是忍不住地把一些台哥大的內建程式拿掉了。

                原因大致如下:

                • 這些台哥大的客製程式,我的使用機率實在是很低。除了剛買來時,興致勃勃地點開來看之外,後來根本沒興趣去打開。例如:「部落城市」、「match 一系列」、「MY專區」、「MoFun」…等等。
                • 明明就沒去開啟這些程式,他還是會自動執行,即使裝了各種 Task Killer 類的任務管理工具也都一樣。
                • 不但吃記憶體,而且還消耗電池,DHD的螢幕4.3吋已經夠耗電了。

                所以也開始查找一些 HTC刷ROM or 刷機 的文章的必經之路。

                網路上可以找到很多介紹HTC刷ROM/刷機的相關文章,但是看來看去,還是覺得 機器達人 寫的文章比較完整,所以也開始照表操課般的開始刷ROM之旅。

                主要參考文章Desire HD機器達人特調ROM – from 機器達人

                機器達人 的文章寫得很好,詳細的操作和觀念介紹,而且圖文並茂。

                我也是按照上面文章內介紹的相關連結,一篇又一篇的文章先打開,從頭看過,再一步一步操作完成。其實照表操作並不會很難,即使不去仔細了解到底為甚麼。

                PS. 刷完之後當天,我也把一些任務管理工具都刪除了,到現在第三天(1/28),只沖過一次電池,就是昨天晚上。若是之前的話,應該是早早沒電,大約也要沖滿三次電了。

                擔心下次需要使用時,會找不到相關文章,畢竟我應該不可能經常刷ROM。

                所以在此作一下簡單的紀錄和整理。

                一、首先,要先下載幾個檔案:

                二、再來要手機端要安裝幾個應用程式

                三、將相關軟體放到手機的記憶卡上

                1. 利用 Android Manager WiFi 將PC端下載好的DHD.zip、DHD_recovery.zipDesire_HD_1.37.921.1-1_AndroidMan.zip 上傳到手機的記憶卡的根目錄下。
                2. 解壓縮 DHD.zip 到記憶卡根目錄的DHD目錄下。(我是使用ES文件瀏覽器,選擇-解壓縮到此,會自動建立DHD目錄)
                3. 解壓縮 DHD_recovery.zip 到記憶卡根目錄下的DHD目錄下。
                4. Desire_HD_1.37.921.1-1_AndroidMan.zip 檔案比較大,上傳到記憶卡會比較久。

                以上列出的所有檔案,請自行開啟文章連結和下載。

                再來就是打開 Desire HD機器達人特調ROM,並按照文章中的事前準備介紹和順序,一一打開相關文章,再照表操課即可。

                文章分類:

                觀念部分:(1.2.3 建議先讀)
                1. Desire HD用戶導讀建議
                2. 何謂root
                3. 何謂Recovery Partition
                4. ENG S-OFF、Radio S-OFF、CID差異說明
                基本操作:
                1. 如何取得Android SDK並使用adb指令 —- 基本工具和常用指令[adb devices]、[adb shell]、[su]、[exit]。
                2. VISIONary+安裝與教學 —- 主要是為了取得 Root 權限,所有選項都別打勾,僅用到Temproot now
                備份相關:(動手之前,先做好備份總沒錯)
                1. 如何S-OFF/S-ON Desire HD — 先做到如何S-OFF完畢。
                2. 如何使用ClockworkMod recovery備份與還原ROM — 選擇 Backup:對ROM做一份比較完整的備份。
                3. 書籤排序與備份 (Bookmark Sort & Backup)
                4. 短信備份+還原(SMS Backup+)
                5. Titanium Backup(鈦備份)教學 –選擇「備份所有的應用程式與系統資料」
                事前準備:
                1. 如何替Desire HD寫入ClockworkMod recovery
                2. Desire HD如何Radio S-OFF + Super-CID

                補充註記

                如何進入HBOOT的畫面

                如何S-OFF/S-ON Desire HD 文章的後面,找到 如何檢查現在是S-OFF還是S-ON 這一標題,後段的圖文就是。

                簡單操作:(修改自如何S-OFF/S-ON Desire HD 內,圖形畫面請參考原文)

                1. 按住「電源鍵」久一點,出現「電源選項」的畫面時,按「重新啟動」
                2. 出現詢問「要重新啟動手機嗎?」的畫面時,按住【低音量鍵(小聲)】不放,在點選「重新啟動」,【低音量鍵】還是要持續不放開哦!
                3. 重新啟動後,Desire HD會進入HBOOT的畫面 (此時再放開【低音量鍵】)

                以上這一段,我在 機器達人 的文章堆中找很久才找到 (>0<)

                其他 機器達人 參考文章:

                分類:刷ROM 標籤:

                讓 HTC Desire HD 更省電的相關文章

                2011 年 01 月 21 日 發表留言

                入手HTC Desire HD 一星期了,一堆工具一些桌面裝了又刪,刪了又裝,可能就差沒有刷ROM了。

                而這二天一直覺得很耗電,有時候還很卡,所以上網找了一些和省電有關的文章。並記錄在這。

                一、HTC Desire HD 省電方法

                介紹 Battery Life 、 Advanced Task Killer、ES任務管理器、JuiceDefend

                二、如何讓 Desire 更省電 (from 手機館討論區>>HTC>>Desire>>精 華 區>>)

                介紹 Quick Settings、ES任務管理器

                基本設定相關:(截錄部分文章,應該是 Desire 的設定吧)

                5.其餘設定

                • 設定>音效與顯示>有聲選項關閉
                • 設定>音效與顯示>亮度(關閉自動亮度,亮度盡量調低)
                • 設定>帳號與同步處理>取消自動同步的勾
                • 設定>關於手機>軟體更新>自動搜尋關閉

                6.設定->無線與網路->行動網路->網路模式
                   平時請使用僅GSM,需要用到數據連線時再改成GSM/WCDMA自動模式
                7.設定->日期與時間->把「自動」的勾取消
                8.設定->撥號->把「手機廣播」的勾取消

                三、Desire HD 完全省電教程(簡體) (from Android 中文論壇 » HTC Desire HD 論壇)

                介紹 ROM、LauncherPro、墨跡天氣、一鍵鎖屏…之類的工具。

                基本設定相關:(截錄部分文章,已轉為繁體)

                • menu->設置-》位置-》關閉GPS,到要用這類軟件前再手動打開GPS,那樣搜星也快。
                • menu->設置-》聲音-》反饋時震動 去掉勾。
                • menu->設置-》語言和鍵盤-》文本設置 Touch Input -》文字輸入-》按鍵時震動 去掉勾。
                  亮度,待機可自行設定(我是自動亮度,30秒),亮度越低,待機時間越短,自然越省電。
                • menu->設置-》屏幕
                  桌面不用動態的,換成靜態的。

                四、解除Desire HD封印(root)後呢? 省電調教大補丸 (from 挨踢路人甲)

                有詳細介紹 SetCPU、SuperPower 的教學和設定。

                分類:刷ROM 標籤:
                %d 位部落客按了讚: