HTML5 APP Development
Lesson 1 - Starting Your Project
Outcomes:
-
You will set-up your website in Dreamweaver
-
Create your basic graphics for the app
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)
Click on the Folder File next to LOCAL SITE FOLDER.
Create a new Folder on your User area i.e. "MobileProjectApp"
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.
Download 1.9.1 Minified
Create a new HTML 5 page. MAKE SURE the doctype is HTML5
Images
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), then 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.