GDES 51 - Spring 14

Mobile Application and Web Development With Web Standards.

Jump to current day »

Day 1 Subject - 1/27

  • Introductions
  • Syllabus
  • What we will cover
  • Resources on this page

Lab

  • Reading

Day 1 To Do

  • Sign up for Safari online(or wait)at https://ssl.safaribooksonline.com
  • Sign up for Evernote
  • Read Ch. 1 - 3 of Mobile First Book by Luke Wroblewski (I will provide the PDF)

Day 2 Subject - 1/29

Lab

  • Mobile First Video
    • Comment and/or reply 3 times in the discussion forum for the video on the Luke Wroblewski video. This assignment is due next Thursday before class.
  • Find examples of mobile apps and websites for us to look at. You can use http://mediaqueri.es/ and similar sites. Take screenshots and comment. Document what you find in your evernote accounts. This is also an assignment. I will see how you are doing at the end of the class period.

Day 2 To Do

  • Always bring in headphones as we may watch some videos during lab time
  • Read Ch. 1 - 3 of Mobile First Book by Luke Wroblewski
    • We will review next week
  • Watch the rest of the Luke Wroblewski Video
    • Comment and/or reply 3 times in the discussion forum for the video in angel under the lesson tab. This assignment is due next Thursday before class.
  • Continue to find and examine examples of mobile websites and apps. Document what you find in your evernote accounts. This is an ongoing assignment.

Day 3 Subject - 2/4

Lab

  • Pick 2 responsive websites to analyze. Use the paper provided to sketch the design and make notes about patterns or interactions. We will look at them at the end of class Thursday.
  • Finish watching Mobile First Video
    • Comment and/or reply 3 times in the discussion forum for the video on the Luke Wroblewski video. This assignment is due this Thursday before class.
  • Continue: Find examples of mobile apps and websites for us to look at. You can use http://mediaqueri.es/ and similar sites. Take screenshots and comment, make observations, etc. Document what you find in your evernote accounts.

Day 3 To Do

  • Finish reading Ch. 1 - 3 and start on Ch. 4-5 of Mobile First Book by Luke Wroblewski
    • We will review this week
  • Watch the rest of the Luke Wroblewski Video
    • Comment and/or reply 3 times in the discussion forum for the video in angel under the lesson tab. This assignment is due this Thursday before class.
  • Continue to find and examine examples of mobile websites and apps. Document what you find in your evernote accounts. This is an ongoing assignment.

Day 4 Subject - 2/6

Lab

  • Finish analyzing 2 websites. Use the paper provided to sketch the design and make notes about patterns or interactions. Match the websites you analyzed to one of the layout patterns we discussed today from Multi-Device Layout Patterns. If one fits and be prepared to explain your opinion. If one does not fit, describe the layout pattern with notes on the sketch. Discuss in groups.
  • Watch some of Hampton's 6 rules of Mobile Design.
  • Continue: Find examples of mobile apps and websites for us to look at. You can use http://mediaqueri.es/  and similar sites. Take screenshots and comment, make observations, etc. Document what you find in your evernote accounts.

Day 4 To Do

  • Comments on the Luke Wroblewski Video due today
    • Comment and/or reply 3 times in the discussion forum for the video in angel under the lesson tab.
  • Read Ch. 4 - 5 of Mobile First Book by Luke Wroblewski
  • Finish watching Hampton's 6 rules of Mobile Design on your own if you want.
  • Continue to find and examine examples of mobile websites and apps. Document what you find in your evernote accounts. This is an ongoing assignment.
  • Next week we will start our first project. Play with dreamweaver over the weekend if you have it and are not familier with it as we will be using it next week.

Day 5 Subject - 2/11

Lab

  • Go through UX Apprentice.Take the quizes to self check.
  • Decide on subject of Project 1
  • Find material for Project 1
  • Make an asset list for Project 1
  • Continue: Find examples of mobile apps and websites for us to look at. You can use http://mediaqueri.es/  and similar sites. Take screenshots and comment, make observations, etc. Document what you find in your evernote accounts.

