Colecţia „MULTIMEDIA”

TUTORIALE MULTIMEDIA

Lucrarea este dedicată unui domeniu de interes şi cu o dezvoltare

semnificativă în ultimii ani - tutorialele multimedia - şi se constituie într-un suport teoretic şi practic pentru disciplina Proiect de (dezvoltare) multimedia. Aceasta se regăseşte în curricula Facultăţii de Electronică şi Telecomunicaţii, Universitatea „Politehnica” din Timişoara, anul IV, direcţia de studiu Tehnologii şi Sisteme de Telecomunicaţii. Disciplina serveşte studenţilor angrenaţi în învăţământul la nivel licenţă - 4 ani atât la forma de învăţământ zi (http://www.etc.upt.ro/) cât şi la distanţă (http://cid.upt.ro/). Referent ştiinţific: Prof.dr.ing. Radu Adrian VASIU

Descrierea CIP a Bibliotecii Naţionale a României ONIŢA, MIHAI IONUŢ

Tutoriale Multimedia / asist.dr.ing. Mihai Ionuţ Oniţa. - Timişoara : Editura Politehnica, 2011

Bibliogr. ISBN 978-606-554-385-0

004.4

Asist.univ.dr.ing. Mihai Ionuţ ONIŢA

TUTORIALE MULTIMEDIA

Colecţia „MULTIMEDIA“

EDITURA POLITEHNICA TIMIŞOARA – 2011

Copyright © Editura Politehnica, 2011 Toate drepturile sunt rezervate editurii. Nici o parte din această lucrare nu poate fi reprodusă, stocată sau transmisă prin indiferent ce formă, fără acordul prealabil scris al Editurii Politehnica. EDITURA POLITEHNICA Bd. Republicii nr. 9 300159 Timişoara, România Tel. 0256/403.823 Fax 0256/403.823 E-mail: editura@edipol.upt.ro Consilier editorial: Prof.dr.ing. Sabin IONEL Redactor: Claudia MIHALI Bun de imprimat: 19.12.2011 Coli de tipar: 7 C.Z.U. 004.4 ISBN 978-606-554-385-0 Tiparul executat sub comanda nr. 89 la Tipografia Universităţii "Politehnica" din Timişoara

Cuprins

CAP 1: INTRODUCERE ...................................................................................................... 7 1.1. MULTIMEDIA ............................................................................................................... 7 1.2. TUTORIAL - CONCEPT ŞI UTILIZARE ............................................................................. 8

CAP 2: ASPECTE TEORETICE ALE REALIZĂRII UNUI TUTORIAL ..................... 10 2.1. MODURI DE REALIZARE................................................................................................ 10 2.2. ETAPE .......................................................................................................................... 11 2.3. IMPLEMENTĂRI DE TUTORIALE ..................................................................................... 17

CAP 3: FORMATE DE FIŞIERE UTILE ÎN CADRUL TUTORIALELOR .................. 20 3.1. FORMATE DE IMAGINI .................................................................................................. 20 3.2. FORMATE DE FIŞIERE AUDIO ........................................................................................ 23 3.3. FORMATE DE FIŞIERE VIDEO ......................................................................................... 25

CAP 4: GRAFICĂ COMPUTERIZATĂ ............................................................................ 27 4.1. PROGRAME ALTERNATIVE ............................................................................................ 27 4.2. IMAGINE DIGITALĂ ....................................................................................................... 29 4.3. SPAŢII DE CULOARE ..................................................................................................... 30 4.4. TRANSFORMĂRI GEOMETRICE ...................................................................................... 37 4.5. TEXTUL ÎN GRAFICA COMPUTERIZATĂ ......................................................................... 39 4.6. ADOBE PHOTOSHOP - SPAŢIU DE LUCRU ŞI CUTIA DE UNELTE ...................................... 42 4.7. ADOBE PHOTOSHOP - STRATURI, MĂŞTI ŞI AJUSTAREA IMAGINILOR ............................ 48

CAP. 5: CAPTURĂ DE ECRAN ŞI ANIMAŢII ................................................................ 50 5.1. ADOBE CAPTIVATE ...................................................................................................... 50 5.2. GIF ANIMAT ................................................................................................................. 58 5.3. FLASH .......................................................................................................................... 61

CAP 6: PREGĂTIREA TUTORIALELOR MULTIMEDIA PENTRU PUBLICAREA LOR ONLINE ........................................................................................................................ 64

6.1. EDITAREA ŞI COMPRESIA ELEMENTELOR AUDIO-VIDEO ............................................... 64 6.2. INTEGRAREA TUTORIALULUI ÎN PAGINI WEB ............................................................... 67

ANEXA 1: APLICAŢII UTILE ÎN DOMENIUL MULTIMEDIA .................................. 73

ANEXA 2: TUTORIALE ADOBE CAPTIVATE .............................................................. 75

ANEXA 3: TUTORIALE ADOBE PHOTOSHOP ............................................................ 92

BIBLIOGRAFIE ................................................................................................................... 105

Cap 1: Introducere

1.1. Multimedia

Multimedia reprezintă o combinaţie de text, elemente de grafică, sunete, animaţie şi secvenţe video. Când se permite unui utilizator să controleze elementele furnizate şi momentul furnizării acestora, atunci multimedia devine interactivă. Conceptul este simplu, implementarea de aplicaţii multimedia se poate dovedi mai dificilă. Trebuie înţeleasă nu numai modalitatea de a pune în aplicare fiecare element, dar şi posibilităţile de utilizare a instrumentelor computerizate şi a tehnologiilor necesare pentru imixtiunea elementelor respective.

Îmbinarea de elemente multimedia multiple redate într-un mod sincron sau asincron, cu sau fără interacţiune cu utilizatorul, asigură un impact deosebit, astfel încât maxima „o imagine face mai mult decât o mie de cuvinte” prinde contur, cunoscând direcţii şi provocări noi [1]. Nu are importanţă doar efectul explicit visual al componentei multimedia. Avem de a face şi cu o vibraţie emoţională a simţurilor. Hempe (1999) susţinea că multimedia poartă întodeauna mesaje ascunse sau semi-ascunse: „emoţii, francheţe, simbolism, competenţă, experienţă”. Multimedia are prin urmare un istoric bogat, dar răspândirea pe scară largă în trecut a cunoscut limitări datorită costului de producţie ridicat şi dificultăţii de distribuire a ei [2]. Era digitalului, dezvoltarea Internet-ului, introducerea de noi tehnologii (ex: streaming, podcast) au reprezentat paşi importanţi în evoluţia conceptului. Ca şi arie de aplicabilitate multimedia este folosită în medii de afaceri, locuri publice, instituţii de învăţământ, de la aplicaţii de prezentare ale unor companii sau produse distribuite pe suport optic, până la site-uri Web unde poţi asculta muzică, viziona filme sau seriale, învăţa lucruri noi prin intermediul tutorialelor de diverse tipuri.

Materialele multimedia contemporane minimizează gradul de utilizare exclusivistă a informaţiei text, câştigând teren combinaţia dintre text şi exemple grafice, tabele, diagrame şi poate cel mai important utilizarea materialelor audio-video (figura 1).

8 Introducere - 1

Figura 1: Clasificarea materialelor multimedia

1.2. Tutorial - concept şi utilizare

Materialul didactic disponibil astăzi online vine într-o mare varietate de forme şi, aşa cum subliniază Tim Berners Lee în articolul său „The Semantic Web” (din revista Scientific American), se simte lipsa unei mai bune organizări şi integrări a diferitelor tipuri de suporturi media existente. Dezvoltarea accelerată a noi tipuri de software (captură a ecranului, manipulare a înregistrărilor audio şi video) a deschis calea unei noi metode de învăţare: tutorialul multimedia. Termenul „tutorial” a ajuns relativ recent în limba română, nefiind încă recunoscut oficial în forurile de specialitate. Primul pas a fost făcut în jocurile pe calculator complexe, ca o necesitate de a demonstra în mod practic desfăşurarea jocului, respectiv controlul pe care jucătorul îl are asupra diferitelor personaje şi medii. Mai târziu, a luat forma unor sesiuni de învăţare a diferitelor softuri, care pentru un începător ar presupune o parcurgere exhaustivă a meniurilor, pe când tutorialul propriu-zis este structurat şi prezentat într-un context uşor de asimilat [3].

Într-un cadru mai larg, tutorialul reprezintă o demonstraţie aplicativă a unui subiect/proces/soft [3], având scopul accentuării aspectului formativ al procesului educaţional. În cazul particular al tutorialului multimedia, acesta ia forma unei aplicaţii sau a unui suport electronic bogat în conţinut media, putând aborda aproape orice fel de subiect din punct de vedere practico-aplicativ.

1.2 - Tutorial - concept şi utilizare 9

La fel ca orice altă entitate educaţională, fie că este ea un curs, un seminar, o sesiune de comunicări, etc., tutorialul urmăreşte introducerea participanţilor la procesul educativ într-un anume subiect, având ca scop final asimilarea de către aceştia a unui minim de cunoştinţe, fără a avea pretenţia epuizării informaţiei din domeniul respectiv, ci numai a bazei de pornire, sau a unor cunoştinţe mai avansate, după caz [3].

Există însă câteva deosebiri fundamentale faţă de celelalte procese didactice, deosebiri ce se vor analiza în continuare [4]:

a) caracterul puternic formativ al tutorialului. Aspectele teoretice sunt de obicei ignorate în favoarea celor practice. Din acest motiv, un tutorial nu se va putea niciodată substitui unui curs, fiind echivalentul virtual didactic al unui manual de instrucţiuni din viaţa de zi cu zi.

b) concentrarea pe un anume subiect, fără detalii despre conceptele adiacente. Scopul studiului este urmărit asiduu, punându-se accentul pe modalitatea în care este făcut un lucru şi pe însuşirea acestei metodologii de către student. Întrebarea dezbătută aici este Cum? şi nu De ce?

c) metodă educaţională bogată în conţinut media (capturi de ecran statice sau în mişcare, animaţii sau instrucţiuni audio/video) care să exemplifice paşii descrişi în cadrul rezolvării problemei.

d) metodă eficientă şi implicită de verificare a cunoştinţelor - learning by doing - (un tutorial despre funcţionarea unui soft presupune ca pachetul software să fie instalat, iar cursantul să aplice cunoştinţele dobândite în paralel cu urmărirea tutorialului).

e) un oarecare grad de informalitate, nu are un cadru temporal strict şi nu necesită un mediu specific de desfăşurare. Un minim de resurse ICT (hardware/software, cât şi de cunoştinţe), timp şi motivare sunt singurele lucruri necesare pentru însuşirea unui tutorial.

Cap 2: Aspecte teoretice ale realizării unui tutorial

2.1. Moduri de realizare

Cel mai simplu mod de realizare îl reprezintă un fişier de tip document (în format .doc sau .pdf), în care se prezintă, pas cu pas, realizarea unui proces, algoritm, ş.a.m.d. El va conţine pe lângă text, imagini exemplificative, fotografii, diagrame sau scheme care să ajute vizual la explicarea procedeelor.

Figura 2: Tipuri de tutoriale

Un tutorial mai avansat (şi mai eficient) poate fi realizat utilizând tehnologii Adobe® sau complementare. Avantajul este dat de o interactivitate superioară fişierelor de tip document. Utilizatorul interacţionează cu aplicaţia, primind răspuns (feedback) în timp real. Această tehnologie poate fi integrată pe un suport online, rezultând un tutorial accesibil de oriunde. Tutorialele sub forma clipurilor video se realizează de obicei prezentând vizual o captură de ecran (imagini în mişcare cu operaţiile de urmat), pe când autorul tutorialului dă explicaţii în timp real, pe canalul audio. De exemplu, tutorialele Lynda [www.lynda.com] cuprind unul sau mai multe discuri optice pe care se găseşte o interfaţă cu ajutorul căreia se accede la tutorialele propriu-zise, în fapt clipuri video structurate pe capitole şi subcapitole. Nu există nici un fel de text, totul este prezentat în clipuri [4].

2.2 - Etape 11

2.2. Etape

În construirea unui tutorial se ţine seama de o serie de aspecte, etapele următoare trebuie înţelese ca un tot unitar. Există o ordine cronologică a lor, însă ele se intercalează adesea, nefiind posibilă o delimitare concisă.

a) stabilirea subiectului procesului educaţional Indiferent că este vorba de utilizarea unui soft, realizarea unei anumite

intervenţii medicale sau construirea unui avion teleghidat, scopul tutorialului trebuie enunţat şi analizat temeinic. Acesta nu trebuie să fie prea vag, să încerce acoperirea unui domeniu prea larg. Apoi, el trebuie să fie util, tutorialul să aducă ceva nou, să prezinte un domeniu/procedeu/soft sau să folosească o abordare nouă, mai eficientă, a unei probleme mai vechi, dar încă de actualitate [3].

b) publicul ţintă Cui se adresează tutorialul? Cum vor utiliza cursanţii cele asimilate pe mai

departe, care este câştigul lor după parcurgerea tutorialului? Formează utilizatorii un grup omogen sau provin din medii tehnico-culturale diferite? Se vor lua în considerare vârsta, experienţa, background-ul cultural [5] şi cunoştinţele tehnice apriori ale cursantului. De asemenea trebuie hotărât nivelul de dificultate al obiectului de studiu şi estimat timpul necesar parcurgerii lui. Deşi acestea nu sunt esenţiale din punctul de vedere al tutorialului în sine, ele sunt totuşi importante întrucât afectează gradul de motivare al celui care învaţă. Este de preferat, de exemplu, un tutorial mai scurt, care acoperă un subiect mai mic, unui tutorial care prezintă mai multe lucruri, însă necesită o investiţie în efort/timp prea mare.

c) tipul de tehnologie utilizată Pentru subiectele simple, cu un grad relativ scăzut de dificultate, un tutorial de

tip document poate fi de ajuns. Atâta timp cât instrucţiunile sunt clare şi exemplele edificatoare, nu sunt necesare poate nici imagini [3]. De exemplu, un tutorial despre cum să scrii o epigramă nu necesită imagini sau animaţii. Prezentarea unei aplicaţii va presupune însă întotdeauna utilizarea unor suporturi vizuale, animate sau audio/video pentru a exemplifica funcţionarea softului respectiv.

Mediile de dezvoltare specifice (aplicaţii online sau care se instalează pe calculatorul personal) vin în variante comerciale sau gratuite, diferind în mod evident parametrii de funcţionare, facilităţile oferite şi lista de „componente” disponibile.

Captură de ecran Softuri precum Adobe Captivate sau Camtasia Studio asigură captura de ecran

într-un mod facil, memorând mişcările cursorului, combinaţiile de taste apăsate,

12 Aspecte teoretice ale realizării unui tutorial - 2

respectiv efectele acestor acţiuni asupra aplicaţiei studiate. Rezultatul poate fi editat, pentru a permite cursantului să interacţioneze cu tutorialul, pot fi înregistrate secvenţe audio şi video, se permite salvarea în diferite formate. Produsul final constă într-o animaţie (ex: cu extensia .swf), fişier executabil sau chiar fişier document .doc, pierzând însă posibilitatea interactivităţii, în ultimul caz [3].

Înregistrări audio Elementele audio pot fi capturate cu un simplu microfon conectat la calculator

prin intermediul plăcii de sunet şi utilizând programul din Windows, Sound Recorder sau utilizând echipamente profesionale. Pot fi editate folosind aplicaţii specifice Sony® Sound Forge, Adobe Audition, sau unul din multitudinea de softuri gratuite disponibile online. Sound Forge şi Adobe Audition permit lucrul cu diverse tipuri de fişiere audio, pornind de la fişierele necomprimate .wav şi până la cele noi în domeniu .m4a. Softurile permit îmbunătăţirea calităţii sunetului, printr-o largă serie de efecte şi filtre, precum şi editarea pistelor audio prin alăturarea a diferite secvenţe [3]. Adiţional o serie de dispozitive hardware profesionale sunt disponibile în funcţie de nevoile tehnice ale fiecăruia.

Calitatea materialului audio depinde de fiecare etapă în procesul de înregistrare şi editare: microfon, mixer, placă de sunet şi software [5], toate acestea dau greutate şi calitate prezentării audio finale. Deoarece secvenţele video şi animaţiile au propria lor cronologie [5] (timeline), sincronizarea materialului audio cu acestea necesită o atenţie deosebită. Pentru un segment video se recomandă includerea părţii audio în fişierul video în sine. În final pentru componenta audio, în mod logic şi pentru cea video, se alege un format specific pentru salvare în funcţie de metodele de distribuire sau publicare online/offline.

Editare video Componenta video necesită adesea abilităţi speciale de editare şi pregătire pentru

a fi inclusă în cadrul unui tutorial. Se recomandă utilizarea ei doar atunci când este strict necesar, mai ales dacă există substituent media mai puţin complex.

Materialul video instrucţional poate fi obţinut prin captarea activităţii ecranului unui computer (Captivate, Camtasia Studio), înregistrări cu ajutorul camerelor de filmat sau generare de conţinut utilizând programe corespunzătoare (secvenţe 3D, animaţii complexe etc.). În cazul clipurilor, o dată transferate de pe casetă pe suport electronic (sau înregistrate direct pe hard-disk), ele trebuie montate şi editate [3] folosind Adobe Premiere, Sony Vegas, Edius Canopus etc., iar pentru partea de conversie audio-video, Canopus Procoder, Wondershare Converter, DVD VideoSoft Free Studio etc. Adobe Premiere asigură editarea profesională a secvenţelor video prin decupări şi lipiri ale diferitelor părţi ale aceluiaşi clip, prin multitudinea de efecte,

2.2 - Etape 13

prelucrări şi filtre pe care le pune la dispoziţie (eliminarea zgomotelor, tranziţii între scene).

Editare imagini digitale Manipularea şi pregătirea imaginilor pentru un tutorial poate reprezenta un proces

facil sau complex în funcţie de rezultatul final care se doreşte atins. Una dintre metodele simple, mai puţin recomandate, este includerea imaginilor în PowerPoint [5], editarea lor cu facilităţile oferite de program şi salvarea ulterioară a transparentelor ca şi imagini bitmap sau gif.

Adobe Photoshop, GIMP sau Gadwin PrintScreen sunt programe complexe care permit o serie de operaţii pentru imagini: dimensionări, decupări, retuşări, filtre, modificarea compoziţiei şi culorilor, de asemenea construirea de la zero pas cu pas a unor elemente grafice deosebite. Programele necesită un bagaj de cunoştinţe mai ridicat, însă rezultatele finale sunt adesea spectaculoase şi menţin viu interesul celui ce parcurge tutorialul.

Procesul de optimizare a imaginilor în vederea obţinerii unui raport calitate/dimensiune eficient nu trebuie neglijat. Prezentarea finală poate fi de dimensiuni nepotrivite, de exemplu pentru Web, poate duce la timpi de încărcare mari şi la sacadarea materialul multimedia.

Animaţii Obiectele animate cresc dinamismul unui material, presupun inventivitate şi

răbdare în construirea lor, dar şi cunoaşterea anumitor softuri specifice (Adobe Flash, Gif Animator, Animation Shop, AnimatedGIF, EasyGIF Animator).

Editare text Editarea textului se poate face utilizând programe de grafică (ex: Adobe

Photoshop) pentru obţinerea unor efecte cu umbre, gradient, 3D etc., sau pentru editări uzuale Microsoft Office, Adobe Professional, Open Office, AbiWord, FoxitReader, PrimoPDF. Sunt permise formatarea textului şi a paginilor, inserarea şi modificarea celulelor unui tabel, utilizarea de diagrame, inserarea ecuaţiilor şi a simbolurilor matematice ş.a.m.d.

d) structurarea şi introducerea informaţiei în tutorial Este etapa de realizare propriu-zisă a tutorialului. Dacă se consideră necesar, se

poate recurge şi la anumite metode de (auto)testare, cum ar fi întrebările cu răspunsuri multiple sau cu „da”/„nu”.

Opţiunile pentru crearea conţinutului sunt limitate doar de imaginaţia proprie a fiecărui individ şi evident de termenul limită a proiectului/tutorialului. Între imagini

14 Aspecte teoretice ale realizării unui tutorial - 2

statice, animaţii, video şi text există combinaţii infinit de bogate rezultând diverse materiale vizual expresive pentru aceeaşi tematică [5].

În momentul creării unui conţinut bazat pe elemente multiple revine în discuţie sincronizarea componentelor (audio, imagini, video, animaţii etc.). Un utilizator are nevoie de câteva secunde pentru a „absorbi” [5] informaţia vizuală nouă (ex: o imagine), doar ulterior se poate rula şi componenta audio (ex: voce înregistrată). Adiţional dimensiunea scenei de prezentare trebuie stabilită în clar. O scenă media de dimensiuni 1200x960 rulată pe un monitor cu rezoluţie limitată la 1024x768 necesită derularea barei de control, chestiune de evitat.

e) publicarea online/offline Distribuirea tutorialelor se poate realiza folosind metode distincte:

a) offline: conţinutul media rezultat este publicat pe suport optic (CD, DVD), de exemplu aplicaţii de prezentare ale unor companii sau modalităţi de funcţionare ale unor softuri.

