# Web Tech & Teaching – An Experience

16/10/2017, Mini-Séminaire Créative

# Introduction

## Who Am I?

• Lecturer / Researcher

• MINES Paristech Center for Robotics

• Mathematics / Control / Signal Processing / …

## This Set of Slides

In the context of Web Tech & Teaching:

experience feedback / thoughts / tech. watch

• collection of use cases (some tiny ones)

• pedagogy / implementation / publishing

# Cauchy-Riemann Equations

## Context

### Complex Analysis

Complex-valued functions of a complex variable

• visualisation?

• differentiability?

• holomorphy?

## Stack

• Classic browser tech: HTML / CSS / JS

• 3D in the browser: WebGL / Three.js / MathBox

• Examples (Steve Wittens):

# Poisson Image Editing

## Context

### Complex Analysis

• Solution of the Laplace equation in 2D

• Modern Applications?

• Heat equation?

• Fluid Mechanics?

## Use GIMP

GNU Image Manipulation Program

## More Details …

Poisson Image Editing

# Complex-Step Differentiation

## Context

#### Numerical Analysis

Compute the derivative of `f(x)`.

``````def FD(f, x, h):
return (f(x+h) - f(x)) / h``````

The step `h` may be either too large or too small.

Some other difference schemes perform better.

• Demonstrate the problems with `FD`

• Show the improvement

• Not the solution / explanation yet (teaser)

Video / Screencast?

## Tech Stack

• desktop app: record & upload

• lightweight data: asciicast is just JSON

• ClojureScript project

• embed in HTML or host in the cloud

# Robotics

## Context

### Wheeled Robots Kinematics

Some wheels yield no kinematic constraint.

Example: caster wheels, swedish wheels, etc.

So we remove them from the model.

Not convinced?

Robotics

# Digital Audio Coding

## Context

• experiment / design / build 4 audio codecs:

Lossless codec, voice codec, AU-like, MP3-like

• 10 contact hours (50% lectures / 50% lab sessions)

• no prerequisite (programming, signal processing)

Very tight time budget. Can software help?

## Audio Coding “for Humans”

Python `audio` package

• focus on the API (few new features)

• match the domain abstractions (several layers)

• suitable for live demos & pseudo-code

## The Zen of Python

https://www.python.org/dev/peps/pep-0020/

• Beautiful is better than ugly.

• Explicit is better than implicit.

• Simple is better than complex.

• etc.

## Make / Play / Save a Pure Tone

### High-level API

``````>>> f = 440.0
>>> x = cos(2 * pi * f * t)
>>> x
array([ 1.        ,  0.99803566,  0.99215037, ...,  ,  0.99803566])
>>> audio.io.play(x)
>>> audio.wave.write(x, "A4.wav")``````

## Experience Quantization

### Mid-level API

``````>>> audio.wave.read("A4.wav")
array([[ 0.99996948,  0.99804688,  0.99215698, ...,  0.98236084,
0.99215698,  0.99804688]])
array([[32767, 32704, 32511, ..., 32190, 32511, 32704]], dtype=int16)``````

### Low-level API

``````>>> bytes = open("A4.wav").read()
>>> from audio.bitstream import BitStream
>>> bits = BitStream(bytes).read(8 * 16)
>>> bits
01010010010010010100011001000110101111000000100100000100000000000101011101000001010101100100010101100110011011010111010000100000
'RIFF\xbc\t\x04\x00WAVEfmt '``````

## Specific Needs

It now works on my machine! But …

• non-standard software

• system/platform dependencies

• need a custom student experience

## Platform Architecture

1. Real Machines: /

2. Virtual Machines: / / /

3. Cloud-based VM: / / / /

## Spyder IDE

“Matlab-like” experience

## Jupyter Notebook

Notebook experience

## Jupyter

• Executable Notebook: notes, code, graphs, etc.

• In the browser (with local or remote code execution)

• Support for several languages (including Python)

## Jupyter in the Cloud

• Execution model is cloud-friendly

• Get the benefits of virtual machines

• dependencies/deployement

Free (as in beer): Microsoft Azure Notebooks

# Publishing Courses

## Example

### “Probabilités et Statistiques”

#### by Jacques Harthong

• renowned (if controversial) scientist
(see e.g. Intuitionisme 84 with G. Reeb)

• clear pro-sharing stance (cf “Le Photocopillage”)

• book published (Diderot Editeur Arts Sciences)

• sources published online (Strasbourg University)

• edition out of print

• sources not available anymore

• old tech, sources only (no build)

• build does not succeed

#### Can we do better?

The example of Complex Analysis and Applications

## Hosting

Sources / Documents

• Self-hosting?

• External Provider (ex: GitHub/BitBucket, etc.)

• Institution (role of DOI), Zenodo, HAL (CEL), etc.

## MINES ParisTech / DOI

DOI: 10.23646/oer.000001

## Document Format & Tools

• Document Output Format?

• Process / Tooling?

• Document Input Format?

## The Open Web

Old strengths and growing set of technologies

Semantics / Connectivity / Offline and storage / Multimedia / 2D/3D graphics / Performance and integration / Device access / Styling

## Web-First vs Hybrid Models

#### Still Need PDF/Print ?

Simple format + document model + “converters”

I have been happy with:

## Benefits of a Generic Document Model

• Multiple output targets (Web, PDF, E-PUB, etc.)

(e.g. create a book from several smaller documents)

• Migration / Future-proof

## Building

Make it easy to build the document
(You are probably the one doing it anyway!)

• Setup (instructions / script) & Build (script)

• Provide build platforms (containers or VMs)

• Continuous integration: /