Workshop on WebELS Meeting and Learning System

Workshop on WebELS Meeting and Learning System Arjulie John Berena, PhD WebELS Project Researcher

National Institute of Informatics, Japan

Place: USTO, Oran, Algeria Date: Monday, May 12, 2014

Schedule

» PART 1. WebELS Meeting System 10:00-12:00 1. Administrator Tasks 2. Slide Presentation Authoring 3. Meeting Session

Devices Setting Up User Roles Content Editing On-the-Fly

4. Open Discussion

» PART 2. WebELS Learning System 13:00-14:00

1. Administrator Tasks 2. Course Authoring

File Preparation and Uploading Slide-Video Synchronization Cursor Recording Re-editing

3. Viewing Function 4. Open Discussion

Target Participants

Participants Know-how

(Meeting Module) Know-how

(Learning Module)

WebELS Administrator

• Manage Group Registration

• Manage Users Registration (Faculty & Students) • Manage Viewer Groups • Manage Category & Subcategory

Faculty

•Create Slide Presentation Content •Organize an online meeting, online lecture, online conference •User roles functions

• Manage Learning Content • Authoring Tools Functions • Issue Content View Permission

Students •Create Slide Presentation Content •User roles functions

• Viewer Tool Functions

Equipment & Materials

» Desktop/Notebook Computer

» Headset (Microphone and Earphone)

» Web Camera

» Multimedia Files (PDF, presentation, images)

» Recorded Video File

WebELS System

» Learning Module – for on-demand self-learning » Meeting Module – for real-time distance communication

Part 1 WebELS Meeting System

» Administrator Tasks (1/2) Add Group

Edit Group

Delete Group

» How to access Administrator Tasks Login as admin

Click “Admin Tasks” button at the top right of the web page.

Choose Administrator Task to perform.

» Administrator Tasks (2/2) Add/Edit Group

Group User Privileges Member – allowed to create, edit, view and delete contents and join a meeting Guest – allowed to only view contents and join a meeting Listener – allowed to join a lecture

Group Limitation Content Create Limitation – sets the number of contents that can be created Concurrent Access Limitation – sets the number of users who can access the group at the same time

» Slide Presentation Authoring (1/3) Prepare multimedia file for slide presentation

Login to your group account.

Click “Create a New Content” button found at the bottom of the Content List.

Supported Multimedia Files PDF Document (doc, docx, odt, swx) Slide Presentation (ppt, pptx, odt, sxi) Image (png, jpg, jpeg, tif, tiff, bmp) Video (mov, avi, wmv, mpg, ogg, mp4, flv)

Click “Create a New Content”

» Slide Presentation Authoring (2/3) Upload file to the server.

Edit and View Passwords Edit Password – used to authenticate user who wants edit, export and delete content View Password – used to authenticate user who wants to view the content

Slide Quality Low Quality Image – slides are converted to PNG images

Medium Quality Image – slides are converted to JPG images High Quality Vector Image – slides are converted to SVG images

» Slide Presentation Authoring (3/3) Edit slide presentation and save to the server.

New content added on the content list.

» Meeting Session (1/13)

» What to share to Meeting Participants? Server URL or IP Address Meeting Group LoginID/Password Content Title

» STEPS in Starting a Meeting Click “Meeting” button on the WebELS server top page.

Login using your group account.

Find the content that has been shared for the meeting participants.

Under the action column on the content list, click “Meeting” button to load the Meeting Panel.

On the Meeting Panel, enter your name and click “Login” button.

» Meeting Session (2/13)

User List, Chat Messaging, File Sharing

Video Conference Slide Presentation

» Meeting Session (3/13)

» Devices Setup Allow Camera and Microphone Access on Adobe Flash Player Settings

Click “Allow”

» Meeting Session (4/13)

» Devices Setup Adobe Flash Player Settings

Select “Setting” Select device Select driver 1 2

» Meeting Session (5/13)

» Devices Setup

System Device Manager Settings

START > Control Panel > Sounds > Microphone/Speaker

Note: Select the suitable device driver for the microphone and speaker.

» Meeting Session (6/13)

» What you should know about User Roles?

The following user roles give the user special rights and privileges when selected:

1. Admin - can manage to turn ON/OFF user camera and microphone 2. Chairman - can change presentation contents during the meeting 3. Presenter - can control slides and other functions for online

presentation

Note: WebELS implements one-Admin , one-Chairman, and

one-Presenter Policy for easier meeting management. However, user roles switching is permitted.

» Meeting Session (7/13)

» ADMIN Controls

Layout Control Standard Small Video Document Wide Video Full-screen

Select Admin

Cam & Mic Control

Shared Display (Layout and

Video Display)

» Meeting Session (8/13)

» ADMIN User Management Panel

Cam & Mic Controls

» Meeting Session (9/13)

» PRESENTER Controls Select “Presenter”

Text Editor Mode

Cursor Pointer

Annotation Tools

Zoom & Drag Functions

On-the-fly Content Editing

Slide Navigation (Mouse Click or Arrow Key Control)

» Meeting Session (10/13)

» Text Editor Mode in Standard Layout

Editable by PRESENTER only

» Meeting Session (11/13)

» Slide Presentation in Document Layout

Cursor Pointer

» Meeting Session (12/13)

» CHAIRMAN Control

Select “Chairman” Sort content by last update

Sort content by title