b) online: tutorialul este publicat pe Internet ca şi: conţinut media într-un site de partajare audio-video (youtube.com, vimeo.com,

trilulilu.com) pe baza creării anterioare a unui cont de utilizator. Aceste aplicaţii Web utilizează tehnologia streaming care permite vizualizarea fişierului multimedia direct de pe server pe măsură ce vin pachetele de date, fără a aştepta descărcarea completă. podcast educaţional sau de divertisment care permite descărcarea fişierului şi

rularea lui de pe un dispozitiv mobil. legătura Web (link) care permite descărcarea fişierului media pe calculatorul

utilizatorului şi rularea lui. parte componentă a unui site Web propriu. parte componentă într-o clasă virtuală.

Clasa virtuală presupune existenţa unui mediu online unde instructorul (tutorul) şi participanţii (cursanţii) se „întâlnesc” prin intermediul calculatorului, Internetului şi tehnologiilor moderne pentru desfăşurarea de activităţi educaţionale [6].

Clasă virtuală = spaţiu + timp + indivizi + interacţiune.

Clive Shepherd, specialist în Tehnologia Informaţiei şi Comunicării în Brighton (Anglia) consideră clasa virtuală un mix de componente sincrone şi asincrone care conlucrează spre a genera un mediu de învăţare online propice asimilării de noi aptitudini educaţionale.

2.2 - Etape 15

Pentru a fi o copie cât mai fidelă a unei clase tradiţionale, clasa virtuală utilizează o serie de unelte şi elemente, prezentate succint în tabelul următor:

Tabel 1: Componentele principale ale unei clase virtuale

Elemente La ce serveşte?

Agendă/Calendar Specifică pe scurt subiectele/temele ce vor fi acoperite în sesiunea curentă, eventual data lor de desfăşurare în cazul calendarului.

Secţiunea de prezentare Tutoriale, prezentări PowerPoint, încărcare (upload) şi descărcare (download) de fişiere şi imagini.

Table interactive

Scriere şi desene de mână. Tabla interactivă pune la dispoziţie diverse componente: forme geometrice, linii, gumă de şters, indicatori. Toate acestea ajută în explicarea anumitor tematici participanţilor la sesiunea virtuală curentă.

Sondaje, chestionare şi teste Evaluarea şi autoevaluarea participanţilor.

Chat, „Ridică mâna”

Transmiterea de mesaje de tip text private sau generale către şi între participanţi, de exemplu studenţi. Întrebările pentru tutor pot fi adresate prin facilitatea „ridică mâna”, asemănător procesului tradiţional.

Sesiuni audio şi video Transmiterea în direct de informaţii audio şi video. Participanţii pot discuta între ei prin intermediul audio şi video conferinţelor.

Adnotări şi marcaje Atrag atenţia asupra anumitor pasaje şi/sau permit explicaţii suplimentare în cazul imaginilor, transparentelor etc. (transparent = slide).

Partajare ecran Partajarea ecranului calculatorului, a unor aplicaţii cu sau fără posibilitate de control de la distanţă.

Sesiune de comunicare, înregistrare şi redare

Permit înregistrări ale sesiunilor în direct, captură de ecran, arhivare şi redare ulterioară.

Rularea conţinutului unui tutorial ce conţine elemente audio-video se poate face

cu utilitare ca VLC Media Player, Flash Media Player, Windows Media Player, Apple iTunes. De cele mai multe ori când se doreşte rularea unui material video într-o pagină

16 Aspecte teoretice ale realizării unui tutorial - 2

Web este necesară instalarea unui „plug-in”, unul dintre cele cunoscute fiind cel corespunzător Adobe Flash.

Instalare Flash Media Player http://www.youtube.com/watch?v=kVAnbZGxFaY&feature=iv&annotation_id=annotation_313181 - septembrie 2011.

Alte programe utile în cazul acestei etape pot fi: Mediile de prezentare - Microsoft PowerPoint, Adobe Presenter Browser-ele Web - Mozilla Firefox, Chrome, Internet Explorer, Safari, Opera Utilitarele de compresie a fişierelor 7-Zip, IZArc, RAR, WinZip Softurile de programare Web - Dreamweaver, JQueery, Joomla, WordPress Serverele de streaming - Broadwave, Campcaster, Darwin Streaming Server,

Epresence, FFmpeg, Flash Media Server, FORscene, FreeCast, FreeJ, Helix Community, Icecast, IceShare, Live365, Pandora, PeerCast, phpStreamcast, Red5, REMOTV, QuickTime, SAM Broadcaster, SDP Multimedia, SHOUTcast, SqueezeCenter Steamcast, Subsonic, Unreal Media Server, VideoLAN, Winamp, Windows Media Server, Wowza Media Server [4].

f) testarea/evaluarea tutorialului Evaluarea este un pas important care permite creşterea eficienţei unui

dezvoltator şi perfecţionarea propriilor abilităţi în procesul de proiectare a tutorialului, precum şi remedierea eventualelor greşeli conceptuale şi/sau de implementare care pot apărea. Dacă conţinutul multimedia este integrat într-un site Web se vor evalua atât uzabilitatea aplicaţiei online cât şi tutorialul în sine.

Uzabilitatea cuprinde o suită de caracteristici ale Web-ului cum ar fi accesibilitatea pentru persoane cu dizabilităţi, organizare vizuală şi sintactică, navigare şi etichetare, interacţiune şi afectivitate [5]. Una dintre testele de uzabilitate importante presupune vizualizarea aplicaţiilor Web în sisteme de operare diferite (MAC, Windows) şi în browser-e diferite (Mozilla, Explorer, Safari, Chrome, Opera).

Importantă este şi reacţia unui utilizator care accesează pentru prima dată site-ul cu tutorialului inclus. Cât de repede observă prezenţa tutorialului în pagină, poate urma facil acest tutorial?

Evaluarea tutorialului presupune alegerea unui personal de evaluare care în urma parcurgerii materialului sau asistând la o demonstraţie din partea dezvoltatorului va putea:

răspunde unui set de întrebări/chestionare concludente. purta o discuţie directă, faţă în faţă pentru semnalarea neregulilor,

inadvertenţelor apărute etc.

2.3 - Implementări de tutoriale 17

Rămâne la latitudinea autorului dacă tutorialul creat va fi disponibil în mod gratuit sau va putea fi cumpărat. Trebuie însă avut în vedere că un tutorial comercial, ca orice alt produs de pe piaţă, se supune regulilor competivităţii şi nu în ultimul rând, ale drepturilor de autor [3].

2.3. Implementări de tutoriale

Proiectul Leonardo da Vinci II REMOTE („Retail Education Mechanism for On-line Training in Europe”), proiect ce a prevăzut dezvoltarea unui produs ICT pentru facilitarea educaţiei persoanelor cu dizabilităţi. Programul a presupus formarea de aptitudini în direcţia creării paginilor Web utilizând softul Macromedia Dreamweaver, actualmente Adobe Dreameaver după achiziţionarea companiei Macromedia de către Adobe. Tutorialul a fost distribuit prin intermediul CD-ului în facultăţile din ţările europene partenere: Germania, România, Spania, Anglia.

Figura 3: Tutorial Dreamweaver - proiect Remote

Proiectul Socrates Minerva „e-Taster - short, free on-line courses - „tasters″ - for multilingual, international delivery” (2004 – 2007). Nouă parteneri din 6 ţări (North Hungarian Regional Distance Education Center, E-Collegium Foundation, Mimoza Communication Ltd., Politehnica University of Timişoara, European Association of Distance Teaching Universities, University of East London, University of Plovdiv "Paisii Hilendarski", Kaunas

18 Aspecte teoretice ale realizării unui tutorial - 2

Regional Distance Education Study Centre) au pus bazele unui număr de 12 cursuri online, liber accesibile, acoperind diverse domenii de activitate. http://emrtk.uni-miskolc.hu/projektek/e_taster/index.html sau http://193.225.58.52/etaster/

Figura 4: Curs „ICT” - proiect e-Taster

tutorialul de utilizare a campusului virtual ViCaDiS, parte integrantă a proiectului cu acelaşi nume: ViCaDiS - Virtual Campus for Digital Students (2007 - 2009), http://www.vicadis.net/set/demo_ro/index.htm, unealtă educaţională accesibilă pentru studenţii din facultăţile europene care utilizează medii educaţionale diferite.

Figura 5: Utilizarea campusului virtual ViCaDiS

2.3 - Implementări de tutoriale 19

podcast-uri în cadrul materiilor „Proiectare asistată de calculator - PAC” (anul 2 de studiu - Tehnologii şi sisteme de Telecomunicaţii), „Proiect multimedia”, (anul 4 de studiu - Tehnologii şi sisteme de Telecomunicaţii), Centrul de Învăţământ la Distanţă

Figura 6: Podcast-uri - curs PAC

Tutorialele amintite au fost dezvoltate sub formă de demonstraţii (capturi de ecran însoţite de explicaţii pe canalul audio) sau sub forma unor materiale interactive, unde captura de ecran propriu-zisă este însoţită de explicaţii sub formă de text şi acţiuni ce se cer executate de către utilizator în mod direct prin folosirea mouse-ului sau a tastaturii.

Orice fel de tutoriale/prezentări video, fişiere pdf sau text ce sunt răspândite în World Wide Web.

http://mihai.cm.upt.ro/Proiecte/Didatec/DS/

http://tutorialul.ro/

http://vimeo.com/videoschool

http://www.youtube.com, cuvânt cheie „tutorial”

http://www.w3schools.com/

http://tutorials.learn.com

http://www.thetutorial.com/

http://www.good-tutorials.com/

Cap 3: Formate de fişiere utile în cadrul tutorialelor

3.1. Formate de imagini

PSD - Photoshop Document Acest format poate conţine o imagine asemănătoare unui set de straturi

incluzând text, măşti, informaţii despre opacitate, moduri de combinare, canale de culoare, canale alfa, căi de tăiere, setări duotone precum şi alte elemente specifice Photoshop. Este un format popular şi des răspândit în rândul profesioniştilor, fiind compatibil cu diverse aplicaţii concurente.

PSB - Photoshop Large Document Format Este o versiune a formatului PSD, conceput special pentru fişiere mari (2GB)

sau cu o informaţie prezentă pe o suprafaţă definită de laturi mai mari de 30.000 de pixeli. Suportă până la 300.000 x 300.000 pixeli. Software: Adobe Photoshop Link-uri http://www.adobe.com

http://en.wikipedia.org/wiki/Photoshop

BMP - Bitmap Este utilizat de pachetul software Microsoft Windows ca format grafic standard.

Poate lucra cu adâncimi de culoare de 1, 4, 8, 24 biţi (16.7 milioane de culori). Fişierele BMP se mai numesc şi fişiere “bump”. Software: Paint, ACDSee, Photoshop, CorelDraw Link-uri: http://en.wikipedia.org/wiki/Windows_bitmap http://en.wikipedia.org/wiki/Bitmap

http://wvnvaxa.wvnet.edu/vmswww/bmp.html

GIF - Graphics Interchange Format Este un format grafic dezvoltat de către CompuServe. Este folosit pentru site-uri Web din cauza dimensiunilor mici ale fişierelor. Suportă culori pe 8 biţi (256 culori). Gif-urile animate sunt o secvenţă de cadre care se repetă. Software: Paint, ACDSee, Photoshop, CorelDraw. Link-uri: http://en.wikipedia.org/wiki/Gif http://local.wasp.uwa.edu.au/~pbourke/dataformats/gif/

3.1 - Formate de imagini 21

JP(E)G - Joint Photographic Experts Group Este un standard de compresie cu pierderi a unei imagini (un tip de compresie la

care în momentul decomprimării informaţia diferă de cea originală, dar este destul de apropiată pentru a putea fi folosită). Este un format comun pentru stocarea şi transmiterea imaginilor în paginile Web. Este folosit cu spaţii ale culorilor RGB, YCbCr, CMYK suportând culori pe 8-32 de biţi. Editarea continuă a fişierelor JPEG nu este indicată deoarece de fiecare dată când se salvează fişierul datele suplimentare ale imaginii sunt pierdute în timpul compresiei. Pentru a face modificări ulterioare se recomandă salvarea în formatul .psd sau .tiff. Software: Paint, ACDSee, Photoshop, CorelDraw. Link-uri: http://www.jpeg.org/ http://en.wikipedia.org/wiki/Jpeg

PNG - Portable Network Graphics Este un format grafic de fişier recunoscut de cele mai multe browser-e Web de

actualitate, considerat adesea o îmbunătăţire a formatului GIF [2]. Formatul acceptă transparenţă variabilă a imaginilor (canale alpha) şi controlul variabil al luminozităţii imaginii pe diferite computere (corecţie gama). PNG este folosit pentru o gamă largă de reprezentări grafice, de la imagini de dimensiuni mici (butoane, forme ondulate), la imagini complexe (fotografii) [2]. Este folosit cu spaţiul de culoare RGB (8-24 de biţi), însă nu suportă grafice profesionale şi alte spaţii ale culorilor (ex. CMYK). Totuşi au o largă răspândire în cazul aplicaţiilor Web datorită browser-elor suport: Internet Explorer, Safari, Mozilla Firefox, Opera, toate acestea afişează imagini în format PNG fără a fi nevoie de plug-in-uri. Software: ACDSee, Photoshop Link-uri: http://png.software.informer.com/

http://en.wikipedia.org/wiki/Portable_Network_Graphics

RAW Spre deosebire de JPEG, RAW nu reprezintă un acronim misterios ci îşi are

originea în cuvântul englezesc „raw” care înseamnă „materie primă”. Fişierele RAW pot oferi o plajă mult mai extinsă de ajustări decât fişierele JPEG: peste 50% mai multe detalii la expunere (acest lucru depinde însă de capacitatea senzorului). Fişierul conţine întreaga informaţie furnizată de captator, permiţând modificarea ulterioară a parametrilor de expunere. Software: BreezeBrowserPro, Photoshop Link-uri: http://artavie.wordpress.com/2009/02/15/raw-sau-jpeg/ http://www.adobe.com/digitalimag/pdfs/transition_from_film.pdf

22 Formate de fişiere utile în cadrul tutorialelor - 3

TIFF - Tagged Image File Format Este utilizat pentru schimbul de fişiere între aplicaţii şi platforme pentru

calculatoare. Este un format de imagine bitmap flexibil, acceptat de toate aplicaţiile virtuale de pictură, editare de imagini şi machetare de pagini.

Formatul acceptă imaginile CMYK, RGB, Lab, Culoare indexată (Indexed Color) şi Tonuri de gri (Grayscales) cu canale alfa, precum şi o adâncime de culoare de 8, 16 până la 32 de biţi/canal. Software: ACDSee, Photoshop Link-uri: http://office.microsoft.com/ro-ro/help/HP030812571048.aspx

http://en.wikipedia.org/wiki/Tagged_Image_File_Format

WBMP - Wireless Bitmap Formatul WBMP este formatul standard pentru optimizarea imaginilor pentru

dispozitive mobile, cum ar fi telefoanele celulare. WBMP accepta culoarea pe 1 bit, ceea ce înseamnă ca imaginile WBMP pot conţine numai pixeli albi şi negri. Software: ACDSee, Photoshop Link-uri: http://bmp.software.informer.com/

http://en.wikipedia.org/wiki/Wireless_Application_Protocol_Bitmap_Format

Tabel 2: Pro şi contra GIF [7]

Pro Contra

Dimensiuni mici ale fişierelor, mai ales când se lucrează cu un număr mic de culori. Un fişier JPG sau PNG bine optimizat poate fi mai

mic în dimensiune decât un fişier cu extensia GIF. Procesul de optimizare depinde de numărul de culori ale imaginii originale şi de felul cum pot acestea fi combinate în fişierele JPG sau PNG fără a se pierde informaţie.

Păstrează claritatea imaginii originale. Pixelii nu sunt eliminaţi, doar porţiuni din culoare. Este o alegere optimă pentru imagini care accentuează zone plate, solide de culoare în detrimentul zonelor formate din tonuri, nuanţe multiple: diagrame,logo-uri, desene animate, caricaturi, butoane simple, line-art-uri.

Conţin transparenţa. Se poate face o culoare transparentă astfel încât fundalul din browser să poată fi vizibil - „imagini plutitoare’. Nu păstrează culorile imaginilor. Tonurile

continue, gradaţiile fine de culoare (umbre, gradiente) pot fi afişate ca simple benzi de culoare.

Permit animaţii de mici dimensiuni care se încarcă rapid în pagina Web.

3.2 - Formate de fişiere audio 23

Tabel 3: Pro şi contra JPEG [7]

Pro Contra

Dimensiunile fişierelor pot fi foarte mici. Compresia funcţionează cel mai bine atunci când imaginile au un contrast redus şi zone cu variaţii subtile ce nu se observă atunci când pixelii sunt combinaţi sau înlăturaţi.

Zonele cu o singură culoare nu vor fi comprimate deloc, astfel încât echivalentul GIF poate avea o dimensiune mai mică Fişierele JPEG nu acceptă transparenţă.

Păstrează culorile imaginii originale. Gradaţiile tonurilor de culoare sunt foarte bine conservate, astfel încât gradientul şi muchiile fine se păstrează.

Nu se păstrează detaliile fine din imagine. La o rată de compresie mare fişierele JPEG pot apărea ca o suită de blocuri de culori. Se recomandă în acest sens alegerea unui raport de compresie potrivit la calitatea imaginii dorită.

Tabel 4: Pro şi contra JPEG 2000 [7]

Pro Contra

Un control bun al raportului între compresie şi calitate. Pentru a utiliza acest format de fişier trebuie

instalate plug-in-uri opţionale atât pentru programe de editare profesionale (ex: Photoshop) cât şi pentru simpla lor vizualizare în browser, exceptând Safari.

Stabilirea dimensiunii fişierului.

Poate utiliza opţional compresia fără pierderi.

Suportă imaginile pe 16-biţi şi tonuri de gri. Fişierele JPEG 2000 nu pot fi optimizate pentru Web, utilizând de exemplu opţiunea Save for Web and Devices din Photoshop

Păstrează canale alfa şi cele iniţiale.

Suportă transparenţa.

3.2. Formate de fişiere audio

AIFF (.aif, .aiff) Audio Interchange File Format a fost destinat exclusiv utilizatorilor de

Macintosh, cunoscând în prezent şi conceptul de multiplatformă [7]. Software: Apple Quick Time Player Link-uri: http://muratnkonar.com/aiff/index.html

http://en.wikipedia.org/wiki/Audio_Interchange_File_Format

24 Formate de fişiere utile în cadrul tutorialelor - 3

Flash Un fişier audio se poate importa într-un document Flash, se poate edita, salva cu

extensie .swf şi integra ulterior într-o pagină Web. Software: Adobe Flash, Flash Player, 3D Flash Animator, Adobe Captivate Link-uri: http://www.swftools.com/

http://en.wikipedia.org/wiki/SWF

MIDI Musical Instrument Digital Interface a fost iniţial dezvoltat ca un standard de

comunicare între instrumente muzicale. Un fişier MIDI conţine de fapt un set de „comenzi matematice” care descriu o

serie de note muzicale. Este util pentru a integra muzică instrumentală într-un site rezultând un timp de descărcare (download) mic. Nu este recomandată folosirea lui în cazul vocii umane [9].

Sunetele stocate în formatul MIDI au extensia .mid sau .midi. Software: Adobe Audition, MIDI Converter Studio, MusE Link-uri: http://midiworld.com/

http://www.midi.org/ http://en.wikipedia.org/wiki/MIDI

MP3 Face parte din familia MPEG (Moving Picture Expert Group) şi combină

acurateţea şi calitatea sunetului cu mărimi de fişier reduse. Este unul dintre formatele des utilizate în site-urile de partajare audio-video sau

pentru distribuirea prin metoda de transport podcast. Sunetele stocate în format MP3 au extensia .mp3 sau .mpga (MPEG audio). Software: Windows Media Player, Winamp, VLC Media Player Link-uri: http://www.mp3.com http://www.mp3converter.net/

http://en.wikipedia.org/wiki/Mp3

Real Media Acest format a fost dezvoltat de către Real Media şi oferă suport pentru audio-

video, inclusiv servicii de streaming prin utilizarea protocolului Realtime Streaming Protocol (RTSP). Extensiile cunoscute sunt .rm sau .ram. Software: Real Player, Quick Time Link-uri: http://www.real.com/player/

http://en.wikipedia.org/wiki/RealMedia

3.3 - Formate de fişiere video 25

Wave A fost dezvoltat de IBM şi Microsoft. Se poate utiliza de către calculatoarele cu

sistem de operare Windows şi de asemenea de către cele mai populare browser-e Web. Sunetele stocate în format WAVE au extensia .wav. Permite ca diferite calităţi ale sunetului să fie înregistrate. Foloseşte rate de 11025 Hz, 22050 Hz şi 44100 Hz. Software: Media Player, Winamp Link-uri: http://www-

mmsp.ece.mcgill.ca/documents/audioformats/wave/wave.html http://en.wikipedia.org/wiki/Wav

