1. Creating a mobile site/app
We are going to spend the rest of our class focusing on mobile websites and apps!
Mobile sites and apps are designed to be viewed on mobile devices like smartphones and tablets.
Before we create an actual app, we are going to use a fun prototyping tool to create a rough draft of an app:
https://www.fluidui.com/– Open in Chrome
You can either re-create an app you really like or invent a totally new one!
2. Creating apps for Android with MIT’s AppInventor
Today we will use MIT App Inventor to create mobile apps.
Previously, you created mobile apps using a template in Dreamweaver CS6 and you focused on altering the CSS and HTML. With App Inventor, you will use a visual programming editor and will create apps that are a bit more complex than the simple mobile site we made with Dreamweaver. Also, unlike Dreamweaver, App Inventor can only be used to develop apps for Android devices, not for Apple.
We will test the apps you create on the test Droid phone I have and we will also use something new today- the Android emulator. The emulator is a “fake phone” on your computer that you can use to see how your app would look on a phone.
To begin, go here:
Then click Invent
At this point you will need to log in using your Gmail information (username and password). If you don’t have a Gmail account you can use my school account.
We are going to do a tutorial together as a class.
Here is the tutorial we will follow:
http://appinventor.mit.edu/explore/content/hellopurr.html
Done?
Check out some more fun AppInventor tutorials you can follow to create another app.
What else to do?
Here is a big list of some helpful app tutorials. If you are interested in learning more about app development for Apple and/or Android, this list is a good place to start.
3. What if you want to do this at home?
Here are some resources if you want to continue learning:
– Download Notepad++ to use as an HTML editor- http://notepad-plus-plus.org/
– Get other free programs for your computer- http://ninite.com/
– Free photo editor (advanced is similar to Photoshop)-http://pixlr.com/
– Create apps for free for Android devices (you will need a Gmail account)- http://appinventor.mit.edu/
– Check out this list of best resources for learning programming online for free. Code.org is also a great place to go. Also see MadeWithCode.com.
– Links to even more cool things-https://www.mhswebdesign.com/cool-stuff/ and https://www.mhswebdesign.com/after-school/
Questions? Feel free to email me at agoldsberry@gmail.com.
4. Work on whatever you want!
Try some tutorials, add more in Notepad++ to one of your pages (check this out) or try this (both use CSS to position content on your page), work with FluidUI.com, etc.