a javascript framework for presentations and animations
play

A JavaScript Framework for Presentations and Animations on Computer - PowerPoint PPT Presentation

Oct 23, 2023 •470 likes •1.32k views

A JavaScript Framework for Presentations and Animations on Computer Science Laszlo Korte Bachelor Thesis Technical Aspects of Multimodal Systems Department of Informatics University of Hamburg 1 / 76 May 3, 2016 - Laszlo Korte - JavaScript

  1. A JavaScript Framework for Presentations and Animations on Computer Science Laszlo Korte Bachelor Thesis Technical Aspects of Multimodal Systems Department of Informatics University of Hamburg 1 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  2. Outline 1. Introduction 2. Web Platform ○ The Browser ○ NodeJS ○ Workflow ○ Graphical User Interface 3. Components ○ Demos 4. Architecture 2 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  3. Introduction Motivation 3 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  4. Motivation ● Computer Science deals with abstract topics ● Hard to grasp without trying ● Short feedback cycle for building intuition ➔ Interactive learning experience 4 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  5. Matlab Components ● Boolean expression parsing and evaluation ● Binary number encoding and decoding ● Finate-state machine simulation ● Algorithm visualisation ● … 5 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  6. Matlab Components - FSM finite-state machine simulator 6 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  7. Matlab Components - number encoding number “circle” 7 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  8. Matlab Components - base conversion visualisation of an algorithm for base conversion 8 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  9. Java Applets ● Karnaugh map editor ● Advanced FSM editor 9 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  10. Java Applets - Karnaugh map Karnaugh map editor 10 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  11. Java Applets - Karnaugh map Karnaugh map editor 11 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  12. Java Applets - FSM Finite-state machine editor 12 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  13. Java Applets - FSM Finite-state machine editor 13 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  14. Issues ● Matlab ○ Not free, licensing restrictions ○ Not trouble-free with current Matlab version ○ Not on mobile devices 14 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  15. Issues ● Matlab ○ Not free, licensing restrictions ○ Not trouble-free with current Matlab version ○ Not on mobile devices ● Java Applets ○ Not on iOS (iPad, iPhone) ○ Not usable on touch screens 15 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  16. Introduction Objective 16 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  17. Objective ● A new collection of components ○ no licensing issues ○ not limitted to a small set of devices ➔ The web as free and open platform ➔ Touch screen support ➔ Support a wide range of screen sizes 17 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  18. Objective - components ● Karnaugh map editor ● Finite-state machine editor ● Boolean expression editor ● Number circle ● ... ➔ Expandable later on 18 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  19. Web Platform The Browser 19 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  20. The Browser ● Display HyperText Markup Language Documents (HTML) ● Documents can be styled via Stylehsheets (CSS) ● Documents may contain code to execute (JavaScript) 20 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  21. The Browser - example HTML document index.html 21 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  22. The Browser - example HTML document index.html 22 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  23. + CSS index.html 23 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  24. + CSS index.html 24 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  25. + JS index.html 25 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  26. + JS index.html 26 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  27. + JS index.html 27 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  28. + JS index.html 28 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  29. + JS index.html 29 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  30. The Browser - example document index.html 30 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  31. The Browser ● HTML Document is the entry point ○ links to/embeds stylesheets ○ links to/embeds javascripts ● Most of the application is defined in JavaScript (JS) ➔ start with an almost empty document, build everything in JS 31 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  32. The Browser - Document Object Model ● DOM API allows querying and modifying the whole document 32 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  33. The Browser - JavaScript ● No module system ○ difficult to split application into modules ● No static type system ● Weird semantics ○ 5 + "5" === "55" ○ 5 * "5" === 25 ● API differences across browsers 33 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  34. Web Platform NodeJS 34 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  35. NodeJS Source: https://nodejs.org/en/about/resources/ ● JavaScript runtime environment ○ Based on Chrome’s JavaScript engine V8 ○ Run JavaScript outside the browser ➔ Large ecosystem of open source libraries and tools 35 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  36. NodeJS - Package Manager Source: https://www.npmjs.com/ ● Command line tool for managing dependencies ○ Like maven for Java or easy_install for python ● Access to >250.000 libraries 36 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  37. Web Platform Workflow 37 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  38. Babel Logo: https://github.com/babel/babel ESLint Logo: http://eslint.org/ Webpack Logo: https://webpack.github.io/ Workflow - Tools ● BabelJS ○ Access to future JS features (eg. module system) ● ESLint ○ Check source code for common errors ● Webpack ○ Module bundler ○ combine multiple JS files and libraries into one file 38 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  39. Workflow - Babel Source: https://github.com/babel/babel ES6 module import syntax 39 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  40. vendor/LibX Workflow - Tools moduleA.js moduleB.js main.js 40 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  41. Workflow - ESLint Source: http://eslint.org/ moduleA.js moduleB.js main.js 41 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  42. Workflow - Webpack Source: https://webpack.github.io/ moduleA.js moduleB.js bundle application.js main.js 42 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  43. Workflow - Webpack layout.css moduleB.css Source: https://webpack.github.io/ moduleA.js style.css application .js moduleB.js bundle application. css main.js 43 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  44. Workflow - Webpack Dev Server 44 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  45. Workflow - Webpack Dev Server ● No manual recompile ● Watches the file system for changes ● Pushes changes to browser (via websocket) 45 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

  46. Workflow - Webpack Dev Server ● No manual recompile ● Watches the file system for changes ● Pushes changes to browser (via websocket) connect moduleA.js watch Dev Server main.js notify moduleB.js browser http://127.0.0.1:3000 file system 46 / 76 May 3, 2016 - Laszlo Korte - JavaScript Framework for Presentations on Computer Science

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