3.3. Formate de fişiere video

AVI Audio Video Interleave a fost dezvoltat de către Microsoft în anul 1992. Este o

particularitate a Resource Interchange File Format (RIFF) [8], cunoaşte de obicei dimensiuni mari ale fişierelor şi poate fi rulat cu player-e ca Windows Media Player, Quick Time, Real Player etc. Software: Media Player, Quick Time, Real Player, BSPlayer. Link-uri: http://www.jmcgowan.com/avi.html

http://www.freedownloadscenter.com/Search/avi_player.html http://en.wikipedia.org/wiki/AVI

Flash video Dezvoltat iniţial de către Macromedia, a fost preluat de către Adobe. Este unul

dintre cele mai populare formate din prezent în aplicaţiile multimedia, cunoscând extensiile .flv şi .swf. Software: Adobe Flash, Flash Player, 3D Flash Animator, Adobe Captivate Link-uri: http://www.swftools.com/

http://en.wikipedia.org/wiki/Flash_Video http://get.adobe.com/flashplayer/

MPEG Este unul dintre cele mai cunoscute standarde audio-video, creat de către

Moving Picture Experts Group. Cunoaşte mai multe familii [2]: MPEG 1 - standard de compresie video cu rezoluţia suportată de 352 x 240 cu

30 de cadre pe secundă. Prezintă un debit binar de 1,5 Mb/s, în scopul stocării imaginilor video precum şi a sunetului stereo asociat pe CD-ROM.

26 Formate de fişiere utile în cadrul tutorialelor - 3

MPEG 2 - înglobează mai multe canale audio de înaltă fidelitate, fiind folosit cu precădere în transmisiile digitale prin satelit şi la codarea conţinutului discurilor DVD.

MPEG 4 - este un standard de compresie grafică şi video, conceput să transmită informaţiile pe lăţime de bandă redusă. Oferă spaţiu redus la înregistrare, controlându-se calitatea imaginii proporţional cu banda ocupată. Se utilizează în supraveghere, telecomunicaţii mobile şi streaming pe Web. Formatul .mp4 (H264) a devenit popular în distribuţia unor materiale de înaltă definiţie .

MPEG 7 - mai este denumit şi Interfaţa de Descriere a Conţinutului Multimedia (MCDI - Multimedia Content Description Interface).

MPEG 21 - defineşte pentru multimedia mai multe cadre de lucru care să ofere un conţinut cât mai creativ producătorilor, creatorilor şi distribuitorilor. Software: Media Player, Quick Time, Real Player, BSPlayer, KMplayer Link-uri: http://www.mpeg.org

http://en.wikipedia.org/wiki/Moving_Picture_Experts_Group

(Apple) QuickTime A fost introdus în scenă în anul 1991 de către firma Apple, de aici şi denumirea

lui. Cel mai popular format pentru Web dezvoltat este .mov, derivat de la englezescul „movie” (film). Software: QuickTime Player, VLC Media Player Link-uri: http://www.apple.com/quicktime/download/

http://en.wikipedia.org/wiki/QuickTime

Windows Media Video Reprezintă răspunsul companiei Microsoft la „războiul” formatelor video în

aplicaţii Web [8]. Cunoaşte extensia .wmv. Software: Windows Media Player, VLC Media Player Link-uri: http://www.digitalpreservation.gov/formats/fdd/fdd000091.shtml

http://en.wikipedia.org/wiki/WMV

Cap 4: Grafică computerizată

Grafica computerizată se prezintă din perspectiva programului Adobe Photoshop, software utilizat pentru editarea imaginilor digitale pe calculator, produs şi distribuit de compania americană Adobe Systems® şi care se adresează atât amatorilor cât şi profesioniştilor în domeniu. Elementele prin care Photoshop se diferenţiază de aplicaţiile concurente şi prin care stabileşte noi standarde în industria prelucrării de imagini digitale sunt: selecţiile, straturile (Layers), măştile (Masks), canalele (Channels), retuşarea şi optimizarea imaginilor pentru Web.

Înainte de a face o trecere prin programul în sine trebuie înţelese anumite concepte ca noţiunea de imagine digitală, spaţii de culoare, fonturi sau transformări geometrice.

4.1. Programe alternative

GIMP este un program multi-platformă pentru editarea de imagini (sau grafică) de tip raster (bitmap). GIMP este acronimul pentru GNU Image Manipulation Program fiind destinat executării diverselor modificări cum ar fi retuşarea fotografiilor, a compoziţiei imaginii sau construcţia imaginilor. Prezintă şi un oarecare suport pentru grafică vectorială [10]. Studenţi fiind, Peter Mattis şi Spencer Kimball au început să lucreze la GIMP în anul 1995 şi au publicat varianta beta în februarie 1996. Varianta beta s-a bazat pe Motif, un instrument de construire a interfeţelor grafice. Deoarece acest instrument necesita o licenţă, cei doi au creat o alternativă sursă gratuită (open source), denumită GTK [10]. În primăvara anului 1997 cei doi au absolvit facultatea şi au abandonat în mare măsură proiectul GIMP. După o vreme mai mulţi voluntari au recuperat codurile şi au revitalizat proiectul, în etapa iniţială, programul numindu-se General Image Manipulation Program, dar ulterior litera G din acronim a fost folosită spre a arăta că este licenţiat sub licenţa GNU GPL ca software liber. Versiunea curentă a GIMP funcţionează pe numeroase sisteme de operare, inclusiv GNU/Linux, Mac OS X şi Microsoft Windows. Nu există o versiune stabilă pentru sistemele de operare Microsoft Windows pe 64 de biţi, existând însă versiuni experimentale [10].

GIMP - http://www.gimp.org/ - are o fereastră principală şi mai multe ferestre de dialog folosite pentru unelte, palete de culori şi aşa mai departe, ca atare GIMP foloseşte o interfaţă prietenoasă. Instrumentele utilizate pentru editarea imaginilor pot fi accesate prin intermediul casetelor de instrumente, prin meniuri şi ferestre de dialog. Acestea includ filtre şi perii, precum şi instrumente de selecţie şi transformare.

28 Grafică computerizată - 4

Figura 7: Interfaţa GIMP

Paint.NET este un software gratuit pentru computerele ce rulează sisteme de operare Microsoft Windows. Acesta oferă o interfaţă intuitivă şi inovatoare, cu suport pentru straturi, posibilităţi pentru anulare operaţie, efecte speciale şi o mare varietate de instrumente utile. O comunitate online activă şi în creştere oferă sprijin în realizarea de elemente grafice, tutoriale şi plugin-uri.

Figura 8: Interfaţa Paint.NET

Creat iniţial de către Rick Brewster ca proiect la universitatea de stat din Washington, Paint.NET a evoluat de la o simplă înlocuire pentru programul Microsoft Paint, care este inclus automat în sistemul de operare Microsoft Windows, într-un editor mai puternic, cu suport pentru straturi şi lucrul cu opacităţi şi transparenţe.

4.2 - Imagine digitală 29

Paint.NET este programat în limbajul de programare C şi funcţionează exclusiv cu Windows, neexistând până în prezent o versiune pentru alte sisteme de operare.

http://download.cnet.com/Paint-NET/3000-2192_4-10338146.html

Aplicaţiile enumerate în paragrafele anterioare sunt aplicaţii desktop, pentru a funcţiona ele trebuie instalate pe calculatorul propriu. Lumea tehnologiei moderne propune şi aplicaţii online gratuite, evident cu un număr redus de parametri şi posibilităţi de editare, totuşi agreate datorită acestei flexibilităţi în manipularea lor: oricând, oriunde avem conexiune la Internet.

Aplicaţiile online nu necesită descărcare, cumpărare sau instalare, totuşi pentru utilizarea lor se recomandă sau se impune crearea unui cont de utilizator: http://www.sumopaint.com/, http://pixlr.com/.

4.2. Imagine digitală

Pentru a „memora” imaginile, un calculator poate folosi două metode: memorarea unor „puncte critice” cu ajutorul cărora imaginea poate fi refăcută

(Adobe Flash, CorelDraw) - grafică vectorială discretizarea imaginii într-un număr de elemente pe orizontală şi verticală, cât

mai mici, elemente numite pixeli. Imaginea digitală rezultă ca o matrice bidimensională de pixeli numită în literatura de specialitate imagine raster sau bitmap. Pentru a nu crea confuzie cu formatul de fişier BMP termenul utilizat mai frecvent dintre cele amintite va fi cel de imagine raster.

Pentru a afişa un cerc de exemplu, acesta poate fi memorat într-o imagine de tip raster (bmp, jpg). Vor fi memoraţi nu numai pixelii de pe circumferinţa cercului ci şi cei din interiorul acestuia sau care sunt în jurul său.

În cadrul formatelor vectoriale (SVG - Scalable Vector Graphics, SWF - ShockWave Flash) sunt reţinute doar centrul şi raza cercului, calculatorul generând prin metode de afişare specifice toate celelalte puncte ce vor alcătui cercul.

Când mărim o imagine de tip vectorial nu facem decât să redesenăm o parte a sa, calculatorul redând cercul cu aceeaşi claritate. Se cunoaşte forma geometrică reprezentată şi mărirea imaginii nu reprezintă decât trasarea (la scară) a fostei imagini vectoriale.

Atunci când mărim o imagine de tip raster operaţia va consta în supradimensionarea pixelilor (un pixel al cercului va fi afişat în mai multe puncte de pe ecran). Grafica raster este în esenţă o grafică de procesare, prin care grupuri de pixeli

30 Grafică computerizată - 4

dintr-o matrice iniţială îşi schimbă succesiv culoarea până când imaginea în ansamblu reprezintă ceea ce a dorit artistul [11].

Spre deosebire de grafica vectorială în care elementul principal este forma, în grafica de tip raster culoarea este baza oricărei reprezentări vizuale (nu întâmplător aplicaţiile grafice de tip raster se mai numesc programe de pictură). Conturul de exemplu, în grafica raster este linia imaginară care formează graniţa între două zone diferit colorate dintr-o imagine [11].

Calitatea reprezentării digitale a imaginilor raster reiese prin definirea parametrului rezoluţie ca fiind densitatea de elemente pe unitatea de lungime. În acest fel putem vorbi de imagini cu rezoluţia de 100 pixeli pe cm sau 300 pixeli pe inch, în funcţie de unitatea de măsură aleasă. Denumirea de pixeli este uneori înlocuită cu points sau dots, denumiri preluate din mediul tipografic. În mod curent se utilizează ca măsură pentru rezoluţie dots per inch sau dpi [7].

Pentru calculator conţinutul unor imagini de tip raster de aceeaşi dimensiune nu este important, deoarece numărul de pixeli este identic indiferent dacă imaginea reprezintă un grup de oameni sau o clădire. Interpretarea conţinutului se face la nivelul psiho-vizual al omului, la nivelul creierului uman practic şi nu în interiorul calculatorului [11].

4.3. Spaţii de culoare

O compoziţie grafică foloseşte un număr limitat de culori, alegerea acestora nefiind o sarcină facilă aşa cum pare la prima vedere. Utilizarea culorilor trebuie să se subordoneze unor criterii de natură estetică şi funcţională, fără de care întregul proces de creaţie poate deveni inutil.

Spectrul de culori este un interval continuu ce conţine culori diverse, aşa cum reiese din tabelul următor [10]:

Tabel 5: Culori ROGVAIV

Culoare Lungime de undă

(nm) Frecvenţă

(GHz) Roşu 800-650 400-470

(Orange)Portocaliu 640-590 470-520

Galben 580-550 520-590

Verde 530-490 590-650

Albastru 480-460 650-670

Indigo 450-440 700-760

Violet 430-390 760-780

4.3 - Spaţii de culoare 31

Spectrul vizibil se continuă în ambele capete, cu infraroşu şi respectiv ultraviolet, radiaţii pe care sistemul vizual uman nu poate să le perceapă.

10-14 10-12 10-10 10-8 10-610-7 10-3 104

λ [m]Underadio

Razecosmice

Raze γ Raze X Radiaţiiultra-violete

λ [nm]380 470 535 610 780

Radiaţii vizibile

Alb

astr

u

Ver

de

Roş

u

Radiaţiiinfraroşii

B G R

Radiaţii optice

Figura 9: Spectrul radiaţiilor electromagnetice [12]

Aplicaţiile de grafică pun la dispoziţia utilizatorului o serie de palete coloristice într-o formă care permite selecţia intuitivă a culorilor dorite şi în acelaşi timp ţine cont de caracteristicele dispozitivului electronic de afişare, în speţă de cele mai multe ori monitorul calculatorului, eventual ecrane LCD, plasme sau LED-uri [11].

Când se vorbeşte despre culori există câteva caracteristici de care se ţine seama: nuanţa (culoarea de bază a unui obiect), saturaţia (gradul de puritate al culorii), luminozitatea (strălucirea culorii) [12].

De-a lungul timpului au fost dezvoltate mai multe metode de prezentare a senzaţiei vizuale, concretizate în ceea ce numeşte literatura de specialitate: spaţii de culoare.

Cel mai simplu, utilizat şi comentat spaţiu de culoare este RGB. Se regăseşte în echipamentele de studio TV, în sistemele de prelucrare a imaginii şi în comanda monitoarelor de calculator, unde pe primul plan sunt performanţele privind calitatea imaginii [12].

Bazat pe un set de 3 culori primare (de referinţă): R (red = roşu), G ( green = verde), B (blue = albastru), acest model ia în considerare efectul aditiv al culorilor primare la nivelul ochilor. Efectul aditiv constă în faptul că orice culoare se poate obţine prin suprapunerea (prin adunarea) în anumite proporţii a trei radiaţii monocromatice riguros definite, situate, în acest caz, în domeniile de roşu, verde şi

32 Grafică computerizată - 4

albastru (domeniile de sensibilitate ale conurilor de pe retina ochiului). La alegerea celor 3 culori s-a avut în vedere ca, nici una din ele, să nu poată fi obţinută ca rezultat al amestecului celorlalte două [13].

Se poate asimila acest model cu un cub al culorilor, ca în figura următoare:

Figura 10: Cubul RGB [11]

O altă modalitate de reprezentare a culorilor presupune alegerea unui sistem de coordonate XYZ în care coordonata Y corespunde luminanţei culorii respective. Astfel se obţine spaţiul de culoare CIE – XYZ. Transformarea din spaţiu RGB în spaţiul XYZ se face cu ajutorul relaţiei [10]:

⋅

=

ZYX

BGR

99,001,00011,0813,0176,02,031,0489,0

Figura 11: Diagrama de cromaticitate CIE XYZ [13]

4.3 - Spaţii de culoare 33

Revenind la modul RGB, fiecărei culori îi corespunde un punct în interiorul cubului, descris prin coordonatele sale RGB. De exemplu un punct a cărei coordonate sunt R=255, G=0, B=0 corespunde unei nuanţe de roşu.

Diagonala mare a cubului reprezintă nivelele de gri, ceea ce înseamnă că întotdeauna pentru alb, negru sau nuanţe de gri cele trei valori RGB vor fi egale. Când toate valorile sunt 255 rezultatul este culoare alb pur, când toate valorile sunt 0 rezultă culoare negru [13].

Suprafeţele exterioare ale unui spaţiu de culoare (în cazul cubului feţele acestuia) formează gama de culori a spaţiului, adică limita celor mai saturate culori ce pot fi obţinute pentru fiecare nuanţă [11].

Prin urmare culoarea fiecărui pixel din imagine este dată de 3 valori diferite, fiecare dintre ele descriind intensitatea uneia dintre culorile primare componente. Iniţial s-au ales 256 de nivele diferite de intensitate pentru fiecare culoare primară (codare pe 8 biţi - 28 = 256). Rezultă că fiecare pixel este reprezentat pe 3 x 8 = 24 biţi, acest parametru fiind cunoscut ca şi adâncime de culoare. Imaginilor digitale, pe lângă componentele de lăţime (width) şi înălţime (height), li se adaugă adâncimea rezultând o reprezentare sub forma unei matrici tridimensionale [11]. Se poate astfel calcula pe baza dimensiunii rezultate din aceşti parametri necesarul de memorie pentru stocarea unei imagini.

Pentru adâncimea de culoare se pot alege valori diferite, iată câteva exemple: 8 biţi (256 culori), 16 biţi (65536 culori) sau 24 biţi ( peste 16 milioane de culori). Prin reducerea numărului de biţi nu se schimbă modul de afişare ci se micşorează sau măreşte numărul de culori pentru reprezentarea imaginilor [11]. O imagine care conţine culori din afara paletei va fi totuşi afişată, însă cu modificările de rigoare. Sistemul va înlocui culorile lipsă cu cele mai apropiate culori disponibile, cu un plus de atenţie însă atunci când modificările pot deveni deranjate dacă reducerea numărului de culori este semnificativă, de la câteva milioane la sute. De reţinut că imaginea iniţială poate fi refăcută prin trecerea inversă a paletei de culori cu un număr inferior, la paleta de culori cu un număr superior [13]. Unul dintre motivele modificării efective a adâncimii de culoare se reflectă în dorinţa de a reduce spaţiul de memorie necesar stocării materialului digital foto.

Deoarece descompunerea unei culori în componente cromatice are sens doar din punct de vedere teoretic şi reflectă modul în care funcţionează diferitele dispozitive de afişare (spaţiul RGB), respectiv tipărire (spaţiul CYMK), se oferă un alt model mai apropiat modului de percepţie al sistemului vizual uman şi poartă denumirea de HSV. Acest model descrie o culoare prin nuanţă (H – Hue), saturaţie (S – Saturation) şi

34 Grafică computerizată - 4

luminozitate (V – brightness Value). Alte variante sunt HSB (B – brightness) şi HSI (I – intensity) [10].

Figura 12: Cilindrul de reprezentare al spațiului HSV [10]

În strânsă legătura cu cele de mai sus este modelul HSL unde H (hue = nuanţă), S (saturation =saturaţie), L (luminance = luminanţă sau strălucire).

Acest model pune în evidenţă cele două componente ale imaginii în culori [13] : luminanţa, ca purtătoare a informaţiei de strălucire a elementelor de imagine; crominanţa, ca purtătoare a informaţiei de culoare, cu componentele sale:

nuanţa, dată de lungimea de undă, şi saturaţia, dată de conţinutul de alb.

În figură se prezintă relaţia între cele două modele RGB şi HSL.

Luminanţă

Alb

Negru

Verde

Albastru RoşuNuanţă

Saturaţie

Figura 13: Modelul HSL [12]

4.3 - Spaţii de culoare 35

Cele două componente ale imaginii în culori sunt reprezentate prin doi vectori: vectorul crominanţă, plasat în planul culorilor, şi vectorul luminanţă, care stabileşte nivelul planului de culoare, pe axa verticală, de la negru la alb. Vectorul crominanţă defineşte nuanţa culorii, prin faza de rotaţie, şi saturaţia culorii, prin modulul vectorului [12]. Modelul HSL utilizează parametri care necesită un anumit grad de prelucrare motiv pentru care este folosit cu precădere în interfeţele grafice, asigurând un control simplu din partea utilizatorului. În sistemul de operare Windows alegerea culorii (de exemplu, pentru fundal) se poate face atât în formatul RGB, cât şi în formatul HSL.

În grafica computerizată se utilizează şi alte modele în funcţie de preferinţele fiecărui grafician/dezvoltator sau în funcţie de rezultatul final care se doreşte obţinut. Iată câteva exemple extrase din Adobe Photoshop:

Indexed Color - model pe 8 biţi (256 de culori). Cu toate că numărul de culori este limitat, acest spaţiu de culoare asigură o calitate optimă în cazul anumitor prezentări multimedia (tutoriale) sau pagini Web. Editările asupra imaginilor de acest gen sunt limitate, motiv pentru care trebuie adesea convertite în spaţiul de culoare RGB. Fişierele pot fi salvate ca şi formate .psd, .bmp, .gif, .png sau .tiff.

CMYK (Cyan Magenta Yellow Black) - este spaţiul de culoare care se recomandă pentru pregătirea imaginilor care vor fi tipărite într-o tipografie. Numărul de culori este variabil depinzând de setarea spaţiului de lucru, specificat în căsuţele de „setare culoare” corespunzătoare softului utilizat. În modul CMYK fiecărui pixel i se atribuie o valoare procentuală, rezultând de exemplu pentru un roşu aprins/închis următoarele setări: 0% cyan, 95% magenta, 95% yellow şi 0% black.

Lab Color - este un model bazat pe percepţia umană reală în privinţa culorilor. Valorile numerice descriu toate culorile pe care le vede o persoană cu aptitudini normale. Luminozitatea (L), variază de la 0 la 100 ca şi valoare. În căsuţa de alegere a culorii Adobe Color Picker avem două componente: a (axa verde-roşu) şi b (axa albastru-galben) care iau valori de la +127 până la –128. Se pot salva imagini pe 16 biţi/canal şi în formate ca .psd, .raw, .tiff sau .psb.

Grayscales este un spaţiu de culoare care utilizează reprezentarea imaginilor în nuanţe de gri şi o adâncime de 8 biţi/canal rezultând astfel 256 de nuanţe de gri.

