Skip to content

DWDMobile/Syllabus

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
README.md
README.md
 
 

Repository files navigation

Dynamic Web Development - Mobile

Mondays, 6:30 - 9:25pm, January 23 - March 6

Instructor:

Calli Higgins [email protected]

Introduction

This experimental 6-week, 2 point course will provide a framework for learning how to develop and program web applications and will focus on mobile web development. Rather than the traditional model of in-class lectures, assignments, projects, and office hours, this course will heavily leverage existing online and offline resources (videos, articles, interactive tutorials, online courses, books, and more) with class time fully devoted to group and individual help sessions.

This course will be focused on developing and deploying front-end mobile web applications using HTML5, CSS, and JavaScript. Additional focus will be on capabilities suited to the mobile device such as the geolocation, touch interfaces, responsive design, sensor data (gyroscope, accelerometer), and media capture. Finally, the course will cover using PhoneGap to deploy as a mobile application that can be distributed via Google Play and/or the Apple App Store.

Prerequisites include Comm Lab Web and Introduction to Computational Media.

Flipped Course

  • Free Access to Lynda.com via NYU: www.nyu.edu/its/lynda Clickable Transcripts, Small Video Snippets, Watching in high speed
  • In Class
    • Some code review in class is possible, directed towards a specific user problem
    • Pairing - user testing - help each other
    • In public office hours
    • 1 on 1 help
    • Short tutorials/workshops

Please see ITP's statement on Pass/Fail which states that a "Pass" is equivalent to an "A" or a "B" while anything less would be considered a "Fail".

DWD Mobile Prototypical Projects

Students should pick one of these as their project to undertake for the semester:

  • Image Capture and Upload - Instagram
  • Location Tracking - Follow Me
  • Location Based Content - FourSquare
  • Mobile Game - Brick Breaker
  • Mobile Site Redesign - Craigslist Mobile

Grades

Grades will be determined according to the following breakdown:

  • Regular Assignments 40%
  • Final Project 40%
  • Participation and Attendance 20%

Please see ITP's statement on Pass/Fail which states that a "Pass" is equivalent to an "A" or a "B" while anything less would be considered a "Fail".

Laptops and WiFi

Laptops and WiFi available are valuable tools for use in the classroom. Unfortunately, they can very easily be a distraction as well. Since this class is technical in nature and we'll likely be trying code and looking at online resources laptops use will likely be very useful. We should though be courteous to one another and when we have outside guests, during discussion or student presentations laptops use should be curtailed.

Project based course

The assignments in this course will build upon new material we learn one week to the next. In order to create a completed project in the short, six week format of this course, you will pick one project at the beginning of class to work on throughout the semester. You are expected to push your abilities to produce something that utilizes what you have learned in the class that is useful in some manner to yourself or the world. It is important to keep up with the weekly assignments, as these will count for 40% of your grade, while the final product is another 40%.

Attendance

Attendance is mandatory. Inform me via email if you are going to miss a class. Habitually showing up late for class or an excessive number of absences will adversely affect your grade.

Class Participation

This class will be participatory, you are expected to participate in discussions and give feedback to other students both in class and participate with their projects. This (along with attendance) is 20% of your grade.

Class Schedule

Week 1

Introduction:

  • Course overview- flipped course, project based
  • What is a hybird app?

Student Intros

  • Put name on sticky note on back of monitor
  • Discuss what the class is going to cover
  • Everyone introduce themselves
    • Name, department, year
    • What are your goals for the class?
    • What's something in front end web development you worry that your peers understand but you don't?

Intro to HTML/CSS

Homework:

Get a code editor:

Set up an emulator/simulator (any or all)

Set up Github (If you are comfortable with Git already, you can skip this), but email me your github username.)

Assignment Workflow

  1. To start, fork the repository.
  2. Clone the repository to your computer.
  3. Modify the files and commit changes to submit your work
  4. Push/sync the changes up to GitHub.
  5. Create a pull request on the original repository to turn in the assignment.

Go through these tutorials at your own pace. Pick and choose the portions that are most useful and relevant to you. If you know HTML and/or CSS already, skimming through these can provide a nice review and you might learn something new.

Assignment:

  • Do Wireframes for your chosen project
  • Fork this week's homework repo and clone it via command line or Github Desktop
  • Update the code by starting to write the basic html and css for your project
  • After comitting and pushing your code to your forked branch, create a pull request on the original repo
  • Click 'Compare Across Forks' and select your forked branch as the 'head fork'
  • Post your wireframes to your blog and add a link to that post to your pull request, create pull request

Week 2

Mobile/Responsive Design and Introduction to JavaScript

Homework:

Assignment: Fully build out the HTML for the structure of your app. Make your CSS Mobile Friendly with CSS Media Queries. Test your site on a mobile simulator.

Submit your homework by forking, cloning, and submitting a Pull Request to the Week 2 Homework repo

Optional Resources:

Week 3

JavaScript and jQuery Mobile

Homework:

Assignment:

Introduce navigation, clickable elements, interactivity into your project using Javascript and/or jQuery. Complete the "pages" of your app and make sure you can navigate between them.

Submit your homework by forking, cloning, and submitting a Pull Request to the Week 3 Homework repo

Additional JavaScript and jQuery Reources

Week 4

PhoneGap

Assignment:

Fork and clone the Week 4 Homework. This is an empty Phonegap example with jQuery and core Phonegap plugins included. Edit the index.html, index.js, and index.css files to include the work you've done so far in this class. You do not need to have this finished by next class, however create a pull reqiest with your work in progress so I can see where you are at.

Week 5

Work/Help Session, Submitting Apps to Google Play and iTunes

  • A comprehensive guide on submitting to iTunes http://code.tutsplus.com/tutorials/how-to-submit-an-ios-app-to-the-app-store--mobile-16812

  • Using Phonegap Build to compile, sign, and distribute your apps (http://docs.build.phonegap.com/en_US/index.html)

    • In order to use Phonegap Build, you need to upload your entire Phonegap project to a standalone git repo (cannot be a subfolder of a larger repo).
    • To submit an iOS app, you need to be a member of Apple's developer program ($99/year), and to submit to Google Play you need to be a Good Play developer (free!) -For iOS, you'll need to upload your p12 certificate and Provisioning Profile (you get both from the Apple Developer Center after registering).
      • For Google Play, you need to upload your Keystore File (availale from Google Play Console after registerting)

  • A few things I would add:

    • You must be on your own Apple Development Plan, not ITP's
    • You should have people test your app before submitting to the app store. You can use Test Flight to distribute the app to their devices. You can invite a group of test users and add their device UUID's to your provisioning profile. You follow the same steps above to export your IPA file from iTunes, and you upload it to Test Flight. They'll get a link to download and install your app.
    • If you app connects to the internet, make sure you detect an internet connection when the device is ready and alert the user if there is no connect. Apple will reject your app without this.
    • Xcode automatically targets iPhones and iPads with your app. You may not have thought about the iPad design, and they will reject your app if it does not look good on an iPad.You can choose to target iPhone-only (and when your app is downloaded on an iPad it will just run at the iPhone size) by choosing iPhone as your Deployment Device instead of universal:

  • A checklist of Android requirements http://developer.android.com/distribute/googleplay/publish/preparing.html

  • Publishing to the App store https://www.youtube.com/watch?v=b7VZkbltJkc

Week 6

Final Project Presentations

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

1 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published