Curs Multimedia 2013 2014

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



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;



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.



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



Cunostinte necesare Creativitate + imaginatie

Utilizare tehnologii informatice

Utilizare dispozitive digitale

Talent organizatoric Management de proiecte

Documentare si arhivare



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



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



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



Proiecte Multimediadupa nivelul de interactivitate:

liniar = proiectul este vizualizat fara a interveni

(noninteractive)

nonliniar = utilizatorul are control asupra derulariiproiectului (Interactive)



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



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



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.



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



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



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



Imagine Modele de culori

RGB

CMYK

HSB Lab

Grayscale

Web‐safe



Imagine

Palete de culori utilizate(gamut): A – Ciel Lab

B – Imagini digitaleC – Dispozitive

Documentatie Adobe Photoshop



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



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




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




ImagineRGB vs CMYK




ImagineHSB

model construit in jurulproprietatilor Hue, Saturation, Brightness

bazat pe perceptiaumana a culorii

Modelul HSB

H – Hue

S – SaturationB ‐ Brightness




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



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)



Imagine Web‐safe

set limitat culori derivat din RGB

utilizeaza un set de 256 culori

setul de culori este utilizat de toate browser‐ele



ImagineCaracteristici

Nuante culori (Hue)

Luminozitate (Brightness)

Saturatie (Saturation) Contrast (Contrast)

Balanta culori (Color balance)





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)



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



Imagineselectie

culoare initialaculoare noua

optiune culori sigure Web

tonuriculoare

paleta culori

valoareculoare



ImagineHistograma unei imagini

umbre tonuri de mijloc lumini

numar pixeli





Imagine Tipurie de imagine

Matriceala (bitmap)

Vectoriala

Algoritmi compresie



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.




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




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





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)



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







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 )









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





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/)



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.



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





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





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





Audio ‐ SunetCaracteristici:

Frecventa

Lungime banda (Wavelength)

Amplitudine Intensitate

Viteza

Directie

Pitch



Audio ‐ Sunet

Frecventa

[WIKI]



Audio ‐ Sunet

Lungime banda

[WIKI]



Audio ‐ Sunet

[http://personal.cityu.edu.hk/~bsapplec/characte.htm]







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





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















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





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



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







Video

Baleaj intretesut(interlaced)

http://cpn.canon‐europe.com/content/education/technical/progressive_video.do











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



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



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



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



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



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



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.



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.



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



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ă).



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



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



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



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)



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)



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



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



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)



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



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)



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



Fonturi Colectii de simboluri (glyph) ce sunt reprezentari

vizuale ale unui caracter

a a aa a a a a a a a



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







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



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.



Serif vs.

Sans

‐serif

[www.smashingmagazine.com]



Fonturi

[www.smashingmagazine.com]



Fonturi



Fonturi

[Wiki]



FonturiInstrumente de analiza:

http://www.snook.ca/technical/colour_contrast/colour.html

http://www.typetester.org/



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





Layout

[Sitepoint]



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



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



Layout ‐ Fix

http://www.lebloe.com/



Layout ‐Fluid

http://clearleft.com/



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/

http://www.marcecko.com/#/

http://www.creativewithak.com/

http://contentof.com/

http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html


http://prismgirl.org/

http://prismgirl.org/



http://contentof.com/

http://www.creativewithak.com/

http://www.marcecko.com/#/

Documents

Curs Multimedia 2013 2014