Mozilla Demo Studio 巨獻

Dev Derby

Dev Derby on Hiatus

The Dev Derby is on hiatus, but will return soon.

最近的挑戰

  1. 檔案 API

    七月

    找不到檔案

    The File API lets you read the contents of files submitted by your users, making natural and familiar data operations possible.

  2. getUserMedia

    五月

    行動!

    The getUserMedia function lets you access (with permission) the cameras and microphones of your users. No plugins needed! What can you do once you have this media? The possibilities are endless.

  3. WebGL II

    六月

    Twice the 3D!

    WebGL 為網路世界注入了 OpenGL 創造 3D 互動圖形的威力,無需任何外掛程式。

Dev Derby on Hiatus

The Dev Derby is on hiatus while we work on revamping the contest series. When it returns, you may see some changes in the contest format. However, the Dev Derby mission remains unchanged: to provide a platform that helps web developers learn, share, and push the web forward.

See you soon!

先前的 Dev Derby 挑戰

  • 2013 年七月 檔案 API

    The File API lets you read the contents of files submitted by your users, making natural and familiar data operations possible.

  • 2013 年六月 WebGL II

    WebGL 為網路世界注入了 OpenGL 創造 3D 互動圖形的威力,無需任何外掛程式。

  • 2013 年五月 getUserMedia

    The getUserMedia function lets you access (with permission) the cameras and microphones of your users. No plugins needed! What can you do once you have this media? The possibilities are endless.

  • 2013 年四月 Web Workers

    Web Workers make it easy for you to run scripts in the background. By using Web Workers, you can create dazzling user interfaces that are not hindered by even the most computationally-intensive tasks.

  • 2013 年三月 Mobile

    行動網路的重要性一天比一天要更高。除了創造力不足,沒有東西能夠限制您。您能夠為使用者構築多麼令人驚艷的使用體驗呢?

  • 2013 年二月 多點觸控

    觸控事件 API 可以讓您在可支援同時追蹤多個觸碰事件的設備上使用這樣功能。適用於建立複雜的遊戲,且支援雙指縮放等等。使用多點觸控,您的應用程序可以回應使用者所期待的所有互動效果。

  • 2013 年一月 拖曳

    拖放 API 為 Web 帶來歷史悠久的互動方式,使得使用者體驗更有豐富、自然且孰悉的可能性。

  • 2012 年十二月 離線

    With the maturing offline capabilities of the open Web, you can build apps that work with or without an Internet connection. With offline technologies, you can better support travelers and mobile users, improve performance, and more.

  • 2012 年十一月 全螢幕 API

    有了全螢幕 API,您可以跳脫瀏覽器視窗的侷限,甚至可偵測全螢幕狀態變化,設計出專屬的全螢幕頁面。這真是太棒了!

  • 2012 年十月 CSS 媒體選擇 2

    目前 CSS 媒體選擇是常見的行動裝置適應性網頁設計工具。W3C 也相當推薦這個方法!這個語法可以告訴您除了網頁寬度外的更多資訊,讓您設定更多網頁樣式。您還可以使用 CSS 媒體選擇器做什麼?

  • 2012 年九月 地理位置資訊 2

    透過地理位置資訊,您將可以在使用者允許的狀況下取得使用者的實體位置,並使用此資訊擴充瀏覽體驗,或是啟用先進的地理感知功能。

  • 2012 年八月 Camera API

    使用 Camera API 可在取得授權後操作手機的鏡頭,例如使用者可以使用Camera API 拍照和上傳照片。

  • 2012 年七月 無 JavaScript

    為 Web 創造豐富的使用者經驗未曾容易。現今開放的 Web 標準將許多強大的功能變得易如反掌。使用 CSS 的動畫網頁、使用HTML的使用者輸入驗證等等。還有什麼是 JavaScript 不能做的?

  • 2012 年六月 WebGL

    WebGL 為網路世界注入了 OpenGL 創造 3D 互動圖形的威力,無需任何外掛程式。

  • 2012 年五月 WebSockets API

    你可以藉由使用 Websocket API 與通訊協定建立一個瀏覽器和伺服器之間的雙向連結,適用於動態和即時的資料傳輸。再也不需要 server polling 了!

  • 2012 年四月 音訊

    HTML5 的 audio 元素讓您可以在網頁內建音效,無需透過使用者的外掛程式。

  • 2012 年三月 CSS 3D 變形 (Transforms)

    CSS 3D 變形功能讓 CSS 變形變得更強,允許元素在三維空間當中變形。

  • 2012 年二月 觸控事件

    透過在使用者與觸控螢幕互動時提供的正確回應,觸控事件讓您可以打造出更能回應使用者的網站與應用程式。

  • 2012 年一月 方位偵測

    在 HTML5 中裝置方向的功能能利用加速度計取得裝置動作以及方向的資訊

  • 2011 年十二月 IndexedDB

    IndexedDB 讓網頁應用程式可以在使用者本地端儲存更大量的結構化資料,以供不論是線上或離線時更快速的存取。

  • 2011 年十一月 Canvas

    Canvas lets you paint the Web using JavaScript to render 2D shapes, bitmapped images, and advanced graphical effects. Each <canvas> element provides a graphics context with its own state and methods that make it easy to control and draw in.

  • 2011 年十月 媒體選擇(Media Queries)

    CSS 媒體選擇將可以讓網頁開發者建立適應不同顯示裝置尺寸的網頁設計,訂製在桌上型電腦、行動裝置,或是平板電腦下的使用者體驗。

  • 2011 年九月 地理位置資訊

    透過地理位置資訊,您將可以在使用者允許的狀況下取得使用者的實體位置,並使用此資訊擴充瀏覽體驗,或是啟用先進的地理感知功能。

  • 2011 年八月 歷史 API

    現代瀏覽器的歷史 API 將可以不需要點下上一頁按鈕就能修改文件內容,並可以將網頁應用程式加入書籤。

  • 2011 年七月 HTML5 <video>

    HTML5 的 <video> 元素讓您可以嵌入並在網頁當中直接控制,不需要交給擴充套件就能播放視訊媒體。

  • 2011 年六月 CSS3 動畫

    CSS3 動畫可以讓您隨著時間修改屬性值,進而讓元素的位置或外觀不需要或只要一些簡單的 JavaScript 就可以變動,並可以有比變形更多的控制程度。

先前的得獎者

miniPaint

miniPaint viliusl

Online graphics editing tool using HTML5.

看看 Demo

Prizes

  1. Android mobile device

    Winner gets an Android mobile device from Samsung.

  2. Rickshaw laptop bag

    Runner-up gets a hand-crafted laptop messenger bag from Rickshaw.

  3. MDN t-shirt

    3rd place gets a limited edition MDN t-shirt to show off their geek cred.

資源