Adobe html to app

Create web apps for mobile devices using Dreamweaver

Dreamweaver’s integration with jQuery Mobile helps you quickly design a web application that works on most mobile devices while adapting itself to the dimensions of the device.

Creating a web application using jQuery Mobile

Open a jQuery Mobile starter page, or create a HTML5 page

Use the jQuery Mobile starter pages in Dreamweaver to create your application. Alternatively, you can start creating your web application with a new HTML5 page.

The jQuery Mobile starter pages include the HTML, CSS, JavaScript, and image files that help you get started with designing your application. You can use the CSS and JavaScript files hosted on a CDN, your own server, or files installed along with Dreamweaver.

To identify the location of the linked files, see the and tags in code view.

Insert jQuery Mobile components from the Insert panel

Insert jQuery Mobile components from the Insert panel into the HTML page. The jQuery Mobile CSS and JavaScript files define the style and behavior of the components.

About CDNs and local jQuery Mobile files

CDNs

A CDN (content delivery network) is a computer network containing copies of data placed at various points in the network. When you create a web application using the URL for a CDN, the CSS and JavaScript files specified in the URL are used for your application. By default, Dreamweaver uses the jQuery Mobile CDN.

Alternatively, you can use URLs of CDNs from other sites such as Microsoft and Google. In code view, edit the server location of the CSS and JavaScript files specified in the and tags.

The files downloaded from a CDN are read-only.

Local jQuery Mobile files

When you install Dreamweaver, a copy of the jQuery Mobile files is copied to your computer. The HTML page that opens when you choose the jQuery Mobile (local) starter page is linked to local CSS, JavaScript, and image files.

Starter pages for jQuery Mobile

Dreamweaver provides you with the following starter pages to create your web application:

jQuery Mobile (CDN)

Use this starter page if you plan to host the jQuery Mobile library on a CDN.

jQuery Mobile (Local)

Use this starter page if you plan to host the assets yourself, or if your application doesn’t rely on an Internet connection.

jQuery Mobile (PhoneGap)

Use this starter page if your web application, when deployed as a mobile application, accesses features native to mobile devices. For more information, see Packaging web applications.

Use starter pages to create an application for mobile devices

• Page From Sample > Mobile Starters > jQuery Mobile (CDN).
• Page From Sample > Mobile Starters > jQuery Mobile (Local).

Click Create. In the page that appears, enable Follow Links Continuously (View > Live View Options), and switch to Live View. Use the navigation components to test how the application works. Use the options in the Multiscreen menu to see how the design is displayed in devices with various dimensions. Disable Live view, and switch back to the Design view.

In the Insert panel (Window > Insert), select jQuery Mobile. The components that you can add to the web application are displayed.

In Design view, place the cursor at the location where you want to insert the component, and click the component in the Insert Panel. In the dialog box that appears, customize the components using the options.

(jQuery Mobile — Local) After you save the HTML file, the jQuery Mobile files, including image files, are copied to a folder in the HTML file location.

Preview the page in Live view. Some of the CSS classes are applied only in the Live view.

Create a web application for mobile devices from a new page

The Page component acts as the container for all the other jQuery Mobile components. Add the Page component before you proceed to insert other components.

Select Blank Page > HTML. Some of the jQuery Mobile components use HTML5-specific attributes. To ensure HTML5 compliance during validation, ensure that you select HTML5 as your DocType.

In the Insert panel (Window > Insert), select jQuery Mobile from the menu. The jQuery Mobile components appear in the panel.

If you want to connect to a remote CDN server hosting the jQuery Mobile files. Use the default option for the jQuery site if you have not configured a site containing jQuery Mobile files. You can also choose to use other CDN servers.

The files that are available in Dreamweaver are displayed. To specify a different folder, click Browse, and navigate to the folder containing the jQuery Mobile files. The CSS and JavaScript files are copied to a local temp directory until you save the HTML file to your computer. After you save the HTML file, all associated jQuery Mobile and image files are copied to a folder in the site’s root folder.

In Design view, place the cursor at the location where you want to insert the component, and click the component in the Insert Panel. In the dialog box that appears, customize the components using the options.

Preview the page in Live view. Some of the CSS classes are applied only in the Live view.

Using custom files and folders

You can choose to create custom CSS and JS files for your application. Ensure that your files are named jquery.mobile.js, jquery.mobile.css, and jquery.js

If you are using custom folders, do the following:

1. Download the uncompressed version of the jQuery 1.5 core library from http://docs.jquery.com/Downloading_jQuery#Download_jQuery.
2. Save the file to the core folder containing the other resources.

More like this

Источник

Create and publish HTML5 Canvas documents in Animate

Canvas is a new element in HTML5, which provides APIs that allow you to dynamically generate and render graphics, charts, images, and animation. The presence of the Canvas API for HTML5, strengthens the HTML5 platform by providing two-dimensional drawing capabilities. These capabilities are supported on most modern operating systems and browsers.

Essentially, Canvas is a bitmap rendering engine, and the drawings are final and cannot be resized. Furthermore, objects drawn on Canvas are not part of the web page’s DOM.

Within a web page, you can add Canvas elements using the tag. These elements can then be enhanced using JavaScript to build interactivity. For more information, see this link.

The new HTML5 Canvas document-type

Animate enables you to create an HTML5 Canvas document with rich artwork, graphics, animations, and so on. A new document type (HTML5 Canvas) has been added to Animate that provides native support for creating rich and interactive HTML5 content. It means that you can use the traditional Animate timeline, workspace, and tools to create content, but produce HTML5 output. With a few simple clicks, you are ready to create an HTML5 Canvas doc and generate a fully functional output. To its end, within Animate, the document and publish options are preset to generate HTML5 output.

Animate is integrated with CreateJS, which enables rich interactive content on open web technologies via HTML5. Animate generates HTML and JavaScript for content (includes bitmaps, vectors, shapes, sounds, tweens, and so on) created on stage. The output can be run on any device or browser that supports HTML5 Canvas.

Animate and the Canvas API

Animate publishes to HTML5 by leveraging the Canvas API. Animate seamlessly translates objects created on stage in to their Canvas counterparts. By providing a 1-to-1 mapping of Animate features with the APIs within Canvas, Animate enables you to publish complex content to HTML5.

Creating an HTML5 Canvas document

To create an HTML5 Canvas document, do the following:

1. Select File >New to display the New Document dialog. Select the Advanced tab from the top of the screen and click the HTML5 Canvas option. This opens a new FLA with Publish Settings modified to produce HTML5 output.

You can now begin creating HTML5 content using the tools within Animate. As you begin working with the HTML5 Canvas document, you notice that certain features and tools are not supported and are disabled. This is because, Animate supports those features that are in-turn supported by the Canvas element within HTML5. For example, 3D transformations, dotted lines, bevel effects are not supported.

Adding interactivity in HTML5 Canvas document

Animate publishes HTML5 content using the CreateJS libraries. CreateJS is a suite of modular libraries and tools which enable rich interactive content on open web technologies via HTML5. The CreateJS suite comprises of: EaselJS, TweenJS, SoundJS, and PreloadJS. CreateJS converts content created on stage to HTML5 using these individual libraries to produce HTML and JavaScript output files. You can also manipulate this JavaScript file to enhance your content.

However, Animate allows you to add interactivity to objects on stage created for HTML5 Canvas from within. It means that you can actually add JavaScript code to individual objects on stage from within Animate and preview at author-time. In turn, Animate provides native support for JavaScript with useful features within the code-editor to help improve workflow efficiency of programmers.

You can choose individual frames and keyframes on the Timeline to add interactivity to your content. For an HTML5 Canvas document, you can add interactivity using JavaScript. For more information about writing JavaScript code, see this link.

JavaScript code can be written directly in the Actions panel, and it supports the following features while writing the JavaScript code:

Allows you to quickly insert and edit JavaScript code and without mistakes. As you type characters in the Actions Panel, you can see a list of candidates that possibly complete your entry.

Additionally, Animate also supports some features inherent to Actions Panel when working with HTML5 Canvas. These features help improve workflow efficiency when adding interactivity to objects on stage. They are:

Displays code in different fonts or colors according to the syntax. This feature allows you to write code in a structured manner, helping you visually distinguish correct code and syntax errors.

Displays code in different colors according to the syntax. This allows you to visually distinguish various parts of a syntax.

Automatically adds closing brackets and parentheses for open when writing JavaScript code.

You can add interactivity to shapes or objects on stage using JavaScript. You can add JavaScript to individual frames and keyframes.

1. Select the frame you want to add JavaScript to.
2. Select Window >Actions to open the Actions Panel.

Using JavaScript Code Snippets

You can add interactivity using JavaScript code snippets available within Animate. To access and use Code Snippets, select Windows > Code Snippets . For more information about adding JavaScript code snippets, see this article.

Источник