Day 5 To Do

  • Go through UX Apprentice if you feel like learning more about the UX process. Take the quizzes to self check.
  • Decide on subject of Project 1
  • Find material for Project 1
  • Make an asset list for Project 1
  • Continue: Find examples of mobile apps and websites for us to look at. You can use http://mediaqueri.es/  and similar sites. Take screenshots and comment, make observations, etc. Document what you find in your evernote accounts.
  • Read Ch. 4 - 5 of Mobile First Book by Luke Wroblewski
  • Continue to find and examine examples of mobile websites and apps. Document what you find in your evernote accounts. This is an ongoing assignment.

Day 6 Subject - 2/13

Lab

  • RWD Workflow video from Stephen Hay
  • Go through UX Apprentice if you feel like learning more about the UX process. Take the quizzes to self check.
  • Work on Project 1
  • Decide on subject of Project 1
  • Find material for Project 1
  • Make an asset list for Project 1
  • Work on sketches for Tuesday

Day 6 To Do

  • Read Ch. 6-7 of Mobile First
  • Watch RWD Workflow video from Stephen Hay
  • Look at listed design process resources
  • Go through UX Apprentice if you feel like learning more about the UX process. Take the quizzes to self check.
  • Work on Project 1

    Project 1 Description »

  • Project 1 Due Dates:
    Sketches 2-18, Wireframes 2-20, Final site March 4
  • Decide on subject of Project 1
  • Find material for Project 1
  • Make an asset list for Project 1
  • Sketches due Tuesday
  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 7 Subject - 2/18

Lab

Day 7 To Do

  • Read Ch. 6-7 of Mobile First
  • Work on wireframes
  • Watch RWD Workflow video from Stephen Hay
  • Look at listed design process resources
  • Go through UX Apprentice if you feel like learning more about the UX process. Take the quizzes to self check.
  • Work on Project 1

    Project 1 Description »

  • Project 1 Due Dates:
    Sketches 2-18, Wireframes 2-20, Final site March 4
  • Wireframes due Thursday
  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 8 Subject - 2/20

  • Layout intro
    • Layout Exercises

Lab

Day 8 To Do

Day 9 Subject - 2/25

  • Finish looking at wireframes
  • More responsive layout
    • Manual Responsive Layout 2
  • Fluid/responsive Images
    • Basic fluid image exercise
  • Responsive navigation

Lab

Day 9 To Do

Day 10 Subject - 2/27

  • Fluid/responsive Images
    • Background images review
    • Responsive background images
      • create/crop images and put in backgrounds
  • Responsive navigation

Lab

  • Group consultation on Project 1 - 30 to 45 minutes
    • In groups of 3, present your project 1 in progress to 2 other class members, and get their feedback and suggestions.
  • Work on project 1
    Project 1 Due Dates:
    Sketches 2-18, Wireframes 2-20, Final site March 4

    Project 1 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 10 To Do

  • Complete project 1
    Project 1 Due Dates:
    Sketches 2-18, Wireframes 2-20, Final site March 4

    Project 1 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 11 Subject - 3/4

Lab

  • Project 1 Due

    Project 1 Description »

  • Lab Exercise: Create new low and high res background images and place on the example page
  • Group consultation on Project 1 - 30 to 45 minutes
    • In groups of 3, present your project 1 to 2 other class members, talk about problems you had, ask questions, and get their feedback and/or suggestions.
  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 11 To Do

Day 12 Subject - 3/6

Lab

  • Use picturefill, the 2.2 technique or an SVG file to place a responsive image of your own on a page - look at the results at the end of class
  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 12 To Do

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 13 Subject - 3/11

Lab

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 13 To Do

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 14 Subject - 3/13

  • Sketches Due
  • Look at more project 1 sites
  • Manual grid exercise
  • Bootstrap grid basics
  • Bootstrap grid exercise follow along

Lab

  • Look at sketches together
  • Exercise:
    Recreate the basic layout from a page from your project 1 using the bootstrap grid system
  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 14 To Do

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 15 Subject - 3/18

Lab

  • Look at wireframes together
  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 15 To Do

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 16 Subject - 3/20

Lab

  • Look at wireframes together
  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 16 To Do

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 17 Subject - 3/25

Lab

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 17 To Do

  • Prototype Due
  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 18 Subject - 3/27

Lab

  • Have someone use your site in progress to do informal testing
  • Over the break read Ch. 1 of jQuery Mobile Web Development Essentials Second Edition
  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 18 To Do

  • Work on project 2
    Project 2 Due Dates:
    Sketches 3-13, Wireframes 3-18, Prototype 3-25, Final Version 3-27(extra credit) or 4-8

    Project 2 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.
  • Spring Break!

