Prezentari curs

Resurse
Prezentari curs multimedia IE - 2020 Prezentari curs multimedia IE

Teme abordate

Elemente generale

Resurse
Wikipedia - HTTP Informații generale referitoare la protocolul HTTP
Google - Chrome Developer Tools Informații utilizare Developer Tools în Google Chrome

1. Limbajul HTML

Resurse
MDN - HTML Tutorial În special secțiunile: Getting started with HTML, What’s in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, HTML tables, HTML forms

2. Limbajul CSS

Resurse
MDN - CSS Tutorial De urmărit în special secțiunile Introduction to CSS, Styling text, Styling boxes, CSS layout (doar Introduction, Normal Flow, Floats, Positioning).
Exemple
Agenda Agenda Telefonică - utilizare elemente HTML și formatare document utilizând CSS.
Agenda Optional - Agenda Telefonică - formatare document utilizând CSS Flex / Grid / Media Queries + formatare utilizand Bootstrap.

3. Limbajul JavaScript

Resurse
JavaScript.info
PART 1 - The JavaScript language
================================

1.1 An Introduction to JavaScript
1.4 Developer console

2. JavaScript Fundamentals (toate secțiunile)

3.1 Debugging in Chrome

4.1 Objects
4.2 Object references and copying
4.4 Object methods, "this"
4.5 Constructor, operator "new"

5.1 Methods of primitives
5.2 Numbers
5.3 Strings
5.4 Arrays
5.5 Array methods

6.3 Variable scope, closure
6.4 The old "var"
6.5 Global object
6.6 Function object, NFE
6.8 Scheduling: setTimeout and setInterval

11.1 Introduction: callbacks
11.2 Promise
11.3 Promises chaining
11.8 Async/await


PART 2 - Browser: Document, Events, Interfaces
==============================================

1. Document (toate secțiunile, fără 1.9, 1.10)

2.1 Introduction to browser events
2.2 Bubbling and capturing
2.4 Browser default actions

3.1 Mouse events
3.2 Moving the mouse: mouseover/out, mouseenter/leave
3.5 Keyboard: keydown and keyup

5.1 Page: DOMContentLoaded, load, beforeunload, unload

PART 3 - Additional articles
============================

3.1 Fetch
4.2 LocalStorage, sessionStorage

MDN JavaScript Guide, Ghid JavaScript (Mozilla Developer Network)
Exemple
Agenda - DOM Agenda Telefonică - utilizare elemente JavaScript pentru manipulare DOM.

4. Biblioteca jQuery

Resurse
jQuery Pocket Reference De urmărit capitolele 1, 2, 3, 4, 6 și 7.
Exemple
Agenda - jQuery Agenda Telefonică - utilizare jQuery pentru manipulare DOM și accesare server.
Eurostat Prezentare date preluate de pe serverul Eurostat folosind culori.

5. Grafică raster

Resurse
Canvas Pocket Reference Capitolul 1.
Exemple
Canvas - Procesare imagine Utilizare canvas pentru manipularea vectorului de pixeli dintr-o imagine
Canvas - Desenare histograma, Drag and Drop, Salvare imagine Utilizare canvas pentru desenarea histogramei de culoare asociate unei imagini incarcate de utilizator prin drag and drop.

6. Audio / Video

Resurse
JavaScript: The Definitive Guide Secțiunea 21.2 - Scripting Audio and Video
Tutorial procesare video Tutorial utilizare canvas pentru procesare video în timp real.
Exemple
Exemplu procesare video Exemplu utilizare canvas pentru procesare video în timp real.
Audio - Playlist Utilizare metode și proprietăți obiect media pentru control flux și construire playlist.

7. Grafică vectorială

Resurse
SVG Essentials De urmărit secțiunile 1-8 și 11.
Documentație d3.js Documentație bibliotecă d3.js.
Exemple
Mini-editor SVG Exemplu care include:
  • utilizare SVG in HTML5
  • manipulare SVG din JavaScript
Construire grafice Exemplu care include:
  • utilizare biblioteca d3.js
  • utilizare server proxy pentru acces date la distanță
  • stocare locală
  • desenare grafice