Multimedia Presentations 2


links

Weeks 7-15: Portfolio & Personal Project

Due this (last?) week assignment 2: mobile app. You will be presentng these in class.

Portfolio

Your portfolio assignment will be broken down into the following parts, designed to help you be successful.

Create a page where you can publish your notes, plans, designs, process.

3.1 statement of goal(s) or purspose(s) for your portfolio

3.2 research (3x)

3.3 selection of portfolio elements & descriptions

3.4 call to action

3. Portfolio Rubric

another card

just for balance

Personal Project

Your personal project will be broken down into the following parts, designed to help you be successful.

Create a personal project page where you can publish your notes, plans, designs, process.

4.1 describe your personal project

4.2 create a plan

4. Personal Project Rubric (coming soon)

Personal Project

Complete a personal project to highlight in your Portfolio.

Ideally your project should show off your best skills and knowledge and competences. Or, challenge you to learn something new, or something not covered in our program.

evaluation rubric TBD

As always, the ideal project is one you do for an actual client. Don't have a paid gig? Try finding a project within your network of family & friends. Or volunteer to help a non-profit.

Try to avoid giving it away to business.

  • video project / Montreal walking
  • photography / art project / gallery
  • web project
    • personal
    • friend / family
    • non-profit
  • web game (Unity, javascript)
  • local businesses $$
    • café, restaurant
    • store
    • gallery
    • laundromat
  • tutorial for 1st or 2nd-year students
    • web tutorial / video
    • print tutorial
    • leave a lasting legacy!!
  • brainstorm other ideas!!!

ex 4.1 personal project description

Write a description of your personal project. Share it with and get feedback from at least 1 other classmate. Post your description and comments on your personal project page.

add details, mood boards, mockups, wireframes, colour schemes etc over the next 3-4 weeks

Your description may include:

  • the content or info users would find on your site
  • a description of your intended audience
  • your goal or purpose for the site
  • the style, design or image you hope to achieve
  • technologies, skills, tecniques you hope to learn

due: weeks of Oct. 23 - Nov. 10


ex 3.2 portfolio research

Create a page & link it to your multimedia 2 homepage:

  • add 3-6 links to portfolios you like each week for 3 weeks
  • include a comment for each link (point form is fine)

due: weekly for 3-4 weeks

ex 3.1 portfolio purpose

Write a statement of purpose for your portfolio and post it on your "portfolio notes" page.

Your statement should answer the question: What do I hope to achieve with my portfolio.

Note that your portfolio will probably have multiple goals or purposes including some of the following:

  • form part of my integrated project required to graduate
  • help me find a stage
  • help me land a job / contracts
  • form part of my application for further study
  • just for fun

due: Oct 11/12

Note that you may revise this as you progress.


week 5 & 6: jasonette, mobile app & portfolio

Due this week > Ex 2.4: UI analysis & 2.5 Jasonette demos

Monday, Sept 25, Show me your Jasonette demos

exercise 2.5: Jasonette demos

Create some demos. Add the json file path plus a link for easy access.

Ideally your demo or demos will include:

  • some different layouts i.e. sections and layers, items and components
  • some styling
  • use of some actions

You will share your demos in class on Monday, Sept. 25th

due: Sept 20/21

exercise 2: Mobile App

Create a mobile app using jQuery Mobile, Jasonette, Hammer or similar.

Ideally your app:

  • will look and feel like a native app
  • use mobile gestures such as swipe, press, pinch, rotate, etc
  • take advantage of one or more mobile APIs like geolocation, camera, address book, etc
  • may use a data source (json or database)

Your mobile app should be part or your digital portfolio.

Evaluation will be qualitative and worth 20% of your mark.

due: Oct. 2nd

Portfolio

Continue to work on your portfolio.

Create a page where you can publish your notes, plans, designs, process.

Start with a statement of your goal / goals for your portfolio.

Add a description of your audience / user / target demographic.

This will become an exercise in the coming weeks.


week 3 & 4: jasonette & portfolios

jasonette

Check out the Jasonette website.

To get started you will have to download the jasonette app to your phone. Then you can load the json files linked below by copying and opening them in the app.

my demos (copy & paste in jasonette app)

  • http://micromedia.vanier.college/home/nortonb/2017-18/presentations2/json.json
  • http://micromedia.vanier.college/home/nortonb/2017-18/presentations2/jasonette/demo.json

portfolios

Now is the time to start working on your portfolios.

There are a lot of steps in the process to developing a good portfolio, although each person's journey may vary, here are some useful markers:

  • define your goal(s)
  • who is your audience / users / viewers
  • research other portfolios
  • select your pieces
  • write descriptions for your pieces
  • tell your story

links & resources


week 2 & 3

due this week: ex 2.2: app analysis: Ux & ex. 2.2 jQuery mobile demos

jQuery mobile swipe & popup

A quick video to install jQuery Mobile

my demos

check out the js

note that both are working, but could stand to be refactored

exercise 2.3: jQuery Mobile demo(s)

Create a demo app using jQuery mobile using some of these demos.

Bonus if you add some js. You may want to consult the API docs

due: Sept 13/14

exercise 2.2: mobile development
UX

Using the same 3 apps, comment on their UX.

Read this article on UX to help you with your comments.

Great quote from this article on CSS Grid Layout.

First make it accessible, then make it fancy, and make sure the fancy doesn’t break accessibility.

due: Sept 6/7

1. jQuery Mobile install

A quick video to install jQuery Mobile

Links

2. jQuery Mobile demos

Get started with some demos

  • 3rd page
  • navigation
  • fixed header & footer
  • grid

Links

3. jQuery Mobile geolocation

Add a Google map

Links

link to Google maps API with my key (do not use my key for production, but you can use it for demos / class)

https://maps.googleapis.com/maps/api/js?key=AIzaSyCTZea67jn4YSPIGu0dNTHRyB1jnvo1Q00

4. jQuery Mobile gallery

Popup Gallery Demo

Check out the notes for some quirks.

let's get hammered

hammertime


week 1

Welcome & Welcome Back

Our focus will be on mobile development and digital portfolios this semester.

Get Connected

To upload a web page to the web server, we can use FTP (file transfer protocol).

Your web hosting accounts have been set up. Please let me know if you are unable to connect.

  • how to connect using FTP
  • note: you should use the same account / setup from previous semesters.

    exercise 1.1: multimedia2 home page

    Set up your /multimedia2/ homepage. It should include the following:

    • linked at student####/multimedia2/ (check link from student list below)
    • your name
    • link to 2 or 3 of your best examples of web work
    • Write a brief summary of where you are at in your web development education. (1 or 2 paragraphs)
    • What are some things you would like to learn?

    due: Thursday Aug 23/24

    exercise 2.1: mobile development
    content analysis

    Find 3 mobile apps (or mobile websites) to analyze. We will be analyzing many different factors over the first few weeks. Choose different apps, i.e. news, retail, corporate, educational, games, food, entertainment.

    Analyze the content and information architecture of the app.

    Read this article on IA to help you with your comments.

    Write a quick summary paragraph for the IA of each app.

    You can use this as a template

    due: Thursday Aug 30/31

    mobi dev analyses

    Here are the other topics for analysis:

    • user interface (UI)
    • user experience (UX)
    • functionality?
    • APIs i.e. geolocation, media capture, compass, accelerometer

    student sites on micromediaweb.com