36 Grafică computerizată - 4

Duoteones permite crearea de imagini utilizând două culori (duotone), trei culori (tritone) şi patru culori (quadtone), definite de utilizator.

Selectarea unui mod de culoare adecvat este o etapă importantă şi astfel în practică sunt utilizate tonurile de gri, culorile indexate şi RGB, deoarece acestea sunt cele suportate de formate de fişiere populare ca GIF şi JPG. Modul de culoare ales afectează felul în care imaginea este afişată. Utilizarea a 256 culori (sau mai puţine) este de bun augur pentru afişarea imaginilor care conţin un număr limitat de nuanţe, dar nu şi pentru afişarea imaginilor „full color” [7].

De obicei în aplicaţii multimedia se lucrează cu ceea ce se cheamă culori hexazecimale, culori definite de programatori pentru reprezentarea nuanţelor şi tonurilor de culoare. Valorile hexazecimale sunt calculate prin cifre de la 0 la 9 şi litere de la A la F.

Figura 14: Culori hexazecimale

Acestea fac posibilă specificarea precisă a unei anumite culori: alb - #ffffff, negru - #000000, nuanţă roşu - #ff0000. Numerele hexazecimale sunt uşor de utilizat în Adobe Captivate, cod HTML sau alte limbaje de marcare pentru a specifica culoarea textului şi a fundalului unei pagini sau interfeţe grafice.

Deşi obţinerea unor culori optime a fost în primul rând o provocare pentru materiale printate, acest deziderat apare şi în cazul aplicaţiilor pe calculator. Imaginile vor fi vizualizate pe monitoare şi sisteme de operare diferite, ceea ce înseamnă că vor fi afişate diferit. În plus browser-ele Web interpretează şi ele diferit imaginile în formate diferite. Prin urmare este de bun augur să se urmeze câteva recomandări în privinţa setării culorilor [7]:

Pregătirea unui mediu optim de editare a imaginilor. Se alege o culoare gri pentru ecranul calculatorului, eliminând alte elemente care pot distrage atenţia.

4.3 - Spaţii de culoare 37

Calibrarea monitorului. Alegerea spaţiului de culoare (sRGB). Dacă se utilizează imagini în mai multe

browser-e Web, se setează opţiunea de Web Graphics Default. Această setare permite redarea imaginilor în spaţiul de culoare (s)RGB şi sporeşte şansele afişării imaginii în mod corect şi consecvent.

Convertirea oricăror documente cu imagini la spaţiul de culoare sRGB: Edit > Convert to Profile, respectiv (s)RGB în fereastra nou apărută.

Salvarea pentru Web - File > Save for Web&Devices.

4.4. Transformări geometrice

Transformarea geometrică este un procedeu de modificare a coordonatelor unui punct sau a unui grup de puncte prin specificarea parametrilor de ansamblu ai modificării respective. Modificările geometrice se fac pe seama unor selecţii apriori, unde selecţia se poate considera un procedeu de marcare a unuia sau a mai multor componente grafice ca text, imagini şi forme geometrice [11]. O transformare geometrică este completă atunci când toţi pixelii marcaţi vor fi în concordanţă cu parametrii globali ai transformării. În procesul de transformare este posibil ca o parte din pixeli să ajungă „înafara” imaginii, caz în care ei sunt pierduţi, sau de asemenea să rămână pixeli „descoperiţi” [11]. În acest din urmă caz pixelii nu pot fi eliminaţi complet datorită faptului că imaginile de tip raster sunt continue (fără goluri), ca şi soluţie se recurge la colorarea lor cu o anumită nuanţă aleasă de utilizator.

Translaţia este procedeul de deplasare în spaţiul bidimensional a unui element grafic prin modificarea cu aceleaşi valori a coordonatelor tuturor punctelor din componenţa sa. Translaţia lasă neschimbată dispunerea relativă a pixelilor în selecţia făcută, modifică doar poziţia lor în cadrul imaginii. Prin efectuarea operaţiei inverse se reface imaginea iniţială [7].

Rotaţia constă în deplasarea elementelor grafice pe un arc de cerc sau pe un cerc (0-1800) al cărui centru poate fi specificat de utilizator. Această operaţie modifică poziţia relativă a pixelilor datorită faptului că în urma calculelor noile coordonate ale pixelilor nu se potrivesc perfect în matrice, fiind necesară o aproximare [11]. Efectul devine vizibil în cazul în care manipulăm imagini de rezoluţie scăzută şi poate fi pus uşor în evidenţă dacă facem transformarea inversă.

Scalarea presupune modificarea dimensiunilor unui element grafic pe una sau ambele axe de coordonate şi afectează cel mai mult calitatea imaginii de tip raster.

38 Grafică computerizată - 4

Micşorarea imaginii presupune reducerea numărului de pixeli din selecţie, prin calcule şi aproximări programul decide pixelii ce trebuie eliminaţi şi realiniează pixelii rămaşi pentru a asigura continuitatea imaginii [11]. Aplicarea transformării inverse nu va putea conduce la refacerea informaţiei iniţiale, deoarece computerul în acest caz este un dispozitiv de procesare şi calcul, nu de adăugare de informaţie.

Multiplicarea numărului de pixeli se face pe seama celor existenţi deja, iar rezultatul unei scalări prin mărire exagerată devine o imagine cu zone uniform colorate, de formă pătrată sau dreptunghiulară (în funcţie de raportul de aspect al pixelului 1:1, 2:1 etc.), uşor de distins de către ochiul uman. Se spune în limbaj curent despre o astfel de imagine că este una „pixelată”. Prin urmare se subliniază clar în literatura de specialitate că scalarea unei imagini degradează calitatea ei, mai puţin semnificativ la micşorare datorită limitărilor ochiului uman care nu percepe detalii sub o anumită dimensiune, însă semnificativ în cazul măririi exagerate şi necontrolate.

Antialinierea este o metodă de netezire a marginilor unor forme geometrice pentru ca acestea să dobândească un caracter mai natural, mai firesc.

Procesul de rasterizare implică o anumită aproximare a poziţiei pixelilor ale căror coordonate iniţiale nu mai sunt numere întregi în urma calculelor survenite ca şi rezultat a unor transformări. Orice formă ale cărei margini nu sunt paralele cu axele orizontală sau verticală, este supusă acestui proces de aproximare. În acest mod este foarte posibil ca o linie oblică văzută de aproape să apară întotdeauna segmentată. Antialinierea (manuală sau automată) vine ca şi o rezolvare la aceste inadvertenţe.

Antialinierea se utilizează atât la construirea formelor geometrice propriu-zise (pătrat, dreptunghi, cerc, elipsă), cât şi în aplicarea transformărilor amintite anterior prin netezirea contururilor rezultate în urma rotaţiei sau scalării unei zone de imagine. Spre exemplu un dreptunghi nu are nevoie de antialiniere în momentul construirii lui deoarece laturile sale sunt paralele cu axele orizontală şi verticală. Dacă acest dreptunghi se roteşte cu un unghi oarecare, diferit de 900 sau 1800, cele patru laturi vor deveni oblice, iar procesul de antialiniere este necesar pentru netezirea lor [11].

Figura 15: Antialinierea unui dreptunghi [11]

4.5 - Textul în grafica computerizată 39

4.5. Textul în grafica computerizată

Utilizarea textului/caracterelor la modul general este un proces simplu, mai ales atunci când utilizatorii sunt cunoscători în domeniul redactării materialelor în format electronic. Totuşi caracterele trebuie privite şi din alte puncte de vedere, în mod special când facem referire la grafica computerizată. În evoluţia lor pe scara istoriei caracterele au fost considerate la început ideograme [11], fiind expresia unui cuvânt sau a unui concept (scrierea chinezească de astăzi fiind un bun exemplu). În esenţă ele rămân mici desene indiferent dacă sunt tipărite pe hârtie, sculptate pe faţada unui monument sau afişate pe monitoare de calculator sau TV.

Atunci când se discută de text în mod implicit se face referire la fonturi. Acestea sunt o colecţie de caractere având acelaşi design, dimensiune, stil şi grosime. În grafica computerizată caracterele sunt considerate literele alfabetului, cifrele de la 1 la 9, semnele de punctuaţie şi totodată alte simboluri speciale dacă este cazul.

Există un standard de codare la scară internaţională, care se numeşte ASCII (American Standard Code for Information Interchange) astfel încât fiecare caracter să aibă un cod de identificare unic într-o tabelă şi să fie recunoscut de către orice sistem de calcul. În acest mod specificarea unui anumit cod va avea ca rezultat afişarea de fiecare dată a aceleaşi litere indiferent de fontul folosit [10].

O primă clasificare a fonturilor se face după design şi formă evidenţiindu-se trăsăturile comune regăsite în conturarea tuturor caracterelor din acel font [11]. Colecţia de fonturi având acelaşi design, însă reprezentând diferite mărimi, stiluri şi grosimi se numeşte familie de fonturi: Times New Roman, Arial, Verdana, Gill Sans, Lucida, Serif, Trebuchet sau Swis.

Arial A B C a b c 123 @ % & * ?

Arial Narrow A B C a b c 123 @ % & * ?

Arial Black A B C a b c 123 @ % & * ?

Times New Roman A B C a b c 123 @ % & * ?

Verdana A B C a b c 123 @ % & * ?

Lucida Handwriting A B C a b c 123 @ % & * ?

40 Grafică computerizată - 4

Există câteva caracteristici ale fonturilor care diferă în cadrul aceleiaşi familii: dimensiune, grosime şi stil, caracteristici ce vor fi analizate succint în paragrafele următoare. Caracterele sunt forme grafice cu o anumită lăţime şi înălţime. Lăţimea unui caracter (numărul de caractere pe o anumită unitate de lungime) se numeşte pitch. Dacă toate caracterele au aceeaşi lăţime, fontul este monospaţiat (fixed pitch), ceea ce înseamnă de exemplu că literele I şi M vor ocupa acelaşi spaţiu. În marea majoritate a aplicaţiilor se recomandă fonturile numite proporţionale (variable pitch), ceea ce înseamnă că variaţia lăţimii este funcţie de forma caracterului, cu alte cuvinte I şi M nu vor mai ocupa acelaşi spaţiu [11]. Aspectul fontului este influenţat de utilizarea unei linii subţiri sau mai accentuate la conturarea caracterelor, respectiv de înclinarea lor faţă de axa verticală. Grosimea fontului şi oblicitatea sunt cele care descriu acest aspect, nu există unitate de măsură pentru ele şi se regăsesc variante ca Bold, DemiBold, Regular, Bold Italic, Narrow, Black şi Italic. În funcţie de caracterele utilizate şi de mărimea lor se poate utiliza efectul de antialiniere (anti-aliasing), oferindu-se mai multe metode în această direcţie: None, Sharp, Crisp, Smooth, Strong. Procesul de anti-aliasing este o tehnică utilizată în grafica computerizată pentru optimizarea afişării elementelor pe ecran. Efectul netezeşte formele prin introducerea unor pixeli intermediari la graniţa/marginea dintre culori. În imagini alb-negru, programul/computerul introduce tonuri de gri pentru a completa zonele adiacente de alb şi negru.

Dimensionarea textului într-o compoziţie grafică este o comandă manuală realizabilă prin modificarea mărimii în puncte a fontului, prin deformarea caracterelor deja scrise sau mărirea spaţiului dintre ele. Se atrage atenţia asupra faptului că la aceeaşi mărime în puncte (12, 14 etc.) un font poate să arate mai mare sau mai mic comparativ cu un altul. Toate aceste operaţii încheiate sunt urmate de cele mai multe ori de alinierea textului în pagină sau pe o imagine. Principalele modalităţi de aliniere sunt: la stânga, la dreapta, mijloc şi justify.

Text aliniat la stânga

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tincidunt orci luctus hendrerit. Donec velit purus, porta eget adipiscing non, faucibus nec neque. Aliquam vehicula sagittis malesuada. Praesent sed ante tortor, vitae viverra sem. Duis metus urna, venenatis sit amet lobortis in, convallis egestas lectus. Morbi nec massa id orci sagittis lacinia sed id nulla. Vivamus id orci at ligula lacinia egestas vitae ac massa. Donec a tempus tellus. Quisque fringilla venenatis risus, ut condimentum enim iaculis quis.

4.5 - Textul în grafica computerizată 41

Text aliniat la dreapta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tincidunt orci luctus hendrerit. Donec velit purus, porta eget adipiscing non, faucibus nec neque.

Aliquam vehicula sagittis malesuada. Praesent sed ante tortor, vitae viverra sem. Duis metus urna, venenatis sit amet lobortis in, convallis egestas lectus. Morbi nec massa id

orci sagittis lacinia sed id nulla. Vivamus id orci at ligula lacinia egestas vitae ac massa. Donec a tempus tellus. Quisque fringilla venenatis risus, ut condimentum enim

iaculis quis.

Text aliniat la mijloc

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tincidunt orci luctus hendrerit. Donec velit purus, porta eget adipiscing non, faucibus nec neque.

Aliquam vehicula sagittis malesuada. Praesent sed ante tortor, vitae viverra sem. Duis metus urna, venenatis sit amet lobortis in, convallis egestas lectus. Morbi nec massa id

orci sagittis lacinia sed id nulla. Vivamus id orci at ligula lacinia egestas vitae ac massa. Donec a tempus tellus. Quisque fringilla venenatis risus, ut condimentum enim

iaculis quis.

Text aliniat justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam tincidunt orci luctus hendrerit. Donec velit purus, porta eget adipiscing non, faucibus nec neque. Aliquam vehicula sagittis malesuada. Praesent sed ante tortor, vitae viverra sem. Duis metus urna, venenatis sit amet lobortis in, convallis egestas lectus. Morbi nec massa id orci sagittis lacinia sed id nulla. Vivamus id orci at ligula lacinia egestas vitae ac massa. Donec a tempus tellus. Quisque fringilla venenatis risus, ut condimentum enim iaculis quis.

Alegerea fontului corespunzător ţine şi de specificul a ceea ce se doreşte realizat: o interfaţă grafică pentru un site Web, o copertă a unei cărţi contemporane sau care dezvoltă subiecte de istorie, material foto pentru un tutorial sau un afiş promoţional.

42 Grafică computerizată - 4

Figura 16: Fonturi speciale

Familiile de fonturi folosite de Adobe Photoshop sunt cele proprii sistemului de operare, din această cauză atunci când se doresc fonturi speciale (figura 16) este nevoie de cumpărarea lor (familii de fonturi comerciale) sau descărcarea lor de pe site-uri gratuite: http://www.1001freefonts.com/

4.6. Adobe Photoshop - spaţiu de lucru şi cutia de unelte

Programul Adobe Photoshop conţine un set de instrumente de lucru, fiecare având proprietăţile specifice şi fiecare contribuind într-o măsură sau alta la realizarea, editarea sau prelucrarea unor interfeţe grafice (imagini, text, forme geometrice) pentru a putea fi incluse sau utilizate într-un tutorial multimedia sau într-o aplicaţie Web.

Zona de lucru Photoshop pare confuză la prima vedere (mai ales cutia de unelte-instrumente), dar la o simplă parcurgere devine intuitivă.

Figura 17: Zona de lucru Photoshop

4.6 - Spaţiu de lucru şi cutia de unelte 43

Ea cunoaşte o serie de componente, cele importante fiind:

Bara de meniu - meniuri organizate pe sarcini. Bara de opţiuni - opţiuni pentru folosirea unei unelte. Cutia de unelte - unelte folositoare pentru crearea şi editarea imaginilor. Zona activă - afişează fişierul deschis şi zona pe care se lucrează efectiv. Paletele - ajută la monitorizarea şi editarea imaginilor. Locaţia lor în spaţiul

de lucru poate fi modificată.

Cutia de unelte se poate muta prin tragerea barei de titlu sau se poate ascunde/afişa prin accesarea Window > Tools. O parte din unelte nu pot fi văzute deoarece sunt „ascunse” pentru o mai bună organizare. Afişarea lor presupune apăsarea (mai mult timp) pe butoanele care au un triunghi mic în colţul dreapta-jos.

Uneltele Photoshop au fost alese astfel încât să simuleze cât mai bine instrumentele clasice de desen şi pictură, dar totodată să asigure acţiuni multiple şi suplimentare faţă de ceea ce poate obţine un artist fără ajutorul calculatorului. Sunt prezentate succint marea majoritatea a acestor unelte [11].

Descrierea uneltelor şi prezentarea anumitor tutoriale Photoshop din anexa 3 au avut ca şi sursă de inspiraţie Internetul, mai precis o serie de forumuri sau siteuri Web dedicate celor ce doresc să dezvolte conţinut şi grafică în Photoshop:

http://www.tutorialul.ro,

http://www.evoec.com/forum

http://www.linkmania.ro/forums

http://www.brusheezy.com

Unelte de selecţie

Selecţia defineşte o anumită zonă dintr-o imagine, precum şi conturul propriu-zis al zonei selectate. Pentru a prelucra porţiuni din imagini este necesară această izolare sau marcare a părţilor constituente pentru a nu fi afectat şi restul imaginii.

Unealta de „marcare” (Selection Tool) delimitează o zonă rectangulară (dreptunghi, pătrat), ovală (cerc, elipsă) sau de un singur rând.

44 Grafică computerizată - 4

Unealta de „mutare” (Move Tool) permite deplasarea selecţiilor, straturilor (layer), liniilor ghidante etc.

Unealta de „lasou” (Lasso Tool) permite realizarea unor selecţii cu mâna liberă, zone de forme neregulate prin urmărirea cursorului pe ecran sau trasând linii drepte între puncte specificate.

Unealta „bagheta magică” (Magic Wand) selectează zone colorate similar celei alese. Se bazează pe o facilitate a programului şi anume aceea de a selecta în mod automat o porţiune de imagine care conţine o singură culoare sau nuanţe apropiate ale aceleiaşi culori de bază. În general forma rezultată este extrem de neregulată.

Unelte de tăiat

Unealta „decupare” (Crop) taie imaginea la dimensiunile rezultatele în urma deplasării mouse-ului în imagine.

Unealta de „feliat” (Slice Tool) creează „felii” la dimensiunile specificate. Aceasta se foloseşte la salvarea imaginilor şi optimizarea lor ulterioară pentru aplicaţii Web.

Unealta de „selectat felii” (Slice Select Tool) selectează feliile create cu unealta de „feliat”.

4.6 - Spaţiu de lucru şi cutia de unelte 45

Unelte de retuşat

Pensula de „vindecare a petelor” (Spot Healing Brush) îndepărtează defectele sau obiectele nedorite.

Pensula de „vindecare” (Healing Brush) ajută la înlăturarea imperfecţiunilor din imagini.

Unealta de „petic” (Patch Tool) repară imperfecţiuni într-o zonă selectată din imagine folosind o mostră.

Unealta „înlăturare ochi roşii” (Red Eye Remover) îndepărtează efectul nedorit de roşire a ochilor.

Ştampila de „clonare” (Clone Stamp) pictează un duplicat al mostrei specificate.

Stampila de „clonare după tipar” (Pattern clone Stamp) pictează cu o parte din imagine ca tipar.

„Guma de şters” (Eraser) îndepărtează pixelii din imagine.

„Guma de şters fundal” (Background Eraser) reduce zone la transparenţă totală prin deplasare deasupra imaginii.

46 Grafică computerizată - 4

„Guma de şters magică” (Magic Eraser) şterge zone cu culoare solidă printr-un singur click.

Unealta Blur înceţoşează parte din imagine.

Unealta Sharpen ascuţeşte parte din imagine.

Unealta Smudge mută parte din imagine, cu un efect de „blur”.

Unealta Dodge luminează o parte din imagine.

Unealta de „ardere” (Burn Tool) înnegreşte parte din imagine.

Unealta Sponge schimbă saturaţia unei părţi specificate din imagine.

Unelte de pictat

Pensula (Brush Tool) este folosită la pictarea pe imagine. Există modele predefinite numite Photoshop Brushes. Permite trasarea unor linii de diferite grosimi şi intensităţi, cu margini bine definite sau confuze.

4.6 - Spaţiu de lucru şi cutia de unelte 47

Creionul (Pencil Tool) este utilizat la crearea unor linii subţiri, cu margini bine definite.

„Înlocuitor de culoare” (Color Replacement Tool) înlocuieşte culoarea selectată cu o culoare nouă (specificată de utilizator).

„Pensula artistică de istorie” (Art History Brush) pictează cu modele stilizate simulând pictura reală.

„Unealta de pictare în gradient” (Gradient Tool) este folosită la crearea unor combinaţii liniare între mai multe culori.

Unealta „găleată” (Paint Bucket) umple zone similare cu culoarea aleasă. Se utilizează atunci când se doreşte umplerea rapidă a unui anumite porţiuni cu o culoare, operaţie mai eficientă de exemplu în acest caz decât folosirea unei pensule.

Unelte de desenat şi scris

Uneltele de scris (Type Tools) permit introducerea textului pe imagine sau pe un fundal alb, colorat, negru şi transparent.

Uneltele de scris cu „mască” (Mask Type Tools) creează o selecţie în forma literelor scrise.

