At this point, you can’t turn another way.
Mobile application market is fresh, exciting, and sky-rocket growth IT market in last decade. Developer and designer can express their skill and idea to million of end-user faster and get return of their investment faster.
Just think about you were walking in shopping mall. Did you see those kids with iPad or Smartphone in their hand? Sure, they don’t your buyer, their family did.
So you have an idea, and going to create your app. Doesn’t matter it is game or utility app, you have to choose a mobile platform to start.
For example, Apple iOS, you need to learn how to code with Objective-C, understand Cocoa2D, get familiar with XCode, and yes, own an iOS device for test your app.
Same for Google Android, Java programming skill is needed, understand to work with Eclipse and prepare your app to be tested with tons of Android devices.
Yes, it makes sense.
But in practical, people doesn’t use only iOS device. We have a rapid-growing Android user around the world, and also BlackBerry, Windows Phone, Amazon Kindle, and much more. A lot of choice for user to choose.
Yes, a number of your application user would be limited, according to mobile platform you are going to choose.
That is, the truth exposed. If you choose a mobile platform to start. You will likely lost chance in another platform, and need to start from almost ground up when you need to expand your application to them.
The real world is always real
So do I, because I realized the mobile application market doesn’t be occupied by only one platform.
The truth is, there are not just Apple iOS and Google Android. Microsoft is coming out with their Windows Phone platform (You would better take a look at Surface, it’s so awesome). So you have 3 different platforms to keep in touch if you need to deliver your product or service to almost mobile user in this planet.
That took me to alternate choice, the cross platform mobile application technology, somebody called them as Hybrid mobile application. This kind of mobile application development technology will focus on universal code-based, then provides a publishing solution to deliver as native application for each mobile platform.
It increased capability to respond to customer’s need and also decrease the cost.
2 Technologies I have chosen, the first is Adobe AIR, which can deliver your Flash project into popular mobile platform as mobile application.
The second is PhoneGap, the technology that can deliver your power of web (Yes, it is. HTML, CSS, and Javascript) into mobile application.
For PhoneGap at the moment, it’s hot. Think about you have HTML/CSS/Javascript skill but you can use them to design user interface, implement business logic, and then publish it as mobile application. Cool, right?
So if we are talking about using web technology to develop mobile application. Adobe Dreamweaver comes to take my major tools, especially CS6.
Why? Let me explain you in 3 ideas.
1. HTML5 and CSS3
Ah. The most 2 exciting web technologies you should get familiar with.
Both can be coding with any text editor. it doesn’t matter you are going to use NotePad (Windows) or TextEdit (Mac). It will work.
But when your project goes more complex, 50+ of function declaration rises, and 100+ of declared CSS rules. Any mis-typing can lead to the great headache and increate project’s time cost.
No one need to fall into that situation. At least, it would better if we can avoid it.
Adobe Dreamweaver CS6 has been added feature support for HTML5 and CSS3. It supports them in panel (CSS3) and code hinting (HTML5 & CSS3), which makes web coding more productive, less mis-typing, and easier to find the error’s origin.
Web Motion with CSS Transition
CSS Transition exposed in CSS3. It comes with fantastic animation that can applied to HTML element. If you don’t try CSS Transition yet, try this one.
Adobe Dreamweaver CS6 make working on CSS Transition more easier in GUI panel. You can applied it to any HTML element and configure variable via dialog instead of coding directly in CSS file.
After use it for few projects, I’m sure you would love it too!
Web Font’s time
If you already using Web Font in your project. You will know how much of coding you have to handle.
Taking Web Font into your stylesheet takes time. But as you expect, you can import Web Font into your project with Adobe Dreamweaver CS6’s Web Font panel. After imported, you can use Web Font as a normal font-family which you already familiar.
It just like you ask Adobe Dreamweaver to import your Web Font file, and then just use it in your project.
If you want to see Adobe Dreamweaver CS6’s Web Font in action, click to see this video (Thai language).
2. More JQuery Mobile support in design and coding
ํYou will realize. Web technology is more “open” than native platform.
Not surprise. Because we can search and get almost technique to build beautiful web element, such as user interface, around internet. A lot of people build framework and share them, some of us call it as Web UI Framework, so it is very easy to pick a framework and start building mobile application with it.
In first time, they look like born to be used in web application for mobile device, but after PhoneGap, we can use it as UI framework for mobile application project.
JQuery Mobile framework is a popular one.
Theming for JQuery Mobile
In Adobe Creative Suite 6, Adobe Firework CS6 comes to take place of JQM’s theme author tool. It allows you to use visual graphic skill to define unique theme for each JQM component, then export to be used in Adobe Dreamweaver.
In designing theme, you can imagine about toolbar, button, icon, web-form and almost component that JQM provides for you.
When I include my theme into project, just open JQuery Mobile Swatch Panel, then click on the component I need to assign style. The swatch panel will react by show available theme option to choose. Just feel free to try each, Click-by-Click.
No need to drill down into code view, type syntax and guessing for correct theme’s name. 🙂
Always get fresh JQM
One of the most challenge for web creator today might be: how could they get and utilize the latest version of framework and library. Even JQuery Mobile still be counted.
In Adobe Dreamweaver CS6, instead to create new project, then remove “old” version of JQM library which came with Adobe Dreamweaver to replace with new version. Now in CS6, I can choose the latest version that I just downloaded it into desktop.
You can still choose the version which came with Adobe Dreamweaver, but I’m sure that version is outdate at the moment you’re reading this article. So if you’re going to start new JQM project. Just grab the latest version from JQM website and choose it for your project instead.
Work like a charm!
3. Break the limit with PhoneGap Build
Building the mobile application
If you are familiar, or heard about “publishing” mobile application before. You will know people need to prepare their machine (PC or Laptop) to be ready to build code project into application file.
For example, Apple iOS, need a Mac (Yes, it is). You also need to download and setup XCode with iOS SDK.
If you need to build Android application, you need to download and setup Android SDK and It always better if you download and setup Eclipse as GUI tools.
These kind of activities will depend on each mobile platform. But you will notice the pattern: we have to download and setup software to build mobile application.
Time cost. Healthy cost. (In time that you found incredible system’s error)
Then PhoneGap thinks different
So that might be the great challenge for PhoneGap team (I think it is challenging all developer around the world). How could they let developer and designer focus on content and idea, not hang around the day with setting up development environment?
That is, PhoneGap Build.
PhoneGap Build is an online service. You can registered and upload your web project (that you already design as mobile app) in zip file to let it “build” in server to get mobile application file.
It sounds nice, doen’t it? But as it borns as web application that you still need to zip your project, create configuration file, sign-in to server, select and choose zip file to upload and going around user panel to download your application file…
Still need time cost and window swapping mania.
But in Adobe Dreamweaver CS6, these workflow has integrated directly and more seamlessly with PhoneGap Build panel!
For example:
I start a web project in Adobe Dreamweaver, as normal web project, but I open PhoneGap Build Setting, fill my PhoneGap Build account (you can use your Adobe ID) to be used in connecting with PhoneGap Build service.
Heaven start here.
Whenever I want to build my web project into mobile application file, for testing or deliver to customer for review, I just open PhoneGap Build panel and use it to upload to my PhoneGap Build account.
Adobe Dreamweaver CS6 will create PhoneGap project setting file (XML, describe about name, ID, owner, etc.) and upload your web project to server, then start the build queue.
What you have to do is: just wait (take a cup of coffee is ok).
After build queue finished. If a mobile platform need resource or there is error, it would be described in panel too.
PhoneGap Build panel supports almost popular mobile platform in time I am writing this article, such as iOS, Android, BlackBerry, Symbian and WebOS (In website, PhoneGap team added support for Windows Phone already. I think updates pack will add this one to Adobe Dreamweaver’s panel).
Easier to deliver
The most interesting thing in PhoneGap Build panel is QR Code. It will be created for each application file in each platform.
What would it used to?
You can send this QR code to your customer or tester to test your app!
They can use QR code reader to read it and then the device would be took to download your application file in your PhoneGap Build account.
I love this feature a lot. You know (or are going to know) how hard to deliver mobile application to your customer for testing. Then you will love PhoneGap Build’s QR Code.
Conclusion
As you realized, develop a mobile application with web technology is an alternative solution from native way.
It’s open. It’s growing rapidly. Yes, it’s free.
So with tons of resource around the internet, select a good tools will give you better result when you start and work on any mobile project.
For me, Adobe Dreamweaver CS6 make me feel more comfortable and less headache. My team’s productive get higher and we can focus on idea more than finding and fixing minor trouble we often found in coding with web technology.
I think that’s great!
If you interest to try Adobe Dreamweaver CS6 with your project, education, or your personal work. Try 30-day trial edition.
For Adobe Dreamweaver Fans, you can follow up my blog and Facebook fan page (It’s Thai but we also post in English in last 5 months). Any question can message to me via [email protected].
So enjoy mobile application development!