Select to change content

» Meeting Session (13/13)

» Content Editing on-the-fly

On-the-fly Content Editing

- Add Blank Slide

- Add New File

- Delete Slide

- Delete All Slides

- Restore Original Content

- Restore Modified Content

» Online Conference Example

Part 2 WebELS Learning System

User Class

Privileges

Admin 1. User Management (Add, Edit, Delete, Change Password)

2. Course Management (Create, Edit, Delete, View, Export, Import Course and Assign Course View Permission to Students)

3. Group & Permission Management (Add and Delete Viewer Group, Assign View Permission by User, Category and Course)

4. Category and SubCategory Management (Add, Delete)

5. View Statistics (User access, etc.)

Faculty & Staff

1. Course Management (Create, Edit, Delete, View, Export, Import Course and Assign Course View Permission to Students)

Student 1. View Online Course and Download OFV Course

» User Class and Privileges (1/3)

Admin (admin creates studentgroup01, studentgroup02, etc.) Ex. student01 assigned to studentgroup01

student02 assigned to studentgroup02, studentgroup03

Note: Students can be assigned to multiple viewer groups.

Faculty & Staff (faculty01 creates course01, course02, etc.) Ex. course01 assigned to be viewed by students belonging to studentgroup01

course02 assigned to be viewed by students belonging to studentgroup01, studentgroup02

course03 assigned to be viewed by students belonging to studentgroup01, studentgroup03

Note: Courses can be assigned to multiple viewer groups.

Student (student01, student02, … student..n)

Viewer Group studentgroup03 (student02, …) Ex. Student02 views course03 assigned to studentgroup03

Viewer Group studentgroup01 (student01, …) Ex. Student01 view course01, course02 and course03 assigned to studentgroup01

Viewer Group studentgroup02 (student02, …) Ex. student02 views course02 assigned to studentgroup02

» User Class and Privileges (2/3)

Ex. 1) Assigning View Permission to Students and Courses by Viewer Group

» User Class and Privileges (3/3)

Admin (assigns view permission by user, category, course to viewer groups)

Faculty & Staff (author assigns view permission by course to viewer groups)

Student

Viewer Group: studentgroup01

Viewer Group: studentgroup03

Viewer Group: studentgroup02

course01 course02 course03

course01

course02

course02 course03 course03

Ex. 2) Assigning View Permission to Courses by Viewer Groups

» Administrator Tasks (1/6)

» How to access Administrator Tasks Login as admin

Click “Admin Tasks” button at the top right of the web page.

» Administrator Tasks (2/6)

» First Things First

Create Viewer Groups Add Users, Edit User Create Categories/SubCategories

1

2 Enter “Viewer

Group”

» Administrator Tasks (3/6)

» First Things First

Create Viewer Groups Add Users, Edit User Create Categories/SubCategories

1

2

» Administrator Tasks (4/6)

» First Things First

Create Viewer Groups Add Users, Edit User Create Categories/SubCategories

1

2

» Administrator Tasks (5/6)

» First Things First Create Viewer Groups Add Users, Edit User Create Categories/SubCategories

1

2

» Administrator Tasks (6/6)

» First Things First

Create Viewer Groups Add Users, Edit User Create Categories/SubCategories

1

2

Enter Category & Subcategory

» Course Authoring (1/10)

Pre-recorded Video (MTS, AVI, MPG, MOV, FLV)

Slide Presentation (PDF, PPT, PPTX, ODP)

Note: For MTS Video File, it must be converted to any other format.

Free Video Converter (Windows):

any video converter - http://www.any-video-converter.com/download/

FFmpeg - http://www.wikihow.com/Install-FFmpeg-on-Windows

Linux:

FFMpeg - # yum install ffmpeg

Usage: # ffmpeg -i input.MTS -y -b 800 -r 25 -f flv -vcodec flv -acodec libmp3lame -ab 128 -ar 44100 output.flv

» File Preparation and Uploading

» Course Authoring (2/10)

» File Preparation and Uploading

Click “Create a New Course”

» Course Authoring (3/10)

» File Preparation and Uploading Enter Course Information

Click “Next” 2

1

» Course Authoring (4/10)

» File Preparation and Uploading Browse file to upload

Click “Next”

1

2

» Course Authoring (5/10)

» Slide-Video Synchronization

Content List Source Video Content Preview

Content Details

Editor Tool

» Course Authoring (6/10)

» Slide-Video Synchronization

Start Slide Video Synchronization

Synchronize Next Slide

» Course Authoring (7/10)

» Slide-Video Synchronization

Slide 1 Slide 2 Slide 3 Slide 4 ….. Slide n

V1(i,j) V2(i,j) V3(i,j) V4(i,j) Vn(i,j)

Where: Vn(i,j) - the virtual video clip synchronized for slide n

n – slide number

i – video timing index for key start

j – video timing index for key stop

Skipped Video

Video Stream

» Course Authoring (8/10)

» Cursor Recording

Start Cursor Recording

» Course Authoring (9/10)

» Cursor Recording

Start and Stop Cursor Recording

Red Bold Cursor

Video Preview

» Course Authoring (10/10)

» Content Re-editing

Click “Edit”

Everything is the same as in creating a new course.

» Viewing Function

» Content Viewing

Primary Display Secondary Display

Slide Details

Viewer Tools

Enjoy WebELS!

Thank you.