Uneltele de „desenat forme” (Shape Tool) desenează forma selectată pe un strat (layer). Formele pot fi geometrice (Rectangular, Polygon) sau pot fi alese (Custom) dintr-o anumită listă pusă la dispoziţie de program sau importată.

48 Grafică computerizată - 4

Unelte de notiţe, măsurare şi navigare

Uneltele de „notiţe” (Annotation Tool) permit introducerea de adnotări pe imagine.

Unealta Eyedropper este utilizată la selectarea culorii unui pixel dintr-o imagine.

Unealta de „măsurat” (Measure Tool - Ruler) este folositoare pentru măsurarea distanţelor, locaţiilor şi a unghiurilor.

„Mâna” (Hand Tool) mută imaginea înăuntrul ferestrei de lucru.

Unealta Zoom măreşte sau reduce zone din suprafaţa vizibilă a unei imagini.

4.7. Adobe Photoshop - Straturi, măşti şi ajustarea imaginilor

Organizarea fişierelor pe straturi oferă o mai mare flexibilitate în lucru, permiţând realizarea unor compoziţii din imagini, forme geometrice, efecte sau informaţii text, toate suprapuse într-o manieră plăcută şi eficientă. Organizarea pe straturi permite unui utilizator să suprapună peste imaginea de bază mai multe straturi editabile independent, asemănătoare unor coli cu transparenţe variabile [11]. Acţiunile pe un astfel de strat nu alterează imaginea de pe alte straturi, de exemplu desenând o linie pe un strat nou putem utiliza radiera la capacitatea maximă pentru a şterge linia, fără a ne pune problema deteriorării celorlalte zone din spaţiul de lucru.

Prin schimbarea poziţiei straturilor unul faţă de altul, prin ascunderea unora dintre ele sau vizualizarea doar a celor considerate utile într-un anumit moment, se pot obţine într-un mod flexibil combinaţii de imagini interesante. Opţiunile suplimentare legate de straturi permit gruparea lor în directoare, unirea mai multor straturi, aplicarea de efecte, ajustări şi corecţii ale parametrilor imaginii de pe un strat şi posibilitatea utilizării măştilor.

4.7 - Straturi, măşti şi ajustarea imaginilor 49

Fereastra cu straturi arată toate straturile existente, poate crea unele noi sau adăuga efecte. Se ascunde/afişează prin accesarea Window > Layers sau prin apăsarea butonului F7. Pentru a afişa straturile dintr-un grup se apasă pe triunghiul din stânga grupului. Efectele pe strat sunt efecte speciale introduse în Photoshop pentru a stiliza conţinutul stratului (butoane, text, imagini). Pentru a intra în meniul de efecte, se apasă click-dreapta pe stratul dorit şi se selectează Blending Options.

Gradul de transparenţă determină vizibilitatea parţială sau totală a întregii matrici de pixeli corespunzătoare unui anumit strat. În mod normal pixelii de pe stratul superior îi ascund pe cei de pe straturile inferioare, de aceea pentru a fi vizibili se lucrează uneori cu transparenţa/opacitatea straturilor.

Zonele transparente sau semitransparente pot fi asigurate şi prin utilizarea unor procedee, poate o idee mai complexe, numite măşti. Masca este o imagine de aceeaşi dimensiune cu imaginea originală conţinând 256 de nuanţe de gri dispuse între alb şi negru [11]. Nivelul de alb şi negru determină vizibilităţi extreme ale măştii, în timp ce nivelurile de gri determină gradul de transparenţă variabil în funcţie de intensitate. Aplicarea măştii nu şterge imaginea iniţială, ea poate fi refăcuta rapid doar prin înlăturarea simplă a efectului de mască aplicat.

Orice modificare a vizibilităţii unei imagini se face doar prin acţionare asupra măştii corespunzătoare, fără a afecta structural imaginea propriu-zisă. Prin analogie, orice modificare a nivelelor de gri ale măştii duce la modificări în gradul de vizibilitate al imaginii originale. Fiind la rândul ei o imagine, masca poate fi prelucrată utilizând instrumente puse la dispoziţie de programul respectiv. Singura diferenţă apare din faptul că nu vor fi disponibile decât nuanţele de gri din paleta curentă [11].

Programul Adobe Photoshop cunoaşte trei tipuri de măşti: măşti de straturi (Layer Masks). Se utilizează în corelaţie cu uneltele de pictare

(Brush Tool, Gradient) sau selecţie. Reveall All creează o mască umplută cu „alb” care arată stratul. Hide All creează o mască umplută cu negru care maschează, ascunde stratul. măşti de tip vector (Vector Masks). Sunt create cu Pen Tool sau Shape Tools. măşti de tăiere (Clipping Masks). Ajustarea imaginilor se poate face prin metode de corecţie a acestora sau prin

aplicarea multitudinii de filtre pe care le oferă programul: ajustarea tonurilor (modificarea histogramei), desaturarea imaginii, corecţia saturaţiei culorii, modificarea contrastului şi strălucirii, ajustarea balansului de alb, corecţie selectivă a culorilor, filtrare artistică, pixelare şi distorsiuni, filtre de blur, adăugare de zgomot, stilizări şi texturi.

Cap. 5: Captură de ecran şi animaţii

5.1. Adobe Captivate

Iniţial dezvoltat de Macromedia sub denumirea de RoboDemo şi preluat ulterior de către Adobe odată cu achiziţionarea companiei sus amintite, programul Captivate oferă posibilitatea dezvoltării de simulări pe calculator fără a avea cunoştinţe sau aptitudini avansate în domeniul multimedia sau mai ales al programării Web. Adobe Captivate permite capturarea şi înregistrarea activităţii ecranului şi sincronizarea materialelor audio şi video. Asigură dezvoltarea rapidă de materiale didactice pentru instruire complexă pe bază de scenariu, realizarea de prezentări multimedia online şi teste aleatorii cu răspunsuri variate.

Simulările Captivate sunt de fapt tutoriale multimedia sub formă de demonstraţie cu sau fără explicaţii pe canalul audio, tutoriale interactive, chestionare sau formulare de instruire a personalului.

Figura 18: Crearea de noi fişiere Adobe Captivate

Din pagina de întâmpinare a programului (pagina de start) se pot alege variantele:

Blank Project - deschiderea unui proiect gol, fără nici o înregistrare sau captură iniţială. Se pot adaugă ulterior înregistrări ale ecranului, componente audio şi video.

Image Slide Show - crearea unei galerii foto pornind de la o suită de imagini salvate local pe calculator. Fiecare imagine este încărcată pe un slide separat.

5.1 - Adobe Captivate 51

Template - realizarea unei simulări pornind de la un şablon de proiect deja existent. Este util în cazul în care multiplii autori lucrează la module distincte în cadrul aceluiaşi proiect şi trebuie respectate principii comune de grafică, aşezare şi poziţionare a obiectelor în scenă.

Aggregator - combinarea mai multor fişiere .swf. Materialele corelate pot fi salvate în acelaşi format din nou sau ca şi fişiere .exe, .pdf, respectiv .html. Cuprinsul simulării noi rezultate este format din numele fiecărui modul .swf integrat.

Software Simulation

Această din urmă variantă permite înregistrarea unei zone de o anumită dimensiune sau a întregului ecran (Screen Area), respectiv fereastra unei anume aplicaţii (Application). În cel de al doilea caz se poate restricţiona zona de înregistrare la:

fereastra aplicaţiei active (Application Window) - potriveşte zona de înregistrat la dimensiunile ferestrei aplicaţiei selectate. Întreaga fereastră a aplicaţiei va fi înregistrată. o anumita zonă (Application Region), se permite definirea doar a unei regiuni

în interiorul ferestrei aplicaţiei selectate, de exemplu, a unui cadru sau a unui panou. o mărime care se poate defini manual (Custom Size), se permite introducerea

exactă a înălţimii şi lăţimii zonei înregistrate.

Când se înregistrează un proiect nou, aplicaţiile Web sau softurile instalate pe calculatorul propriu sunt parcurse într-un mod analog celui uzual: prin mişcări de mouse, utilizând tastatura sau navigând prin meniuri. Pe măsura acţiunilor executate, Adobe Captivate salvează ecranul şi activităţile lui.

Înregistrarea unei activităţi a ecranului se poate face folosind setările implicite ale programului, dar o planificare şi eventual o personalizare poate fi întotdeauna de ajutor. O simulare finală este recomandat să conţină elemente ca: titlul înregistrării, autorii tutorialului, drepturi de Copyright, fereastră de întâmpinare/închidere, elemente interactive, cuprins şi la alegere imagini, animaţii, audio şi video [14].

O dată captura desăvârşită rezultă simularea propriu-zisă, iar programul oferă o serie de facilităţi/caracteristici pentru manipularea şi editarea ei:

adăugarea de informaţii text adiţionale, audio (voce peste înregistrări, fundal muzical, efecte sonore), video, animaţii Flash, animaţii text, imagini; butoane de navigare, căsuţe colorate pentru atenţionare, mărirea anumitor zone

de interes din imagine;

52 Captură de ecran şi animaţii - 5

modificarea proprietăţilor mouse-ului (viteza de deplasare, punctul de pornire-oprire, sunet la apăsare); transformarea textului în voce; redimensionarea proiectului şi setarea timpului de expunere. efecte între slide-uri, la începutul şi sfârşitul proiectului.

Instrumentele utilizate pentru editarea slide-urilor pot fi accesate prin intermediul casetelor de instrumente, prin meniuri şi ferestre de dialog.

Figura 19: Interfaţă Adobe Captivate

A - zona de meniu (File, Edit, View, Insert, Modify, Project, Quiz, Audio, Video, Window, Help).

B - Cutia de unelte (Text Caption, Rollover Caption, Highlight Box, Click Box, Button, Text Entry Box, Zoom Area, Text Animation, Line, Rectangle, Oval, Polygon, Fill Color&Stroke Color).

C - Bandă film (FilmStrip) care permite o pre-vizualizare la dimensiuni reduse a tuturor slide-urilor înregistrate.

D - Zona activă, zona în care dezvoltatorul de tutorial lucrează efectiv.

E - Bandă temporală (timeline).

F - proprietăţile unui obiect din scenă.

5.1 - Adobe Captivate 53

Pentru înţelegerea modalităţii de acţiune a celor mai uzuale instrumente din cutia de unelte sau a opţiunilor din meniu este necesară o scurtă trecere în revistă a lor [15].

Recording size - Adobe Captivate pune la dispoziţie valori presetate ale rezoluţiei la înregistrare, de la cele comune (640 x 480, 800 x 600, 1024 x 768) până la rezoluţii personalizate.

Recording mode - oferă posibilitatea unui dezvoltator să aleagă diverse scenarii de înregistrare:

Automatic înregistrează capturi de ecran (screen shots) automat şi le plasează în slide-uri diferite. Click-urile mouse-ului şi apăsarea butoanelor de la tastatură declanşează aceste capturi de ecran. Din opţiunile pentru înregistrarea automată se recomandă panning, dacă se doreşte ca zona înregistrată să urmărească mişcarea mouse-ului pe ecran. Pentru comentarii audio se selectează microfonul corespunzător, respectiv pentru înregistrarea propriu-zisă unul dintre cele patru moduri de înregistrare automată: demonstration, assessment, training, custom. Dacă se optează pentru mai multe moduri de înregistrare simultan se vor crea fişiere separate pentru fiecare. Full Motion creează o înregistrare ne-editabilă a tuturor activităţilor de pe

ecran. Manual înregistrează ecranul doar atunci când se apasă Print Screen.

Text Captions - sunt utilizate pentru a indica anumite zone din slide, a explica anumite concepte sau a aduce informaţii adiţionale. Ele pot fi generate automat la înregistrare după un anumit şablon (Select the File meniu) sau introduse manual la editarea slide-urilor. În timpul rulării materialului acţiunile din slide sunt afişate concomitent cu aceste indicaţii.

Buttons - butoane rectangulare sau forme aleatorii importate din alte programe. Se poziţionează în zona dorită pe slide definindu-se acţiuni de genul: trecerea la un slide anterior sau următor, salt la o anumită pagină externă etc.

Click Boxes - reprezintă un obiect ce se creează în aria de aplicare a unui acţiuni a mouse-ului (ex: single click left-right, double click). Se creează automat dacă se alege crearea unui tip de tutorial interactiv (training) sau se pot insera manual în etapa de editare propriu-zisă a unui material înregistrat. Atât butoanele cât şi aceste obiecte obligă utilizatorul să interacţioneze cu simularea, de exemplu să acţioneze butonul mouse-ului pentru a trece mai departe la un proiect nou, o pagină Web sau un slide oarecare. Sunt obiecte utile în cazul navigării prin meniuri.

54 Captură de ecran şi animaţii - 5

Text Entry Box - sunt căsuţe de mesaj, obiecte care determină utilizatorul să interacţioneze cu materialul prezentat. El este cel care introduce informaţie text şi trece mai departe în tutorial.

Highlight boxes - reprezintă forme rectangulare colorate şi cu o transparenţă variabilă care pot fi poziţionate în slide-uri pentru a atrage atenţia.

Widgets - reprezintă obiecte SWF configurabile în Flash care oferă un conţinut bogat şi o interactivitate ridicată. Dezvoltatorii structurează un obiect de acest gen pentru a fi cât mai facil în utilizare şi cu parametrii care permit personalizarea conţinutului de către utilizator (ex: personalizarea culorilor şi dimensiunii segmentelor dintr-o diagramă). Aceste obiecte pot fi statice (fără interacţiune, afişează doar informaţie), interactive (afişarea lor diferă funcţie de acţiunile utilizatorului - user input) şi sub formă de întrebări - question (ex: inserarea unui slide sub formă de anagramă şi aranjarea literelor prin deplasarea pe ecran cu ajutorul mouse-ului în căsuţele afişate). De exemplu se poate utiliza un widget (static) pentru generarea unui certificat de competenţe în urma unei evaluări din partea unui tutore. Certificatul conţine următoarele informaţii: numele şi prenumele persoanei care a parcurs chestionarul (cursul), numele cursului/tematicii, punctajul obţinut şi data evaluării. Certificatul se inserează la sfârşitul chestionarului, informaţia afişată este culeasă de pe slide-ul cu rezultate (vezi secţiunea Quizz), în acest mod se generează doar pentru acei utilizatori care au obţinut un punctaj de trecere. Panoul Windows > Widget afişează obiectele SWF existente în librăria curentă a programului Captivate la o anumită adresă pe calculatorul local. În acest panou sunt permise operaţii de sortare şi de adăugare de noi widget-uri, de modificare a locaţiei iniţiale sau de descărcare (download) a noi obiecte de acest gen de la Adobe Captivate Exchange. Un widget poate conţine legături către alte widget-uri, operaţiune complexă şi care necesită cunoştinţe de programare XML (anexa 2: crearea unui fişier cu extensia .wdgt). Pe lângă caracteristicile specifice fiecărui widget în parte, ca şi obiect într-o scenă el se supune şi proprietăţilor generale Windows > Properties din Captivate, câteva dintre acestea făcând referire la: nume, vizibilitate, transparenţă, timp de expunere, tranziţii, sunet, poziţionare şi dimensiune.

Zoom Areas - atrage atenţia asupra unor zone importante din înregistrare. Constă în Zoom source (zona de ecran care se doreşte mărită) şi Zoom destination area (zona în care este afişată la o altă scară porţiunea iniţială selectată).

Rollover Caption - constă într-o zonă dreptunghiulară colorată şi cu o transparență variabilă care în momentul poziţionării mouse-ului deasupra ei afişează informaţii text suplimentare. În acelaşi context se înscrie şi Rollover Image (informaţiile de tip text fiind înlocuite cu imagini) sau Rollover Slidelet. Acesta din urmă la acţiunea de

5.1 - Adobe Captivate 55

rollover permite afişarea unei întregi suite de unelte Captivate standard, imagini, video sau widget-uri.

Slide video, audio & image - sunt opţiunile care permit inserarea de materiale multimedia. Trebuie avute în vedere formatele de fişiere cu care se poate lucra: .gif, .bmp, .jpg, .ico, .png pe partea de imagini, .flv, .f4v., mp4, .mov, .3gp pentru video, .swf, .gif pentru animaţii şi .mp3 sau .wav pentru audio. Facilităţile de editare a materialelor video şi a sunetului oferite de Adobe Captivate sunt puţine comparativ cu programe de specialitate (Adobe Premiere, Sound Forge, Adobe Audition), totuşi utile în cazul în care se doresc doar editări simple, nu aplicarea de filtre şi acţiuni complexe.

Master Slide - defineşte o suită de elemente comune care oferă unitate în design-ul proiectului: fundal, siglă, header&footer etc. Orice nou slide adăugat va fi în strânsă legătură şi cu aceleaşi obiecte ca şi slide-ul master.

Timeline - este o reprezentare vizuală a obiectelor în timp, asigură organizarea sau corelarea lor şi permite modificarea timpului de expunere a acestora. Obiectele dintr-un slide curent pot fi ascunse (invizibile în pagină) sau pot fi blocate pentru a împiedica acţionarea lor nejustificată sau accidentală. Această caracteristică devine utilă în cazul în care se regăsesc un număr mare de obiecte într-un spaţiu de lucru şi se doreşte manipularea lor separată. De menţionat că în momentul utilizării Rollover Slidelet-ului timeline-ul general pentru slide se modifică în cel specific slidelet-ului.

Duplicate/Delete/Hide/Lock/Copy Slide - acţiuni de duplicare, ştergere, ascundere, blocare şi copiere a unui slide. Se utilizează click dreapta şi se selectează una dintre opţiuni.

Notes to speech - reprezintă o opţiune interesantă care permite convertirea textului în voce prin utilizarea unui plug-in adiţional programului: text to speech software de la NeoSpeech™ . Rezultatele sunt pozitive pentru texte în limba engleză.

Variables&Advanced Actions - definesc acţiuni complexe comparativ cu alte obiecte prezentate până în acest moment. Pentru integrarea lor este necesară cunoaşterea unor noţiuni de programare de bază sau mai avansate după caz. Se definesc două tipuri de variabile (variables):

de sistem (system variables), care culeg date oferite de calculator şi le manipulează prin intermediul script-urilor: MovieControl, MovieInformation, MovieMetaData, SystemInformation, Quizzing.

definite de utilizator (user - defined variables) care le asociază un nume unic şi o valoare corespunzătoare.

56 Captură de ecran şi animaţii - 5

Library - în librărie se stochează toate elementele importate din exteriorul programului şi utilizate în cadrul unui proiect curent. Afişarea librăriei se face cu Window > Library şi orice element din librărie poate fi „tras” (drag) în scenă pentru editarea lui.

Materialului creat i se adaugă, dacă se consideră necesar un cuprins editabil slide cu slide (Table of Contens) şi bară de control (Playback Controls) incluse în fereastra intitulată Skin Editor. Se pot personaliza culorile şi forma butoanelor de play/pause, forward, rewind, close şi mute. Se obţine astfel un nou tip de skin editor, se recomandă salvarea lui pentru utilizări viitoare. Adăugarea barei de control are ca rezultat şi mărirea dimensiunii proiectului cu un anumit număr de pixeli, pe verticală în partea inferioară de exemplu.

Figura 20: Generare cuprins şi bară de control

O opţiune importantă pusă la dispoziţia dezvoltatorilor este segmentul de Quizz, întrebări şi chestionare care ajută la evaluarea şi autoevaluarea în procesul de învăţământ la distanţă. Se pot oferi scenarii diferite pentru aceeaşi întrebare. Dacă se răspunde corect se poate defini o acţiune de genul trecere la un următor slide, în cazul unui răspuns incorect se poate redirecţiona utilizatorul către un fişier extern sau URL cu informaţii adiţionale. Suplimentar un tutore poate verifica calitatea răspunsurilor prin raportările oferite în urmă completării chestionarului (numărul de încercări ale cursantului, răspunsurile corecte şi incorecte) [15].

Variantele de interogare includ răspunsuri de tip text limitat sau nu la un număr de cuvinte, opţiuni multiple, alegerea unei singure opţiuni dintr-o listă ş.a.m.d. Adăugarea unui slide de tip Quizz se face cu comanda Quizz > Question Slide şi se alege una dintre variantele de întrebări puse la dispoziţie de program:

5.1 - Adobe Captivate 57

Multiple choice: utilizatorul selectează unul sau mai multe răspunsuri corecte dintr-o listă pusă la dispoziţie de dezvoltator/tutor.

True/false: se poate alege o singură variantă (fals-adevărat, da sau nu).

Fill-in-the-blank: se completează o porţiune din interiorul unei propoziţii sau a unei fraze.

Short answer: răspunsuri scurte sub forma unui cuvânt sau a unei propoziţii.

Matching: corelarea unor „intrări” în două liste diferite.

Hot spot: utilizatorul deplasează mouse-ul într-o anumită zonă din slide

Sequence: aranjarea elementelor afişate într-o anumită ordine/secvenţă.

Rating scale: indicarea unui anumit nivel (calificativ) într-o anume privinţă.

Proiectul editat, optimizat din punct de vedere al expunerii obiectelor în scenă se poate:

publica în formatele swf, fla, breeze, exe; trimite prin e-mail; exporta sub forma unor documente Word cu desfăşurarea înregistrărilor; publica pe un site Web prin FTP; crea o arhivă .zip, opţiune utilă în cazul în care se doreşte salvarea unui singur

fişier pentru încărcarea pe o platformă educaţională. exporta pentru podcast audio (wav, mp3).

Adobe Captivate interacţionează cu alte programe de generare de conţinut multimedia:

Flash prin salvarea simulării în format .fla: File > Export > To Flash. Odată proiectul exportat sunt vizibile în Adobe Flash: preloader-ul (acea animaţie care rulează până în momentul în care materialul multimedia propriu-zis este încărcat pe calculator), acţiunile globale definite în simulare şi transparentele (slide-urile) înregistrate.

Adobe Photoshop prin importarea elementelor grafice din acest editor de imagini: File > Import > Photoshop File. Se pot încapsula straturi separate sau imaginea per ansamblu. Fiecare strat este tratat ca o imagine individuală şi salvat în librăria Captivate ca şi obiect separat cu extensia .png.

Microsoft PowerPoint prin opţiunea de import a slide-urilor din PowerPoint: Create New > From Microsoft PowerPoint sau File > Import > PowerPoint Slides.

58 Captură de ecran şi animaţii - 5

Slide-urile pot fi editate în PowerPoint şi sincronizate ulterior cu proiectul Captivate. Inserarea lor se poate face individual, slide cu slide sau bineînţeles se poate importa întreaga prezentare. Includerea în Captivate poate fi de forma embed (încapsulare) sau linking (legătură) în funcţie de dorinţa dezvoltatorului de a păstra sau nu o conexiune cu sursa iniţiala. Se atrage atenţia însă asupra mărimii proiectului Captivate în varianta embed, care poate creşte substanţial în cazul încapsulării unor prezentări PowerPoint de largă întindere, respectiv a necesităţii existenţei programului Microsoft PowerPoint în cazul unor editări ulterioare pentru varianta linking [15].

Adobe Presenter prin publicarea fişierului în format .swf: File > Publish > Flash(SWF). Adobe Presenter este o unealtă comercială ce permite generarea de conţinut educaţional şi multimedia de înaltă calitate. Are la bază structura Microsoft PowerPoint. Rezultatul final se salvează în format .swf ce poate fi integrat în pagini Web, iar conţinutul propriu-zis este compatibil SCORM 1.2 şi SCORM 2004. Ca şi caracteristici se apropie de Adobe Captivate, de aceea de multe ori în funcţie de complexitatea materialului ce se doreşte realizat se recomandă utilizarea fie a unuia, fie a altuia, mai rar combinarea celor două.

Ca orice program fie el comercial sau gratuit, Adobe Captivate cunoaşte plusuri şi minusuri. Dacă avantajele pot rămâne la latitudinea fiecăruia dintre utilizatorii programului (ex: interactivitate ce menţine interesul viu cursantului şi întăreşte feedback-ul automat pentru acesta), se atrage atenţia asupra costurilor (ridicate pentru anumite bugete personale), asupra dificultăţii în realizarea unor animaţii complexe sau a unor treceri spectaculoase de la un slide la altul. De asemenea utilizarea formatului .swf atrage cu sine necesitatea instalării unui plug-in aferent şi maşini de calcul cu performanţe relativ ridicate, mai ales dacă conţinutul multimedia rezultat nu este optimizat.

5.2. GIF animat

Animaţia este o entitate vizuală dinamică, forma şi structura ei evoluând în timp pe scara complexităţii [16]. Animaţiile sunt obiecte bine cunoscute, folosite în scopuri diverse şi pot fi regăsite în multe medii informatice: tutoriale multimedia, pagini Web şi publicitate online sau offline.

Ele sunt utilizate pentru a transmite mesaje într-o zonă de afişare limitată a unui ecran de calculator. Unii dezvoltatori de aplicaţii multimedia le consideră mai eficiente decât informaţia text, deşi există atenţionări cu privire la eficacitatea animaţiilor [16].

5.2 - GIF animat 59

Conform literaturii de specialitate, există o serie de linii directoare care ar trebuie luate în calcul pentru realizarea unei animaţii potrivite într-o aplicaţie multimedia [17]. În cele ce urmează sunt enunţate câteva dintre acestea:

animaţia se rezumă la caracteristicile esenţiale, în aşa fel încât utilizatorii să se concentreze asupra aspectelor relevante ale ei; sunt de evitat excesele de informaţii. este necesară acordarea unui timp corespunzător de expunere; ochiul uman are

nevoie de timp pentru a procesa schimbarea, sunt de evitat expunerile rapide; culoarea se utilizează în special pentru a diferenţia obiecte sau aspecte ale

obiectelor care sunt relevante. animaţia se utilizează în combinaţie cu alte elemente multimedia (text, sunet,

etc.), pentru a evita ambiguitatea interpretării din partea utilizatorilor. se evită mai mult de o animaţie într-o pagină. se folosesc animaţiile pentru a comunica idei într-un mod inteligent [16]. se evită animaţiile în paginile cu mult text care necesită o concentrare sporită la

citire.

Animaţiile întâlnite în tutoriale se împart în două categorii: GIF animat şi Flash. O scurtă descriere a acestora este prezentată în paragrafele următoare.

GIF-ul animat este considerat unul dintre primele formate utilizate în crearea de animaţii. Materialul animat trebuie să fie simplu pentru a menţine dimensiunea fişierului mică. Un număr mai mare de 20 de cadre/sec poate duce la creare unui fişier de dimensiuni ridicate, crescând astfel considerabil timpul de încărcare/descărcare [9].

Opţiuni/parametri în crearea unui GIF animat Indiferent de software-ul ales pentru crearea unui GIF animat, procesul este

aproximativ acelaşi şi implică alegerea unor funcţii şi opţiuni. Denumirea lor este păstrată în limba engleză datorită faptului că uneltele de dezvoltare de animaţii sunt construite în aceeaşi limbă.

Frame Delay Această setare stabileşte timpul de trecere de la un cadru la altul. Întârzierile

dintre cadre sunt măsurate în 1/100 secunde. În crearea animaţiilor este posibilă setarea unor timpi de întârziere diferiţi între cadre diferite, pentru a crea pauze sau alte efecte de sincronizare.

Transparency Într-o animaţie se setează transparenţa pentru fiecare cadru în diverse moduri: - No transparency - fără transparenţă. - White - toţi pixeli albi din imagine vor deveni transparenţi.

60 Captură de ecran şi animaţii - 5

- Based on first pixel - „primul pixel”, cel din stânga sus de coordonate (0,0) va fi transparent.

Disposal Methods Oferă instrucţiuni în privinţa a ceea ce se poate face cu un cadru anterior în

momentul în care un nou cadru este afişat.

Color Palette Alegerea paletei de culori influenţează apariţia imaginilor în diferite sisteme şi

pe diferite monitoare. Este recomandat să se utilizeze aceeaşi paletă de culori pentru întreaga animaţie (System Palette, Grayscale, Adaptive Palette, Web Palette)

Loop Se specifică dacă o animaţie se repetă: deloc, de un anumit număr de ori sau

pentru întreaga durată în care un utilizator parcurge tutorialul.

Recomandările din tabelul următor constituie un punct de plecare pentru crearea unei animaţii [9]:

Tabel 6: Parametrii pentru realizarea unui GIF animat

Color Palette Adaptive palette

Interlacing Off

Dithering: On - pentru fotografii, Off pentru desene cu culori puţine

Image Size Dimensiune minimă

Background Color Negru

Looping: Nici unul sau nelimitat

Transparency: Off

Disposal Method: Do Not Dispose

5.3 - Flash 61

Figura 21: Unelte pentru crearea de GIF-uri animate

Modificarea parametrilor şi salvarea materialului animat se face cu ajutorul unor medii de editare specifice, care de cele mai multe ori se instalează pe calculatorul propriu. În această categorie intră atât aplicaţii comerciale, cât şi aplicaţii gratuite: Adobe Image Ready, Easy GifAnimator, Ulead Gif Animator, AnimationShop, GifMation (figura 21).

5.3. Flash

Iniţial dezvoltată de Macromedia, aplicaţia Flash a fost preluată de către Adobe© odată cu achiziţionarea companiei sus amintite. Realizarea de animaţii Flash presupune cunoaşterea în principal a mediului de dezvoltare proprietar Adobe, în prezent la versiunea Adobe Flash Professional CS 5.5. Instalarea programului, studierea pas cu pas a uneltelor propuse şi eventual a unui limbaj de scripting propriu

62 Captură de ecran şi animaţii - 5

pentru acţiuni avansate, duce la posibilitatea obţinerii unor animaţii de efect simple sau complexe, precum şi la realizarea unei aplicaţii multimedia (site-uri Web, tutoriale) totalmente în Flash.

Figura 22: Interfaţă Adobe Flash

Animaţiile în Flash se bazează pe utilizarea unor elemente grafice vectoriale (dimensiuni scalabile) şi prezintă o serie de caracteristici care pot fi privite ca avantaje sau dezavantaje, iată câteva dintre acestea:

Independenţa de platformă (browser/sistem de operare) Imaginile vectoriale necesită o aplicaţie care să ruleze imaginea (ex. pentru

formatul SVG există Adobe SVG Player, iar pentru SWF avem playerul de Flash). Independenţa de platformă apare deoarece aceste programe au fost construite pentru o gamă largă de hardware şi sisteme de operare. Dacă vom vizualiza obiectul Flash în Windows se va folosi automat playerul de flash versiunea Windows. Dacă utilizăm un telefon mobil (SmartPhone), se va folosi playerul disponibil pentru telefoane (ex. Flash Player Lite 1.0), ş.a.m.d (evident toate playerele vor afişa aceeaşi imagine finală).

Animaţii uşor de realizat Se pot sincroniza (în funcţie de timp) diverse obiecte, poziţii sau forme ale

acestora. Flash-ul nu numai că realizează această sincronizare, dar permite şi interpolarea poziţiei (sau formei) unui obiect pentru a uşura munca utilizatorului.

5.3 - Flash 63

Se pot adăuga interfeţei elemente multimedia. În interiorul obiectelor Flash se pot importa şi manipula elemente audio şi video

(MP3, AVI).

Realizarea de aplicaţii complexe prin îmbinarea elementelor grafice cu acţiuni de scripting.

Ataşarea codurilor ActionScript obiectelor se realizează prin selectarea obiectului şi introducerea codului asociat obiectului într-o fereastră specială.

Exemplu de script, extras din http://tutorials.flashmymind.com/2009/04/infinite-gallery-menu/

//Import TweenMax import gs.*; //Set the initial state for this movie clip TweenMax.to(this, 0.5, {alpha: 0.4}); //Add mouse over & out event listeners this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); //This function is called when mouse is over this movie clip function mouseOverHandler(e:Event):void { //Tween the alpha TweenMax.to(this, 0.5, {alpha: 1}); } //This function is called when mouse is out of this movie clip function mouseOutHandler(e:Event):void { //Tween the alpha TweenMax.to(this, 0.5, {alpha: 0.4});

Cap 6: Pregătirea tutorialelor multimedia pentru publicarea lor online

6.1. Editarea şi compresia elementelor audio-video

Având în vedere că un tutorial multimedia este bazat pe sunet şi înregistrări video este necesară înţelegerea unei serii de parametri ce intervin în componenţa propriu-zisă a acestor elemente digitale. În paragrafele următoare sunt prezentaţi succint cei mai importanţi dintre ei.

Rata de eşantionare reprezintă numărul de eşantioane (mostre) luate din semnalul continuu (audio sau video) pentru a-l discretiza pe acesta. Cu cât numărul de eşantioane este mai mare cu atât acurateţea semnalului este mai bună. Rata de eşantionare se exprimă de obicei în kiloHertz (kHz) şi cunoaşte valori de genul: 8 KHz, 11.025 KHz, 11.127 KHz, 22.05 KHz, 44.1 KHz.

Biţi/eşantion specifică numărul de biţi de informaţie care sunt utilizaţi pentru reprezentarea unui eşantion. Rata de bit, pe de altă parte, face referire la numărul de biţi stocaţi într-o unitate de timp în momentul înregistrării (se exprimă de obicei în kbps - kilobiţi/secundă).

Numărul de canale audio diferă ca şi valoare, se discută de sunetul mono (1 canal) sau stereo (2 canale). Prezentul aduce cu el însă şi alte valori: 4 canale (quadraphonic) şi atât de doritul sunet surround cu 6-8 canale.

Rezoluţia video (video frame size) - se referă la dimensiunea în pixeli a clipului video care se transmite. O rezoluţie ridicată presupune şi un fişier de dimensiuni mari, ceea ce în cazul unui tutorial publicat pe Web poate fi un dezavantaj. Despre rezoluţie se vorbeşte şi în cazul alegerii şi editării imaginilor dintr-un tutorial. Dimensiunile pe orizontală şi verticală a acestuia trebuie la rândul lor raportate la valorile unui ecran de calculator. Pot fi aceste valori 1024 x 768, 1280 x 960 sau 1280 x 1024 (raport de aspect 16:9). Nu este nevoie de o rezoluţie mai ridicată, cu excepţia cazului în care se specifică în clar utilizarea unor monitoare cu diagonală mare (ex: 21 inch). Se recomandă ca atât tutorialul, cât şi imaginile incluse în el să fie mai mici, cel mult egale cu rezoluţiile monitoarelor. Se prevăd multiple scenarii de afişare în acest sens. Monitoarele pot afişa imaginile la o rezoluţie de 72 pixeli pe inch (ppi), 96 sau 120 ppi, în funcţie de dimensiunea ecranului. O grafică care are dimensiunea de 150 x 150 pixeli este de aproximativ de 1.25 x 1.25 pe un monitor cu rezoluţia de 120 ppi, însă puţin mai mult de 2 x 2 inch pe un monitor cu rezoluţia de 72 ppi. A se cunoaşte că 1 inch = 2.54 centimetri. În acest caz se recomandă setarea standard de 72 ppi [7].

6.1 - Editarea şi compresia elementelor audio video 65

Numărul de cadre pe secundă este important deoarece cu cât sunt mai multe cadre pe secundă, cu atât este mai bună reprezentarea. Pentru ca o transmisie (video) să pară continuă, se foloseşte un minim de 15 cadre pe secundă.

Raportul de aspect pentru o imagine presupune raportul dintre lungimea şi înălţimea ecranului (l/h) având valori de 4/3 în materialele video clasice sau 16/9 atunci când discutăm de înaltă definiţie.

Compresia permite condensarea fişierului audio-video, alegerea unui anumit format de fişier, cu anumite pierderi de calitate în funcţie de parametrii folosiţi. Metodele de compresie se bazează pe limitările psiho-acustice şi vizuale ale omului şi permit obţinerea de materiale la o calitate şi o mărime acceptabile pentru Web.

Modificarea parametrilor şi salvarea materialului într-un anumit format se face cu ajutorul unor medii de editare specifice, aplicaţii care de cele mai multe ori se instalează pe calculatorul propriu. Acestea sunt softuri comerciale sau gratuite, diferind în mod evident facilităţile oferite, categoriile de formate ce sunt puse la dispoziţie, intervalul de valori pentru parametri tehnici mai sus prezentaţi: Adobe Premiere, Adobe Audition, Sony Vegas, Final Cut Studio, DVD VideoSoft Free Studio, Canopus Procoder, Wondershare Video Converter, AoA Extractor, Xilixoft Video Converter, Quick Time Pro, Camtasia Studio, Adobe Captivate, Pinnacle Studio HD, Roxio Video Lab, Cyberlink Power Director, AppleiMovie.

Figura 23: Unelte de editare audio-video

66 Pregătirea tutorialelor multimedia pentru publicarea lor online - 6

Este adevărat că tutorialul o dată realizat poate fi salvat direct din programul sursă într-un format optim pentru publicare, dar sunt şi cazuri în care se recurge la editări complexe ceea ce justifică utilizarea unor softuri de genul celor din figura 23.

Pentru a se sublinia diversitatea unui material multimedia din punct de vedere tehnic, în tabelul următor sunt prezentate caracteristicile unui videoclip postat pe youtube.com (cel mai popular site de partajare audio-video), pe trilulilu.ro (site autohton) şi pe vimeo.com (printre primele site-uri gândite pentru conţinut de înaltă definiţie).

Conţinutul iniţial a fost codat pentru partea de video MPEG2, la o rezoluţie de 1280 x 720 (720p), numărul de cadre/secundă egal cu 25, raport de aspect 16:9 şi audio codat AC3, canal stereo, rata de eşantionare 48kHz.

Prin descărcarea conţinutului, rularea lui cu un media player (VLC Media Player) şi studierea tipului de compresie cu un soft dedicat (Canopus Procoder), s-au urmărit elemente ca [4]:

- care este dimensiunea şi durata de expunere maximă? - formate pentru încărcare suportate; - rezoluţia maximă suportată; - informaţii specifice pentru compresie: formatul în care se converteşte, codarea video şi audio.

Figura 24: Parametrii unui fişier multimedia - VLC şi Procoder

6.2 - Integrarea tutorialului în pagini Web 67

Tabelul 7: Caracteristici tehnice ale unui videoclip în pagini Web

Youtube Trilulilu Vimeo

Permite crearea de cont personal? Da Da Da

Permite postarea de comentarii proprii? Da Da Da

Dimensiunea maximă a materialului video

2GBytes

150 MBytes video/60 MBytes audio/5MBytes imagini

500 MBytes/săptămână

Durată de expunere maximă a fişierului

10 minute Nu are Nu are

Formate pentru încărcare suportate

WebM, MPEG2,MPEG4, 3GP, MOV, AVI, WMV, FLV

AVI, FLV, MPEG, MPG, MP4, MOV, M4V, 3GP, 3GPP, WMV, MP3, WAV, WMA, AAC, M4A

3GP, 3GPP, ASF, ASX, AVI, DIVX, MKV, MOV, MP4, MPE, MPEG, MPG, OGG, WMV

Rezoluţia maximă suportată

1280x720 pixeli 1280x720 pixeli 1280x720 pixeli

Converteşte fişierul în

Format: FLV, MP4 Format: FLV Format: MP4

Audio: MP3/AAC,44.1 kHz

Audio: MP3, 44.1 kHz Audio: AAC, 44.1 kHz

Video:Flash video/H.264 (AVC)

Video: VP6F Video: H.264 (AVC)

6.2. Integrarea tutorialului în pagini Web

Un pas important în publicarea tutorialelor în aplicaţii Web îl reprezintă alegerea modalităţii de integrare propriu-zise. Avem de a face cu trei situaţii [18].

Legătura (link) către un conţinut multimedia, o modalitate simplă, dar eficientă, indică un fişier audio sau video stocat împreună cu toate paginile HTML proprii şi alte fişiere.

<a href="Sunet.mp3">Sunet</a>?

Atunci când se accesează o astfel de legătură utilizatorul alege între salvarea fişierului şi rularea lui ulterioară sau deschiderea direct în browser cu ajutorul aşa numitelor plug-in-uri Windows Media Player, Apple QuickTime Player etc.

Încapsulare (object, applet, embed) este considerată o „tehnologie” mai avansată deoarece presupune integrarea materialului direct în pagina HTML.

68 Pregătirea tutorialelor multimedia pentru publicarea lor online - 6

Browsere-le vor fi nevoite să recurgă la plug-in-uri (programe ajutătoare) pentru rularea conţinutului, ceea ce poate fi un dezavantaj deoarece vizitatorii pot fi diverşi şi diverse pot fi şi plug-in-urile utilizate de aceştia pentru rulare [18]. Eliminarea acestui inconvenient este posibilă prin utilizarea tehnologiei HTML5. Se va vedea în viitor dacă facilităţile acesteia vor avea un impact benefic asupra „internauţilor”. Plug-in-urile pot fi lansate folosind elementele (tag-urile) <object>, <embed> şi <applet>.

Găzduire (hosted) presupune ca materialul audio-video propriu să fie găzduit de un server dedicat unei alte aplicaţii Web (youtube.com, vimeo.com, trilulilu.ro); conţinutul media va fi afişat în pagina Web proprie sau se va face o legătură către locaţia externă.

Avantajul unei astfel de soluţii îl reprezintă faptul că aceste siteuri pot găzdui şi rula materiale media de înaltă calitate şi o bună rezoluţie, pentru cunoscătorii în domeniu se amintesc 720p şi 1080p. Prin legătură către ele un simplu utilizator poate afişa/rula conţinut video de o bună calitate: http://vimeo.com/13301141

Câteva recomandări la modul general (incluzând aici tutoriale, filme, muzică etc.) sunt grupate în figura sub titulatura de „scenarii Web”.

Figura 25: Scenarii Web

6.2 - Integrarea tutorialului în pagini Web 69

Exemplele de includere a fişierelor multimedia în pagini Web continuă prin prezentarea anumitor tag-uri specifice incluse în linii de cod corespunzătoare [18]:

Folosirea elementului object

<object height="inaltime" width="latime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="sample.mov"> <param name="autoplay" value="true"> <param name="controller" value="false"> </object>

