Your Instructor: Prof. Vincent CHARVILLAT, University of Toulouse — Prof. Vincent CHARVILLAT, University of Toulouse

Monday Nov 7, 2016, 5:15pm-9:30pm Hanoi Time

We will cover some admin stuff and clarify the scope of this class. In the second part of the lecture we will also have some practical exercises introducing a basic HTML5/javascript getting-started-example. Your practical production during the labs will be recapped in a report. A seed example of such a report is given below (see the link).

First part: General Introduction

Your first contrib (see also this example of short student Intro)

Second part: first elements about multimedia.

(for Wed. Nov 9th) #1: populate your glossary as an upcoming part of your lab report! Please set-up this report (while getting inspired by this example ?).

A seed example of report for your labs.

Third part : Lab session #1 in practice: a moving ball in JSCRIPT

Start with downloading and installing Node.js from https://nodejs.org/en/download/

Choose and install your editor (Komodo for me on my Mac).

Please follow my instructions to draw and animate your ball! (for Wed. Nov 9th) #2: Populate your report while explaining/rephrasing what we did together.

Tuesday, Nov 8th, 5:15pm-9:30pm Hanoi Time

After finishing what is pending from the previous lesson, we will go through a quick intro to both Jscript and HTML5. We will discover new HTML5 features (including forms, canvas) and start practicing HTML5 multimedia extensions. Before that let's try to answer a few questions about what we already learnt.

Representative questions from the first lecture: Q#1 Give a definition of a multimedia authoring tool. Give one example. Is youtube an authoring tool? Q#2 Why clickstreams complement media streams in an interactive multimedia system? Q#3 What is Node.js? Q#4 How public members of a jscript class are implemented?

First part: getting started with HTML5.

Second part: first pool of slides about Jscript.

Third part: Canvas and cie.

Bonus: A quick intro to HTML5 forms.

Fourth part of this Tuesday lesson: let's discover some new video interactions.

Here is the first one:

A second live demo will be done during the lecture: about zoomable video.

As a reading assignment for Thursday, you're asked to: - select a topic (see the list below, one topic for 2 students) - read and watch the provided material carefully - recap what you understood in 2×7 slides (a template is provided below) - send the slides (in pdf or ppt format) to your instructor - be prepared to present your slides Thursday in 15-20 minutes - be prepared to answer questions (from both your colleagues and your instructor) - please follow the advices suggested by the PPT template (introduce the context, give examples with figures etc.) - the quick oral presentation will allow you to double check your understanding - a written summary of your final understanding will be later added to your report (to be graded)

PPT Template - Similar to the one used for lecture slides

Direct Video Manipulation in 2D Paper

Direct Video Manipulation in 3D Paper

Direct Video Manipulation in 2D

Direct Video Manipulation in 3D

Hyper-hitchcock paper #1

Hypervideo paper #2

HyperHitchcock and hyperVideos (also known as clickable videos).

Dynamic Time Line Paper #1

Smart Like/Time Line Paper #2

Dynamic Time Line Intro

Last part : Lab session #2 in practice: a zoomable video interface

Start with downloading this seed This is a piece of code to play with.

Please follow my instructions to get your first video interface. (for Wed. Nov 9th) #3: Populate your report while explaining/rephrasing what we did together.

Wednesday , Nov 9th, 5:15pm-9:30pm Hanoi Time

The lecture should be broken down in three parts. First, we'll finish our first interactive media (a zoomable video interface) thanks to jscript and HTML5 multimedia extensions. Second, I'll step back and present some key ideas about more general zoomable video interfaces and speak about a methodology for assessing and comparing different interfaces.

Representative questions from the second lecture: Q#1 What is a hypervideo? Q#2 We carefully commented the BMW richmedia advertisement content. Explain its main interactive features and explain why they are difficult to implement. Q#3 Explain how an hypervideo authoring tool would look like? Q#4 « about HTML5/javascript multimedia features » : How can we draw a circular shape on a web page ? How can we duplicate a video in a canvas ?

First part of the third lecture: when our UI will be done, we'll be modeling it with an automata and get back to the MVC model to see how our implementation fits with it. We used these slides to explain that point.

Second part. Let's explain more about video interaction design and evaluation (zoomable video use case).

The Toulouse & Singapore zoomable video players

Third part. Evaluating QoE given a multimedia (content, presentation, UI, system).

How to assess the quality of a mmedia interface through user studies (discussion/definition about user studies).

your first user study as participants

