« | Blog Home | »

DIY Mobile Programming: Get Started with HTML, CSS, and Javascript

“If you can build your app with HTML, CSS & JavaScript, then you probably should.” – @jonathanstark #wdx (via @garazi)

Some friends recently asked on Twitter what was the best way to start programming mobile apps with Nokia’s Qt, as they found that it was not as easy as the publicity from Nokia had purported Qt to be.

I replied: “When devs say a ‘framework’ is “easy” it is code for “It won’t take 15 months of 10 hour days & make you want to KILL yourself.”

Anyone who has developed an application, be it for the desktop or mobile, can tell you that framework makes it so much easier, but easy is a relative term. What easy may mean is that development time is reduced from 6 months to 6 weeks or less. Still not that easy, but easier and a big relief.
For folks who want to learn to create and develop their own mobile apps, but don’t have much programming experience or little at all, I would like to suggest starting with developing a simple app in HTML, CSS, and Javascript to get your feet wet and see if you can get your idea up and running either as a mobile web app or as a native mobile app that is coded in HTML, CSS, and Javascript.
As I wrote in DIY Dev: Program or be Programmed a couple of weeks back, there comes a time when your own natural diy urge or curiosity or frustration with a lack of an app drives one to learn how to program a computer, server, or mobile phone so that the itch has been scratched.
Rather than get bogged down in the debate between mobile web apps and native apps, let me give a few links to resources out there to help get you started on creating your own mobile HTML, CSS, Javascript app be it for the mobile web or a native app:
Cross Platform HTML, CSS, Javascript Mobile Development Frameworks:
PhoneGap – http://www.phonegap.com/
Sencha – http://www.sencha.com/
JQuery Mobile – http://jquerymobile.com/
Qt Quick – http://qt.nokia.com/products/qt-quick/
Tutorials and Presentations:
Building Mobile Apps with HTML, CSS, and JavaScript
HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript
Forum Nokia on Developing for the Mobile Web
Tips and Tricks for developing Mobile Widgets
Books:
Programming the Mobile Web
Beginning Smartphone Web Development: Building Javascript, CSS, HTML and Ajax-Based Applications
Building Android Apps with HTML, CSS, and JavaScript
Have fun, get coding, and send us/ let’s us know what you have created.
*******
Ms. Jen’s DIY Programming Series:
DIY Dev: Program or be Programmed
DIY Mobile Programming: Get Started with HTML, CSS, and Javascript
DIY Programming: Should HTML be Required for Literacy in the 21st Century?

2 Responses to “DIY Mobile Programming: Get Started with HTML, CSS, and Javascript”

  1. Rahul Nair

    While frameworks are a nice idea in theory they often do not have the exact specific thing that you had in find which results in you spending a lot of time hacking around the framework. I’d recommend that if you are making a simple first webapp without too much complexity (which I know is relative) you should at least consider going framework-less and just using Google to find the bits you need
    For example I built my Famous Food site (http://www.famousfood.us/) in 2 weeks of spare time without using any frameworks. It is my first ever webapp and is fully cross-platform and mobile optimized.

  2. Arthur T. Murray

    The subject matter “DIY Mobile Programming” is very important to me because I am offering people a JavaScript artificial intelligence at http://www.scn.org/~mentifex/AiMind.html that they may convert to a mobile app for AI evolution. I want to try to program the AiApp myself, but I fear that it could take me many months just to learn how to create a mobile app. Since I am more interested in AI Evolution than in marketing AI in an app store, I figure that I should give away the basic AI algorithms and try to instigate a race for people to capitalize on releasing their own DIY mobile AI apps. Thank you for posting such right-on-target information.