Spring Break
No class 3/31 to 4/4

Day 19 Subject - 4/8

Lab

  • Written critique Project 2
  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 19 To Do

  • Read Ch. 1 of jQuery Mobile Web Development Essentials (at safaribooksonline.com)
  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 20 Subject - 4/10

Lab

  • Group Exercise: Create practice content inventory for project 3
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 20 To Do

  • Read Ch. 1 and 2 of jQuery Mobile Web Development Essentials (at safaribooksonline.com)
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 21 Subject - 4/15

Lab

  • Meet with instructor about sketches and topic for project 3
  • For practice and background, work on the exercise from CH. 5 of Adobe Dreamweaver CS5.5 Studio Techniques at safaribooksonline.com
  • Go through Ch. 1 - 3 of jQuery Mobile Web Development Essentials (at safaribooksonline.com)
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 21 To Do

  • Go through Ch. 1 - 3 of jQuery Mobile Web Development Essentials (at safaribooksonline.com)
  • For extra background, work on the exercise from CH. 5 of Adobe Dreamweaver CS5.5 Studio Techniques at safaribooksonline.com. It is a little outdated, but will give you background on JQM.(also at safaribooksonline.com)
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 22 Subject - 4/17

Lab

  • For practice and background work on the first half of the exercise from CH. 5 of Adobe Dreamweaver CS5.5 Studio Techniques at safaribooksonline.com, up until you get to the list view widget.
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 22 To Do

  • Go through Ch. 1 - 3 of jQuery Mobile Web Development Essentials (at safaribooksonline.com)
  • For extra background, work on the exercise from CH. 5 of Adobe Dreamweaver CS5.5 Studio Techniques at safaribooksonline.com. It is a little outdated, but will give you background on JQM.(also at safaribooksonline.com)
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 23 Subject - 4/22

Lab

  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Prototype 5-13, Final Presentation 5-15

    Project 4 Description »

    make all due the same day

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 23 To Do

Day 24 Subject - 4/24

Lab

  • Finish looking at Project 3 wireframes
  • Brainstorm app functionality in groups of 3
  • Watch Video: User Interface Design for iOS 7 Apps
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 24 To Do

Day 25 Subject - 4/29

Lab

  • Present sketches to groups and get feedback.
  • Watch Video: User Interface Design for iOS 7 Apps
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 25 To Do

Day 26 Subject - 5/1

  • Go over calendar
  • Jquery Mobile
    • Panels and bars exercise
    • Collapsible content exercise
    • Talk about plan for phonegap build
  • App Design
    • Go over Apple HIG
    • Review balsamic app assets
    • Review iOS graphics resources(materials)
    • Review Android graphics resources(materials)

Lab

  • Find 3 apps that are as similar as possible to your project 4 app and documen screenshots .
  • Review Project 4 ideas/sketches with the instructor
  • Watch Video: User Interface Design for iOS 7 Apps
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

Day 26 To Do

Day 27 Subject - 5/6

Lab

  • Present project 4 wireframes to groups and get feedback. If they are linked, try some informal user flow testing.
  • Practice with Fluid UI
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

Day 27 To Do

  • Consult Apple HIG and iOS Design patternsor Android Design guide while creating your design for Project 4
  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 28 Subject - 5/8

Lab

Day 28 To Do

  • Work on project 3
    Project 3 Due Dates:
    Sketches 4-15(end of class), Wireframes 4-22, Final Version 5-8

    Project 3 Description »

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 29 Subject - 5/13

Lab

  • Look at wireframes
  • Prototype Testing
  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

Day 29 To Do

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 30 Subject - 5/15

  • Presentations day 1
  • make all due the same day

Lab

  • Presentations day 1

Day 30 To Do

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.

Day 31 Subject - 5/22

  • Presentations day 2
  • make all due the same day

Lab

  • Presentations day 2

Day 31 To Do

  • Work on project 4
    Project 4 Due Dates:
    Sketches 4-29, Balsamic Wireframes 5-6, Hi Fidelity Interactive Wireframes 5-13, Final Presentation 5-15

    Project 4 Description »

  • Continue: Collecting samples, ideas, etc. for your evernote account.