This presentation contains animations which require PDF browser which accepts JavaScript. For

This presentation contains animations which require PDF browser which accepts JavaScript. For

This presentation contains animations which require PDF browser which accepts JavaScript. For best results use Acrobat Reader. RSK problems theorem: bumping routes proof, the easy part proof, science fiction the end R obinson- S chensted- K

1.11k views • 85 slides
Animations Animations with Timers Double Buffering 1 CS 349 - Animations Animation A

Animations Animations with Timers Double Buffering 1 CS 349 - Animations Animation A

Animations Animations with Timers Double Buffering 1 CS 349 - Animations Animation A simulation of movement created by displaying a series of pictures, or frames. Animation: drawing frames at a consistent rate . Goals: Move

350 views • 13 slides
iOS Animation with Swift Part 5: Keyframe Animations Keyframe Animations Keyframe Animations

iOS Animation with Swift Part 5: Keyframe Animations Keyframe Animations Keyframe Animations

iOS Animation with Swift Part 5: Keyframe Animations Keyframe Animations Keyframe Animations 25% 25% 50% 10% start time end time total duration KeyFrame Animation APIs UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: nil,

195 views • 7 slides
Selenium Tutorial What is Selenium? Javascript framework that runs in your web- browser

Selenium Tutorial What is Selenium? Javascript framework that runs in your web- browser

Selenium Tutorial What is Selenium? Javascript framework that runs in your web- browser Works anywhere Javascript is supported Hooks for many other languages Java, Ruby, Python Can simulate a user navigating through pages and

310 views • 17 slides
GUI$Applica+ons$ Concurrent$Swing$ Niklas$Fors$ 2013>11>13$

GUI$Applica+ons$ Concurrent$Swing$ Niklas$Fors$ 2013>11>13$

GUI$Applica+ons$ Concurrent$Swing$ Niklas$Fors$ 2013>11>13$ Swing$$A$GUI$framework$in$Java$ Swing$ Swing$is$ single'threaded $ Android$UI,$SWT,$QT,$MacOS$Cocoa,$X$Windows$ (However,$there$are$some$methods$that$are$

311 views • 14 slides
JavaScript Primer Basic Introduction of JavaScript JavaScript History Why (re)introduce

JavaScript Primer Basic Introduction of JavaScript JavaScript History Why (re)introduce

