0. Today’s featured app:
Today’s goals:
– Understand how mobile apps, web apps, and websites are different
– Begin learning about jQuery Mobile, Dreamweaver CS6, and PhoneGapBuild
1. Mobile Apps vs Web Apps vs Websites
a. What is the difference? What do you think?
b. What are the advantages and disadvantages of each?
You know how to make a web page using HTML, CSS, JavaScript, and jQuery.
This week you will learn how to make a web app. We will use jQuery Mobile and Dreamweaver CS6 to create web apps that we will later test on Android tablets.
But first, we’ll practice with jQuery mobile.
2. Getting started
jQuery Mobile
Remember, you learned how to use jQuery, a JavaScript library that allows you to do cool things with less code. You worked on an animated game character and later incorporated him into a web page.
jQuery Mobile is used to create mobile web applications. It is used to make web apps look good on the smaller screens of phones and tablets.
jQuery Mobile conveniently comes with some built in styles and themes that make it easy to build something fast; you can also change how things look by altering the code.
We are eventually going to build a web app with jQuery Mobile in Dreamweaver, but today we’re going to practice with some code from W3Schools.com.
Let’s do some practice exercises:
a. Let’s check out the basics first
b. Pick an example from this page and try it out
c. Now you are going to get back in your groups from Friday and will try to re-create the wire frames you made by modifying the jQuery Mobile code from W3Schools.
Some suggestions:
Home page group- check this out. You will find more icons here, just change the name and see what happens!
Find Interesting Stories group- try this or try this.
Learn Something group- try this or try this
News Breakdown group- try this
Make Something group- try this (you will have to find your own icons)
Everyone should feel free to add things or experiment more by incorporating code from other examples.
Once you have something you like, COPY and PASTE all of your code from W3Schools.com into a NEW NOTEPAD++ file in order to save it!!