ET570 Intel XDK Looking at the folder and file structure of Intel XDK apps.Headers, Footers, Images and Form elements.Documenting an App’s progress.Understanding how the GUI editor produces HTML5 code.

1 - Start a New Project

2- Blank, HTML + Cordova. Check ‘Use App Designer’

3- Select a folder on your flashdrive and give this project a name.

4- Select App Framework V3

5- Intel XDK Develop Tab, Design View Screenshot

We will add the following elements in tis lab:

Header – This denotes the area (divison) at the top of the App screen

Input element (input text box):Provides a way for the user to enter a single line of text.

Radio Button: group name – Describes the question category (i.e. gender, age etc.). Typically used to ask questions whose answers are mutually exclusive. Example: Age Group- 18-25 26-35 36-100 Behavior-When the user makes a choice the other boxes, if checked, become unchecked

Checkbox:Used to make multiple choices (none, some or all):Example: What music do you listen to? Rock Jazz Country Rap HipHop Classical

Button- Submit. Later in the course we will connect this button to an action.i.e. what to do when the user submits the form data.

Footer – This denotes an area (division) at the bottom of the App screen

This screenshot shows a page Header, an Input box, a Radio group, Checkboxes, a Button (submit) and a page Footer. This is a screenshot taken from the Intel XDK ‘Develop’ tab

The Working files panel shows the folders and files which contain the app.A small right arrow indicates that folder is presently closed to view in this panel. A down arrow indicates that we viewing the contents of that folder. It is open.Folders may contain other folders. We refer to this as nesting. The file named index.html is the home page or starting point for your app.Try this yourself to understand the behavior.

Exercise: On your flashdrive, find the images folder associated with this app.Write down the path

----------------------------------------------------------------------------------------------

Find an image on your computer or copy one to your computer from the Internet.(Right-Click, Save Image As -> Browse to your flashdrive ET570 folder).

Copy it to the Images folder associated with your app.It will now be visible in the Images folder within the Intel XDK.

Next, Drag and Drop the IMG element into your app from the group of ‘Common’ tools

Change the name in the src properties dialog box to match your image’s name

Save your page and test it in the XDK emulator.

Lecture Notes: What are the 3 file types supported in an HTML5 app?1-2-3-

What is a bitmapped image?How many colors are supported in a GIF?How many colors are supported in a JPG?What is meant by transparency?Is transparency supported in a jpg?

Class Lab (Graded Assignment)

Using the elements just discussed, make an app using the Intel XDK.Do NOT copy the example above.You may and should use the same elements: header, footer, image, form elements etc.Do not use the questions I have used. Make up new ones.There are billions of questions to choose from.Change the header and footer text.Do not use a picture of a Samoyed dog (unless there is one in your family). There are billions of other subjects for a picture.

Deliverable:1- Open a word doc and Enter ET570 Week 6 ‘Your NAME’ on the top lineOpen the XDK Emulator and take a screenshot of your app using the Snipping Tool.Copy the screenshot into the word doc.

2.Next, select the code button and Copy “ALL” of the code. (Line 1 -last line)Paste that into the same word doc as your screenshot in step 1.

3. Save the word doc as ET570_Week6_YourName.4. In the code, find as many of the elements that you added as you can. Highlight them red4.. Print this word document and hand it in tonight.