Prezentari curs

Resurse
Prezentari curs multimedia IE	Prezentari curs multimedia IE

Teme abordate

Elemente generale

Componente principale: Browser / Server Web
Protocolul HTTP
Rolul limbajelor HTML, CSS și Javascript; reprezentarea DOM;
Utilizare browser (Google Chrome) / developer tools
Construire / editare / rulare proiect folosind Visual Studio 2010

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

Rolul limbajului
Elemente de sintaxă: tag, atribut, tratare caractere speciale
Structura unui document HTML: DOCTYPE, html, head, body
Tipuri de elemente: block / inline
Utilizare elemente de bază: text, paragrafe și titluri, imagini, legături, tabele, liste, formulare

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

Rolul limbajului
Elemente de sintaxă - structura unei reguli CSS
Moduri de includere CSS
Selectori de bază (element, id, clasă) și modul de combinare
Reguli de moștenire și înlănțuire în cascadă
Unități de măsură (%, em, px, pt)
Formatare text
Margini (border, margin / padding) și dimensiune elemente (width, height, min/max-width/height, overflow)
Control layout (display, float, clear, position)
Formatare elemente HTML: labele, formulare, legături, liste, ...

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

Elemente de bază ale limbajului (variabile, obiecte standard, structuri de control, etc)
Includere în HTML
Manipulare DOM (citire, modificare și legare evenimente)

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)

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

Includere bibliotecă
Manipulare DOM și proprietăți elemente
Evenimente
Accesare server

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

Includere și accesare element canvas
Desenare și umplere suprafețe
Sisteme de coordonate și transformări
Desenare text
Desenare imagini și manipulare pixeli

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

Includere și accesare elemente audio / video
Controlare obiecte audio / video prin intermediul Javascript
Afișarea pe canvas și procesare în timp real pentru fluxuri 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ă

Construire documente SVG folosind markup
Manipulare SVG din JavaScript
Construire grafice utilizând biblioteca d3.js

Resurse
SVG Essentials	De urmărit secțiunile 1-8 și opțional 11.

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