LESSON 1 | Webappdev

Lesson 1 - Starting Your Project

Outcomes:

Task 1 - Creating your Project

Open Dreamweaver CS6. Click on "SITE" on the toolbar, then "NEW SITE".
Give your new mobile site a name, then click on the folder symbol on the right of the "Local Site Folder" (Image 1).
Create a new folder i.e. "MobileProjectApp", then Click SAVE.

Task 2 - Getting the JavaScript Libraries

Go to JQuery Mobile to download the latest JQuery Mobile Scripts (image 3)
Go to JavaScript to download the latest JavaScripts - 1.9.1 Minified Version at the bottom of the Download page (image 4)

Image 1

Click on the Folder File next to LOCAL SITE FOLDER.

Image 2

Create a new Folder on your User area i.e. "MobileProjectApp"

Image 3

Click on the Minified and Gzipped: jquery.mobile-1.4.0.min.js (full library, ready to deploy) link and save in the folder you created.

Image 4

Download 1.9.1 Minified

Image 5

Create a new HTML 5 page. MAKE SURE the doctype is HTML5

Image 6

This shows the code you will need to add the JavaScript 1.9.1, the JQuery 1.4.0 and CSS of 1.4.0.

Task 3 - Creating a new HTML Page and linking the JQuery Files

In Dreamweaver, Click on FILE > NEW. Click on a blank HTML file, and change the Doctype to HTML5. This should give you a new blank HTML5 webpage.
Next you will need to read the Latest JQuery version Documentation (not all of it), but the section regarding page antomony (click Here),
Now work out how to link to the local versions of the JQuery that you just downloaded so are app does not have to go onto the internet to get the file information.
- You will need to add the JavaScript
- JQuery Mobile JS
- JQuery CSS
You need to add "maximum-scale=1.0, minimun-scale=1.0," after content=width=device-width,. This is too along iOS devices to be able to scale the page correctly between portrait and landscape witching.

Plenary - Testing your Knowledge