multimedia presentations 2

2nd-half projects

personal project notes

here are some comments after going over some of your projects

  • introduce your work, gallery, project etc
  • share details, ideas, processes, objectives about your pieces, photos, illustrations (captions!)
  • check console for errors
  • arguably all sites should be mobile first & responsive (with a few exceptions like games)
  • ideally photos etc should be your own & should be edited with Photoshop or Lightroom

creative coding & generative design

Check out my demo. Click on the circle (ellipse) to drop some acid (jazz)

Do it yourself!! p5*js resources

This horizontal scroller, while not a good example of UI / UX in most cases, may prove useful in some cases.

More importantly the following techniques may be useful:

  • capturing mousewheel events
  • capture keyup events from the keyboard
  • using window.innerWidth and element.getBoundingClientRect() may also be useful.

uploader demo

For those of you struggling with uploading, you may find this helpful.

drag & drop uploader

And here is the .php file for uploading.

n.b. for this to work, you will need to chmod the destination folder permissions to 777

Combine this with the github db starter to add the photo info to your db.

Or use this version which integrates with Google's Firebase noSQL.

check out this photo gallery uploader which combines the database starter and the uploader. Still messy... but working.

And here is the insert.php Gist (code)

n.b. updated the Firebase stuff. Personal login works again.

Optimized the javascript, reducing from individual js files for each class, to just one.

Progressive Web Apps

Check out the resources from Google including their step-by-step guide

And what's new in Chrome 70

Onsen PWA info


Check out my weather PWA*%20from%20weather.forecast%20where%20woeid=3534%20and%20u=%27c%27

And an older, Android only PWA I did for Gallo Wines

PWA for Gallo Wines (Nov. 2017)

walkabout photos

Flickr album

ex 4.1 personal project plan

Post a plan for your personal project to your website.

You are free to do your plan however you want, but it will probably include some or most of the following:

  • description
    • 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
  • user / audience demographics
  • user paths (what different users will do)
  • notes about design style, colour scheme, mood board, research of other, similar projects
  • list of resources i.e. db, media, photos, text you need to write etc.

due: November 9th

web project 3

choose and improve a web project for your portfolio

  • do a self evaluation, knowing what you know now, what could you improve
  • share with your group and get some feedback like reminds me of.... (related stuff)
  • create a plan of what you would like to improve
  • execute your plan, recording any steps along the way
  • write a description, as if for a portfolio, describing the project, its context, technical aspects and personal development
  • get feedback on improved version and record it.

create a page with a listing of your projects, description, image and link to the live project

due: November 9th

4. Personal Project

Complete a personal project to highlight in your Portfolio. Ideally your project should show off your best skills and knowledge and competences.

You are encouraged to use what you have learned in your web courses including:

  • SPAs
  • Bootstrap sites
  • Wordpress site
  • online game
  • mobile app
  • AJAX
  • web galleries
  • dynamic websites using mySQL & php

due: November 23rd

Here are some ideas for a project.

  • 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!!!


Marianne's Kitty Run (Unity game)

Michael's Portfolio

Michael's Sportafeed project

Sundus video gallery

Sabrina photo gallery

Elisa photographer's site

Julie: a fashion store

Amani, visual poetry


Vue.js is a "progressive" frontend framework similar to Google's Angular and Facebook's React

some demos / examples

a quick demo vue demo

a todo list + kitchen sink

in progress: a favourites app integrated with Firestore noSQL db

Vue.js Resources

Firestore (noSQL) docs...


web project 1 due Sept. 29

web project 2 is due Friday October 12th

mobile app project due Friday October 19th

improving our descriptions

We have put a lot of emphasis on improving our projects as well as describing them. This may help:

  • project description (with an assumed audience of a potential employer or academic admissions evaluator)
    • a brief description of the project & your goal
    • state the context (class project, personal project, professional contract)
    • define your role, if you worked in a group
    • share your process, design style or philosophy
    • note any significant technical aspects
    • comment on your personal growth, experience, development
  • links to other projects, your website, your portfolio, as appropriate

ideas for descriptions:

  • For this project I tried to…
  • Doing this project I learned…
  • My design philosophy for this project was…

try to avoid we had to... which has negative connotations. Instead try something like:

  • We had to opportunity to..
  • We were tasked with...
  • We enjoyed the challenge of...

try reading your description out loud to yourself, a classmate, someone outside Micromedia. If there are parts that are hard to read, make some changes.

Ask others to summarize what you said. Did they understand? Is it what you meant? Make changes if needed.

bonus: check out Valentin's Making Of

Samantha has another strong description scroll down to "Main Page (Bootstrap)

Shengyi's description is good but still room for improvement

CSS grid allows us to not only place content where we want it on the webpage but it also allows for an easier integration of content to mobile devices.

Check out the links below to help you out with learning the CSS Grid System.

check out my short demo


a quick demo vue demo

Google Maps Javascript API

