Friday, March 8, 2013

Mobile Development Options - Part 3: Mobile Web Development with Dreamweaver

By Mark Giglione


Mobile Development Options - Part 3: Mobile Web Development with Dreamweaver


Adobe Dreamweaver versions CS5.x thru CS6.x provide tools for creating and editing web sites targeted for mobile devices.  A mobile web site is styled and behaves as if it were a native mobile application but is actually a web site that can be viewed on different mobile devices. A mobile web site does not need to be downloaded but is viewable across mobile device platforms using each device’s mobile web browser.  

As an additional option, a standalone native mobile device ‘app’ (typically targeted for iOS or Android) can be created with Dreamweaver by embedding a mobile web site (or a mobile web application) within a pre-created “native code” wrapper which is then compiled into a native application.  The compiled application can then be deployed using a channel such as iTunes or the Android marketplace.  

A major advantage of building a web site or web application optimized for mobile devices is that development is accomplished using HTML, Javascript and CSS rather than with a compiled native code language such as Objective-C or Java.  While not required, typically a mobile web browser optimized Javascript library is used to simplify the creation of the Graphical User Interface (GUI) elements and behaviors.  While there are limitations to this approach compared to natively coded applications, web tool based development is quite suitable for a wide range of projects and may be easier to master for novice mobile developers.

Dreamweaver currently supports jQuery Mobile and PhoneGap directly (though PhoneGap will work with other mobile Javascript libraries as well).  jQuery Mobile is a Javascript framework for developing mobile device optimized web applications and web sites. PhoneGap works by embedding a mobile web application (which can be built with jQuery Mobile) in a native (PhoneGap API supporting) project shell tailored for each target mobile platform. The latest versions of Adobe Dreamweaver provide integrated tools that can be used to create jQuery Mobile and/or PhoneGap based projects. However, both PhoneGap and jQuery Mobile are Open Source and can be used independently of Dreamweaver.  

Getting started with jQuery Mobile and Adobe Dreamweaver CS5.5
http://www.adobe.com/newsletters/inspire/may2011/articles/article4/index.html?trackingid=IOZGV

Building a mobile app with PhoneGap and Dreamweaver (7 part series)
http://www.adobe.com/devnet/dreamweaver/articles/phonegap-mobile-app-pt1.html   

Build mobile apps and websites with Dreamweaver (CS5.5)
http://www.adobe.com/devnet/dreamweaver/dreamweaver-mobile.html

Enhanced jQuery mobile support (CS6)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/enhanced-jquery-mobile-support/

PhoneGap
http://phonegap.com/

jQuery Mobile
http://jquerymobile.com/

Scripting the Web - Part 1: Introduction to JavaScript
http://www.adobe.com/devnet/dreamweaver/articles/introduction-to-javascript.html

Scripting the Web - Part 2: Introduction to jQuery
http://www.adobe.com/devnet/dreamweaver/articles/introduction-to-jquery.html