Atributele lăţime şi înălţime (width şi height) ar trebui să corespundă cu dimensiunile filmului în pixeli.

Atributul classid identifică în mod unic player-ul necesar şi se setează la valoarea din exemplu. Codul unic corespunde unui program ActiveX care trebuie instalat pe calculator pentru ca filmul să poată fi rulat. Browser-ul Internet Explorer foloseşte atributul codebase pentru a specifica locaţia de descărcare a softului. Adresa din exemplu va conţine întotdeauna ultima versiune a player-ului QuickTime. Parametrul controller are valoarea false dacă se doreşte ca bara de control să nu apară.

Folosirea elementului embed Elementul embed este folosit pentru browser-ele care nu oferă suport

elementului object. Un browser care „înţelege” elementul object va ignora elementul embed. Atributul pluginpage defineşte calea de unde poate fi descărcat player-ul. W3C (World Wide Web Consortium) recomandă folosirea elementului object în locul elementului embed.

<embed src="sunete/melodie.mp3" width="160" height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">

</embed>

Folosirea elementelor <object> şi <embed> împreună

<object width="160" height="144" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

70 Pregătirea tutorialelor multimedia pentru publicarea lor online - 6

codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="sample.mov"> <param name="autoplay" value="true"> <param name="controller" value="false"> <embed src="sample.mov" width="160" height="144" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed>

</object>

Inserarea unui clip utilizând site-ul de partajare audio-video youtube.com [19] Rulând un material video în site-ul sus amintit se poate observa că în partea

dreaptă a videoclipului există două tipuri de informaţii, ambele se pot utiliza pentru integrare într-o pagină Web proprie.

URL - adresa Web a videoclipului utilizabilă pentru a crea o legătură din cadrul paginii. Această adresă are o formă de genul: http://www.youtube.com/watch?v=DVfxe4pqvo8.

Codul pentru integrarea propriu-zisă a videoclipului în pagina HTML:

<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/DVfxe4pqvo8& hl=en_US&fs=1&"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="http://www.youtube.com/v/DVfxe4pqvo8&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed></object>

Simpla copiere prin una dintre cele două căi a videoclipului atrage cu sine un posibil dezavantaj: dacă materialul este şters din aplicaţia youtube.com atunci în cadrul

6.2 - Integrarea tutorialului în pagini Web 71

paginii Web proprii va deveni nefuncţional. Pentru înlăturarea acestui inconvenient se recomandă descărcarea clipului pe calculatorul propriu, utilizând de exemplu:

soft-ul Youtube Downloader http://download.cnet.com/YouTube-Downloader/ în cazul în care se utilizează Mozilla Firefox add-on-ul DownloadHelper

https://addons.mozilla.org/en-US/firefox/addon/video-downloadhelper/

Se recomandă ca fişierul video să fie salvat în acelaşi director cu celelalte fişiere ale aplicaţiei multimedia proprii, într-un subdirector denumit video. Drept urmare, codul de mai sus cunoaşte modificări rezultând:

<object width="425" height="344"> <param name="movie" value="nume_folder/nume_fisier.extensie"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"></param> <embed src="nume_folder/nume_fisier.extensie" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object>

Aplicaţiile Web, codul corespunzător lor şi modalitatea de inserare a materialelor multimedia sunt într-o schimbare perpetuă. Motive tehnice sau politici ca şi ale companiei Apple care a refuzat constant rularea de conţinut Flash pe dispozitive cunoscute cum sunt iPhone-ul şi iPadul, au determinat apariţia HTML5. În literatura de specialitate este văzută o „tehnologie” a viitorului, permiţând introducerea conţinutului audio şi video în pagini Web într-un mod facil şi eficient.

Utilizarea tag-urilor <audio>, <video> Pentru dezvoltatorii Web, elementele de genul <embed> şi povestea plug-in-

urilor pentru browser-ele Web sunt înlocuite cu simpla utilizare a tag-urilor <audio> şi <video>:

<video src="videotest.mpg" controls> </video> <audio src="/sunet.ogg" autoplay> </audio>

72 Pregătirea tutorialelor multimedia pentru publicarea lor online - 6

Atributul controls are o importanţă deosebită, specifică browser-ului să adauge bara de control facilitând rularea videoclipului de către vizitator. Lipsa atributului presupune crearea unui script Java care să genereze acelaşi rezultat [18]. Ca la orice altă tehnologie se poate discuta de avantaje şi dezavantaje. Pentru browser-ele mai vechi, elementul <video> este necunoscut, de acea un dezvoltator în scrierea codului trebuie să ofere suport multiplu [20]:

<video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> …etc …

</object> </video>

Youtube.com rămâne o soluţie viabilă, o alternativă, deoarece aplicaţia este destul de inteligent gândită pentru a determina dacă un browser are nevoie de Flash sau HTML5.

Cele prezentate în acest capitol nu constituie o prezentare exhaustivă a ceea ce înseamnă „pregătirea tutorialelor sau elementelor audio video pentru publicarea lor online”. Posibilităţile de editare, compresie şi integrare a materialelor multimedia în pagini Web sunt multiple, iar următorii ani îşi vor pune amprenta decisiv în utilizarea şi evoluţia acestora.

Anexa 1: Aplicaţii utile în domeniul multimedia

Categorie Nume Adresă

Add-on-uri utile pentru Mozilla Firefox

Video Download Helper

https://addons.mozilla.org/en-US/firefox/addon/3006

FireShot https://addons.mozilla.org/en-US/firefox/addon/5648

ColorZilla https://addons.mozilla.org/enUS/firefox/addon/colorzilla/

HTML&CSS

Adobe Dreamweaver

http://www.adobe.com/products/dreamweaver.html

Tutoriale HTML http://www.w3schools.com/html/

Editor HTML gratuit

http://www.pagebreeze.com/

Tutoriale CSS http://www.w3schools.com/css

Editor CSS gratuit http://www.ucware.com/juststyle/#download

Editor CSS Menu http://purecssmenu.com/

Înregistrare şi găzduire site Web

http://www.godaddy.com/

http://www.bluehost.com/

http://www.inregistrare-domenii.ro/

http://www.rotld.ro

Motoare de căutare

http://www.google.com

http://www.ask.com

http://www.alltheweb.com

http://search.aol.com/aol/webhome

http://www.seekport.com

http://www.picsearch.com

74 Anexa 1: Aplicaţii utile în domeniul multimedia

Categorie Nume Adresă

Captură ecran şi video

Adobe Captivate http://www.adobe.com/products/captivate.html

Camtasia Studio http://www.techsmith.com/camtasia.html

Replay Media Catcher

http://www.replaymediacatcher.org/

Replay Video Capture

http://www.applian.com/replay-video-capture/

Înregistrări audio

Sound Forge http://www.sonycreativesoftware.com/soundforge

Adobe Audition http://www.adobe.com/products/audition.html

Editare şi conversie video

Adobe Premiere http://www.adobe.com/products/premiere.html

DVD Video Soft Free Studio

http://www.dvdvideosoft.com/

Wondershare http://www.wondershare.com/

Xilisoft Video Converter

http://www.xilisoft.com/

Animaţii Adobe Flash http://www.adobe.com/products/flash.html

Gif Animator http://www.gif-animator.com/

Editare imagini

Adobe Photoshop http://www.photoshop.com/products

Gimp http://www.gimp.org/

Sumo Paint http://www.sumopaint.com

Pixlr editor http://pixlr.com/

FotoFlexer Image Editor

http://fotoflexer.com/

Aviary Photo Editing API

http://www.aviary.com/

Alegerea culorii într-o aplicaţie Web

Color Scheme Designer http://colorschemedesigner.com/

Kuler http://kuler.adobe.com

Color Match Remix http://colormixers.com/

HTML Color Picker http://www.w3schools.com/tags/ref_colorpicker.asp

Fonturi Photoshop 1001 Free Fonts http://www.1001freefonts.com/handwriting-fonts.php

Anexa 2: Tutoriale Adobe Captivate

Înregistrarea unei aplicaţii desktop

Exemplificarea se va face înregistrând acţiuni executate în cadrul softului Total Commander.

Se porneşte aplicaţia ce se doreşte înregistrată (prezentată), respectiv se deschide Adobe Captivate (5.x).

În pagina de Start se alege Software Simulation.

Se selectează Application Window > Automatic Recording. Din opţiunile

pentru înregistrarea automată se recomandă No Panning şi modul de înregistrare Demo(nstration).

76 Anexa 2: Tutoriale Adobe Captivate

Prin apăsarea butonului de Record începe înregistrarea propriu-zisă. Se desfăşoară activitatea planificată. Adobe Captivate salvează o captură de ecran de fiecare dată când se efectuează o acţiune (ex: selectarea unui meniu), captură însoţită de „sunetul unui declanşator foto”. Print Screen permite la orice moment de timp înregistrarea unui instantaneu a ecranului. Pentru încheierea înregistrării se apasă tasta End.

Se deschide automat fereastra de salvare, se introduc numele proiectului şi

locaţia unde se va salva proiectul.

Pre-vizualizarea înregistrării se poate face pentru tot proiectul (Project - F4) în varianta desktop sau într-un browser Web (F12).

Salvarea proiectului se face în formatul nativ .cptx, convenabil în cazul în care

se doresc modificări ulterioare asupra proiectului: File > Save sau Save as.

77

Pentru integrarea într-o pagină Web sau rularea de sine stătătoare pe un calculator propriu se recomandă publicarea în formatul .swf, care permite păstrarea acţiunilor şi interacţiunii în cadrul slide-urilor: File > Publish> Flash (SWF).

Editarea unui proiect

Sunt enumerate principalele acţiuni de editare, manipulare şi inserare de obiecte noi într-un slide, ulterior o parte sunt reluate şi explicate pas cu pas.

Acţiuni directe asupra slide-urilor: adăugare, ştergere, copiere, înregistrare de noi slide-uri.

78 Anexa 2: Tutoriale Adobe Captivate

Modificarea formei de afişare a mouse-ului, poziţiei de început şi de sfârşit a mişcării lui.

Inserarea de butoane pentru navigare, căsuţe transparente care necesită interacţiune cu utilizatorul, căsuţe sub formă de text (Button, Click Box, Text Entry Box).

Ajustarea timpului de expunere pentru fiecare obiect din scenă prin intermediul timeline-ului.

Adăugarea de mesaje text (Text Captions), forme geometrice, zone cu rollover (Rollover Caption, Rollover Image, Rollover Slidelet)

Adăugarea de imagini ca şi obiecte în sine sau de slide-uri sub formă de imagini (Image Slide)

Adăugarea de sunet de fundal, sunet pentru fiecare slide în parte, înregistrare de voce.

Inserarea clipurilor video şi a altor animaţii sub formă de swf-uri sau flv-uri.

Inserarea de texte animate (text animation).

Adăugarea de widget-uri şi efecte (Windows > Widgets, Windows > Effects).

Crearea de chestionare de evaluare şi autoevaluare (Quizz-uri).

Manipularea de variabile şi acţiuni avansate (afişarea orei şi a datei curente, certificate de competenţă, anagrame etc.).

79

Rescalarea unui proiect

Într-un proiect deja existent se alege calea Modify > Rescale Project.

Se poate alege o dimensiune predefinită sau se pot introduce valori

personalizate cu păstrarea sau nu a raportului de aspect. Dacă se introduce o valoarea mai mare decât cea a proiectului iniţial se va activa zona din stânga If new size is larger, în caz contrar zona din dreapta If new size is smaller.

Pentru proiectul iniţial se consideră dimensiunea setată la 1024 x 768.

Pentru o primă exemplificare se alege rescalarea de tip If new size is larger la o valoare de 1200 x 768.

Sunt oferite două variante: - rescalarea întregului proiect şi a obiectelor din scenă pe toată lăţimea de 1200 (Rescale Project to Fit New Size). - păstrarea dimensiunii proiectului iniţial şi adăugarea unei zone de fundal de la valoarea de 1024 până la valoarea menţionată de 1200 (Keep on the same size and position the project). Proiectul iniţial poate fi poziţionat conform opţiunilor din figura următoare.

80 Anexa 2: Tutoriale Adobe Captivate

În acest al doilea caz se pot insera obiecte suplimentare, de exemplu Text

Captions. În cazul în care se capturează un soft, în zona de Text Captions pot fi aduse lămuriri suplimentare referitoare la acţiunea desfăşurată în slide-ul respectiv.

Pentru o a doua exemplificare se alege rescalarea de tip If new size is smaller

la o valoare de 800 x 600.

Sunt oferite şi în acest caz două variante: - rescalarea/reducerea dimensiunii întregului proiect şi a obiectelor din scenă la valorile specificate. - decuparea unei anumite zone din proiectul iniţial, zonă definită de utilizator.

81

Operaţia de rescalare a unui proiect (fie mărirea dimensiunii, fie reducerea ei)

este definitivă, fără posibilitatea revenirii asupra operaţiei.

Importarea unui fişier PSD

Se creează materialul multimedia corespunzător în Photoshop, acesta va conţine o colecţie de straturi formate din imagini şi text.

Se deschide în Captivate un proiect nou şi se alege calea File > Import >

Photoshop File. Se pot insera toate straturile separat sau se pot unifica într-o singură imagine.

82 Anexa 2: Tutoriale Adobe Captivate

Fiecare strat este tratat ca o imagine cu extensie .png şi este salvat în librăria

Captivate într-un director identic cu numele fişierului PSD. Toate imaginile importate pot fi supuse proceselor de editare specifice Captivate.

Efecte ale obiectelor

Efectele aplicate obiectelor atrag atenţia utilizatorului în momentul rulării unui slide. Pentru a putea aplica un efect se urmează calea Window > Effects.

Din butonul fx se alege Entrance > Fly In From Left sau Motion Path > Left To Right, se aplică un filtru pus la dispoziţie (Glow, Blur) sau efecte de culoare (transparenţe, luminozitate) şi transformări geometrice de bază (rotaţii, scalare, deformare).

83

În cazul alegerii unui efect Motion Path pentru a defini/modifica direcţia de

mişcare se apasă pe căsuţa care apare în colţul din dreapta jos a obiectului.

Creare de Quiz-uri

Chestionarele se pot insera într-un proiect deja existent sau într-unul nou. În cele ce urmează exemplificarea se va face în cazul unui proiect nou. Se creează acesta prin File > New Project > Blank Project, dimensiune 800x600.

84 Anexa 2: Tutoriale Adobe Captivate

Se introduc slide-uri corespunzătoare urmând calea Quizz > Question Slide. Se

va afişa o listă cu opţiunile disponibile, exemplificarea se va face pe varianta Multiple Choice - Graded, care oferă posibilitatea generării automate a unui anumit punctaj (note).

Fereastra nou deschisă permite o serie de opţiuni care sunt menţionate în

continuare. Se poate alege numărul de răspunsuri din listă, dintre care se specifică dacă unul sau mai multe sunt corecte. Punctajul maxim acordat ia valori între 0 şi 100, iar casete de informare însoţesc utilizatorul în cazul unor răspunsuri corecte, incomplete sau a unei limite de timp. Butoanele de navigare clear, back şi skip permit facilităţi suplimentare celui ce completează chestionarul în cazul în care ele sunt activate (selectate) în momentul creării. În figura de mai jos s-a ales păstrarea unui singur buton - Next.

85

Dezvoltatorul unui astfel de chestionar poate alege opţiunea de generare

automată a unui raport (Report Answer), iar pentru personalizarea informaţiilor de tip text afişate se editează câmpurile direct din slide. Raportul conţine informaţii despre punctajul obţinut, numărul total de întrebări al chestionarului etc.

Într-o altă ordine de idei, pentru o organizare eficace, utilizare şi reutilizare de

chestionare în proiecte vechi sau noi se recomandă lucrul cu Question Pool Manager şi opţiunea de generare întrebări aleatorii Random Question Slide.

86 Anexa 2: Tutoriale Adobe Captivate

Variabile de sistem

Se creează un proiect nou (Blank Project) de dimensiune 800 x 600. Se vor da câteva exemple de variabile de sistem şi cum se inserează ele.

Data curentă. Se urmează calea Insert > Standard Objects > Text Caption. Din fereastra de proprietăţi se alege zona marcată cu X şi opţiunea Variable Type System > cpInfoCurrentDateString. Se poziţionează în slide.

Afişarea sau ascunderea barei de control - Pentru aceasta în caseta de

proprietăţi a slide-ului în zona Action se alege opţiunea Assign > cpCmndShowPlaybar şi în câmpul With se completează cu 1 pentru vizualizare şi 0 pentru ascunderea barei de control.

87

Variabile utilizator şi acţiuni avansate - login

Se creează un proiect nou (Blank Project) de dimensiune 800 x 600.

Se creează un prim slide (slide 1) şi se inserează două obiecte Text Captions în care se introduc textele: (nume) Utilizator şi Parolă

Se inserează două obiecte Text Entry Box, câmpurile în care utilizatorul va introduce numele şi parola. Pentru căsuţa corespunzătoare numelui se dezactivează Validate User Input, se selectează No Actions şi deselectează Infinite Attempts, respectiv se completează Variable Associated cu varNume. Similar se procedează cu căsuţa corespunzătoare parolei unde Variable Associated se completează cu varParola. Se păstrează butonul de Submit şi se activează Password Field.

Se creează un obiect Text Caption care se va afişa doar în momentul în care utilizatorul va introduce datele greşit. Se completează în fereastra de proprietăţi ItemName cu LoginInvalid şi se selectează Visible.

Se creează un slide nou (slide 2) care se va afişa în momentul în care

utilizatorul introduce datele corect. Pe acest slide se inserează un buton Continuă care va face salt la slide-ul numărul 4.

88 Anexa 2: Tutoriale Adobe Captivate

Se creează un slide nou (slide 3) care va informa utilizatorul în cazul în care acesta va introduce datele de identificare eronat de mai multe ori.

Se creează un slide nou (slide 4) care poate fi considerat primul slide concret. În continuare se inserează câte slide-uri sunt necesare pentru a prezenta o anumită tematică.

Pentru crearea acţiunilor avansate se utilizează variabilele: varNume (mihai),

varParola (mihai), numarIncercari (setată iniţial pe 0, la fiecare încercare incorectă valoarea se incrementează cu 1, se limitează în exemplu curent la 3).

Project > Variables:

Project > Advanced Actions > Conditional Actions

Action Name = validare, script 1 şi script2.

89

Project > Advanced Actions > Standard Actions, Action Name = exit.

Pe primul slide, la proprietăţile acestuia se selectează On Enter: Continue,

respectiv On Exit: Execute Advanced Actions şi se alege scriptul validare.

Pe slide-ul 3, la proprietăţile acestuia se selectează On Enter: Continue, respectiv On Exit: Execute Advanced Actions şi se alege scriptul exit.

90 Anexa 2: Tutoriale Adobe Captivate

Inserarea unui widget sub formă de anagramă

Se inserează un slide gol şi se alege din librăria Captivate widget-ul JumbledWordQuestion.swf. Este gratuit doar pentru versiunea Adobe Captivate 4.0, a devenit comercial pentru versiunile 5.x.

Se introduce în câmpul Words To Be Jumbled un cuvânt pentru anagramare, de

exemplu streaming.

Se introduce un Text Captions cu întrebarea corespunzătoare: Care tehnologie stă la baza transmisiunilor video pe Internet?

Pentru a testa acest widget la previzualizarea proiectului se deplasează literele în căsuţe în ordinea corectă.

Crearea unui fişier cu extensia .wdgt

Un fişier cu această extensie defineşte un widget care utilizează legături de fişiere (mai multe fişiere interconectate). Fişierul WDGT conţine fişiere SWF interconectate şi un fişier de descriere .xml care conţine informaţii despre legături.

Se vor lua în calcul trei fişiere Demo.swf, Demo_1.swf şi Demo_2.swf.

Fişierul de descriere .xml arată în felul următor:

<?xml version="1.0" encoding="ISO-8859-1" ?> <widget> <Description> Este un widget</Description> <Type>isStatic</Type> <Name>Demo.swf</Name>

91

<linkedfiles>Demo_1.swf</linkedfiles> <linkedfiles>Demo_2.swf</linkedfiles> </widget>

Fişierele .swf şi .xml se copiază într-un director, se arhivează şi se modifică extensia în .wdgt. Se plasează în librăria Captivate corespunzătoare widget-urilor (locaţia de instalare).

Exemplu de cod pentru definirea diferitelor moduri de previzualizare a unui widget

Previzualizarea unui widget permite unui utilizator să-şi facă o idee despre acesta înainte de inserarea lui propriu-zisă într-un proiect. Dacă în codul unui obiect Flash găsim:

if (wm == 'Preview') { Widget_name._visible = true; }

rezultatul rulării codului permite vizualizarea widget-ului în zona de pre-afişare sau în caz contrar dacă nu se doreşte acest lucru _visible va lua valoarea false.