another user study with microworkers.com

TO DO (for Thurs. Nov 10th) #1: please install python2 or ensure that you can launch a python 2 server with a command like “python server.py” where the py file is here (please change .py.txt in .py suffix) then snsure that your python server answers “serving at port 8000”!

TO DO (for Thurs. Nov 10th) #2: please prepare and send your reading assigments.

TO DO (for Thurs. Nov 10th) #3: do the user studies as participants, give your personal definition of a user study, put it in the report along with feedback comment from the performed user studies

Thursday , Nov 10th, 5:15pm-9:30pm Hanoi Time

In this lecture, we'll have your oral presentations first (reading assignments). We'll then go through the presentation of HTML5 multimedia extensions and discover new features for both audio and video. In a last effort, we'll change the rules of lab sessions and you'll be asked to understand an existing code instead of producing your own program.

Representative questions from what we discussed yesterday: Q#1 Give a definition of a user study for multimedia interactive systems evaluation or comparison. Illustrate with one example. Q#2 How to set-up a user-study in order to compare two interactive authoring tools (eg. A, B). Give one example Q#3 What is microworkers.com website about? How does it relate to our course? Q#4 Give a definition of the MVC model for UI design. How is the rationale behind this architecture? How did we use it in our HTML5/jscript implementation? Q#5 We coded a simple version of a zoomable video interface which allows to zoom anywhere into the displayed HD video. We discussed an extension where recommended viewports were displayed as clickable semi-transparent rectangular areas. Please propose another (visual) design for such viewports. Q#6 We coded a simple version of a zoomable video interface for which only one level of zoom was allowed. Could you specify with an automata how an extended version including 3 levels of zoom would work? Q#7 « and the HTML5/javascript question » : How can we draw a rectangular shape on a web page ?

Here is the presentation…

Here is Eric's presentation.

Here is their joint presentation.

Here are some slides for the presentation of HTML5 multimedia extensions and interesting features for both audio and video.

Audio and Video in HTML5 + Javascript.

New type of effort coming! Here is a complete code to play with

Please follow my instructions and please think (constantly) about populating your lab report. Did you describe what and how we coded for our first zoomable video interface? Did you include a written summary of major take-home messages from your reading assignment?

Friday , Nov 11th, 5:15pm-9:30pm Hanoi Time

In this lecture, we'll first have last oral presentations (reading assignments). In a second time we'll design a user study that aims at comparing 2 versions of our direct manipulation video player. Last we'll present your project and explain how office hours will help you in the upcoming weeks.

Representative questions from what we discussed yesterday: Q#1 Why could we say that a like-line (for video browsing) is a user-aware UI? Q#2 Why could we say that a like-line (for video browsing) is not explicitly a content-aware UI? Q#3 Why browsing an hypervideo could lead to user's disorientation? Q#4 How could we deign an hypervideo UI that limits this disorientation? Q#5 About « Random access to media »: Explain why we say that a video can be « random-accessed ». Cite two examples of random access functions to a video both in time and image spaces Q#6 About « multimedia application interface »: Define the term 'ergonomics'. Define the term 'aesthetics' Q#7 Getting back to UI evaluation and comparison, what is a MOS (mean opinion score)? Q#8 « a little bit of coding » You want to add a video interaction to control the sound volume by doubleclicking on a video included in a HTML5 web page. The volume can be gotten as an attribute of the associated video element. Possible values for this attribute are ranging from 0.0 (mute) to 1.0 (normal). The interaction involves a three states strategy : when the volume is normal (defaut value, 1.0), a doubleclick on the video leads to set the volume to the intermediate 0.5 value. When the volume value is 0.5, a doubleclick on the video sets the volume value to 0 (mute) and then the subsequent doubleclick brings the volume back to the initial value and so on. Please write a javacript code (or at least the most important parts of it) to implement such an interaction.

Here is the presentation.

Here is John's presentation.

Last but not least your project is here

Get started package (available code).

Please respect the rules explained during the general intro (see the first pool of slides from lecture #1) The report (started during the labs) must be extended with the explanations about your personal project. Please send your code along with the report before Nov. 28th (midnight, Hanoi Time).

Office hours before the end of your project: Nov 18th, 2016, 20:30-22:30 Hanoi Time Nov 24th, 2016, 18:00-20:00 Hanoi Time Nov 25th, 2016, 18:00-20:00 Hanoi Time (please get in touch one day before to set-up a 10-40 minutes individual skype session if needed)