We can use the maps API, along with geolocation, to create maps for our mobile (or even desktop) sites.

Google's Tutorial

get your API key

Google Demo

Onsen maps demo

Firebase Google's no-SQL database

Firebase home

Firebase web docs

a good tutorial

student site list is in Firebase. See the json

code to get the json

const firebaseRef = firebase.database().ref('/presentations2_2018/');
  const videoSection01 = firebaseRef.child('/section01/').orderByChild('firstname');

and the child_added loop

videoSection01.on("child_added", function(data, prevChildKey) {
  var nextStudent = data.val();
  link.innerHTML = nextStudent.firstname;

I downloaded Opera Touch for mobile and it has me thinking about UI for mobile.

With larger phones, my short, fat fingers don't reach the top.

Check out my Onsen this Onsen demo that integrates with a mySQL database and uses AJAX

database starter files

you can find some files & resources here to quickly get up and running with a database

database starter

starter database github repository

image upload by drop

Gist for upload.php

image upload Firebase example

Links & Resources

Google Developer: forms

database video tutorials

although these videos are a little older, they may help you with the above demo.

they do not use AJAX, but will give you a good idea of the process

Part 1: mysqli connect
part 2: select query
part 3: insert

W3Schools Slider example

project feedback & report

you should do the following today

  • share your finished Web Project 1 with your feedback group
  • get some feedback on your changes
  • record some notes for your report
  • select and do a self evaluation of your Web Project 2
  • get feedback from your group on your web project 2

feedback techniques

  1. positive comments
  2. open-ended questions
  3. reminds me of.... (related stuff)
  4. use "I" instead of you... i.e. I might, I would, I
  5. good, to improve, good (March 2nd)

Plus a couple articles regarding feedback:

touch events

as promised... here's some stuff

basic touch event

drag & drop with touch

drag & drop into target

AJAX mini tutorial

Here are some resources:

descriptions for web projects

Once you have updated your web project, you will write a good description:

check out the descriptions below

Sydney, 2017


Add a dark theme by modifying your CSS components link to:

<link rel="stylesheet" href="">

Onsen navigation

check out the managing pages reference

My first demo uses ons-navigator

This second demo uses ons-tabbar

And this is my third demo that uses the ons-splitter component.

Just added an Onsen weather app which uses the Geolocation API

Onsen news app

pointer tests

Mobile Apps


Onsen: get started

my Onsen demo



copy & paste the following into the Jasonette app.

jQuery Mobile

jQuery Mobile

Animal Kingdom

Origami Fun

Other examples

only accessible from within Vanier

ex.2.1 quick mobile app demo

Create a quick demo using one of the following:

  • OnsenUI
  • jQuery Mobile
  • Jasonette

Your demo should include:

  • 3 or more pages / sections
  • navigation
  • links
  • images
  • plus 3-5 other elements that you find interesting

due: Sept 11 / 6

check these out

web project 1

choose and improve a web project for your portfolio

  • make a list of 3-5 web projects that you have already completed
    • SPA / scientific topic / infographic
    • Wordpress
    • Instagram clone
    • Bootstrap site
    • petition site
    • web animations
    • web game
    • neighbourhood site / gallery
    • gallery page
    • *** non-school project ***
    • design studio
  • choose one to work on the next couple weeks
  • do a self evaluation, knowing what you know now, what could you improve
  • share with your group and get some feedback on what works well?
  • create a plan of what you would like to improve
  • execute your plan, recording any steps along the way
  • write a description, as if for a portfolio, describing the project, its context, technical aspects and personal development

create a page with a listing of your projects, description, image and link to the live project

due: Sept 19/20

feedback groups Mon/Wed

  • 1. Shazz, Alexia, Manutai
  • 2. Courtney, Julien, Amber, Jeremy
  • 3. Shengyi, Marine, Michael
  • 4. Sheila, Valerie, Simon
  • 5. Britney, Catherine, Marius
  • 6. Liz, Remi, Angie, Leo


  • 1. Julia, Marie, Rebecca
  • 2. Adriana, Eva, George
  • 3. Chiara, Samnatha, Chelsea
  • 4. Valentin, Karishma, Charmaine, Julie
  • 5. Fotini, Maryam, Pierre, Jason
quick thumbnail sketch for Web Project 1. plus you can check out the sites others have made
examples & links (for Wednesday / Thursday)

more portfolios (only from within college)

prior knowledge? topics for study?

  • html5, css3, javascript?
  • a SPA?
  • AJAX?
  • mySQL & .php?
  • javascript fundamentals
    • "use strict"
    • variables (let & const)
    • variable scope
    • operators
    • conditionals
    • loops
    • event listeners
    • functions
    • state
  • json?

Create a web page for Multimedia Presentations 2 which will link to all your exercises and projects.

It should include the following:

  • linked at student####/presentations2/ (check link from student list below)
  • your name
  • links 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?

connect via ftp...

due: August 28/29

nothing more to see here... go away