Campus Party Berlin: Start coding now #FirefoxOSChallenge

Tags:

We recently blogged about the Firefox OS challenge where unlike most hackathons, you can start coding before Campus Party Berlin (where the hackathon submissions will be assessed and the prizes will be handed out). Having longer than 24, 36 or 48 hours to create your idea means that you will learn more and have a better app at the end.

As we’re always looking to make life easy for developers, we thought we would collate all the relevant information about Firefox OS into one handy bite-sized blog post!

First the most important thing, the registration page! You need to sign up here first otherwise you won’t be eligible.

Once signed up, it’s time to get up to speed on Firefox OS! First thing, Firefox OS is based on web technologies and so apps and services need to be based on technologies like HTML5, Javascript and CSS3.

Our three links are some of the most important! The Official Firefox OS Challenge google group (for information and technical support), how to setup Firefox OS on your desktop (for testing your apps) and the Mozilla Gaia Wiki (for a wealth of information about the OS), this will enable you to test your app before installing it on a Firefox OS device at Campus Party. If you want to build Firefox OS from scratch, you can! Our friends at The Lab have created a site all about compiling Firefox OS from source and even have videos of some of the hacks they’ve made!

Once you have setup Firefox OS, our next step is to help you get up to speed on those technologies used by Firefox OS, we’ve compiled a list of useful links on the technology behind Firefox OS:

HTML5 primer:
https://developer.mozilla.org/en-US/learn/html5

CSS3:
Animations, transformations are now possible just using CSS!
https://developer.mozilla.org/en-US/demos/tag/tech:css3

Canvas:
Allows you to create animations and more!
https://developer.mozilla.org/en-US/docs/Canvas_tutorial

WebGL:
Create cutting edge 3D graphics, straight in the browser
http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/

Local Storage:
Does what it says on the tin! Allows your web app to store content locally
http://www.html5rocks.com/en/features/storage

Geolocation:
Enable location based services!
https://developer.mozilla.org/en-US/docs/Using_geolocation

File API:
Let your user add files and folders to your app (including drag and drop!)
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Hopefully that’s enough to get you started, we’ll be adding more tips and tricks soon! Don’t forget to tweet about what you are making, the official hashtag is #FirefoxOSChallenge