JavaScript Primer Basic Introduction of JavaScript JavaScript History Why (re)introduce JavaScript? Notorious for being worlds most misunderstood programming language o (Douglas Crockford -

432 views • 11 slides
Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 1 Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard

1.1k views • 57 slides
Introduction to JavaScript Niels Olof Bouvin 2 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 2 Overview A brief history of JavaScript and

Introduction to JavaScript Niels Olof Bouvin 2 Overview A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard

1.03k views • 54 slides
CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? JavaScript is a dynamic

CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? JavaScript is a dynamic

CE419 Session 5: JavaScript Web Programming 1 What is JavaScript? JavaScript is a dynamic programming language. Introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser. It has made modern web

795 views • 35 slides
The Point of Holly Schinsky devgirlfl devgirl.org Vue.js is The Progressive JavaScript

The Point of Holly Schinsky devgirlfl devgirl.org Vue.js is The Progressive JavaScript

Exploring JavaScript Frameworks The Point of Holly Schinsky devgirlfl devgirl.org Vue.js is The Progressive JavaScript Framework Creator - Evan You Initial release in Feb 2014 Previously worked at Google and Meteor W orks on Vue full

556 views • 30 slides
Constraint Satisfaction Problems R&N Chapter 5 Animations from

Constraint Satisfaction Problems R&N Chapter 5 Animations from

Constraint Satisfaction Problems R&N Chapter 5 Animations from http://www.cs.cmu.edu/~awm/animations/constraint 1 Outline Definitions Standard search Improvements Backtracking Forward checking Constraint

878 views • 46 slides
KadOH Kademlia over HTTP a Javascript framework bringing DHT to mobile applications What have

KadOH Kademlia over HTTP a Javascript framework bringing DHT to mobile applications What have

Alexandre Lachze Pierre Guilleminot KadOH Kademlia over HTTP a Javascript framework bringing DHT to mobile applications What have been done so far in the DHT landscape ? * * Distributed Hash Table Theoretical resuts Chord Kademlia

1.19k views • 40 slides
JavaScript: The Good Parts vs. JavaScript: The Definitive Guide CS 252: Advanced Programming

JavaScript: The Good Parts vs. JavaScript: The Definitive Guide CS 252: Advanced Programming

JavaScript: The Good Parts vs. JavaScript: The Definitive Guide CS 252: Advanced Programming Language Principles Introduction to JavaScript Prof. Tom Austin San Jos State University History of JavaScript In 1995, Netscape hired Brendan

395 views • 16 slides
Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful

Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful

Advanced JavaScript Lars Larsson Today JavaScript strings JavaScript Advanced JavaScript dates JavaScript timing events JavaScript Lars Larsson cookies Graceful degradation AJAX Summary Lecture #11 Advanced JavaScript 1

831 views • 38 slides
Using animations within L A T EX documents Michael Doob Department of Mathematics University of

Using animations within L A T EX documents Michael Doob Department of Mathematics University of

Using animations within L A T EX documents T EX Users Group meetingJuly 30, 2014 Michael Doob Using animations within L A T EX documents Michael Doob Department of Mathematics University of Manitoba July 30, 2014 Using animations

497 views • 23 slides
Land Certication and Schooling in Rural Ethiopia Heather Congdon Fors 1 ,Kenneth Houngbedji 2 ,

Land Certication and Schooling in Rural Ethiopia Heather Congdon Fors 1 ,Kenneth Houngbedji 2 ,

Land Certication and Schooling in Rural Ethiopia Heather Congdon Fors 1 ,Kenneth Houngbedji 2 , Annika Lindskog 1 June 7, 2016 1 University of Gothenburg 2 Paris School of Economics Congdon Fors, Houngbedji, Lindskog Land Certication and

2.16k views • 75 slides
Applets and HTML Chapter 13 Chapter 13 1 Reminders Project 8 due Dec 8 @ 10:30 pm

Applets and HTML Chapter 13 Chapter 13 1 Reminders Project 8 due Dec 8 @ 10:30 pm

Applets and HTML Chapter 13 Chapter 13 1 Reminders Project 8 due Dec 8 @ 10:30 pm Project 6 regrades due by midnight tonight Submit all files (including your exception classes) Nothing scheduled for CS180 next week: No

410 views • 26 slides
Cardinal axiom A user interface is well -designed when the program behaves exactly how the

Cardinal axiom A user interface is well -designed when the program behaves exactly how the

1/24/2018 User Interface Design CSC 4700 Software Engineering Dr. Tom Way CSC 4700 1 Why study user interfaces? Good UIs are critical to success UI programming is easy (sophisticated algorithms not required) straightforward

415 views • 9 slides
Js tips and tricks javascript is bad javascript is good - You can change the appearance and

Js tips and tricks javascript is bad javascript is good - You can change the appearance and

Js tips and tricks javascript is bad javascript is good - You can change the appearance and behaviour of everything that you see in a webpage - Extremely easy to make other people access your work - You can write good code if you know how

424 views • 41 slides
d7-wysiwyg-stanfordcamp.txt 2012-05-05 WYSIWYG Editors What we'll be covering today: - Text

d7-wysiwyg-stanfordcamp.txt 2012-05-05 WYSIWYG Editors What we'll be covering today: - Text

d7-wysiwyg-stanfordcamp.txt 2012-05-05 WYSIWYG Editors What we'll be covering today: - Text Formats - Filters - WYSIWYG editors - Field configurations - Contributed module settings (a lot of them) The following modules: - WYSIWYG - Better

497 views • 5 slides
Browser-based LaTeX-editor for TUMexam Intermediate talk for the Bachelors Thesis by Adrian

Browser-based LaTeX-editor for TUMexam Intermediate talk for the Bachelors Thesis by Adrian

Chair of Network Architectures and Services Department of Informatics Technical University of Munich Browser-based LaTeX-editor for TUMexam Intermediate talk for the Bachelors Thesis by Adrian Pesch advised by Dr.-Ing. Stephan Gnther,

399 views • 14 slides
locally Be sure that you transfer the current version of your page COMP 101 folder

locally Be sure that you transfer the current version of your page COMP 101 folder

Simple steps Create your page locally Transfer pages Test it from another machine Have ONE folder where you always work locally Be sure that you transfer the current version of your page COMP 101 folder Name not

402 views • 6 slides
HTML Forms Lecture 5 CGS 3066 Fall 2016 October 4, 2016 The < head > tag The < head

HTML Forms Lecture 5 CGS 3066 Fall 2016 October 4, 2016 The < head > tag The < head

HTML Forms Lecture 5 CGS 3066 Fall 2016 October 4, 2016 The < head > tag The < head > tag has several attributes for different purposes. < title > : specify the title of the document. < base > : specify base for

243 views • 12 slides
Ruby Monstas Session 20 Agenda Recap HTML Forms HTTP POST Development Tools Exercises

Ruby Monstas Session 20 Agenda Recap HTML Forms HTTP POST Development Tools Exercises

Ruby Monstas Session 20 Agenda Recap HTML Forms HTTP POST Development Tools Exercises Recap HTTP: Computing model evolution Client Server Request Response HTTP: Uniform Resource Locator (URL) DOMAIN NAME RESOURCE rubymonstas.ch

402 views • 22 slides

More recommend