View
231
Download
2
Category
Preview:
Citation preview
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 1/121
Structura CURS Activitate didactica: Curs (14 activitati) +
Laborator (14 activtati)
Modalitate evaluare: Sustinere proiect +evaluare cunostinte teoretice
Obiectiv: Însuşirea elementelor teoretice sipractice care sa permita dezvoltarea de aplicatii
multimedia
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 2/121
EvaluareEvaluare Proiect
proiectul se sustine in ultimele 2 saptamani ale Semestrului I; comisia de evaluare este formata din profesorul de curs si
asistentul de la seminar;
proiectul este individual; Cerinte Proiect
realizarea unei aplicatii multimedia Web interactive intr‐un mediu WEB ‐ Microsoft Expression Web sau Adobe
Dreamweaver; Implementarea principalelor elemente multimedia: sunet,
imagine, video, animatie;
Asigurarea unui nivel ridicat de interactivitate pentru utilizator;
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 3/121
Continut curs Conceptul de multimedia
Elemente hardware şi software
Imaginea.
Sunetul. Video digital
Sisteme software pentru aplicaţiile multimedia. Adobe
Flex, Adobe Flash, Adobe Director, Microsoft PopFly.
Dezvoltarea aplicatiilor multimedia pentru prezentare,
publicitate si reclama.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 4/121
Multimedia Combinatie de texte, grafica digitala, sunet, animatie si
video furnizata de catre computer sau prin orice alte
mijloace electronice sau digitale
Manipulare digitala a elementelor de tip text, imagini,
grafica, sunet, animatie si video
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 5/121
Cunostinte necesare Creativitate + imaginatie
Utilizare tehnologii informatice
Utilizare dispozitive digitale
Talent organizatoric Management de proiecte
Documentare si arhivare
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 6/121
Concepte Interactive multimedia (rich media) – utilizatorul
proiectului multimedia controleaza ce elemente si cand ii
sunt furnizate
Hypermedia – proiect interactiv in care exista o structurade elemente prin care utilizatorul poate naviga (World
Wide Web)
Proiect multimedia ‐ combinatia intre software, mesaj sicontinut ce este livrata utilizatorului final
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 7/121
Concepte Scenariu / Storyboard – defineste cum interactioneaza
utilizatorul cu aplicatia
GUI (Graphical User Interface) – ceea ce primeste vizual
utilizatorul si cum este prezentat continutul pe monitor
Platforma – mediu hardware si software care ofera suport
pentru proiectul multimedia (stabileste limitele a ceea ce
se poate sau nu face) Authoring tools – instrumente ce permit gestiunea
individuala a elementelor multimedia si a interactiunii cu
utilizatorul
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 8/121
Proiecte Multimediadupa domeniul
training(educativ)
medical (tomograf,ecograf – cu periferice specializate)
industrial (scheme de flux tehnologic folosind simulari)
geografic (harti digitale)
servicii, reclama, vanzari
dupa destinatie si interactivitate
de interes public si personal
locale si telematice(la distanţă)
de tip videoconferinta
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 9/121
Proiecte Multimediadupa nivelul de interactivitate:
liniar = proiectul este vizualizat fara a interveni
(noninteractive)
nonliniar = utilizatorul are control asupra derulariiproiectului (Interactive)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 10/121
Resurse hardwareDispozitive periferice + componente hardware:
Pentru imagini fixe: scanner, aparat foto digital,scaner de
film, dispozitiv mobil
Pentru sunet:placa de sunet(funcţionează ca un convertor analog‐digital), microfon
Pt video: placă de captura şi numerizare video, camere
video, tuner TV
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 11/121
Resurse software Programe de control a perifericelor(drivere)
Software multimedia(ca extensie a S.O.)
Soft utilitar pentru comunicaţii
Pentru video: Adobe Premiere/MovieMaker/VirtualDub
Pentru sunet: Adobe Soundbooth
Software de creaţie multimedia care organizează proiectul:
de‐a lungul unei axe a timpului (secvenţialitatea elementelor în funcţie de factorul timp) – Adobe Flash, Adobe Director
pe baza unei simulari prin captura ecran si sunet – Camtasia
Studio
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 12/121
Premise 1965 – se definesc principiile fibrei optice
1977 – este lansat Apple II, primul cu interfata color
1981 – primul PC IBM
1983 – CD (compact disc) lansat pe piata
1984 – se pun bazele Internetului (reteaua ARPA)
1985 – Commodore Amiga primul computer multimedia
1985 – CD‐ROM (compact disc read‐only memory)
1986—The Academic American Encyclopedia prima enciclopedie pe CD‐ROM.
1988 – Macromind (fosta Macromedia) lanseaza Director, un
instrument pentru multimedia authoring.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 13/121
Premise 1991 – apare World Wide Web
1991 – este inventat formatul MP3
1993 – Mosaic primul Web browser cu grafica
1995 – Disney lanseaza Toy Story , primul film realizat in totalitate pe calculator (77 minute = 4 ani + 800,000 ore
pentru a genera grafica)
1996 – camera digitala devine accesibila publicului larg
1996 – este lansat DVD video
1998 – primul MP3 player
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 14/121
Formate de stocare a resurselor mod de a codifica informaţii pentru a fi stocate pe
calculator
formatele oferă informaţii referitoare la tipul fişierului,
dar şi la modul în care datele au fost codificate şi comprimate (formatul este codat si intern in sursa)
pentrua fi recunoscut tipul formatului, fişierele au
asociată o extensie
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 15/121
Formate de stocare a resurselorCele mai cunoscute formate de fişier sunt:
pentru imagini: bmp, jpeg, gif, png, tiff;
pentru sunete: wma, mp3, wav, flac;
pentru video: wmv, avi, mpeg pentru animatie: fla, dir
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 16/121
Imagine Modele de culori
RGB
CMYK
HSB Lab
Grayscale
Web‐safe
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 17/121
Imagine
Palete de culori utilizate(gamut): A – Ciel Lab
B – Imagini digitaleC – Dispozitive
Documentatie Adobe Photoshop
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 18/121
ImagineRGB
utilizeaza 3 culori de baza (Red, Green, Blue)
fiecare culoare are o intensitate intre 0 si 255
pentru valori egale R=G=B se obtin tonuri de gri
R
G
B0
255
255
255
negru
alb
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 19/121
ImagineRGB
sunt culori aditive
lipsa celor 3 tipuri de lumina genereaza negru (0
pentru fiecare culoare) prezenta celor 3 tipuri de lumina la intensitate maxima
(255) genereaza alb
mai multe palete de culori: Adobe RGB, sRGB, ProPhoto RGB
utilizat de dispozitivele vizuale
Documentatie Adobe Photoshop
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 20/121
ImagineCMYK
utilizeaza 4 culori de
baza (Cyan, Magenta, Yellow, Black)
fiecare culoare are o
intensitate intre 0% si
100% sunt culori substractive
utilizat de dispozitive
pentru imprimare
Documentatie Adobe Photoshop
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 21/121
ImagineRGB vs CMYK
Documentatie Adobe Photoshop
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 22/121
ImagineHSB
model construit in jurulproprietatilor Hue, Saturation, Brightness
bazat pe perceptiaumana a culorii
Modelul HSB
H – Hue
S – SaturationB ‐ Brightness
Documentatie Adobe Photoshop
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 23/121
ImagineLab Color
mai este definit si CIE L*a*b (Lightness, a –componenta verde‐rosu, b – componenta albastru‐
galben)
L variaza intre 0 si 100, iara si b intre +127 si ‐ 128
bazat pe perceptia umana a culorii
valorile numerice din acest model descriu toateculorile pe care le poate vedea o persoana
este un model independent de dispozitiv
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 24/121
ImagineGrayscale
defineste tonurile de gri
intr‐o imagine cu o adncime a culorii de 8 biti pot
exista 256 tonuri de gri tonul de gri poate fi reprezentat ca procent culoare
neagra (0% ‐ 100%)
fiecare pixel gri are o luminozitate intre 0 (negru) si255 (alb)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 25/121
Imagine Web‐safe
set limitat culori derivat din RGB
utilizeaza un set de 256 culori
setul de culori este utilizat de toate browser‐ele
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 26/121
ImagineCaracteristici
Nuante culori (Hue)
Luminozitate (Brightness)
Saturatie (Saturation) Contrast (Contrast)
Balanta culori (Color balance)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 27/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 28/121
ImagineSaturatie (Saturation)
descrie intensitatea sau “puritatea” unei culori
reprezinta nivelul de gri in raport cu nuanta, avand
valori intre 0% (gri) 100% (intensitate maxima)
Luminozitate (Brightness)
luminozitatea inchisa/deschisa a unei culori masurateintre 0 % (negru) si 100% (alb)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 29/121
ImagineContrast (Contrast)
masoara diferenta intre luminozitatea zonelor inchisesi a celor deschise
Balanta culori (Color balance)
analizeaza distributia paletei de culori
culoarea predominanta afecteaza nuantele celorlalteculori
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 30/121
Imagineselectie
culoare initialaculoare noua
optiune culori sigure Web
tonuriculoare
paleta culori
valoareculoare
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 31/121
ImagineHistograma unei imagini
umbre tonuri de mijloc lumini
numar pixeli
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 32/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 33/121
Imagine Tipurie de imagine
Matriceala (bitmap)
Vectoriala
Algoritmi compresie
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 34/121
ImagineFormatul bitmap:
o matrice informaţională simplă, fiecare element
desemnând culoarea pixelului respectiv
imaginea e voluminoasă; imaginea este dependentă de scala de vizualizare
nu se poate adapta unei scări variabile de vizualizare
cu cat creste gradul de comprimare , cu atât scade calitatea imaginii obţinută la decompresie.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 35/121
ImagineFormatul bitmap:
Echipamentele(destinate achiziţionării de imagini fixe
din exterior lucrează cu imagini în format bitmap):
Scanner (DPI – Dots Per Inch) Scanner de filme
Aparat digital (JPG, Raw)
camera Web
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 36/121
ImagineFormatul bitmap:
Formate de stocare a imaginii de tip bitmap: BMP ICO (pentru pictograme – 32 X 32) TIFF ( legat de scanare Tag Image File Format)
DIB ( Device Independent Bitmap) DDB ( Device Dependent Bitmap) JPG (Joint Photographic Experts Group, format bitmap comprimat
după algoritmul JPEG)
GIF ( pentru transferul la distanţă a bitmapurilor) PNG (Portable Network Graphics)
http://en.wikipedia.org/wiki/Comparison_of_graphics_file_format
s
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 37/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 38/121
Imagine ‐ Bitmap salveaza imagini digitale
BMP (Microsoft Windows Bitmap)
mai este cunoscut sub denumirea DIB (device ‐independent bitmap)
are extensia: .bmp sau .dib
continutul este necomprimat şi de aceea, acestea ating dimensiuni foarte mari
marimea fisierului depinde atat de dimensiunea imaginii, in pixeli, cat si de adancimea culorii (bit depth sau color depth)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 39/121
Imagine ‐ Bitmap Adancimea culorii (bit depth sau color depth):
numarul de biţi folosiţi pentru a descrie fiecare pixel (punct individual) dintr‐o imagine
are valori egale cu 1, 4, 8, 24 sau, 32 biţi. imagini alb/negru ‐ 1 bit
imagini cu 16 culori ‐ 4 biti folosesc 16 culori
imagini cu 256 culori ‐ 8 biţi 256 culori
imagini cu 16,7 * 106 culori (câte un octet pentru roşu, verde şi albastru – modelul RGB) ‐ 24 biţi
imagini cu zona de transparenta (model RGB + 1 octet
pentru transparenta) ‐ 32 biti
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 40/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 41/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 42/121
Imagine ‐ BitmapCompresia / decompresia imaginilor
ALGORITMI:
cu pierdere de informaţie
f ără pierdere de informaţie
asimetrici (durează mai mult comprimarea)
simetrici (timp comprimare ≡ timp decomprimare )
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 43/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 44/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 45/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 46/121
Imagine ‐ Bitmap VCX (PC PaintBrush File Format):
format recunoscut pe platforma Windows –PaintBrush
trateaza imaginea codificată pe 8 biţi (256 de culori), de dimensiune maximă 64000 * 64000 pixeli
algoritmul de compresie utilizat de acest format este
RLE
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 47/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 48/121
Imagine ‐ BitmapICO (Icon Resource File)
este un format bitmap
imagini de dimensiune mica folosit de Windows
pentru reprezentarea icon‐urilor program acceptă definiţia unei imagini în numeroase rezoluţii
şi în culori diferite
cel mai usor se obtin din imagini normale printransformare (http://www.favicon.co.uk/)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 49/121
Imagine ‐ Bitmap JPG (Joint Photographics Experts Group
format pentru imaginile bitmap, comprimate
conform standardului JPEG
permite utilizarea unor rate de compresie JPEG diferite rata de compresie se stabileste în funcţie de spaţiul pe
hard disc / de calitatea imaginii
s‐a impus ca un standard al unui tip de compresie şi a unui format de fişier.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 50/121
Imagine ‐ BitmapGIF (Graphics Interchange Format)
format foarte raspandit pe Web
folosit pentru transferul de imagini bitmap, de maxim
64K * 64K, între noduri situate la distanţă accepta rate mari de compresie.
dezvoltat de CompuServe pentru a faciiita tranzitul
informaţiilor grafice în domeniul telecomunicaţiilor. compresie prin metoda LZW
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 51/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 52/121
Imagine ‐ VectorialFormatul vectorial:
tine cont de semantica imaginii (desene → puncte şi
funcţii matematice )
imaginea este mai mica ca dimensiune; imaginea este independenta de scala de vizualizare.
NU poate inlocui bitmap‐ul pentru ca nu totul se
poate reduce la puncte şi funcţii (ex: peisaje) culoarea si pozitia pixelilor este determinata de functii
matematice
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 53/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 54/121
ImagineFormate de stocare a imaginii de tip vectorial :
DXF ( Drawing Exchange Format – pentru soft Autocad
facut de Autodesk)
EPS (Encapsulated PostScript – format pt Adobe şi lb. PostScript
CGM (Computer Graphic Metafile) pt a transferaimaginea intre diferite platforme
SVG (Simple Vector Graphics) definit pentru o nouageneratie de grafica pentru Web
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 55/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 56/121
Audio ‐ SunetCaracteristici:
Frecventa
Lungime banda (Wavelength)
Amplitudine Intensitate
Viteza
Directie
Pitch
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 57/121
Audio ‐ Sunet
Frecventa
[WIKI]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 58/121
Audio ‐ Sunet
Lungime banda
[WIKI]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 59/121
Audio ‐ Sunet
[http://personal.cityu.edu.hk/~bsapplec/characte.htm]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 60/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 61/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 62/121
Audio ‐ SunetMaterial Viteza (m/s)
Aer 344
Apa 1,372
Beton 3,048
Sticla 3,658
Fier 5,182
Plumb 1,219
Otel 5,182
Lemn(esenta tare) 4,267
Lemn(esenta moale) 3,353
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 63/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 64/121
Audio ‐ Codec Permite codarea si decodarea sunetului ce este stocat
intr‐un anumit tip de fisier Implementeaza si metode de compresie a sunetului
Fara pierdere de informatie
Cu pierdere de informatie
Un format de fisier audio utilizeaza de obicei un codec
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 65/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 66/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 67/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 68/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 69/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 70/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 71/121
Video în cazul televiziunii, imaginile video sunt reprezentate
în formă analogică reglementată prin standarde internaţionale pentru difuzare şi afişare
video‐ul pe calculator se bazează pe tehnologia
digitală
cele două tehnologii pe care se bazează video se
combină în televiziunea digitală de înaltă definiţie
HDTV ‐ High Defmition Television
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 72/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 73/121
Video ecranelor calculatoarelor şi câteva sisteme video
utilizează un semnal video alcătuit din trei culori de bază ‐ roşu, verde, albastru (RGB), care sunt
controlabile individual
banda TV şi majoritatea sistemelor video utilizează un
semnal compus, în care luminozitatea (strălucirea) şi
chrominanţa (culoarea), împreună cu informaţiile de
sincronizare sunt combinate într‐un singur semnal
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 74/121
Video afişarea semnalului perceput de către cele două
sisteme se face diferit şi din punctul de vedere al modului de baleiaj al ecranului:
în tehnologia analogică, ecranul este întreţesut, în
sensul ca două seturi de linii alternate formează banda ‐baleiaj întreţesut 2/1 (permite ca o imagine video să fie
difuzată la o rată redusă a cadrelor, sub 25‐30 fps (frame
per secundă), f ără o pâlpâire sesizabilă ochiului) pe ecranele calculatoarelor însă, liniile video sunt
prezentate secvenţial, una după cealaltă ‐ baleiaj
progresiv
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 75/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 76/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 77/121
Video
Baleaj intretesut(interlaced)
http://cpn.canon‐europe.com/content/education/technical/progressive_video.do
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 78/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 79/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 80/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 81/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 82/121
Video ‐ analog Semnalul video furnizat de sistemele de conversie
poate lua diferite forme, fie semnal video compus codificat PAL, SECAM sau NTSC, fie în componente
analoge RGB.
Standarde pentru TV analogic ce definesc modul în
care informaţia este codificată pentru a produce un
semnal electronic:
PAL
SECAM
NTSC
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 83/121
Video Principiul este de a modula o undă purtătoare a unei
frecvenţe centrate în jurul valorii de 4 Mhz, prin componentele de chrominanţă Db şi/sau Dr, recunoscute şi ca U şi V.
unda este combinată cu luminanţa Y constituind un
singur semnal video.
codajul semnalelor video color Y, Db, Dr este denumit
codaj în componente analoge
semnal analogic nu poate fi radiodifuzat, deoarece
acest lucru ar necesita folosirea a trei emitori simultani
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 84/121
Video NTSC (National Television Standards Comittee)
adoptat în 1953 un singur cadru video este format din 525 de linii
orizontale şi se derulează cu o rată de aproximativ 30
cadre pe secundă (29.97) 45 sunt utilizate pentru sincronizarea informaţiei,
restul de 480 fiind propriu‐zis destinate fiecărei
imagini Construirea cadrelor se realizează prin combinarea a
două câmpuri de câte 240 de linii fiecare, unul par şi
altul impar
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 85/121
VideoSECAM (Sequential Color and Memory)
introdus prin anii 60, este un sistem cu 525 de linii rata derulării cadrelor pe secundă este de 25
PAL (Phase Alternate
Line) introdus pe piaţa europeană în 1966
trasează 625 de linii pe imagine, la o rată de25 cadre pe secundă
doar 576 linii sunt considerate active, utilizateefectiv pentru definirea unei imagini, celelalte 49 de linii fiind rezervate,ca linii de sincronizare
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 86/121
VideoHDTV (High Definition Television)
sistem programat, bazat pe tehnologia televiziunii
digitale
au rezoluţii ce pot fi utilizate şi pentru grafica pe
calculator
canalele imagine lucreaza cu un semnal digital
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 87/121
VideoHDV (High Definition Video)
Siteme video cu rezolutie mare: 1,280×720 pixeli
(720p) sau 1,920×1,080 pixeli
Video mode
Dimensiune(W
×H) Pixeli Generare Frame rate (Hz)
720p 1,280×720 921,600 Progresiv
23.976, 24, 25,
29.97, 30, 50,
59.94, 60, 72
1080i 1,920×1,080 2,073,600 Interlaced25 (50 fields/s),29.97 (59.94
fields/s), 30 (60
fields/s)
1080p 1,920×1,080 2,073,600 Progresiv
23.976, 24, 25,
29.97, 30, 50,59.94, 60
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 88/121
VideoObţinerea unui video numeric (digital) de calitate dintr‐
un semnal video analogic este influenţată de: fluxul de imagini(25‐30 cadre pe secundă)
rezoluţia de crominanţă(care determină nr de culori ce
constitue imaginea)
rezoluţia spaţială( care determină modul de baleere al
liniilor din care se construieşte imaginea; calitatea imaginilor.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 89/121
VideoCompresia video:
Speculează şi elimină un anumit tip de redundanţă.
Pentru video redundanţă :
Spaţială = intracadru (bazează fie pe eliminarea detaliilor nesemnificative)
Temporală = intercadru (diferenţele semnalate într‐o
imagine în raport cu precedenta)
Se are în vedere ca filmul chiar comprimat să‐şi
păstreze consistenţa, adică să pot accesa o imagine în
fluxul comprimat.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 90/121
VideoCompresia video:
compresie cu pierdere de informaţii (lossycompression)
compresie fara pierdere de informatie
Algoritmii de compresie video real‐time cunoscuţi sunt:
JPEG, MPEG, DVI, M‐ JPEG;
se bazează pe cele două tipuri de redundanţă comprima informaţia video digitală, cu rate cuprinse
de la 50:1 până Ia 200:1
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 91/121
VideoStandardul pentru compresie video este MPEG care a apărut în mai multe
variante MPEG1 → comprimare video, sunet asincron MPEG2 → obţinerea video digital la calitatea transmisiilor TV MPEG3 → legat de televiziunea digitală de înaltă rezoluţie. MPEG4 → legat de transmisie video la distanţă prin Internet(reţele de
calc)
Algoritmul de compresie este hibrid de tip predicţie‐transformare şi foloseşte mai multe tehnici cum ar fi:
Analiza spectrală (care prin funcţii de tip transformare cosinus discret surprinde repetabilitatea;
Codaj Hoffman pentru date Codaj diferenţiat( se reţin elementele care fac diferenţa între cadre)
Codaj predictiv (analizează anumite elemente care se schimbă).
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 92/121
VideoCodec‐uri fara pierdere de informatie:
AVIzlib CamStudio GZIP CorePNG FastCodec MSU Lossless Video Codec PICVideo TSCC TechSmith Screen Capture Codec ZMBV (Zip Motion Block Video) Codec JPEG 2000 YULS
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 93/121
VideoCodec‐uri cu pierdere de informatie:
Cinepak H.264 ‐ MPEG‐4 AVC (Advanced Video Coding)
sauMPEG‐4 Part 10, approved for Blu‐ray
MJPEG JPEG 2000 intra frame video codec MPEG‐1 Video
(MPEG‐1 Part 2)
MPEG‐1 Video (MPEG‐1 Part 2) Cinema Craft Encoder
FFmpeg
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 94/121
VideoCodec‐uri cu pierdere de informatie:
MPEG‐2 Video (MPEG‐2 Part 2) ‐H.262 Cinema Craft Encoder FFmpeg InterVideo Video Decoder
Ligos LSX MPEG‐2 MainConcept MPEG‐2 TMPGEnc
MPEG‐4 ASP (Advanced Simple Profile) or MPEG‐4 Part 2
DivX FFmpeg MPEG‐4 HDX4 Nero Digital
Xvid
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 95/121
Video RealVideo
Snow Wavelet Codec Sorenson Video, Sorenson Spark
Tarkin
Ffmpeg TruDef high definition fractal video codec
VC‐1 (SMPTE standard, subset of Windows Media Video)
VC‐3 SMPTE standard Avid DNxHD
FFmpeg
Windows Media Video (WMV)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 96/121
Video Accesul direct la diferite cadre ale unui flux video presupune
indexarea invariabilă în timp a imaginilor fixe.Sunt cunoscute 2 sisteme de reperaj:
bazat pe timp numit – TIME CODE (se asociază fiecărui
cadru un nr codificat BCD (Binary Code Decimal), care exprimă ora,minutul,sec,milisecunda; este memorat pe o
pistă audio paralelă – generator sau lector de time code.)
bazat pe frame‐uri – FRAME CODE (presupune asocierea pentru fiecare cadru a unui număr natural în secveţă
crescătoare)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 97/121
Video – medii de stocare digitale
Blu‐ray Disc HD DVD DVD
Capacitate 25 GB 15 GB 4.7 GB
Bitrate maxim ‐ Transfer de date 53.95 Mbit/s 36.55 Mbit/s 11.08 Mbit/s
Bitrate maxim ‐ Audio + Video + Subtitluri
48 Mbit/s 30.24 Mbit/s 10.08 Mbit/s
Bitrate maxim ‐ Video 40 Mbit/s 29.4 Mbit/s 9.8 Mbit/s
Rezolutie video 1920 x 1080 1920 x 1080 720×480 (NTSC)720×576 (PAL)
Frame rate 24 p, 50/60i 24p, 50/60i 24 p, 50/60 i
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 98/121
Video – PremiereCaracteristici montaj video:
Imagine: Dimensiune cadru
Viteza rulare – nr cadre/secunda
Culoare – Color depth Standard – DV, NTSC, PAL
Codec
Sunet: Frecventa – bitrate, kHz
Amplitudine
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 99/121
Animatie digitala Concepte
Preia conceptele de la video
Se bazeaza pe cadre cheie (keyframes) pentru a modificaproprietati ale elementelor de pe scena
Tehnici de animatie:
Modificare de forma
Modificare de culoare Modificare pozitie (cu utilizare de traiectorii)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 100/121
Recapitulare ‐ Multimedia1. Concepte generale
Ce reprezinta ? Concepte Clasificare si tipuri de proiecte Resurse hardware + software
2. Imagine Modele de culori (RGB, CMYK, HSB, Lab, Grayscale, Web‐safe) Caracteristici (Hue, Brightness, Saturation, Contrast, Color balance, Bit
depth, Rezolutie) Tipuri de imagine (bitmap, vectoriala) Formate de stocare (TIFF, ICO, JPG, GIF, BMP, PNG, EPS, SVG) Compresie
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 101/121
Recapitulare ‐ Multimedia3. Sunet
1. Caracteristici (frecventa, wavelength, amplitudine, intensitate, viteza, directie, pitch)
2. Codec (MP3, FLAC)
3. Compresie4. Formate fisiere
4. Video
1. Concept2. Caracteristici (viteza, rezolutie)
3. Reprezentare (analogic, digital)
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 102/121
Recapitulare ‐ Multimedia4. Video
Mod de reprezentare culoare (RGB, YUV) Mod de afisare a imaginii ‐ baleaj(intretesut ‐
interlaced, progresiv)
HDV Tipuri de compresie video (spatiala, temporala)
Codec video (DivX, Xvid,Ffmpeg, Cinepak)
5. Animatie Software
Tehnici de animatie
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 103/121
Fonturi Colectii de simboluri (glyph) ce sunt reprezentari
vizuale ale unui caracter
a a aa a a a a a a a
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 104/121
Fonturi Monospatiate (latime fixa)
Fiecare caracter ocupa acelasi spatiu orizontal Tipice pentru masini de scris
Utilizat pentru titluri
Font monospatiat Lucida Typewriter Proportionale
Spatiul orizontal depinde de latimea caracterului
Pentru texte ‐> mai usor de citit Dimensiune mai mica a textului
Font proportional: Lucida Bright
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 105/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 106/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 107/121
Fonturi Fonturi cursive (handwritten)
Reproduc scrisul de mana Utilizate pentru a personaliza mesajul
Font cursiv: Script MT Bold Fonturi decorative (display sau novelty)
Modificari ale fonturile serif sau sanserif
Utilizate pentru a scoate in evidenta textul
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 108/121
Fonturi Dimensiune
Stabilita de evolutia tipografiei digitale ‐ PostScript Masurata in puncte (pt – points)
Un pt reprezinta 1/72 dintr‐un inch ~ 0.3528 mm
Distanta dintre randuri de text se masoara in pica (pc) =
12 pt
Dimensiunea unui font (12 pt Times Roman) reprezintadistanta dintre partea de sus a celui mai inalt font si bazacelui mai mic.
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 109/121
Serif vs.
Sans
‐serif
[www.smashingmagazine.com]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 110/121
Fonturi
[www.smashingmagazine.com]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 111/121
Fonturi
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 112/121
Fonturi
[Wiki]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 113/121
FonturiInstrumente de analiza:
http://www.snook.ca/technical/colour_contrast/colour.html
http://www.typetester.org/
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 114/121
Layout “Users are pleased by the design but drawn to the
content” , Sitepoint ‐ Principles Of Beautiful Web.Design
Navigatie intuitiva in cadrul proiectului multimedia
Tema comuna pentru proiect Echilibru
Propotionalitate
Raportul de aur (divin) = 1.62 O zona poate fi despartita in 2 prin impartirea lungimii
ei la 1.62
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 115/121
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 116/121
Layout
[Sitepoint]
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 117/121
LayoutData Mai mare 1024x768 800x600 640x480 Necunoscut
January 2010 76% 20% 1% 0% 3%
January 2009 57% 36% 4% 0% 3%
January 2008 38% 48% 8% 0% 6%
January 2007 26% 54% 14% 0% 6%
January 2006 17% 57% 20% 0% 6%
January 2005 12% 53% 30% 0% 5%
January 2004 10% 47% 37% 1% 5%
January 2003 6% 40% 47% 2% 5%
January 2002 6% 34% 52% 3% 5%
January 2001 5% 29% 55% 6% 5%
January 2000 4% 25% 56% 11% 4%
http://www.w3schools.com/browsers/browsers_display.asp
Rezolutie monitoare
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 118/121
Layout
Data 16,777,216 65,536 256 January 2010 97% 3% 0%
January 2009 95% 4% 1%
January 2008 90% 8% 2%
January 2007 86% 11% 2%
January 2006 81% 16% 3%
January 2005 72% 25% 3%
January 2004 65% 31% 4%
January 2003 51% 44% 5%
January 2002 43% 50% 7%
January 2001 37% 55% 8%
January 2000 34% 54% 12%
http://www.w3schools.com/browsers/browsers_display.asp
Bit depth monitoare
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 119/121
Layout ‐ Fix
http://www.lebloe.com/
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 120/121
Layout ‐Fluid
http://clearleft.com/
7/22/2019 Curs Multimedia 2013 2014
http://slidepdf.com/reader/full/curs-multimedia-2013-2014 121/121
Layout Proiectul trebuie sa fie utilizabil
Unde ma uit? Unde dau click? Ce fac? http://www.marcecko.com/#/
http://www.creativewithak.com/ http://contentof.com/
http://demo.northkingdom.com/ihuvudetpatoyota/in
dex_en.html http://prismgirl.org/
Recommended