DTC 477 Schedule

Download Syllabus

Week 1

6/21 Anatomy of a Web-App

  • Overview of course
  • Creative Assignments: 1. Place Portrait (20%) – using the web-app template, design a single page web-app with images, text, video and google maps about a place (near or far). This assignment is to help you build a web-app using HTML5 and CSS3. 2. Book App Prototype (20%) – using a short work of literature in the public domain, the web-app template and a javascript library for navigation, create a prototype for reading a book on a mobile device. This assignment is to help you use javascript for navigation, such as touch, swipe and scroll.
  • Final Projects (groups and responsibilities)
  • Intro to Web-app template
  • Intro to Programming
  • Make a Scratch Game

Information & links: Google: Exploring Computational Thinking Computational Thinking – IAE-PediaScratch | imagine, program, share Programming Concepts and Skills in Scratch For Next Class… Read: HTML5 for Web Designers Chapter 1 & 2 , Building iPhone Apps, Chapter 1 Make: Start gathering content for the Place Portrait

6/23 HTML5/CSS3

  • Presentation, Content and Behavior
  • HTML5 = HTML5 + CSS3 + Javascript
  • Semantic Mark-up
  • Layout and Design, Animation
  • Video and Audio
  • Javascript APIs
  • Place Portrait
  • Google Maps API and Flickr feeds
  • Make Place Portrait Web App

Information & links:
YouTube – Build Native iPhone Apps with HTML, CSS, JavaScript and PhoneGap
HTML 5 Rocks
HTML5 Generator
CSS3 Generator
CSS3 tool
Easy YouTube Downloader

Read: HTML5 for Web Designers Chapter 3, 5 & 6 ; CSS3 for Web Designers Chapter 1, 2 & 3 View: Lynda.com -HTML5 / CSS3 overview (explore as needed) 

Make:  Add CSS styles to Place Portrait (these will be used in dev class)

Week 2

6/28 HTML5/CSS3 continued…

  • Lists
  • Web Forms
  • Media Queries
  • Landscape and Portrait mode
  • Video/Audio navigation
  • Building Web Apps… book (pdf)
  • Final Projects – build HTML5 and CSS pages, prepare for Javascript

Information & links: Media Queries Demo A List Apart: Articles: Responsive Web Design Hardboiled CSS3 Media Queries | Stuff and Nonsense Building Webapps (pdf)Jonathan Stark examples Read: CSS3 for Web Designers Chapters 4, 5, 6, & 7Make: Find a public domain work of literature that you would like to turn into an app.

6/30  Javascript Intro and Overview

  • Javascript intro
  • Challenge
  • Google Maps API – Place Portrait
  • Final Projects – build HTML5 and CSS pages, prepare for Javascript

Information & links:

Read : Building iPhone Apps, Chapter 2-4 View: Lynda.com –  Javascript Essentials: “Building Smarter Forms” and “The DOM, Nodes and Objects”

Week 3

7/5  Php Basics (Jake)

  • Intro to Php
  • Php assignment
  • Javascript vs. Php

7/7  HTML5 Animation  (Nick Hill)

  • Intro to Mobile Games, Canvass, Parallax etc.
  • Exercise image files
  • Work on Assignments and Final Projects

Read: Building iPhone Apps Chapters 3 & 4 View: Lynda.com-  Javascript and jQuery tutorials (as needed)

Week 4

7/12  Advanced Styling and Animation with Javascript

  • Networked Book Prototype
  • The DOM
  • Ajax
  • jQuery
  • jQuery exercise
  • jQTouch, Sencha etc
  • Go over Stark readings and examples
  • Work on Projects

Information & links:

7/14  jQuery Mobile Framework

  • jQuery Mobile Framework – overview
  • Organize new teams – CSS, Web app,  Coders,  Native etc.
  • Plan for Native and Web app – 2 folders
  • Groups bring projects into jQuery Mobile Framework

Information & links:

Read: Building iPhone Apps Chapters 6, 7 & 8

Make: Work on Final Projects

Week 5

7/19  Build Projects

  • local storage
  • cache manifest
  • Prepare for PhoneGap and Web App

7/21  Prepare App Package

  • Phonegap
  • testing/critique session

Week 6

7/26  Apps and Social Media Marketing

  • Frank talk…
  • testing/critique session
  • Place Portrait and Networked Book due

7/28  Final Projects Due