multimedia presentations 2

2nd-half projects

  • mobile app feedback & description (in class)
  • web project 3(November 9th)
  • personal project November 23rd)
  • web portfolio page (December 7th)

  • Vue.js

    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

    Can you see the difference between the .png, .gif with pink matte and .svg?

    tips: keep your lines on the pixel. use .gif with matte if you know the background colour or even better? use .svg when you can (thanks Marius)

    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