function cpSetValue( variable:String , val ) {if(variable == 'movieHandle' ) { movieHandle = val; mainmov = movieHandle.getMovieProps().variablesHandle;} if (variable == 'widgetMode') {widgetMode = val;}} this.onEnterFrame = function() { var wm:String = widgetMode;//this variable will be provided by Captivate App or Captivate Movie

if(wm == undefined)

{wm = widgetMode;} if(wm == undefined)

wm = 'Stage';

if(wm == 'Edit')//Property inspection inside Captivate app

{ button1._visible=true; } else if (wm == 'Preview') { button1._visible=false;} else //this is the stage mode {button1._visible=true;} }

Anexa 3: Tutoriale Adobe Photoshop

Exemplele prezentate în continuare au la bază manipularea imaginilor în Adobe Photoshop CS3. În prezent s-a ajuns la varianta Adobe CS5, însă tutoriale rămân de actualitate datorită unităţii şi păstrării unei interfeţe de lucru asemănătoare de la o variantă de software la cealaltă.

Cum se … îndepărtează „puncte” nedorite?

Se deschide imaginea originală în Adobe Photoshop şi se selectează unealta Healing Brush Tool.

Se măreşte imaginea (Zoom - Ctrl +), se ţine apăsat Alt pentru a lua o mostră din imagine şi se desenează în zonele cu defecte.

Pentru îmbunătăţirea rezultatului se poate încerca Clone Stamp Tool. Se ţine apăsat Alt şi se selectează zona care se doreşte clonată. Ulterior se

apasă click în zona cu defecte. Cele două zone trebuie să fie asemănătoare ca şi culoare, altfel se va simţi că imaginea a fost editată.

Pentru un retuş final (dacă este necesar) se creează un strat nou şi se alege unealta Brush Tool din cutia de unelte.

Se selectează o culoare maronie (sau apropiată de culoarea zonei cu defecte) şi se pictează pe zona retuşată.

Se setează opacitatea stratului la 25%, iar la Blend Mode se selectează Screen.

93

„Layer Blending”

+ =

Se deschid imaginile care se doresc utilizate. Se trage imaginea secundară peste imaginea de bază, automat se creează un

nou strat. La Blend Mode, în fereastra straturilor se selectează Lighten.

Cum se… „încălzeşte” o imagine?

Se încarcă imaginea ce se doreşte ajustată. Pentru a păstra originalul intact, se creează un duplicat al ei. Click-dreapta pe strat > Duplicate Layer.

Se selectează Layer > New Adjustment Layer şi se alege o opţiune din lista pusă la dispoziţie în funcţie de ce se doreşte prelucrat (ex: Curves).

94 Anexa 3: Tutoriale Adobe Photoshop

Din lista de canale se selectează Red, se trage de linia apărută în direcţia stânga-sus.

Dacă se doresc operaţii direct pe imaginea iniţială se poate utiliza Image > Adjustments şi lista de opţiuni pusă la dispoziţie (Levels, Contrast, Hue, Saturation, Channel Mixer, Exposure etc.

Cum se … cenzurează o parte dintr-o fotografie?

Se deschide imaginea în care se doreşte introdusă „zona de cenzură”. Cu ajutorul uneltei de selecţie rotunde (Elliptical Tool), se selectează zona de

interes, se apasă combinaţia de taste Ctrl+C, respectiv Ctrl+V. Rezultatul este un strat nou ce conţine selecţia făcută.

Se accesează Filter > Pixellate > Mosaic. În fereastra nou apărută Cell Size va lua o valoare potrivită (ex: 45).

Cum se … schimbă culoarea ochilor?

Se încarcă imaginea ce se doreşte ajustată.

95

Cu ajutorul uneltei Elliptical Tool se face o selecţie în jurul irisului. Selecţia nu trebuie să fie exactă. Fără a se renunţa la selecţie, se accesează modul Quick Mask.

Cu ajutorul uneltei Eraser Tool se pot corecta eventualele greşeli în selecţie. Se reintră în Standard Mode. Se creează un strat nou cu selecţia respectivă, se umple irisul folosind Edit >

Fill > Color. Se setează Preserve Transpercy şi Blend Mode la Hue (Soft Light) sau se pot încerca alte setări până se obţine culoarea potrivită.

Cum se … schimbă culoarea unei maşini?

Se încarcă imaginea ce se doreşte ajustată. Se selectează folosind Lasso Tool sau Polygonal Lasso Tool toate părţile unde

se doreşte o culoare nouă. Cu Shift se adaugă la o selecţie, iar cu Alt se sustrage.

Se copiază selecţia pe un nou strat. Imaginea se desaturează prin Image > Adjustments > Desaturate. Se accesează Image > Adjustments > Variations şi se alege culoare dorită.

Cum se … creează o mască de deplasare?

96 Anexa 3: Tutoriale Adobe Photoshop

Se deschide imaginea de fundal pe care se doreşte să se aplice un text sau o altă imagine. Se salvează imaginea de fundal în format .psd cu numele „Cortina”. Este

considerată o „hartă” pentru text sau pentru o imagine secundară. Textul dorit se scrie cu ajutorul uneltei Type Tool. Se apasă click-dreapta pe stratul de text şi se selectează Rasterize Type. Ulterior se alege Filter > Distort > Displace. Se selectează fişierul

„Cortina”. Pentru un efect pronunţat se setează Blend Mode la Overlay. Folosind Eraser

Tool se pot ajusta/şterge zonele care nu au fost aliniate bine. De asemenea putem utiliza efecte de strat: click-dreapta pe strat - Blending

Options (Inner Shadow, Drop Shadow etc.). Această metodă nu este limitată doar la text. Se pot utiliza imagini la diferite

nivele de complexitate.

Cum se … izolează o culoare artistic?

Se deschide imaginea în Photoshop şi se duplică stratul prin click-dreapta Duplicate Layer. Se ascunde acest strat. Se selectează originalul (primul strat). Se desaturează Image > Adjustments

> Desaturate. Pentru alte ajustări se poate utiliza Image > Adjustments > Levels. Se afişează/alege stratul copiat mai devreme. Ulterior se accesează Select > Color Range. Se setează bara Fuzziness la 200. Imaginea este în alb şi negru, partea cu alb

va fi cea selectată.

97

Se apasă OK, se accesează Select > Invert, tasta Delete şi rezultă o culoare izolată în faţa unui fundal alb-negru.

Efect „Motion Blur”

Se realizează o selecţie a părţii din imagine care se doreşte prelucrată. Se copiază selecţia pe un nou strat. Se aplică Filter > Blur > Motion Blur (ex: unghiul la 0 grade şi distanţa la 90

pixeli). Se deplasează selecţia dacă este cazul. Pentru un efect mai puternic se poate utiliza opţiunea de Lighten.

Efect de poză veche

98 Anexa 3: Tutoriale Adobe Photoshop

Image > Adjustment, Hue/Saturation (exemplu: HUE 45, Saturation 45, se bifează Colorize). Se va crea un nou strat peste care se aplică culoarea albă folosind Paint Bucket

Tool. Se aplică Filter > Texture > Grain (exemplu: Intensity 91, Contrast 83, Grain

Type Vertical). Se schimbă modul stratului din Normal în Multiply şi opacitatea din 100% în

50%. Pentru a reda autenticitatea cât mai apropiată de o imagine veche reală vom

adăuga zgomot imagini (noise). Se selectează primul strat (background) şi din bara de meniu se alege Filter >

Noise > Add Noise (exemplu: Amount 5%, Distribution - Uniform, se bifează Monocromatic).

Efect text culori

Se deschide un document nou de o dimensiune: 800 x 400 px. Folosind Paint Bucket Tool se colorează fundalul cu culoare închisă sau negru. Se selectează Horizontal Type Tool, un anumit stil (ex: Century Gothic Bold,

Arial Black) cu o dimensiune de 80-120 pt şi culoarea albă. Se scrie Mihai WebSite. Pentru stratul text nou creat se alege Rasterize Type. Se separă fiecare literă într-un nou strat: Rectangular Marque Tool > Layer Via

Cut. Pentru fiecare strat (literă) în parte se selectează opacitatea la 50%-60%. Stratul iniţial Mihai WebSite se poate ascunde sau şterge.

99

Se deplasează fiecare strat (literă) astfel încât să avem o suprapunere parţială a literelor (vezi figură). Deplasarea se face cu CTRL şi săgeţi. Fiecărei litere i se adaugă o anumită culoare. Blending Options > Gradient

Overlay cu setările următoare Opacity 50% şi Scale 150%. Gradientul se alege liniar, combinaţie între negru şi o culoare la alegere cu setarea Location 30-40%. Se selectează toate straturile (literele) şi se unesc într-un singur strat - Merge

Layers (CTRL + E). Se duplică noul strat creat şi pe duplicat se aplică Filter > Blur > Gaussian Blur

cu Radius 2-4 px. Se unesc ultimele două straturi. Opţional se pot aduce şi alte modificări gen: Duplicate Layer, Normal >Screen

şi/sau Image > Adjustments > Brightness/Contrast. Pentru a obţine efectul de oglindire se duplică stratul ultim rezultat. Se roteşte imaginea cu 180o (CTRL+T, click dreapta Rotate 180o) Se modifică direcţia literelor (Flip Horizontal) şi se aplică o mască de strat cu

gradient. Pentru un ultim efect se poate alege modificarea perspectivei (CTRL+T, click

dreapta Perspective).

Imagine în interiorul textului

Se deschide un document nou de o dimensiune de 800 x 200 px. Se selectează Horizontal Type Tool, un anumit stil (ex: Century Gothic Bold,

Arial, Arial Black etc.), cu o dimensiune de 80-100 pt şi o anumită culoare. Se scrie Mihai WebSite. Se încarcă imaginea care se doreşte introdusă în interiorul textului ca şi strat nou

poziţionat deasupra stratului cu informaţie text. Se creează o mască de tăiere (Clipping Mask - ALT şi click stânga pe linia dintre

cele două straturi) Se deplasează imaginea în interiorul textului şi se poziţionează pentru a obţine

efectul dorit.

100 Anexa 3: Tutoriale Adobe Photoshop

Efect „viteză text”

Se deschide un document nou de o dimensiune de 800 x 400 px. Folosind Paint Bucket Tool se colorează fundalul cu culoare închisă sau negru. Se selectează Horizontal Type Tool, un anumit stil (ex: Verdana, Arial Black) cu

o dimensiune de 40-60 pt şi culoarea albă. Se scrie Mihai WebSite. Pentru stratul text nou creat se alege Rasterize Type.

Se alege Merge Layers (CTRL+ E) pentru a uni stratul cu fundalul (background).

Se aplică o serie de filtre: Filter > Blur > Gaussian Blur, Radius 1-2px.

Filters > Stylize > Solarize.

Filters > Distort - Polar Coordinates, Polar to Rectangular.

Se roteşte imaginea în sens invers acelor de ceas 900 CCW (Image > Rotate Canvas).

Se aplică Filter > Stylize > Wind, Direction - Wind, From the left. CTRL+F amplifică efectul.

Se roteşte imaginea la loc - 900 CW.

Se reface textul Filter > Distort > Polar Coordinates, Rectangular to Polar.

Se mai pot face modificări de luminozitate Image > Adjustments > Brightness/Contrast sau de schimbare a culorii textului Image > Adjustments > Color Balance

Fundal cercuri colorate

Prima parte constă în creare „formă pensula” (Brush). Se deschide un document nou de dimensiunea 200x200. Se creează un strat nou şi se ascunde fundalul (background-ul). Se selectează Ellipse Tool şi culoarea neagră. Se desenează o elipsă sau ţinând

tasta SHIFT apăsată, un cerc.

101

Se setează opacitatea la 50% şi din Blending Options se alege Stroke, Size 8 px,

Inside, Black Color Se defineşte pensula: poziţionare pe Background, selecţia scenei cu CTRL+A şi

definirea propriu-zisă cu Edit > Define Brush Preset. Se reţine numele şi dimensiunea în pixeli. Se deschide un nou document pentru crearea fundalului colorat propriu-zis (ex:

800x600). Se selectează Paint Bucket Tool şi o culoare gri închis (nu negru), se aplică pe

întreaga scenă. Se converteşte fundalul (Background) Convert to Smart Object pentru a-i putea

aplica un gradient de culoare: Blending Options > Gradient Overlay, unghi linear la 400-500. Se alege Brush Tool, se fac setările pentru pensulă Windows > Brush:

- Brush Tip Shape forma pensulei creată anterior cu Spacing 100%.

- Shape Dynamics cu Size Jitter 100%, Minimum Diameter 50%

- Scattering cu Scatter 1000%, Count 5%, Count Jitter 1%

- Other Dynamics cu Opacity Jitter 50%, Flow Jitter 50% Se creează un nou strat a cărui mod se schimbă în Color Dodge. Selectăm Brush Tool, o anumită dimensiune a pensulei, culoarea albă şi desenăm

în scenă fie ţinând apăsat şi trăgând, fie printr-o simplă apăsare. Se aplică stratului un filtru Blur > Gaussian Blur, Radius: 1-2 px. Opţional se poate adăuga un nou strat şi se desenează cu ajutorul pensulei.

102 Anexa 3: Tutoriale Adobe Photoshop

Efect linii strălucitoare

Se deschide un document nou de dimensiunea 600x600. Se selectează culorile negru şi turcoaz. Se alege Gradient Tool de tip Radial şi se adaugă pe fundal. Se duplică stratul şi se schimbă modul lui în Color Dodge şi Opacity 70%. Se creează un nou strat pe care se aplică Filter > Render > Clouds şi se schimbă

modul în Overlay cu o opacitate de 50%. Se aleg pentru Brush Tool (Windows Brush Tool) următoarele opţiuni:

- culoare alb, mărime 2-4 px, Hardness 100%, Opacity/Flow 100%

- Shapes Dynamics cu Size Jitter 0%, Control - Off la toate opţiunile din fereastră

- Other Dynamics cu Opacity Jitter 0%, Control - Pen Pressure, Flow Jitter 0%, Control - Pen Pressure

Pe un strat nou se desenează o linie cu ajutorul Pen Tool şi opţiunea Paths. Click dreapta Stroke Paths, se bifează Simulate Pressure şi se alege Brush. Se apasă Enter pentru aplicare. Pe stratul cu linia, se pot face ajustări de genul Blending Options (ex: Drop

Shadow). Pentru adăugarea de text folosim Horizontal Type Tool, respectiv pentru a copia

stilul stratului cu linia desenată Copy Layer Style, Paste Layer Style.

103

Se pot utiliza linii multiple cu transformări ale liniilor utilizând Free Form Pen Tool şi Add Anchor Point Tool sau efectul se poate aplica pe fotografii cu diverse tematici.

Interfaţă grafică pentru o galerie foto într-un site Web

Document

- dimensiuni 800x600 pixeli - rezoluţie 72 pixels/inch

- spaţiu de culoare RGB 8 biţi

- fundal White Text MIHAI ONIŢA

- Myriad Pro, Regular 27 px, Crisp, căsuţă culoare #ffffff

- Drop Shadow, Angle 1350, Opacity 50%, Distance 2 px, Spread şi Size 0%, Blend Mode > Multiply, căsuţă culoare #000000.

Text WEB SITE

- Myriad Pro, Regular 27 px, Crisp, căsuţă culoare #333300

- Drop Shadow, Angle 1350, Opacity 42%, Distance 2 px, Spread şi Size 0%, Blend Mode > Normal, căsuţă culoare #ffff99

104 Anexa 3: Tutoriale Adobe Photoshop

Text butoane (Home, Portofoliu, Hobby, Foto, Contact)

- Arial Regular 18 px, Crisp, căsuţă culoare #ffffff Text meniu subsol pagină

- Arial Bold 12 px, căsuţă culoare #336633 Poză mare - efect de poză veche, a se vedea tutorialul corespunzător într-un

paragraf anterior Poze mici

- redimensionate cu Edit > Transform > Scale

- desaturate cu Image > Adjustments > Desaturate Fundal semitransparent verde (sub imagini)

- Rectangle Tool, căsuţă culoare #ccffcc, opacitatea stratului 30%

- efect Drop Shadow, Angle -1350, Opacity 78%, Distance 2 px, Spread 100% şi Size 0%, Blend Mode > Multiply, căsuţă culoare #669966

- efect Stroke, Size 1px, File Type Pattern Buton sub formă eliptică - Ellipse Tool, culoare albă

- redimensionări cu Edit > Transform > Scale

- rotiri cu Edit > Transform > Rotate

- două forme eliptice suprapuse

- prima elipsă cu efect Drop Shadow, Angle – 1350, Opacity 100%, Distance 2 px, Spread 100% şi Size 0%, Blend Mode > Normal, căsuţa culoare #669900, bifare Use Global Light

- a doua elipsă cu efect Drop Shadow, Angle -1350, Opacity 100%, Distance 2 px, Spread 100% şi Size 0%, Blend Mode > Normal, căsuţă culoare #669900, bifare Use Global Light, respectiv cu efect de Gradient Overlay, Opacity 100%, gradient liniar de la #669900 la #ffffff, Angle -1620, Scale 99%

Fundale cu gradiente de la verde deschis #cccc99 la verde închis #669900, respectiv de la gri #cccccc la alb #ffffff. Linii orizontale sau verticale - Pencil Tool - culori verde închis #006600 sau

#33990.

Bibliografie

[1] Edna Yaffe, Boaz Marmelstein, Alit Epstein, Meira Privman, Digital Video as an educational Tool in Distance Education, Proceedings of World Conference on Educational Multimedia, Hypermedia and Telecommunications 2002 (pp. 2089-2090). Chesapeake, VA: AACE, EdITLib

[2] Marie Bijnens, Mathy Vanbuel, Soetkin Verstegen, Clive Young, Handbook on Digital Video and Audio in Education - Creating and using audio and video material for education purposes, publicat de VideoAktiv Project http://www.videoaktiv.org/, Socrates Minerva 1141169-CP-1-2004-1-UK-MINERVA-M

[3] Andrei Ternauciuc, Oniţa Mihai, Ghidul tutorialului multimedia in domeniul e-learning, „Proceedings of the 2nd International Scientific Conference - ELSE, Editura „Universitatii Nationale de Aparare Carol I", 2006, ISBN: (10) 973-7854-35-7 (13) 978-973-7854-35-3, pag. 97 - 102, Bucuresti, Romania

[4] Mihai Oniţa, Contribuţii la utilizarea tehnologiilor video în învăţământul electronic, Teze de doctorat ale UPT, Seria 7, Nr. 25, Editura Politehnică, ISSN: 1842 – 7014, ISBN: 978-606-554-255-6

[5] McKinney Engineering Library, Multimedia Tutorial Production Guide http://www.utexas.edu/computer/grants/di4/tutorialguide.PDF, septembrie 2011

[6] Ko, S, Rossen, S 2010, Teaching Online: A Practical Guide, Routledge, 3 edition ISBN-13: 978-0415997263

[7] Barbara Obermeier, Photoshop CS 5 for Dummies, Wiley Publishing, ISBN 978-0-470-60821-0, 2010

[8] Doug Sahlin, Claudia Snell, Building Web Sites All-in-one For Dummies, 2nd edition, Wiley Publishing, Inc., ISBN: 978-0-470-38541-8, 2009

[9] Jennifer Niederst, Web Design in a Nutshell. A Desktop Quick Reference, O’Reilly & Associates, ISBN: 1-56592-515-7, 1999

[10] http://www.wikipedia.org, http://www.tutorialspdf.com/, septembrie 2011

[11] Daniel Haiduc, Curs de Grafică Computerizată, Centrul de Învăţământ la Distanţă, http://csid.upt.ro, decembrie 2000

[12] Corneliu I. Toma, Florin Alexa, Radu. A. Vasiu, Principiile televiziunii analogice şi digitale, ISBN 973-625-267-1, Editura Politehnica 2006.

[13] Paul Zelansky, Mary Pat Fisher, Les theories de la couleur, ISBN 2-35278-007-1, Thalia Edition

[14] Doug Peterson, Using Adobe Captivate and Flash Simulations in e-Learning, 2011 European Users Conferences, Brussels http://www.questionmark.com/uk/conference/handouts/2011/bp-peterson.pdf

[15] Ghid de utilizare Adobe Captivate 5, noiembrie 2011 http://help.adobe.com/en_US/captivate/cp/using/captivate_5_help.pdf

[16] Golnessa Galyani Moghaddam, Mostafa Moballeghi, The Impact of Web Animation on Users: Getting the Message across Literature, http://eprints.rclis.org/bitstream/10760/8546/1/Web_Animation.pdf, iulie 2011

[17] Sue Valentine, A Comparison of Animators (GIF89, QuickTime, Shockwave, Flash, Java, dHTML) http://jabba.edb.utexas.edu/multimedia/TReports/AnimationValentine.pdf, iulie 2011

[18] Matthew MacDonald, Add Audio&Video to Your Site: The Missing Manual, O’Reilly Media, Inc., ISBN: 9781449382506, 2011

[19] Iasmina Ermalai, Mihai Oniţa, Proiecte de dezvoltare multimedia pentru învăţământ la distanţă, campusul virtual al Universităţii Politehnica Timişoara, http://cv.upt.ro, iulie 2011

[20] Dezvoltatorii Webmonkey, Încapsularea audio şi video în pagini HTML5, http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/, iulie 2011