Mobile Web
ITP, NYU
Spring 2012
Thursdays 3:30 to 6:00
Sean Montgomery
sm4537
Office Hours:
Thursdays 1-2p sign up
Syllabus: http://produceconsumerobot.com/mobileweb2012/
Google group: http://groups.google.com/a/nyu.edu/group/mobileweb2012-group?hl=en
Description:
The miracle of mobile computing has arrived. Exceedingly
powerful computers, seamlessly networked and with a
variety of in-built sensors... all right in your pocket.
This course will be a fast-paced, project-focused course
to learn mobile programming in 7 weeks. We'll use the
cross-platform compatible, html/javascript-based PhoneGap
libraries to program Android phones. While the course will
exclusively use Android as an example platform, the skills
acquired will be broadly transferable to other platforms,
including iOS.
Topics will include:
Using HTML / CSS / Javascript to write apps Accessing
device events and notifications
Monitoring built-in sensors (accelerometer, GPS, compass)
Local file storage Media capture and playback
Extending PhoneGap with plugins (SMS, Bluetooth, etc.)
Students will complete weekly exercises and a final
project of their devising. Bring your computer and your
Android phone if you have one. A limited supply of Android
handsets will be available for students to work with. This
two point course will meet in the first seven weeks of the
semester.
Schedule:
- Introductions & overview
- Hello PhoneGap
- Hello HTML
Homework:
Make a simple HTML app, Prepare a written project proposal and presentation
- Make a simple HTML app with text, images and buttons. (Buttons don't have to "do" anything yet). Check out http://www.w3schools.com/html/default.asp for info/help.
- Create a 1/2 page written project proposal + 2 min presentation that answers the following questions:
- What you want to do?
- Why you want to do it?
- What topics from the syllabus will be utilized?
- What will you try to do that's not on the syllabus? (not recommended)
- What similar apps are out there?
- How is yours different?
To help you consider what is an appropriate project to do with PhoneGap and for this short 7 week course:
- Project proposal pitches
- Firebug
- Weinre
- Begin CSS
Homework: Play with Firebug, Outline your project stages, Photoshop a user interface
- Play with Firebug
- Working from a new phone gap project checking "Use PhoneGap example source as template for project" (i.e. not create minimal PhoneGap project)
- Open the project in firefox (open index.html with system editor). You can copy and paste the link into firefox if your default browser isn't firefox.
- Open firebug
- Save a screenshot of the firefox window before editing
- Edit the document in firebug.
- Save a screenshot of the new page in the firefox window after editing
- Post the screenshots to your blog
- Outline stages and tasks for your project
Now that you've gotten some initial feedback on your project you should begin to breakdown the project into different stages. Each "stage" should be a point at which you could turn in the project if that's all the further you get within the limited confines of the class.
Take baby steps for each stage!!
For each stage, break the process down in the following manner (as per this example):
- Tasks: e.g. design GUI, hook into accelerometer API, write an android service, etc
- Questions/Pitfalls: about your proposed plan
- Resources: you will plan to utilize (e.g. parts of the PhoneGap API, javascript libraries, other websites or APIs)
- Alternative resources: you're considering as options
Post your your outline on your blog.
- Draw up a user interface for your app in Photoshop (or other program)
Include:
- different "pages"
- buttons
- dropdowns
- forms
- graphic elements
- etc
Post your
graphic to your blog.
Homework: Walk through the CSS, Javascript and the DOM examples from the class notes, Create a page for your app using CSS, Javascript, and the DOM.
- In Firebug, walk through any examples we didn't get to in class.
If you're new to this stuff, you may want to review both the Javascript page and the CSS page with firebug console and try the linked examples on w3schools.com to make sure it makes sense.
(Hopefully, with the help of a little CSS and a Javascript library my pages are a little easier to read now. Please let me know of any bugs or typos :-)
- Using Eclipse and Firebug, go through the Document Object Model (DOM) and Events examples.
- Upload at least one screenshot of success in each. If you have problems, describe it and upload screenshots of it to your blog.
- Create a "page" of your app. If your new to this stuff, you may want to start with an easy one like the splash screen.
- Use HTML with divs and CSS to position the elements how your want
- Use javascript to make the app do stuff when you "click" on an element
- Use DOM + Javascript to change how your page looks when you interact with it
- Hide and show divs to change what's shown on screen
- Look at the source of this example page using tabs to get some ideas for how to create flexible pages that can hide and show lots of different content
- Document on your blog:
- What you're trying to do
- Screenshots of your app working
- Any difficulties with screenshots of firebug/wienre, console logs, and/or code snippets
- Any HTML/CSS/Javascript stuff you need for your page that we haven't covered yet in class
- Zip up your app and post a link to it
- Bring an Android phone to class
- Events
- Connection
- Notifications
- Device info
- Accelerometer & GPS
- Photo capture
- Audio capture
- Audio Playback
Homework: Work on your app, Extra Credit: implement PhoneGap API functionality, modify the tabs example to look and feel like an app.
- Add the following to your app:
- console.log calls at the beginning of each function in your app to log the name of the function, e.g. console.log("init()"); -- hint, this is a very useful technique to identify where your javascript is running into problems.
- Upload a screenshot of this working in the Eclipse LogCat or Firebug console (or other).
- a "deviceready" listener that calls an onDeviceReady() function if you don't have one already.
- Inside of the onDeviceReady() function, log all the device information in the PhoneGap Device API using console.log
- Upload a screenshot of this output
- Where appropriate, add a PhoneGap Notification to your app. Replace any alert() or confirm() calls with the corresponding PhoneGap navigator.notification calls.
- Continue work on your app. Try to layout the remaining pages in HTML and CSS.
- Upload a screenshot of each "page"
- Upload a zip of your app
- Extra credit
- 5 points: Make a fun app that uses the accelerometer, GPS, compass, connection or a PhoneGap Event, to trigger capture and/or playback of a picture, audio, or video.
- Describe the functionality on your blog
- Upload a video of your app working
- Upload a zip of the app
- 5 points: Make a simple app using the tabs example
- Add console.log calls to init() and showtab() functions to help you identify how the tabs are being shown/hidden.
- Take a screenshot of the console showing the logs
- Add new functioning tabs with corresponding content divs
- Use CSS to make the "tabs" look like "navigation buttons" and the content divs look like "pages" of an app.
- Upload a screenshot of the app to your blog
- Upload a zip of the app to your blog
Homework: Finish the UI for your app, Extra Credit: implement the PhoneGap Contacts API, implement a PhoneGap Plugin.
- Finish up the user interface for your app.
- All proposed pages should be laid out in HTML/CSS.
- All buttons should either perform their intended function or display an alert if that function involves a process you haven't yet completed.
- See what happens when you rotate your phone from portrait to landscape (in the emulator you can use Ctrl-F11 or possibly ctrl+fn+F11 on Mac)
See this forum post for information on how to deal with orientation changing.
- Upload the following to your blog:
- At least one screenshot from each page of your app
- At least one page in both portrait and landscape orientation
- A list of problems you ran into and whether/how you solved them
- A zip file containing your app project
- Extra Credit - Add the following to your app or a separate PhoneGap project:
- 5 points: Use the PhoneGap Contacts API to search for contacts and add a new contact
- Upload a screenshot and zipped source code to your blog
- 5 points: Implement a PhoneGap plugin
- Upload a screenshot and zipped source code to your blog
- Extra credit from last week is still fair game.
- File system - Read / write / upload / download
- HTML Forms
- Server communication
Homework: Finish your final project and presentation
- Project
- Upload a zip file of your app project to your blog (or email it to me)
- by 2pm on Thursday (so I can load them up for class)
- include any additional libraries/jars/etc required to run your app
- See Final Project Grading
- Presentation
- <5 minute presentation
- Style: VC / Art grant pitch
- Target 3 slides - web accessible from my computer
- Ideally on your blog
- or emailed to me by 2pm on Thursday
- Use Emulator / Droid@Screen to display your app to the class
- Answer these questions:
- What motivated your app?
- What it does it do?
- What are the 2 most similar apps out there?
- How are they different from your app?
Week 7: Project Presentations
Grading:
34% Class Participation/Attendance
33% Assignments
33% Final Project
Attendance:
2 unexcused absences will fail
5% off your participation grade each time you're late
Assignments:
Assignments will be given on a weekly basis as noted on
the syllabus (actual assignment subject to change
depending on where we get in class). Homework will be
"turned-in" via your blog. You are welcome to reuse an
existing blog but please make it clear which entries are
for this course (perhaps with a category). If you don't
have a domain or feel comfortable installing your own blog
software, feel free to utilize the blogging software that
ITP has setup here: http://itp.nyu.edu/blogs/.
Typically homework will be programming an app and should
have the following:
Clearly stated goals
Sources that you used
Code snippets
Screenshots of app working/breaking
Log snippets of app working/breaking
zip file containing all source code in your project.
My personal
copyright policy: rip, hack, cite
BUT, pay attention to licenses before you use it and look
at http://library.nyu.edu/copyright/
Do NOT use other student's code for homework. You may work
near one another on homework, share ideas, debug together
and share solutions to problems, but you may not share
code.
Assignment Grading:
20% if it builds
20% if it runs without errors
20% for good coding style
20% for aesthetic style
20% for quality of documentation - Commented code, links to code
sources/interesting sites, screenshots etc
Late assignments will lose 10% each day
Final Project:
Each student will create a final project of their own
devising to showcase the creative use of what they've
learned in Mobile Web.
Final Project Grading:
10% Written project proposal
10% Oral project proposal
15% if it builds
15% if it runs without crashing
10% for good coding style
10% for aesthetic style
10% for documentation
10% creativity / demonstration of skills
10% project presentation
|
