Colecia 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 regsete n curricula Facultii de Electronic i Telecomunicaii, Universitatea Politehnica din Timioara, anul IV, direcia de studiu Tehnologii i Sisteme de Telecomunicaii. Disciplina servete studenilor angrenai n nvmntul la nivel licen - 4 ani att la forma de nvmnt zi (http://www.etc.upt.ro/) ct i la distan (http://cid.upt.ro/). Referent tiinific: Prof.dr.ing. Radu Adrian VASIU

Descrierea CIP a Bibliotecii Naionale a Romniei ONIA, MIHAI IONU Tutoriale Multimedia / asist.dr.ing. Mihai Ionu Onia. - Timioara : Editura Politehnica, 2011 Bibliogr. ISBN 978-606-554-385-0

004.4

Asist.univ.dr.ing. Mihai Ionu ONIA

TUTORIALE MULTIMEDIA
Colecia MULTIMEDIA

EDITURA POLITEHNICA TIMIOARA 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, fr acordul prealabil scris al Editurii Politehnica.

EDITURA POLITEHNICA Bd. Republicii nr. 9 300159 Timioara, Romnia 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 Universitii "Politehnica" din Timioara

Cuprins
CAP 1: INTRODUCERE ...................................................................................................... 7 1.1. MULTIMEDIA ............................................................................................................... 7 1.2. TUTORIAL - CONCEPT I UTILIZARE ............................................................................. 8 CAP 2: ASPECTE TEORETICE ALE REALIZRII UNUI TUTORIAL ..................... 10 2.1. MODURI DE REALIZARE................................................................................................ 10 2.2. ETAPE .......................................................................................................................... 11 2.3. IMPLEMENTRI DE TUTORIALE ..................................................................................... 17 CAP 3: FORMATE DE FIIERE UTILE N CADRUL TUTORIALELOR .................. 20 3.1. FORMATE DE IMAGINI .................................................................................................. 20 3.2. FORMATE DE FIIERE AUDIO ........................................................................................ 23 3.3. FORMATE DE FIIERE VIDEO ......................................................................................... 25 CAP 4: GRAFIC COMPUTERIZAT ............................................................................ 27 4.1. PROGRAME ALTERNATIVE ............................................................................................ 27 4.2. IMAGINE DIGITAL....................................................................................................... 29 4.3. SPAII DE CULOARE ..................................................................................................... 30 4.4. TRANSFORMRI GEOMETRICE ...................................................................................... 37 4.5. TEXTUL N GRAFICA COMPUTERIZAT ......................................................................... 39 4.6. ADOBE PHOTOSHOP - SPAIU DE LUCRU I CUTIA DE UNELTE ...................................... 42 4.7. ADOBE PHOTOSHOP - STRATURI, MTI I AJUSTAREA IMAGINILOR ............................ 48 CAP. 5: CAPTUR DE ECRAN I ANIMAII ................................................................ 50 5.1. ADOBE CAPTIVATE ...................................................................................................... 50 5.2. GIF ANIMAT ................................................................................................................. 58 5.3. FLASH .......................................................................................................................... 61 CAP 6: PREGTIREA 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: APLICAII 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 combinaie de text, elemente de grafic, sunete, animaie i secvene video. Cnd se permite unui utilizator s controleze elementele furnizate i momentul furnizrii acestora, atunci multimedia devine interactiv. Conceptul este simplu, implementarea de aplicaii multimedia se poate dovedi mai dificil. Trebuie neleas nu numai modalitatea de a pune n aplicare fiecare element, dar i posibilitile 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 fr interaciune cu utilizatorul, asigur un impact deosebit, astfel nct maxima o imagine face mai mult dect o mie de cuvinte prinde contur, cunoscnd direcii i provocri noi [1]. Nu are importan doar efectul explicit visual al componentei multimedia. Avem de a face i cu o vibraie emoional a simurilor. Hempe (1999) susinea c multimedia poart ntodeauna mesaje ascunse sau semi-ascunse: emoii, franchee, simbolism, competen, experien. Multimedia are prin urmare un istoric bogat, dar rspndirea pe scar larg n trecut a cunoscut limitri datorit costului de producie ridicat i dificultii de distribuire a ei [2]. Era digitalului, dezvoltarea Internet-ului, introducerea de noi tehnologii (ex: streaming, podcast) au reprezentat pai importani n evoluia conceptului. Ca i arie de aplicabilitate multimedia este folosit n medii de afaceri, locuri publice, instituii de nvmnt, de la aplicaii de prezentare ale unor companii sau produse distribuite pe suport optic, pn la site-uri Web unde poi asculta muzic, viziona filme sau seriale, nva lucruri noi prin intermediul tutorialelor de diverse tipuri. Materialele multimedia contemporane minimizeaz gradul de utilizare exclusivist a informaiei text, ctignd teren combinaia 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 astzi online vine ntr-o mare varietate de forme i, aa cum subliniaz Tim Berners Lee n articolul su The Semantic Web (din revista Scientific American), se simte lipsa unei mai bune organizri i integrri a diferitelor tipuri de suporturi media existente. Dezvoltarea accelerat a noi tipuri de software (captur a ecranului, manipulare a nregistrrilor audio i video) a deschis calea unei noi metode de nvare: tutorialul multimedia. Termenul tutorial a ajuns relativ recent n limba romn, nefiind nc recunoscut oficial n forurile de specialitate. Primul pas a fost fcut n jocurile pe calculator complexe, ca o necesitate de a demonstra n mod practic desfurarea jocului, respectiv controlul pe care juctorul l are asupra diferitelor personaje i medii. Mai trziu, a luat forma unor sesiuni de nvare a diferitelor softuri, care pentru un nceptor ar presupune o parcurgere exhaustiv a meniurilor, pe cnd tutorialul propriu-zis este structurat i prezentat ntr-un context uor de asimilat [3]. ntr-un cadru mai larg, tutorialul reprezint o demonstraie aplicativ a unui subiect/proces/soft [3], avnd scopul accenturii aspectului formativ al procesului educaional. n cazul particular al tutorialului multimedia, acesta ia forma unei aplicaii sau a unui suport electronic bogat n coninut media, putnd 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 educaional, fie c este ea un curs, un seminar, o sesiune de comunicri, etc., tutorialul urmrete introducerea participanilor la procesul educativ ntr-un anume subiect, avnd ca scop final asimilarea de ctre acetia a unui minim de cunotine, fr a avea pretenia epuizrii informaiei din domeniul respectiv, ci numai a bazei de pornire, sau a unor cunotine mai avansate, dup caz [3]. Exist ns cteva 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 instruciuni din viaa de zi cu zi. b) concentrarea pe un anume subiect, fr detalii despre conceptele adiacente. Scopul studiului este urmrit asiduu, punndu-se accentul pe modalitatea n care este fcut un lucru i pe nsuirea acestei metodologii de ctre student. ntrebarea dezbtut aici este Cum? i nu De ce? c) metod educaional bogat n coninut media (capturi de ecran statice sau n micare, animaii sau instruciuni audio/video) care s exemplifice paii descrii n cadrul rezolvrii problemei. d) metod eficient i implicit de verificare a cunotinelor - learning by doing - (un tutorial despre funcionarea unui soft presupune ca pachetul software s fie instalat, iar cursantul s aplice cunotinele dobndite n paralel cu urmrirea tutorialului). e) un oarecare grad de informalitate, nu are un cadru temporal strict i nu necesit un mediu specific de desfurare. Un minim de resurse ICT (hardware/software, ct i de cunotine), timp i motivare sunt singurele lucruri necesare pentru nsuirea unui tutorial.

Cap 2: Aspecte teoretice ale realizrii unui tutorial

2.1. Moduri de realizare

Cel mai simplu mod de realizare l reprezint un fiier de tip document (n format .doc sau .pdf), n care se prezint, pas cu pas, realizarea unui proces, algoritm, .a.m.d. El va conine pe lng 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 utiliznd tehnologii Adobe sau complementare. Avantajul este dat de o interactivitate superioar fiierelor de tip document. Utilizatorul interacioneaz cu aplicaia, primind rspuns (feedback) n timp real. Aceast tehnologie poate fi integrat pe un suport online, rezultnd un tutorial accesibil de oriunde. Tutorialele sub forma clipurilor video se realizeaz de obicei prezentnd vizual o captur de ecran (imagini n micare cu operaiile de urmat), pe cnd autorul tutorialului d explicaii n timp real, pe canalul audio. De exemplu, tutorialele Lynda [www.lynda.com] cuprind unul sau mai multe discuri optice pe care se gsete o interfa cu ajutorul creia 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 urmtoare trebuie nelese ca un tot unitar. Exist o ordine cronologic a lor, ns ele se intercaleaz adesea, nefiind posibil o delimitare concis. a) stabilirea subiectului procesului educaional Indiferent c este vorba de utilizarea unui soft, realizarea unei anumite intervenii medicale sau construirea unui avion teleghidat, scopul tutorialului trebuie enunat 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 cursanii cele asimilate pe mai departe, care este ctigul lor dup parcurgerea tutorialului? Formeaz utilizatorii un grup omogen sau provin din medii tehnico-culturale diferite? Se vor lua n considerare vrsta, experiena, background-ul cultural [5] i cunotinele tehnice apriori ale cursantului. De asemenea trebuie hotrt nivelul de dificultate al obiectului de studiu i estimat timpul necesar parcurgerii lui. Dei acestea nu sunt eseniale din punctul de vedere al tutorialului n sine, ele sunt totui importante ntruct 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 investiie n efort/timp prea mare. c) tipul de tehnologie utilizat Pentru subiectele simple, cu un grad relativ sczut de dificultate, un tutorial de tip document poate fi de ajuns. Atta timp ct instruciunile 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 animaii. Prezentarea unei aplicaii va presupune ns ntotdeauna utilizarea unor suporturi vizuale, animate sau audio/video pentru a exemplifica funcionarea softului respectiv. Mediile de dezvoltare specifice (aplicaii online sau care se instaleaz pe calculatorul personal) vin n variante comerciale sau gratuite, diferind n mod evident parametrii de funcionare, facilitile oferite i lista de componente disponibile. Captur de ecran Softuri precum Adobe Captivate sau Camtasia Studio asigur captura de ecran ntr-un mod facil, memornd micrile cursorului, combinaiile de taste apsate,

12 Aspecte teoretice ale realizrii unui tutorial - 2 respectiv efectele acestor aciuni asupra aplicaiei studiate. Rezultatul poate fi editat, pentru a permite cursantului s interacioneze cu tutorialul, pot fi nregistrate secvene audio i video, se permite salvarea n diferite formate. Produsul final const ntr-o animaie (ex: cu extensia .swf), fiier executabil sau chiar fiier document .doc, pierznd ns posibilitatea interactivitii, n ultimul caz [3]. nregistrri audio Elementele audio pot fi capturate cu un simplu microfon conectat la calculator prin intermediul plcii de sunet i utiliznd programul din Windows, Sound Recorder sau utiliznd echipamente profesionale. Pot fi editate folosind aplicaii 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 fiiere audio, pornind de la fiierele necomprimate .wav i pn la cele noi n domeniu .m4a. Softurile permit mbuntirea calitii sunetului, printr-o larg serie de efecte i filtre, precum i editarea pistelor audio prin alturarea a diferite secvene [3]. Adiional o serie de dispozitive hardware profesionale sunt disponibile n funcie de nevoile tehnice ale fiecruia. 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 prezentrii audio finale. Deoarece secvenele video i animaiile au propria lor cronologie [5] (timeline), sincronizarea materialului audio cu acestea necesit o atenie deosebit. Pentru un segment video se recomand includerea prii audio n fiierul video n sine. n final pentru componenta audio, n mod logic i pentru cea video, se alege un format specific pentru salvare n funcie de metodele de distribuire sau publicare online/offline.

Editare video Componenta video necesit adesea abiliti speciale de editare i pregtire pentru a fi inclus n cadrul unui tutorial. Se recomand utilizarea ei doar atunci cnd este strict necesar, mai ales dac exist substituent media mai puin complex. Materialul video instrucional poate fi obinut prin captarea activitii ecranului unui computer (Captivate, Camtasia Studio), nregistrri cu ajutorul camerelor de filmat sau generare de coninut utiliznd programe corespunztoare (secvene 3D, animaii 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 secvenelor video prin decupri i lipiri ale diferitelor pri ale aceluiai clip, prin multitudinea de efecte,

2.2 - Etape 13 prelucrri i filtre pe care le pune la dispoziie (eliminarea zgomotelor, tranziii ntre scene). Editare imagini digitale Manipularea i pregtirea imaginilor pentru un tutorial poate reprezenta un proces facil sau complex n funcie de rezultatul final care se dorete atins. Una dintre metodele simple, mai puin recomandate, este includerea imaginilor n PowerPoint [5], editarea lor cu facilitile 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 operaii pentru imagini: dimensionri, decupri, returi, filtre, modificarea compoziiei i culorilor, de asemenea construirea de la zero pas cu pas a unor elemente grafice deosebite. Programele necesit un bagaj de cunotine mai ridicat, ns rezultatele finale sunt adesea spectaculoase i menin viu interesul celui ce parcurge tutorialul. Procesul de optimizare a imaginilor n vederea obinerii unui raport calitate/dimensiune eficient nu trebuie neglijat. Prezentarea final poate fi de dimensiuni nepotrivite, de exemplu pentru Web, poate duce la timpi de ncrcare mari i la sacadarea materialul multimedia.

Animaii Obiectele animate cresc dinamismul unui material, presupun inventivitate i rbdare n construirea lor, dar i cunoaterea anumitor softuri specifice (Adobe Flash, Gif Animator, Animation Shop, AnimatedGIF, EasyGIF Animator).
Editare text Editarea textului se poate face utiliznd programe de grafic (ex: Adobe Photoshop) pentru obinerea unor efecte cu umbre, gradient, 3D etc., sau pentru editri 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 ecuaiilor i a simbolurilor matematice .a.m.d.

d) structurarea i introducerea informaiei 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 ntrebrile cu rspunsuri multiple sau cu da/nu. Opiunile pentru crearea coninutului sunt limitate doar de imaginaia proprie a fiecrui individ i evident de termenul limit a proiectului/tutorialului. ntre imagini

14 Aspecte teoretice ale realizrii unui tutorial - 2 statice, animaii, video i text exist combinaii infinit de bogate rezultnd diverse materiale vizual expresive pentru aceeai tematic [5]. n momentul crerii unui coninut bazat pe elemente multiple revine n discuie sincronizarea componentelor (audio, imagini, video, animaii etc.). Un utilizator are nevoie de cteva secunde pentru a absorbi [5] informaia vizual nou (ex: o imagine), doar ulterior se poate rula i componenta audio (ex: voce nregistrat). Adiional dimensiunea scenei de prezentare trebuie stabilit n clar. O scen media de dimensiuni 1200x960 rulat pe un monitor cu rezoluie 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: coninutul media rezultat este publicat pe suport optic (CD, DVD), de exemplu aplicaii de prezentare ale unor companii sau modaliti de funcionare ale unor softuri. b) online: tutorialul este publicat pe Internet ca i: coninut media ntr-un site de partajare audio-video (youtube.com, vimeo.com, trilulilu.com) pe baza crerii anterioare a unui cont de utilizator. Aceste aplicaii Web utilizeaz tehnologia streaming care permite vizualizarea fiierului multimedia direct de pe server pe msur ce vin pachetele de date, fr a atepta descrcarea complet. podcast educaional sau de divertisment care permite descrcarea fiierului i rularea lui de pe un dispozitiv mobil. legtura Web (link) care permite descrcarea fiierului media pe calculatorul utilizatorului i rularea lui. parte component a unui site Web propriu. parte component ntr-o clas virtual. Clasa virtual presupune existena unui mediu online unde instructorul (tutorul) i participanii (cursanii) se ntlnesc prin intermediul calculatorului, Internetului i tehnologiilor moderne pentru desfurarea de activiti educaionale [6]. Clas virtual = spaiu + timp + indivizi + interaciune. Clive Shepherd, specialist n Tehnologia Informaiei i Comunicrii n Brighton (Anglia) consider clasa virtual un mix de componente sincrone i asincrone care conlucreaz spre a genera un mediu de nvare online propice asimilrii de noi aptitudini educaionale.

2.2 - Etape 15 Pentru a fi o copie ct mai fidel a unei clase tradiionale, clasa virtual utilizeaz o serie de unelte i elemente, prezentate succint n tabelul urmtor:
Tabel 1: Componentele principale ale unei clase virtuale Elemente La ce servete? Specific pe scurt subiectele/temele ce vor fi acoperite n sesiunea curent, eventual data lor de desfurare n cazul calendarului. Tutoriale, prezentri PowerPoint, ncrcare (upload) i descrcare (download) de fiiere i imagini. Scriere i desene de mn. Tabla interactiv pune la dispoziie diverse componente: forme geometrice, linii, gum de ters, indicatori. Toate acestea ajut n explicarea anumitor tematici participanilor la sesiunea virtual curent. Evaluarea i autoevaluarea participanilor. Transmiterea de mesaje de tip text private sau generale ctre i ntre participani, de exemplu studeni. ntrebrile pentru tutor pot fi adresate prin facilitatea ridic mna, asemntor procesului tradiional. Transmiterea n direct de informaii audio i video. Participanii pot discuta ntre ei prin intermediul audio i video conferinelor. Atrag atenia asupra anumitor pasaje i/sau permit explicaii suplimentare n cazul imaginilor, transparentelor etc. (transparent = slide). Partajarea ecranului calculatorului, a unor aplicaii cu sau fr posibilitate de control de la distan. Permit nregistrri ale sesiunilor n direct, captur de ecran, arhivare i redare ulterioar.

Agend/Calendar

Seciunea de prezentare

Table interactive

Sondaje, chestionare i teste

Chat, Ridic mna

Sesiuni audio i video

Adnotri i marcaje

Partajare ecran Sesiune de comunicare, nregistrare i redare

Rularea coninutului unui tutorial ce conine 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 cnd se dorete rularea unui material video ntr-o pagin

16 Aspecte teoretice ale realizrii unui tutorial - 2 Web este necesar instalarea unui plug-in, unul dintre cele cunoscute fiind cel corespunztor Adobe Flash. Instalare Flash Media Player http://www.youtube.com/watch?v=kVAnbZGxFaY&feature=iv&annotation_id=annot ation_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 fiierelor 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 creterea eficienei unui dezvoltator i perfecionarea propriilor abiliti n procesul de proiectare a tutorialului, precum i remedierea eventualelor greeli conceptuale i/sau de implementare care pot aprea. Dac coninutul multimedia este integrat ntr-un site Web se vor evalua att uzabilitatea aplicaiei online ct i tutorialul n sine. Uzabilitatea cuprinde o suit de caracteristici ale Web-ului cum ar fi accesibilitatea pentru persoane cu dizabiliti, organizare vizual i sintactic, navigare i etichetare, interaciune i afectivitate [5]. Una dintre testele de uzabilitate importante presupune vizualizarea aplicaiilor Web n sisteme de operare diferite (MAC, Windows) i n browser-e diferite (Mozilla, Explorer, Safari, Chrome, Opera). Important este i reacia unui utilizator care acceseaz pentru prima dat site-ul cu tutorialului inclus. Ct de repede observ prezena tutorialului n pagin, poate urma facil acest tutorial? Evaluarea tutorialului presupune alegerea unui personal de evaluare care n urma parcurgerii materialului sau asistnd la o demonstraie din partea dezvoltatorului va putea: rspunde unui set de ntrebri/chestionare concludente. purta o discuie direct, fa n fa pentru semnalarea neregulilor, inadvertenelor aprute etc.

2.3 - Implementri de tutoriale 17 Rmne la latitudinea autorului dac tutorialul creat va fi disponibil n mod gratuit sau va putea fi cumprat. Trebuie ns avut n vedere c un tutorial comercial, ca orice alt produs de pe pia, se supune regulilor competivitii i nu n ultimul rnd, ale drepturilor de autor [3].

2.3. Implementri de tutoriale

Proiectul Leonardo da Vinci II REMOTE (Retail Education Mechanism for On-line Training in Europe), proiect ce a prevzut dezvoltarea unui produs ICT pentru facilitarea educaiei persoanelor cu dizabiliti. Programul a presupus formarea de aptitudini n direcia crerii paginilor Web utiliznd softul Macromedia Dreamweaver, actualmente Adobe Dreameaver dup achiziionarea companiei Macromedia de ctre Adobe. Tutorialul a fost distribuit prin intermediul CD-ului n facultile din rile europene partenere: Germania, Romnia, 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 Timioara, European Association of Distance Teaching Universities, University of East London, University of Plovdiv "Paisii Hilendarski", Kaunas

18 Aspecte teoretice ale realizrii unui tutorial - 2 Regional Distance Education Study Centre) au pus bazele unui numr 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 acelai nume: ViCaDiS - Virtual Campus for Digital Students (2007 - 2009), http://www.vicadis.net/set/demo_ro/index.htm, unealt educaional accesibil pentru studenii din facultile europene care utilizeaz medii educaionale diferite.

Figura 5: Utilizarea campusului virtual ViCaDiS

2.3 - Implementri de tutoriale 19

podcast-uri n cadrul materiilor Proiectare asistat de calculator - PAC (anul 2 de studiu - Tehnologii i sisteme de Telecomunicaii), Proiect multimedia, (anul 4 de studiu - Tehnologii i sisteme de Telecomunicaii), Centrul de nvmnt la Distan

Figura 6: Podcast-uri - curs PAC

Tutorialele amintite au fost dezvoltate sub form de demonstraii (capturi de ecran nsoite de explicaii pe canalul audio) sau sub forma unor materiale interactive, unde captura de ecran propriu-zis este nsoit de explicaii sub form de text i aciuni ce se cer executate de ctre utilizator n mod direct prin folosirea mouse-ului sau a tastaturii.

Orice fel de tutoriale/prezentri video, fiiere pdf sau text ce sunt rspndite n World Wide Web. http://mihai.cm.upt.ro/Proiecte/Didatec/DS/ http://tutorialul.ro/ http://vimeo.com/videoschool http://www.youtube.com, cuvnt cheie tutorial http://www.w3schools.com/ http://tutorials.learn.com http://www.thetutorial.com/ http://www.good-tutorials.com/

Cap 3: Formate de fiiere utile n cadrul tutorialelor

3.1. Formate de imagini

PSD - Photoshop Document Acest format poate conine o imagine asemntoare unui set de straturi incluznd text, mti, informaii despre opacitate, moduri de combinare, canale de culoare, canale alfa, ci de tiere, setri duotone precum i alte elemente specifice Photoshop. Este un format popular i des rspndit n rndul profesionitilor, fiind compatibil cu diverse aplicaii concurente. PSB - Photoshop Large Document Format Este o versiune a formatului PSD, conceput special pentru fiiere mari (2GB) sau cu o informaie prezent pe o suprafa definit de laturi mai mari de 30.000 de pixeli. Suport pn la 300.000 x 300.000 pixeli. Software: Link-uri Adobe Photoshop 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 adncimi de culoare de 1, 4, 8, 24 bii (16.7 milioane de culori). Fiierele BMP se mai numesc i fiiere bump. Software: Link-uri: Paint, ACDSee, Photoshop, CorelDraw 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 ctre CompuServe. Este folosit pentru site-uri Web din cauza dimensiunilor mici ale fiierelor. Suport culori pe 8 bii (256 culori). Gif-urile animate sunt o secven de cadre care se repet. Software: Link-uri: Paint, ACDSee, Photoshop, CorelDraw. 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 decomprimrii informaia 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 spaii ale culorilor RGB, YCbCr, CMYK suportnd culori pe 8-32 de bii. Editarea continu a fiierelor JPEG nu este indicat deoarece de fiecare dat cnd se salveaz fiierul datele suplimentare ale imaginii sunt pierdute n timpul compresiei. Pentru a face modificri ulterioare se recomand salvarea n formatul .psd sau .tiff. Software: Link-uri: Paint, ACDSee, Photoshop, CorelDraw. http://www.jpeg.org/ http://en.wikipedia.org/wiki/Jpeg

PNG - Portable Network Graphics Este un format grafic de fiier recunoscut de cele mai multe browser-e Web de actualitate, considerat adesea o mbuntire a formatului GIF [2]. Formatul accept transparen variabil a imaginilor (canale alpha) i controlul variabil al luminozitii imaginii pe diferite computere (corecie gama). PNG este folosit pentru o gam larg de reprezentri grafice, de la imagini de dimensiuni mici (butoane, forme ondulate), la imagini complexe (fotografii) [2]. Este folosit cu spaiul de culoare RGB (8-24 de bii), ns nu suport grafice profesionale i alte spaii ale culorilor (ex. CMYK). Totui au o larg rspndire n cazul aplicaiilor Web datorit browser-elor suport: Internet Explorer, Safari, Mozilla Firefox, Opera, toate acestea afieaz imagini n format PNG fr a fi nevoie de plug-in-uri. Software: Link-uri: RAW Spre deosebire de JPEG, RAW nu reprezint un acronim misterios ci i are originea n cuvntul englezesc raw care nseamn materie prim. Fiierele RAW pot oferi o plaj mult mai extins de ajustri dect fiierele JPEG: peste 50% mai multe detalii la expunere (acest lucru depinde ns de capacitatea senzorului). Fiierul conine ntreaga informaie furnizat de captator, permind modificarea ulterioar a parametrilor de expunere. Software: Link-uri: BreezeBrowserPro, Photoshop http://artavie.wordpress.com/2009/02/15/raw-sau-jpeg/ http://www.adobe.com/digitalimag/pdfs/transition_from_film.pdf ACDSee, Photoshop http://png.software.informer.com/ http://en.wikipedia.org/wiki/Portable_Network_Graphics

22 Formate de fiiere utile n cadrul tutorialelor - 3 TIFF - Tagged Image File Format Este utilizat pentru schimbul de fiiere ntre aplicaii i platforme pentru calculatoare. Este un format de imagine bitmap flexibil, acceptat de toate aplicaiile 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 adncime de culoare de 8, 16 pn la 32 de bii/canal. Software: Link-uri: ACDSee, Photoshop 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 conine numai pixeli albi i negri. Software: Link-uri: ACDSee, Photoshop http://bmp.software.informer.com/ http://en.wikipedia.org/wiki/Wireless_Application_Protocol_Bitmap_ Format
Tabel 2: Pro i contra GIF [7] Pro Dimensiuni mici ale fiierelor, mai ales cnd se lucreaz cu un numr mic de culori. Pstreaz claritatea imaginii originale. Pixelii nu sunt eliminai, doar poriuni din culoare. Este o alegere optim pentru imagini care accentueaz zone plate, solide de culoare n detrimentul zonelor formate din tonuri, nuane multiple: diagrame,logouri, desene animate, caricaturi, butoane simple, lineart-uri. Conin transparena. Se poate face o culoare transparent astfel nct fundalul din browser s poat fi vizibil - imagini plutitoare. Permit animaii de mici dimensiuni care se ncarc rapid n pagina Web. Contra

Un fiier JPG sau PNG bine optimizat poate fi mai mic n dimensiune dect un fiier cu extensia GIF. Procesul de optimizare depinde de numrul de culori ale imaginii originale i de felul cum pot acestea fi combinate n fiierele JPG sau PNG fr a se pierde informaie.

Nu pstreaz culorile imaginilor. Tonurile continue, gradaiile fine de culoare (umbre, gradiente) pot fi afiate ca simple benzi de culoare.

3.2 - Formate de fiiere audio 23

Tabel 3: Pro i contra JPEG [7] Pro Dimensiunile fiierelor pot fi foarte mici. Compresia funcioneaz cel mai bine atunci cnd imaginile au un contrast redus i zone cu variaii subtile ce nu se observ atunci cnd pixelii sunt combinai sau nlturai. Contra Zonele cu o singur culoare nu vor fi comprimate deloc, astfel nct echivalentul GIF poate avea o dimensiune mai mic Fiierele JPEG nu accept transparen. Nu se pstreaz detaliile fine din imagine. La o rat de compresie mare fiierele JPEG pot aprea ca o suit de blocuri de culori. Se recomand n acest sens alegerea unui raport de compresie potrivit la calitatea imaginii dorit.

Pstreaz culorile imaginii originale. Gradaiile tonurilor de culoare sunt foarte bine conservate, astfel nct gradientul i muchiile fine se pstreaz.

Tabel 4: Pro i contra JPEG 2000 [7] Pro Un control bun al raportului ntre compresie i calitate. Stabilirea dimensiunii fiierului. Poate utiliza opional compresia fr pierderi. Suport imaginile pe 16-bii i tonuri de gri. Pstreaz canale alfa i cele iniiale. Suport transparena. Fiierele JPEG 2000 nu pot fi optimizate pentru Web, utiliznd de exemplu opiunea Save for Web and Devices din Photoshop Contra

Pentru a utiliza acest format de fiier trebuie instalate plug-in-uri opionale att pentru programe de editare profesionale (ex: Photoshop) ct i pentru simpla lor vizualizare n browser, exceptnd Safari.

3.2. Formate de fiiere audio

AIFF (.aif, .aiff) Audio Interchange File Format a fost destinat exclusiv utilizatorilor de Macintosh, cunoscnd n prezent i conceptul de multiplatform [7]. Software: Link-uri: Apple Quick Time Player http://muratnkonar.com/aiff/index.html http://en.wikipedia.org/wiki/Audio_Interchange_File_Format

24 Formate de fiiere utile n cadrul tutorialelor - 3 Flash Un fiier audio se poate importa ntr-un document Flash, se poate edita, salva cu extensie .swf i integra ulterior ntr-o pagin Web. Software: Link-uri: MIDI Musical Instrument Digital Interface a fost iniial dezvoltat ca un standard de comunicare ntre instrumente muzicale. Un fiier MIDI conine de fapt un set de comenzi matematice care descriu o serie de note muzicale. Este util pentru a integra muzic instrumental ntr-un site rezultnd un timp de descrcare (download) mic. Nu este recomandat folosirea lui n cazul vocii umane [9]. Sunetele stocate n formatul MIDI au extensia .mid sau .midi. Software: Link-uri: Adobe Audition, MIDI Converter Studio, MusE http://midiworld.com/ http://www.midi.org/ http://en.wikipedia.org/wiki/MIDI Adobe Flash, Flash Player, 3D Flash Animator, Adobe Captivate http://www.swftools.com/ http://en.wikipedia.org/wiki/SWF

MP3 Face parte din familia MPEG (Moving Picture Expert Group) i combin acurateea i calitatea sunetului cu mrimi de fiier 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: Link-uri: Windows Media Player, Winamp, VLC Media Player http://www.mp3.com http://www.mp3converter.net/ http://en.wikipedia.org/wiki/Mp3

Real Media Acest format a fost dezvoltat de ctre Real Media i ofer suport pentru audiovideo, inclusiv servicii de streaming prin utilizarea protocolului Realtime Streaming Protocol (RTSP). Extensiile cunoscute sunt .rm sau .ram. Software: Link-uri: Real Player, Quick Time http://www.real.com/player/ http://en.wikipedia.org/wiki/RealMedia

3.3 - Formate de fiiere video 25 Wave A fost dezvoltat de IBM i Microsoft. Se poate utiliza de ctre calculatoarele cu sistem de operare Windows i de asemenea de ctre cele mai populare browser-e Web. Sunetele stocate n format WAVE au extensia .wav. Permite ca diferite caliti ale sunetului s fie nregistrate. Folosete rate de 11025 Hz, 22050 Hz i 44100 Hz. Software: Link-uri: Media Player, Winamp http://wwwmmsp.ece.mcgill.ca/documents/audioformats/wave/wave.html http://en.wikipedia.org/wiki/Wav

3.3. Formate de fiiere video

AVI Audio Video Interleave a fost dezvoltat de ctre Microsoft n anul 1992. Este o particularitate a Resource Interchange File Format (RIFF) [8], cunoate de obicei dimensiuni mari ale fiierelor i poate fi rulat cu player-e ca Windows Media Player, Quick Time, Real Player etc. Software: Link-uri: Media Player, Quick Time, Real Player, BSPlayer. http://www.jmcgowan.com/avi.html http://www.freedownloadscenter.com/Search/avi_player.html http://en.wikipedia.org/wiki/AVI

Flash video Dezvoltat iniial de ctre Macromedia, a fost preluat de ctre Adobe. Este unul dintre cele mai populare formate din prezent n aplicaiile multimedia, cunoscnd extensiile .flv i .swf. Software: Link-uri: Adobe Flash, Flash Player, 3D Flash Animator, Adobe Captivate 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 ctre Moving Picture Experts Group. Cunoate mai multe familii [2]: MPEG 1 - standard de compresie video cu rezoluia suportat de 352 x 240 cu 30 de cadre pe secund. Prezint un debit binar de 1,5 Mb/s, n scopul stocrii imaginilor video precum i a sunetului stereo asociat pe CD-ROM.

26 Formate de fiiere utile n cadrul tutorialelor - 3 MPEG 2 - nglobeaz mai multe canale audio de nalt fidelitate, fiind folosit cu precdere n transmisiile digitale prin satelit i la codarea coninutului discurilor DVD. MPEG 4 - este un standard de compresie grafic i video, conceput s transmit informaiile pe lime de band redus. Ofer spaiu redus la nregistrare, controlnduse calitatea imaginii proporional cu banda ocupat. Se utilizeaz n supraveghere, telecomunicaii mobile i streaming pe Web. Formatul .mp4 (H264) a devenit popular n distribuia unor materiale de nalt definiie . MPEG 7 - mai este denumit i Interfaa de Descriere a Coninutului Multimedia (MCDI - Multimedia Content Description Interface). MPEG 21 - definete pentru multimedia mai multe cadre de lucru care s ofere un coninut ct mai creativ productorilor, creatorilor i distribuitorilor. Software: Link-uri: Media Player, Quick Time, Real Player, BSPlayer, KMplayer http://www.mpeg.org http://en.wikipedia.org/wiki/Moving_Picture_Experts_Group

(Apple) QuickTime A fost introdus n scen n anul 1991 de ctre firma Apple, de aici i denumirea lui. Cel mai popular format pentru Web dezvoltat este .mov, derivat de la englezescul movie (film). Software: Link-uri: QuickTime Player, VLC Media Player http://www.apple.com/quicktime/download/ http://en.wikipedia.org/wiki/QuickTime

Windows Media Video Reprezint rspunsul companiei Microsoft la rzboiul formatelor video n aplicaii Web [8]. Cunoate extensia .wmv. Software: Link-uri: Windows Media Player, VLC Media Player 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 att amatorilor ct i profesionitilor n domeniu. Elementele prin care Photoshop se difereniaz de aplicaiile concurente i prin care stabilete noi standarde n industria prelucrrii de imagini digitale sunt: seleciile, straturile (Layers), mtile (Masks), canalele (Channels), retuarea i optimizarea imaginilor pentru Web. nainte de a face o trecere prin programul n sine trebuie nelese anumite concepte ca noiunea de imagine digital, spaii de culoare, fonturi sau transformri 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 executrii diverselor modificri cum ar fi retuarea fotografiilor, a compoziiei imaginii sau construcia imaginilor. Prezint i un oarecare suport pentru grafic vectorial [10]. Studeni 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 interfeelor grafice. Deoarece acest instrument necesita o licen, cei doi au creat o alternativ surs gratuit (open source), denumit GTK [10]. n primvara anului 1997 cei doi au absolvit facultatea i au abandonat n mare msur proiectul GIMP. Dup o vreme mai muli voluntari au recuperat codurile i au revitalizat proiectul, n etapa iniial, programul numindu-se General Image Manipulation Program, dar ulterior litera G din acronim a fost folosit spre a arta c este liceniat sub licena GNU GPL ca software liber. Versiunea curent a GIMP funcioneaz 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 bii, existnd 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 aa mai departe, ca atare GIMP folosete 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 selecie i transformare.

28 Grafic computerizat - 4

Figura 7: Interfaa 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, posibiliti pentru anulare operaie, efecte speciale i o mare varietate de instrumente utile. O comunitate online activ i n cretere ofer sprijin n realizarea de elemente grafice, tutoriale i plugin-uri.

Figura 8: Interfaa Paint.NET

Creat iniial de ctre 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 opaciti i transparene.

4.2 - Imagine digital 29

Paint.NET este programat n limbajul de programare C i funcioneaz exclusiv cu Windows, neexistnd pn n prezent o versiune pentru alte sisteme de operare. http://download.cnet.com/Paint-NET/3000-2192_4-10338146.html Aplicaiile enumerate n paragrafele anterioare sunt aplicaii desktop, pentru a funciona ele trebuie instalate pe calculatorul propriu. Lumea tehnologiei moderne propune i aplicaii online gratuite, evident cu un numr redus de parametri i posibiliti de editare, totui agreate datorit acestei flexibiliti n manipularea lor: oricnd, oriunde avem conexiune la Internet. Aplicaiile online nu necesit descrcare, cumprare sau instalare, totui 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 crora imaginea poate fi refcut (Adobe Flash, CorelDraw) - grafic vectorial discretizarea imaginii ntr-un numr de elemente pe orizontal i vertical, ct 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 fiier BMP termenul utilizat mai frecvent dintre cele amintite va fi cel de imagine raster.

Pentru a afia un cerc de exemplu, acesta poate fi memorat ntr-o imagine de tip raster (bmp, jpg). Vor fi memorai nu numai pixelii de pe circumferina cercului ci i cei din interiorul acestuia sau care sunt n jurul su. n cadrul formatelor vectoriale (SVG - Scalable Vector Graphics, SWF ShockWave Flash) sunt reinute doar centrul i raza cercului, calculatorul genernd prin metode de afiare specifice toate celelalte puncte ce vor alctui cercul. Cnd mrim o imagine de tip vectorial nu facem dect s redesenm o parte a sa, calculatorul rednd cercul cu aceeai claritate. Se cunoate forma geometric reprezentat i mrirea imaginii nu reprezint dect trasarea (la scar) a fostei imagini vectoriale. Atunci cnd mrim o imagine de tip raster operaia va consta n supradimensionarea pixelilor (un pixel al cercului va fi afiat 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 iniial i schimb succesiv culoarea pn cnd 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 oricrei reprezentri vizuale (nu ntmpltor aplicaiile grafice de tip raster se mai numesc programe de pictur). Conturul de exemplu, n grafica raster este linia imaginar care formeaz grania ntre dou zone diferit colorate dintr-o imagine [11]. Calitatea reprezentrii digitale a imaginilor raster reiese prin definirea parametrului rezoluie ca fiind densitatea de elemente pe unitatea de lungime. n acest fel putem vorbi de imagini cu rezoluia de 100 pixeli pe cm sau 300 pixeli pe inch, n funcie de unitatea de msur aleas. Denumirea de pixeli este uneori nlocuit cu points sau dots, denumiri preluate din mediul tipografic. n mod curent se utilizeaz ca msur pentru rezoluie dots per inch sau dpi [7]. Pentru calculator coninutul unor imagini de tip raster de aceeai dimensiune nu este important, deoarece numrul de pixeli este identic indiferent dac imaginea reprezint un grup de oameni sau o cldire. Interpretarea coninutului se face la nivelul psiho-vizual al omului, la nivelul creierului uman practic i nu n interiorul calculatorului [11].

4.3. Spaii de culoare

O compoziie grafic folosete un numr limitat de culori, alegerea acestora nefiind o sarcin facil aa cum pare la prima vedere. Utilizarea culorilor trebuie s se subordoneze unor criterii de natur estetic i funcional, fr de care ntregul proces de creaie poate deveni inutil. Spectrul de culori este un interval continuu ce conine culori diverse, aa cum reiese din tabelul urmtor [10]:
Tabel 5: Culori ROGVAIV Culoare Rou (Orange)Portocaliu Galben Verde Albastru Indigo Violet Lungime de und (nm) 800-650 640-590 580-550 530-490 480-460 450-440 430-390 Frecven (GHz) 400-470 470-520 520-590 590-650 650-670 700-760 760-780

4.3 - Spaii de culoare 31 Spectrul vizibil se continu n ambele capete, cu infrarou i respectiv ultraviolet, radiaii pe care sistemul vizual uman nu poate s le perceap.
Radiaii optice 10-14 Raze cosmice 10-12 Raze 10-10 Raze X 10-8 10-7 10-6 Radiaii ultraviolete Radiaii infraroii 10-3 Unde radio 104 [m]

Radiaii vizibile

Albastru

Verde

Rou

380

470 B

535 G

610 R

780

[nm]

Figura 9: Spectrul radiaiilor electromagnetice [12]

Aplicaiile de grafic pun la dispoziia utilizatorului o serie de palete coloristice ntr-o form care permite selecia intuitiv a culorilor dorite i n acelai timp ine cont de caracteristicele dispozitivului electronic de afiare, n spe de cele mai multe ori monitorul calculatorului, eventual ecrane LCD, plasme sau LED-uri [11]. Cnd se vorbete despre culori exist cteva caracteristici de care se ine seama: nuana (culoarea de baz a unui obiect), saturaia (gradul de puritate al culorii), luminozitatea (strlucirea culorii) [12]. De-a lungul timpului au fost dezvoltate mai multe metode de prezentare a senzaiei vizuale, concretizate n ceea ce numete literatura de specialitate: spaii de culoare. Cel mai simplu, utilizat i comentat spaiu de culoare este RGB. Se regsete n echipamentele de studio TV, n sistemele de prelucrare a imaginii i n comanda monitoarelor de calculator, unde pe primul plan sunt performanele privind calitatea imaginii [12]. Bazat pe un set de 3 culori primare (de referin): R (red = rou), 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 obine prin suprapunerea (prin adunarea) n anumite proporii a trei radiaii monocromatice riguros definite, situate, n acest caz, n domeniile de rou, 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 obinut ca rezultat al amestecului celorlalte dou [13]. Se poate asimila acest model cu un cub al culorilor, ca n figura urmtoare:

Figura 10: Cubul RGB [11]

O alt modalitate de reprezentare a culorilor presupune alegerea unui sistem de coordonate XYZ n care coordonata Y corespunde luminanei culorii respective. Astfel se obine spaiul de culoare CIE XYZ. Transformarea din spaiu RGB n spaiul XYZ se face cu ajutorul relaiei [10]:

0,2 X R 0,489 0,31 G = 0,176 0,813 0,011 Y B 0 0,01 0,99 Z

Figura 11: Diagrama de cromaticitate CIE XYZ [13]

4.3 - Spaii de culoare 33 Revenind la modul RGB, fiecrei culori i corespunde un punct n interiorul cubului, descris prin coordonatele sale RGB. De exemplu un punct a crei coordonate sunt R=255, G=0, B=0 corespunde unei nuane de rou. Diagonala mare a cubului reprezint nivelele de gri, ceea ce nseamn c ntotdeauna pentru alb, negru sau nuane de gri cele trei valori RGB vor fi egale. Cnd toate valorile sunt 255 rezultatul este culoare alb pur, cnd toate valorile sunt 0 rezult culoare negru [13]. Suprafeele exterioare ale unui spaiu de culoare (n cazul cubului feele acestuia) formeaz gama de culori a spaiului, adic limita celor mai saturate culori ce pot fi obinute pentru fiecare nuan [11]. Prin urmare culoarea fiecrui pixel din imagine este dat de 3 valori diferite, fiecare dintre ele descriind intensitatea uneia dintre culorile primare componente. Iniial s-au ales 256 de nivele diferite de intensitate pentru fiecare culoare primar (codare pe 8 bii - 28 = 256). Rezult c fiecare pixel este reprezentat pe 3 x 8 = 24 bii, acest parametru fiind cunoscut ca i adncime de culoare. Imaginilor digitale, pe lng componentele de lime (width) i nlime (height), li se adaug adncimea rezultnd o reprezentare sub forma unei matrici tridimensionale [11]. Se poate astfel calcula pe baza dimensiunii rezultate din aceti parametri necesarul de memorie pentru stocarea unei imagini. Pentru adncimea de culoare se pot alege valori diferite, iat cteva exemple: 8 bii (256 culori), 16 bii (65536 culori) sau 24 bii ( peste 16 milioane de culori). Prin reducerea numrului de bii nu se schimb modul de afiare ci se micoreaz sau mrete numrul de culori pentru reprezentarea imaginilor [11]. O imagine care conine culori din afara paletei va fi totui afiat, ns cu modificrile de rigoare. Sistemul va nlocui culorile lips cu cele mai apropiate culori disponibile, cu un plus de atenie ns atunci cnd modificrile pot deveni deranjate dac reducerea numrului de culori este semnificativ, de la cteva milioane la sute. De reinut c imaginea iniial poate fi refcut prin trecerea invers a paletei de culori cu un numr inferior, la paleta de culori cu un numr superior [13]. Unul dintre motivele modificrii efective a adncimii de culoare se reflect n dorina de a reduce spaiul de memorie necesar stocrii materialului digital foto. Deoarece descompunerea unei culori n componente cromatice are sens doar din punct de vedere teoretic i reflect modul n care funcioneaz diferitele dispozitive de afiare (spaiul RGB), respectiv tiprire (spaiul CYMK), se ofer un alt model mai apropiat modului de percepie al sistemului vizual uman i poart denumirea de HSV. Acest model descrie o culoare prin nuan (H Hue), saturaie (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 spaiului HSV [10]

n strns legtura cu cele de mai sus este modelul HSL unde H (hue = nuan), S (saturation =saturaie), L (luminance = luminan sau strlucire). Acest model pune n eviden cele dou componente ale imaginii n culori [13] : luminana, ca purttoare a informaiei de strlucire a elementelor de imagine; crominana, ca purttoare a informaiei de culoare, cu componentele sale: nuana, dat de lungimea de und, i saturaia, dat de coninutul de alb. n figur se prezint relaia ntre cele dou modele RGB i HSL.

Alb

Luminan Verde Saturaie Negru Albastru Nuan Rou

Figura 13: Modelul HSL [12]

4.3 - Spaii 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 stabilete nivelul planului de culoare, pe axa vertical, de la negru la alb. Vectorul crominan definete nuana culorii, prin faza de rotaie, i saturaia culorii, prin modulul vectorului [12]. Modelul HSL utilizeaz parametri care necesit un anumit grad de prelucrare motiv pentru care este folosit cu precdere n interfeele grafice, asigurnd un control simplu din partea utilizatorului. n sistemul de operare Windows alegerea culorii (de exemplu, pentru fundal) se poate face att n formatul RGB, ct i n formatul HSL. n grafica computerizat se utilizeaz i alte modele n funcie de preferinele fiecrui grafician/dezvoltator sau n funcie de rezultatul final care se dorete obinut. Iat cteva exemple extrase din Adobe Photoshop:

Indexed Color - model pe 8 bii (256 de culori). Cu toate c numrul de culori este limitat, acest spaiu de culoare asigur o calitate optim n cazul anumitor prezentri multimedia (tutoriale) sau pagini Web. Editrile asupra imaginilor de acest gen sunt limitate, motiv pentru care trebuie adesea convertite n spaiul de culoare RGB. Fiierele pot fi salvate ca i formate .psd, .bmp, .gif, .png sau .tiff. CMYK (Cyan Magenta Yellow Black) - este spaiul de culoare care se recomand pentru pregtirea imaginilor care vor fi tiprite ntr-o tipografie. Numrul de culori este variabil depinznd de setarea spaiului de lucru, specificat n csuele de setare culoare corespunztoare softului utilizat. n modul CMYK fiecrui pixel i se atribuie o valoare procentual, rezultnd de exemplu pentru un rou aprins/nchis urmtoarele setri: 0% cyan, 95% magenta, 95% yellow i 0% black. Lab Color - este un model bazat pe percepia uman real n privina 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 csua de alegere a culorii Adobe Color Picker avem dou componente: a (axa verde-rou) i b (axa albastru-galben) care iau valori de la +127 pn la 128. Se pot salva imagini pe 16 bii/canal i n formate ca .psd, .raw, .tiff sau .psb. Grayscales este un spaiu de culoare care utilizeaz reprezentarea imaginilor n nuane de gri i o adncime de 8 bii/canal rezultnd astfel 256 de nuane de gri.

36 Grafic computerizat - 4

Duoteones permite crearea de imagini utiliznd 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 fiiere populare ca GIF i JPG. Modul de culoare ales afecteaz felul n care imaginea este afiat. Utilizarea a 256 culori (sau mai puine) este de bun augur pentru afiarea imaginilor care conin un numr limitat de nuane, dar nu i pentru afiarea imaginilor full color [7]. De obicei n aplicaii multimedia se lucreaz cu ceea ce se cheam culori hexazecimale, culori definite de programatori pentru reprezentarea nuanelor 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 rou - #ff0000. Numerele hexazecimale sunt uor de utilizat n Adobe Captivate, cod HTML sau alte limbaje de marcare pentru a specifica culoarea textului i a fundalului unei pagini sau interfee grafice. Dei obinerea unor culori optime a fost n primul rnd o provocare pentru materiale printate, acest deziderat apare i n cazul aplicaiilor pe calculator. Imaginile vor fi vizualizate pe monitoare i sisteme de operare diferite, ceea ce nseamn c vor fi afiate diferit. n plus browser-ele Web interpreteaz i ele diferit imaginile n formate diferite. Prin urmare este de bun augur s se urmeze cteva recomandri n privina setrii culorilor [7]: Pregtirea unui mediu optim de editare a imaginilor. Se alege o culoare gri pentru ecranul calculatorului, eliminnd alte elemente care pot distrage atenia.

4.3 - Spaii de culoare 37

Calibrarea monitorului. Alegerea spaiului de culoare (sRGB). Dac se utilizeaz imagini n mai multe browser-e Web, se seteaz opiunea de Web Graphics Default. Aceast setare permite redarea imaginilor n spaiul de culoare (s)RGB i sporete ansele afirii imaginii n mod corect i consecvent. Convertirea oricror documente cu imagini la spaiul de culoare sRGB: Edit > Convert to Profile, respectiv (s)RGB n fereastra nou aprut. Salvarea pentru Web - File > Save for Web&Devices.

4.4. Transformri geometrice

Transformarea geometric este un procedeu de modificare a coordonatelor unui punct sau a unui grup de puncte prin specificarea parametrilor de ansamblu ai modificrii respective. Modificrile geometrice se fac pe seama unor selecii apriori, unde selecia 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 cnd toi pixelii marcai vor fi n concordan cu parametrii globali ai transformrii. n procesul de transformare este posibil ca o parte din pixeli s ajung nafara imaginii, caz n care ei sunt pierdui, sau de asemenea s rmn pixeli descoperii [11]. n acest din urm caz pixelii nu pot fi eliminai complet datorit faptului c imaginile de tip raster sunt continue (fr goluri), ca i soluie se recurge la colorarea lor cu o anumit nuan aleas de utilizator. Translaia este procedeul de deplasare n spaiul bidimensional a unui element grafic prin modificarea cu aceleai valori a coordonatelor tuturor punctelor din componena sa. Translaia las neschimbat dispunerea relativ a pixelilor n selecia fcut, modific doar poziia lor n cadrul imaginii. Prin efectuarea operaiei inverse se reface imaginea iniial [7]. Rotaia const n deplasarea elementelor grafice pe un arc de cerc sau pe un cerc (0-1800) al crui centru poate fi specificat de utilizator. Aceast operaie modific poziia 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 manipulm imagini de rezoluie sczut i poate fi pus uor 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 Micorarea imaginii presupune reducerea numrului de pixeli din selecie, prin calcule i aproximri programul decide pixelii ce trebuie eliminai i realinieaz pixelii rmai pentru a asigura continuitatea imaginii [11]. Aplicarea transformrii inverse nu va putea conduce la refacerea informaiei iniiale, deoarece computerul n acest caz este un dispozitiv de procesare i calcul, nu de adugare de informaie. Multiplicarea numrului de pixeli se face pe seama celor existeni deja, iar rezultatul unei scalri prin mrire exagerat devine o imagine cu zone uniform colorate, de form ptrat sau dreptunghiular (n funcie de raportul de aspect al pixelului 1:1, 2:1 etc.), uor de distins de ctre 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 puin semnificativ la micorare datorit limitrilor ochiului uman care nu percepe detalii sub o anumit dimensiune, ns semnificativ n cazul mririi exagerate i necontrolate. Antialinierea este o metod de netezire a marginilor unor forme geometrice pentru ca acestea s dobndeasc un caracter mai natural, mai firesc. Procesul de rasterizare implic o anumit aproximare a poziiei pixelilor ale cror coordonate iniiale nu mai sunt numere ntregi n urma calculelor survenite ca i rezultat a unor transformri. Orice form ale crei 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 vzut de aproape s apar ntotdeauna segmentat. Antialinierea (manual sau automat) vine ca i o rezolvare la aceste inadvertene. Antialinierea se utilizeaz att la construirea formelor geometrice propriu-zise (ptrat, dreptunghi, cerc, elips), ct i n aplicarea transformrilor amintite anterior prin netezirea contururilor rezultate n urma rotaiei sau scalrii 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 rotete 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 cnd utilizatorii sunt cunosctori n domeniul redactrii materialelor n format electronic. Totui caracterele trebuie privite i din alte puncte de vedere, n mod special cnd facem referire la grafica computerizat. n evoluia lor pe scara istoriei caracterele au fost considerate la nceput ideograme [11], fiind expresia unui cuvnt sau a unui concept (scrierea chinezeasc de astzi fiind un bun exemplu). n esen ele rmn mici desene indiferent dac sunt tiprite pe hrtie, sculptate pe faada unui monument sau afiate pe monitoare de calculator sau TV. Atunci cnd se discut de text n mod implicit se face referire la fonturi. Acestea sunt o colecie de caractere avnd acelai design, dimensiune, stil i grosime. n grafica computerizat caracterele sunt considerate literele alfabetului, cifrele de la 1 la 9, semnele de punctuaie i totodat alte simboluri speciale dac este cazul. Exist un standard de codare la scar internaional, care se numete ASCII (American Standard Code for Information Interchange) astfel nct fiecare caracter s aib un cod de identificare unic ntr-o tabel i s fie recunoscut de ctre orice sistem de calcul. n acest mod specificarea unui anumit cod va avea ca rezultat afiarea de fiecare dat a aceleai litere indiferent de fontul folosit [10]. O prim clasificare a fonturilor se face dup design i form evideniindu-se trsturile comune regsite n conturarea tuturor caracterelor din acel font [11]. Colecia de fonturi avnd acelai design, ns reprezentnd diferite mrimi, stiluri i grosimi se numete 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 cteva caracteristici ale fonturilor care difer n cadrul aceleiai familii: dimensiune, grosime i stil, caracteristici ce vor fi analizate succint n paragrafele urmtoare. Caracterele sunt forme grafice cu o anumit lime i nlime. Limea unui caracter (numrul de caractere pe o anumit unitate de lungime) se numete pitch. Dac toate caracterele au aceeai lime, fontul este monospaiat (fixed pitch), ceea ce nseamn de exemplu c literele I i M vor ocupa acelai spaiu. n marea majoritate a aplicaiilor se recomand fonturile numite proporionale (variable pitch), ceea ce nseamn c variaia limii este funcie de forma caracterului, cu alte cuvinte I i M nu vor mai ocupa acelai spaiu [11]. Aspectul fontului este influenat de utilizarea unei linii subiri 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 msur pentru ele i se regsesc variante ca Bold, DemiBold, Regular, Bold Italic, Narrow, Black i Italic. n funcie de caracterele utilizate i de mrimea lor se poate utiliza efectul de antialiniere (anti-aliasing), oferindu-se mai multe metode n aceast direcie: None, Sharp, Crisp, Smooth, Strong. Procesul de anti-aliasing este o tehnic utilizat n grafica computerizat pentru optimizarea afirii elementelor pe ecran. Efectul netezete formele prin introducerea unor pixeli intermediari la grania/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 compoziie grafic este o comand manual realizabil prin modificarea mrimii n puncte a fontului, prin deformarea caracterelor deja scrise sau mrirea spaiului dintre ele. Se atrage atenia asupra faptului c la aceeai mrime n puncte (12, 14 etc.) un font poate s arate mai mare sau mai mic comparativ cu un altul. Toate aceste operaii ncheiate sunt urmate de cele mai multe ori de alinierea textului n pagin sau pe o imagine. Principalele modaliti de aliniere sunt: la stnga, la dreapta, mijloc i justify. Text aliniat la stnga 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 corespunztor ine i de specificul a ceea ce se dorete realizat: o interfa grafic pentru un site Web, o copert a unei cri contemporane sau care dezvolt subiecte de istorie, material foto pentru un tutorial sau un afi promoional.

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 cnd se doresc fonturi speciale (figura 16) este nevoie de cumprarea lor (familii de fonturi comerciale) sau descrcarea lor de pe site-uri gratuite: http://www.1001freefonts.com/

4.6. Adobe Photoshop - spaiu de lucru i cutia de unelte

Programul Adobe Photoshop conine un set de instrumente de lucru, fiecare avnd proprietile specifice i fiecare contribuind ntr-o msur sau alta la realizarea, editarea sau prelucrarea unor interfee grafice (imagini, text, forme geometrice) pentru a putea fi incluse sau utilizate ntr-un tutorial multimedia sau ntr-o aplicaie 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 - Spaiu de lucru i cutia de unelte 43 Ea cunoate o serie de componente, cele importante fiind:

Bara de meniu - meniuri organizate pe sarcini. Bara de opiuni - opiuni pentru folosirea unei unelte. Cutia de unelte - unelte folositoare pentru crearea i editarea imaginilor. Zona activ - afieaz fiierul deschis i zona pe care se lucreaz efectiv. Paletele - ajut la monitorizarea i editarea imaginilor. Locaia lor n spaiul de lucru poate fi modificat.

Cutia de unelte se poate muta prin tragerea barei de titlu sau se poate ascunde/afia prin accesarea Window > Tools. O parte din unelte nu pot fi vzute deoarece sunt ascunse pentru o mai bun organizare. Afiarea lor presupune apsarea (mai mult timp) pe butoanele care au un triunghi mic n colul dreapta-jos. Uneltele Photoshop au fost alese astfel nct s simuleze ct mai bine instrumentele clasice de desen i pictur, dar totodat s asigure aciuni multiple i suplimentare fa de ceea ce poate obine un artist fr 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 inspiraie Internetul, mai precis o serie de forumuri sau siteuri Web dedicate celor ce doresc s dezvolte coninut i grafic n Photoshop: http://www.tutorialul.ro, http://www.evoec.com/forum http://www.linkmania.ro/forums http://www.brusheezy.com Unelte de selecie Selecia definete o anumit zon dintr-o imagine, precum i conturul propriu-zis al zonei selectate. Pentru a prelucra poriuni din imagini este necesar aceast izolare sau marcare a prilor constituente pentru a nu fi afectat i restul imaginii. Unealta de marcare (Selection Tool) delimiteaz o zon rectangular (dreptunghi, ptrat), oval (cerc, elips) sau de un singur rnd.

44 Grafic computerizat - 4

Unealta de mutare (Move Tool) permite deplasarea seleciilor, straturilor (layer), liniilor ghidante etc.

Unealta de lasou (Lasso Tool) permite realizarea unor selecii cu mna liber, zone de forme neregulate prin urmrirea cursorului pe ecran sau trasnd 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 poriune de imagine care conine o singur culoare sau nuane apropiate ale aceleiai culori de baz. n general forma rezultat este extrem de neregulat. Unelte de tiat

Unealta decupare (Crop) taie imaginea la dimensiunile rezultatele n urma deplasrii mouse-ului n imagine.

Unealta de feliat (Slice Tool) creeaz felii la dimensiunile specificate. Aceasta se folosete la salvarea imaginilor i optimizarea lor ulterioar pentru aplicaii Web.

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

4.6 - Spaiu de lucru i cutia de unelte 45 Unelte de retuat

Pensula de vindecare a petelor (Spot Healing Brush) ndeprteaz defectele sau obiectele nedorite.

Pensula de vindecare (Healing Brush) ajut la nlturarea imperfeciunilor din imagini.

Unealta de petic (Patch Tool) repar imperfeciuni ntr-o zon selectat din imagine folosind o mostr.

Unealta nlturare ochi roii (Red Eye ndeprteaz efectul nedorit de roire a ochilor.

Remover)

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) ndeprteaz 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 nceoeaz parte din imagine.

Unealta Sharpen ascuete 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) nnegrete parte din imagine.

Unealta Sponge schimb saturaia unei pri 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 intensiti, cu margini bine definite sau confuze.

4.6 - Spaiu de lucru i cutia de unelte 47

Creionul (Pencil Tool) este utilizat la crearea unor linii subiri, cu margini bine definite. nlocuitor de culoare (Color Replacement Tool) nlocuiete culoarea selectat cu o culoare nou (specificat de utilizator). Pensula artistic de istorie (Art History Brush) picteaz cu modele stilizate simulnd pictura real.

Unealta de pictare n gradient (Gradient Tool) este folosit la crearea unor combinaii liniare ntre mai multe culori. Unealta gleat (Paint Bucket) umple zone similare cu culoarea aleas. Se utilizeaz atunci cnd se dorete umplerea rapid a unui anumite poriuni cu o culoare, operaie mai eficient de exemplu n acest caz dect 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 selecie 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 dispoziie de program sau importat.

48 Grafic computerizat - 4 Unelte de notie, msurare i navigare Uneltele de notie (Annotation Tool) permit introducerea de adnotri pe imagine.

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

Unealta de msurat (Measure Tool - Ruler) este folositoare pentru msurarea distanelor, locaiilor i a unghiurilor.

Mna (Hand Tool) mut imaginea nuntrul ferestrei de lucru.

Unealta Zoom mrete sau reduce zone din suprafaa vizibil a unei imagini.

4.7. Adobe Photoshop - Straturi, mti i ajustarea imaginilor

Organizarea fiierelor pe straturi ofer o mai mare flexibilitate n lucru, permind realizarea unor compoziii din imagini, forme geometrice, efecte sau informaii text, toate suprapuse ntr-o manier plcut i eficient. Organizarea pe straturi permite unui utilizator s suprapun peste imaginea de baz mai multe straturi editabile independent, asemntoare unor coli cu transparene variabile [11]. Aciunile pe un astfel de strat nu altereaz imaginea de pe alte straturi, de exemplu desennd o linie pe un strat nou putem utiliza radiera la capacitatea maxim pentru a terge linia, fr a ne pune problema deteriorrii celorlalte zone din spaiul de lucru. Prin schimbarea poziiei straturilor unul fa de altul, prin ascunderea unora dintre ele sau vizualizarea doar a celor considerate utile ntr-un anumit moment, se pot obine ntr-un mod flexibil combinaii de imagini interesante. Opiunile suplimentare legate de straturi permit gruparea lor n directoare, unirea mai multor straturi, aplicarea de efecte, ajustri i corecii ale parametrilor imaginii de pe un strat i posibilitatea utilizrii mtilor.

4.7 - Straturi, mti i ajustarea imaginilor 49 Fereastra cu straturi arat toate straturile existente, poate crea unele noi sau aduga efecte. Se ascunde/afieaz prin accesarea Window > Layers sau prin apsarea butonului F7. Pentru a afia straturile dintr-un grup se apas pe triunghiul din stnga grupului. Efectele pe strat sunt efecte speciale introduse n Photoshop pentru a stiliza coninutul 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 parial sau total a ntregii matrici de pixeli corespunztoare 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 transparena/opacitatea straturilor. Zonele transparente sau semitransparente pot fi asigurate i prin utilizarea unor procedee, poate o idee mai complexe, numite mti. Masca este o imagine de aceeai dimensiune cu imaginea original coninnd 256 de nuane de gri dispuse ntre alb i negru [11]. Nivelul de alb i negru determin vizibiliti extreme ale mtii, n timp ce nivelurile de gri determin gradul de transparen variabil n funcie de intensitate. Aplicarea mtii nu terge imaginea iniial, ea poate fi refcuta rapid doar prin nlturarea simpl a efectului de masc aplicat. Orice modificare a vizibilitii unei imagini se face doar prin acionare asupra mtii corespunztoare, fr a afecta structural imaginea propriu-zis. Prin analogie, orice modificare a nivelelor de gri ale mtii duce la modificri n gradul de vizibilitate al imaginii originale. Fiind la rndul ei o imagine, masca poate fi prelucrat utiliznd instrumente puse la dispoziie de programul respectiv. Singura diferen apare din faptul c nu vor fi disponibile dect nuanele de gri din paleta curent [11]. Programul Adobe Photoshop cunoate trei tipuri de mti:

mti de straturi (Layer Masks). Se utilizeaz n corelaie cu uneltele de pictare (Brush Tool, Gradient) sau selecie. Reveall All creeaz o masc umplut cu alb care arat stratul. Hide All creeaz o masc umplut cu negru care mascheaz, ascunde stratul. mti de tip vector (Vector Masks). Sunt create cu Pen Tool sau Shape Tools. mti de tiere (Clipping Masks).

Ajustarea imaginilor se poate face prin metode de corecie a acestora sau prin aplicarea multitudinii de filtre pe care le ofer programul: ajustarea tonurilor (modificarea histogramei), desaturarea imaginii, corecia saturaiei culorii, modificarea contrastului i strlucirii, ajustarea balansului de alb, corecie selectiv a culorilor, filtrare artistic, pixelare i distorsiuni, filtre de blur, adugare de zgomot, stilizri i texturi.

Cap. 5: Captur de ecran i animaii

5.1. Adobe Captivate

Iniial dezvoltat de Macromedia sub denumirea de RoboDemo i preluat ulterior de ctre Adobe odat cu achiziionarea companiei sus amintite, programul Captivate ofer posibilitatea dezvoltrii de simulri pe calculator fr a avea cunotine sau aptitudini avansate n domeniul multimedia sau mai ales al programrii Web. Adobe Captivate permite capturarea i nregistrarea activitii ecranului i sincronizarea materialelor audio i video. Asigur dezvoltarea rapid de materiale didactice pentru instruire complex pe baz de scenariu, realizarea de prezentri multimedia online i teste aleatorii cu rspunsuri variate. Simulrile Captivate sunt de fapt tutoriale multimedia sub form de demonstraie cu sau fr explicaii pe canalul audio, tutoriale interactive, chestionare sau formulare de instruire a personalului.

Figura 18: Crearea de noi fiiere Adobe Captivate

Din pagina de ntmpinare a programului (pagina de start) se pot alege variantele:

Blank Project - deschiderea unui proiect gol, fr nici o nregistrare sau captur iniial. Se pot adaug ulterior nregistrri 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 ncrcat pe un slide separat.

5.1 - Adobe Captivate 51

Template - realizarea unei simulri pornind de la un ablon de proiect deja existent. Este util n cazul n care multiplii autori lucreaz la module distincte n cadrul aceluiai proiect i trebuie respectate principii comune de grafic, aezare i poziionare a obiectelor n scen. Aggregator - combinarea mai multor fiiere .swf. Materialele corelate pot fi salvate n acelai format din nou sau ca i fiiere .exe, .pdf, respectiv .html. Cuprinsul simulrii noi rezultate este format din numele fiecrui 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 aplicaii (Application). n cel de al doilea caz se poate restriciona zona de nregistrare la: fereastra aplicaiei active (Application Window) - potrivete zona de nregistrat la dimensiunile ferestrei aplicaiei selectate. ntreaga fereastr a aplicaiei va fi nregistrat. o anumita zon (Application Region), se permite definirea doar a unei regiuni n interiorul ferestrei aplicaiei selectate, de exemplu, a unui cadru sau a unui panou. o mrime care se poate defini manual (Custom Size), se permite introducerea exact a nlimii i limii zonei nregistrate. Cnd se nregistreaz un proiect nou, aplicaiile Web sau softurile instalate pe calculatorul propriu sunt parcurse ntr-un mod analog celui uzual: prin micri de mouse, utiliznd tastatura sau navignd prin meniuri. Pe msura aciunilor executate, Adobe Captivate salveaz ecranul i activitile lui. nregistrarea unei activiti a ecranului se poate face folosind setrile implicite ale programului, dar o planificare i eventual o personalizare poate fi ntotdeauna de ajutor. O simulare final este recomandat s conin elemente ca: titlul nregistrrii, autorii tutorialului, drepturi de Copyright, fereastr de ntmpinare/nchidere, elemente interactive, cuprins i la alegere imagini, animaii, audio i video [14]. O dat captura desvrit rezult simularea propriu-zis, iar programul ofer o serie de faciliti/caracteristici pentru manipularea i editarea ei: adugarea de informaii text adiionale, audio (voce peste nregistrri, fundal muzical, efecte sonore), video, animaii Flash, animaii text, imagini; butoane de navigare, csue colorate pentru atenionare, mrirea anumitor zone de interes din imagine;

52 Captur de ecran i animaii - 5 modificarea proprietilor mouse-ului (viteza de deplasare, punctul de pornireoprire, sunet la apsare); transformarea textului n voce; redimensionarea proiectului i setarea timpului de expunere. efecte ntre slide-uri, la nceputul i sfritul 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 - proprietile unui obiect din scen.

5.1 - Adobe Captivate 53 Pentru nelegerea modalitii de aciune a celor mai uzuale instrumente din cutia de unelte sau a opiunilor din meniu este necesar o scurt trecere n revist a lor [15]. Recording size - Adobe Captivate pune la dispoziie valori presetate ale rezoluiei la nregistrare, de la cele comune (640 x 480, 800 x 600, 1024 x 768) pn la rezoluii 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 apsarea butoanelor de la tastatur declaneaz aceste capturi de ecran. Din opiunile pentru nregistrarea automat se recomand panning, dac se dorete ca zona nregistrat s urmreasc micarea mouse-ului pe ecran. Pentru comentarii audio se selecteaz microfonul corespunztor, 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 fiiere separate pentru fiecare. Full Motion creeaz o nregistrare ne-editabil a tuturor activitilor de pe ecran. Manual nregistreaz ecranul doar atunci cnd se apas Print Screen. Text Captions - sunt utilizate pentru a indica anumite zone din slide, a explica anumite concepte sau a aduce informaii adiionale. Ele pot fi generate automat la nregistrare dup un anumit ablon (Select the File meniu) sau introduse manual la editarea slideurilor. n timpul rulrii materialului aciunile din slide sunt afiate concomitent cu aceste indicaii. Buttons - butoane rectangulare sau forme aleatorii importate din alte programe. Se poziioneaz n zona dorit pe slide definindu-se aciuni de genul: trecerea la un slide anterior sau urmtor, salt la o anumit pagin extern etc. Click Boxes - reprezint un obiect ce se creeaz n aria de aplicare a unui aciuni 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. Att butoanele ct i aceste obiecte oblig utilizatorul s interacioneze cu simularea, de exemplu s acioneze butonul mouse-ului pentru a trece mai departe la un proiect nou, o pagin Web sau un slide oarecare. Sunt obiecte utile n cazul navigrii prin meniuri.

54 Captur de ecran i animaii - 5 Text Entry Box - sunt csue de mesaj, obiecte care determin utilizatorul s interacioneze cu materialul prezentat. El este cel care introduce informaie text i trece mai departe n tutorial. Highlight boxes - reprezint forme rectangulare colorate i cu o transparen variabil care pot fi poziionate n slide-uri pentru a atrage atenia. Widgets - reprezint obiecte SWF configurabile n Flash care ofer un coninut bogat i o interactivitate ridicat. Dezvoltatorii structureaz un obiect de acest gen pentru a fi ct mai facil n utilizare i cu parametrii care permit personalizarea coninutului de ctre utilizator (ex: personalizarea culorilor i dimensiunii segmentelor dintr-o diagram). Aceste obiecte pot fi statice (fr interaciune, afieaz doar informaie), interactive (afiarea lor difer funcie de aciunile utilizatorului - user input) i sub form de ntrebri - question (ex: inserarea unui slide sub form de anagram i aranjarea literelor prin deplasarea pe ecran cu ajutorul mouse-ului n csuele afiate). De exemplu se poate utiliza un widget (static) pentru generarea unui certificat de competene n urma unei evaluri din partea unui tutore. Certificatul conine urmtoarele informaii: numele i prenumele persoanei care a parcurs chestionarul (cursul), numele cursului/tematicii, punctajul obinut i data evalurii. Certificatul se insereaz la sfritul chestionarului, informaia afiat este culeas de pe slide-ul cu rezultate (vezi seciunea Quizz), n acest mod se genereaz doar pentru acei utilizatori care au obinut un punctaj de trecere. Panoul Windows > Widget afieaz obiectele SWF existente n librria curent a programului Captivate la o anumit adres pe calculatorul local. n acest panou sunt permise operaii de sortare i de adugare de noi widget-uri, de modificare a locaiei iniiale sau de descrcare (download) a noi obiecte de acest gen de la Adobe Captivate Exchange. Un widget poate conine legturi ctre alte widget-uri, operaiune complex i care necesit cunotine de programare XML (anexa 2: crearea unui fiier cu extensia .wdgt). Pe lng caracteristicile specifice fiecrui widget n parte, ca i obiect ntr-o scen el se supune i proprietilor generale Windows > Properties din Captivate, cteva dintre acestea fcnd referire la: nume, vizibilitate, transparen, timp de expunere, tranziii, sunet, poziionare i dimensiune. Zoom Areas - atrage atenia asupra unor zone importante din nregistrare. Const n Zoom source (zona de ecran care se dorete mrit) i Zoom destination area (zona n care este afiat la o alt scar poriunea iniial selectat). Rollover Caption - const ntr-o zon dreptunghiular colorat i cu o transparen variabil care n momentul poziionrii mouse-ului deasupra ei afieaz informaii text suplimentare. n acelai context se nscrie i Rollover Image (informaiile de tip text fiind nlocuite cu imagini) sau Rollover Slidelet. Acesta din urm la aciunea de

5.1 - Adobe Captivate 55 rollover permite afiarea unei ntregi suite de unelte Captivate standard, imagini, video sau widget-uri. Slide video, audio & image - sunt opiunile care permit inserarea de materiale multimedia. Trebuie avute n vedere formatele de fiiere cu care se poate lucra: .gif, .bmp, .jpg, .ico, .png pe partea de imagini, .flv, .f4v., mp4, .mov, .3gp pentru video, .swf, .gif pentru animaii i .mp3 sau .wav pentru audio. Facilitile de editare a materialelor video i a sunetului oferite de Adobe Captivate sunt puine comparativ cu programe de specialitate (Adobe Premiere, Sound Forge, Adobe Audition), totui utile n cazul n care se doresc doar editri simple, nu aplicarea de filtre i aciuni complexe. Master Slide - definete o suit de elemente comune care ofer unitate n design-ul proiectului: fundal, sigl, header&footer etc. Orice nou slide adugat va fi n strns legtur i cu aceleai 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 acionarea lor nejustificat sau accidental. Aceast caracteristic devine util n cazul n care se regsesc un numr mare de obiecte ntr-un spaiu de lucru i se dorete manipularea lor separat. De menionat c n momentul utilizrii Rollover Slidelet-ului timeline-ul general pentru slide se modific n cel specific slidelet-ului. Duplicate/Delete/Hide/Lock/Copy Slide - aciuni de duplicare, tergere, ascundere, blocare i copiere a unui slide. Se utilizeaz click dreapta i se selecteaz una dintre opiuni. Notes to speech - reprezint o opiune interesant care permite convertirea textului n voce prin utilizarea unui plug-in adiional programului: text to speech software de la NeoSpeech . Rezultatele sunt pozitive pentru texte n limba englez. Variables&Advanced Actions - definesc aciuni complexe comparativ cu alte obiecte prezentate pn n acest moment. Pentru integrarea lor este necesar cunoaterea unor noiuni 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 corespunztoare.

56 Captur de ecran i animaii - 5 Library - n librrie se stocheaz toate elementele importate din exteriorul programului i utilizate n cadrul unui proiect curent. Afiarea librriei se face cu Window > Library i orice element din librrie 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 obine astfel un nou tip de skin editor, se recomand salvarea lui pentru utilizri viitoare. Adugarea barei de control are ca rezultat i mrirea dimensiunii proiectului cu un anumit numr de pixeli, pe vertical n partea inferioar de exemplu.

Figura 20: Generare cuprins i bar de control

O opiune important pus la dispoziia dezvoltatorilor este segmentul de Quizz, ntrebri i chestionare care ajut la evaluarea i autoevaluarea n procesul de nvmnt la distan. Se pot oferi scenarii diferite pentru aceeai ntrebare. Dac se rspunde corect se poate defini o aciune de genul trecere la un urmtor slide, n cazul unui rspuns incorect se poate redireciona utilizatorul ctre un fiier extern sau URL cu informaii adiionale. Suplimentar un tutore poate verifica calitatea rspunsurilor prin raportrile oferite n urm completrii chestionarului (numrul de ncercri ale cursantului, rspunsurile corecte i incorecte) [15]. Variantele de interogare includ rspunsuri de tip text limitat sau nu la un numr de cuvinte, opiuni multiple, alegerea unei singure opiuni dintr-o list .a.m.d. Adugarea unui slide de tip Quizz se face cu comanda Quizz > Question Slide i se alege una dintre variantele de ntrebri puse la dispoziie de program:

5.1 - Adobe Captivate 57 Multiple choice: utilizatorul selecteaz unul sau mai multe rspunsuri corecte dintr-o list pus la dispoziie de dezvoltator/tutor. True/false: se poate alege o singur variant (fals-adevrat, da sau nu). Fill-in-the-blank: se completeaz o poriune din interiorul unei propoziii sau a unei fraze. Short answer: rspunsuri scurte sub forma unui cuvnt sau a unei propoziii. Matching: corelarea unor intrri n dou liste diferite. Hot spot: utilizatorul deplaseaz mouse-ul ntr-o anumit zon din slide Sequence: aranjarea elementelor afiate 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 desfurarea nregistrrilor; publica pe un site Web prin FTP; crea o arhiv .zip, opiune util n cazul n care se dorete salvarea unui singur fiier pentru ncrcarea pe o platform educaional. exporta pentru podcast audio (wav, mp3).

Adobe Captivate interacioneaz cu alte programe de generare de coninut multimedia: Flash prin salvarea simulrii n format .fla: File > Export > To Flash. Odat proiectul exportat sunt vizibile n Adobe Flash: preloader-ul (acea animaie care ruleaz pn n momentul n care materialul multimedia propriu-zis este ncrcat pe calculator), aciunile 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 librria Captivate ca i obiect separat cu extensia .png.

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

58 Captur de ecran i animaii - 5 Slide-urile pot fi editate n PowerPoint i sincronizate ulterior cu proiectul Captivate. Inserarea lor se poate face individual, slide cu slide sau bineneles se poate importa ntreaga prezentare. Includerea n Captivate poate fi de forma embed (ncapsulare) sau linking (legtur) n funcie de dorina dezvoltatorului de a pstra sau nu o conexiune cu sursa iniiala. Se atrage atenia ns asupra mrimii proiectului Captivate n varianta embed, care poate crete substanial n cazul ncapsulrii unor prezentri PowerPoint de larg ntindere, respectiv a necesitii existenei programului Microsoft PowerPoint n cazul unor editri ulterioare pentru varianta linking [15].

Adobe Presenter prin publicarea fiierului n format .swf: File > Publish > Flash(SWF). Adobe Presenter este o unealt comercial ce permite generarea de coninut educaional 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 coninutul propriu-zis este compatibil SCORM 1.2 i SCORM 2004. Ca i caracteristici se apropie de Adobe Captivate, de aceea de multe ori n funcie de complexitatea materialului ce se dorete 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 cunoate plusuri i minusuri. Dac avantajele pot rmne la latitudinea fiecruia dintre utilizatorii programului (ex: interactivitate ce menine interesul viu cursantului i ntrete feedback-ul automat pentru acesta), se atrage atenia asupra costurilor (ridicate pentru anumite bugete personale), asupra dificultii n realizarea unor animaii complexe sau a unor treceri spectaculoase de la un slide la altul. De asemenea utilizarea formatului .swf atrage cu sine necesitatea instalrii unui plug-in aferent i maini de calcul cu performane relativ ridicate, mai ales dac coninutul multimedia rezultat nu este optimizat.

5.2. GIF animat

Animaia este o entitate vizual dinamic, forma i structura ei evolund n timp pe scara complexitii [16]. Animaiile sunt obiecte bine cunoscute, folosite n scopuri diverse i pot fi regsite n multe medii informatice: tutoriale multimedia, pagini Web i publicitate online sau offline. Ele sunt utilizate pentru a transmite mesaje ntr-o zon de afiare limitat a unui ecran de calculator. Unii dezvoltatori de aplicaii multimedia le consider mai eficiente dect informaia text, dei exist atenionri cu privire la eficacitatea animaiilor [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 animaii potrivite ntr-o aplicaie multimedia [17]. n cele ce urmeaz sunt enunate cteva dintre acestea: animaia se rezum la caracteristicile eseniale, n aa fel nct utilizatorii s se concentreze asupra aspectelor relevante ale ei; sunt de evitat excesele de informaii. este necesar acordarea unui timp corespunztor de expunere; ochiul uman are nevoie de timp pentru a procesa schimbarea, sunt de evitat expunerile rapide; culoarea se utilizeaz n special pentru a diferenia obiecte sau aspecte ale obiectelor care sunt relevante. animaia se utilizeaz n combinaie cu alte elemente multimedia (text, sunet, etc.), pentru a evita ambiguitatea interpretrii din partea utilizatorilor. se evit mai mult de o animaie ntr-o pagin. se folosesc animaiile pentru a comunica idei ntr-un mod inteligent [16]. se evit animaiile n paginile cu mult text care necesit o concentrare sporit la citire. Animaiile ntlnite n tutoriale se mpart n dou categorii: GIF animat i Flash. O scurt descriere a acestora este prezentat n paragrafele urmtoare. GIF-ul animat este considerat unul dintre primele formate utilizate n crearea de animaii. Materialul animat trebuie s fie simplu pentru a menine dimensiunea fiierului mic. Un numr mai mare de 20 de cadre/sec poate duce la creare unui fiier de dimensiuni ridicate, crescnd astfel considerabil timpul de ncrcare/descrcare [9]. Opiuni/parametri n crearea unui GIF animat Indiferent de software-ul ales pentru crearea unui GIF animat, procesul este aproximativ acelai i implic alegerea unor funcii i opiuni. Denumirea lor este pstrat n limba englez datorit faptului c uneltele de dezvoltare de animaii sunt construite n aceeai limb. Frame Delay Aceast setare stabilete timpul de trecere de la un cadru la altul. ntrzierile dintre cadre sunt msurate n 1/100 secunde. n crearea animaiilor este posibil setarea unor timpi de ntrziere diferii ntre cadre diferite, pentru a crea pauze sau alte efecte de sincronizare. Transparency ntr-o animaie se seteaz transparena pentru fiecare cadru n diverse moduri: - No transparency - fr transparen. - White - toi pixeli albi din imagine vor deveni transpareni.

60 Captur de ecran i animaii - 5 - Based on first pixel - primul pixel, cel din stnga sus de coordonate (0,0) va fi transparent. Disposal Methods Ofer instruciuni n privina a ceea ce se poate face cu un cadru anterior n momentul n care un nou cadru este afiat. Color Palette Alegerea paletei de culori influeneaz apariia imaginilor n diferite sisteme i pe diferite monitoare. Este recomandat s se utilizeze aceeai palet de culori pentru ntreaga animaie (System Palette, Grayscale, Adaptive Palette, Web Palette) Loop Se specific dac o animaie se repet: deloc, de un anumit numr de ori sau pentru ntreaga durat n care un utilizator parcurge tutorialul. Recomandrile din tabelul urmtor constituie un punct de plecare pentru crearea unei animaii [9]:
Tabel 6: Parametrii pentru realizarea unui GIF animat Color Palette Adaptive palette

Interlacing

Off On - pentru fotografii, Off pentru desene cu culori puine Dimensiune minim

Dithering:

Image Size

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 att aplicaii comerciale, ct i aplicaii gratuite: Adobe Image Ready, Easy GifAnimator, Ulead Gif Animator, AnimationShop, GifMation (figura 21).

5.3. Flash
Iniial dezvoltat de Macromedia, aplicaia Flash a fost preluat de ctre Adobe odat cu achiziionarea companiei sus amintite. Realizarea de animaii Flash presupune cunoaterea 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 animaii - 5 pentru aciuni avansate, duce la posibilitatea obinerii unor animaii de efect simple sau complexe, precum i la realizarea unei aplicaii multimedia (site-uri Web, tutoriale) totalmente n Flash.

Figura 22: Interfa Adobe Flash

Animaiile 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 cteva dintre acestea: Independena de platform (browser/sistem de operare) Imaginile vectoriale necesit o aplicaie care s ruleze imaginea (ex. pentru formatul SVG exist Adobe SVG Player, iar pentru SWF avem playerul de Flash). Independena 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 utilizm un telefon mobil (SmartPhone), se va folosi playerul disponibil pentru telefoane (ex. Flash Player Lite 1.0), .a.m.d (evident toate playerele vor afia aceeai imagine final). Animaii uor de realizat Se pot sincroniza (n funcie de timp) diverse obiecte, poziii sau forme ale acestora. Flash-ul nu numai c realizeaz aceast sincronizare, dar permite i interpolarea poziiei (sau formei) unui obiect pentru a uura munca utilizatorului.

5.3 - Flash 63 Se pot aduga interfeei elemente multimedia. n interiorul obiectelor Flash se pot importa i manipula elemente audio i video (MP3, AVI). Realizarea de aplicaii complexe prin mbinarea elementelor grafice cu aciuni de scripting. Ataarea 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/infinitegallery-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: Pregtirea tutorialelor multimedia pentru publicarea lor online

6.1. Editarea i compresia elementelor audio-video
Avnd n vedere c un tutorial multimedia este bazat pe sunet i nregistrri video este necesar nelegerea unei serii de parametri ce intervin n componena propriu-zis a acestor elemente digitale. n paragrafele urmtoare sunt prezentai succint cei mai importani dintre ei. Rata de eantionare reprezint numrul de eantioane (mostre) luate din semnalul continuu (audio sau video) pentru a-l discretiza pe acesta. Cu ct numrul de eantioane este mai mare cu att acurateea semnalului este mai bun. Rata de eantionare se exprim de obicei n kiloHertz (kHz) i cunoate valori de genul: 8 KHz, 11.025 KHz, 11.127 KHz, 22.05 KHz, 44.1 KHz. Bii/eantion specific numrul de bii de informaie care sunt utilizai pentru reprezentarea unui eantion. Rata de bit, pe de alt parte, face referire la numrul de bii stocai ntr-o unitate de timp n momentul nregistrrii (se exprim de obicei n kbps - kilobii/secund). Numrul 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 att de doritul sunet surround cu 6-8 canale. Rezoluia video (video frame size) - se refer la dimensiunea n pixeli a clipului video care se transmite. O rezoluie ridicat presupune i un fiier de dimensiuni mari, ceea ce n cazul unui tutorial publicat pe Web poate fi un dezavantaj. Despre rezoluie se vorbete i n cazul alegerii i editrii imaginilor dintr-un tutorial. Dimensiunile pe orizontal i vertical a acestuia trebuie la rndul 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 rezoluie mai ridicat, cu excepia cazului n care se specific n clar utilizarea unor monitoare cu diagonal mare (ex: 21 inch). Se recomand ca att tutorialul, ct i imaginile incluse n el s fie mai mici, cel mult egale cu rezoluiile monitoarelor. Se prevd multiple scenarii de afiare n acest sens. Monitoarele pot afia imaginile la o rezoluie de 72 pixeli pe inch (ppi), 96 sau 120 ppi, n funcie 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 rezoluia de 120 ppi, ns puin mai mult de 2 x 2 inch pe un monitor cu rezoluia de 72 ppi. A se cunoate 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 Numrul de cadre pe secund este important deoarece cu ct sunt mai multe cadre pe secund, cu att este mai bun reprezentarea. Pentru ca o transmisie (video) s par continu, se folosete un minim de 15 cadre pe secund. Raportul de aspect pentru o imagine presupune raportul dintre lungimea i nlimea ecranului (l/h) avnd valori de 4/3 n materialele video clasice sau 16/9 atunci cnd discutm de nalt definiie. Compresia permite condensarea fiierului audio-video, alegerea unui anumit format de fiier, cu anumite pierderi de calitate n funcie de parametrii folosii. Metodele de compresie se bazeaz pe limitrile psiho-acustice i vizuale ale omului i permit obinerea de materiale la o calitate i o mrime acceptabile pentru Web. Modificarea parametrilor i salvarea materialului ntr-un anumit format se face cu ajutorul unor medii de editare specifice, aplicaii care de cele mai multe ori se instaleaz pe calculatorul propriu. Acestea sunt softuri comerciale sau gratuite, diferind n mod evident facilitile oferite, categoriile de formate ce sunt puse la dispoziie, intervalul de valori pentru parametri tehnici mai sus prezentai: 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 Pregtirea tutorialelor multimedia pentru publicarea lor online - 6 Este adevrat 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 editri 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 urmtor 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 gndite pentru coninut de nalt definiie). Coninutul iniial a fost codat pentru partea de video MPEG2, la o rezoluie de 1280 x 720 (720p), numrul de cadre/secund egal cu 25, raport de aspect 16:9 i audio codat AC3, canal stereo, rata de eantionare 48kHz. Prin descrcarea coninutului, rularea lui cu un media player (VLC Media Player) i studierea tipului de compresie cu un soft dedicat (Canopus Procoder), s-au urmrit elemente ca [4]: - care este dimensiunea i durata de expunere maxim? - formate pentru ncrcare suportate; - rezoluia maxim suportat; - informaii specifice pentru compresie: formatul n care se convertete, codarea video i audio.

Figura 24: Parametrii unui fiier multimedia - VLC i Procoder

6.2 - Integrarea tutorialului n pagini Web 67

Tabelul 7: Caracteristici tehnice ale unui videoclip n pagini Web Youtube Permite crearea de cont personal? Permite postarea de comentarii proprii? Dimensiunea maxim a materialului video Durat de expunere maxim a fiierului Da Da Da Da 150 MBytes video/60 MBytes audio/5MBytes imagini Nu are AVI, FLV, MPEG, MPG, MP4, MOV, M4V, 3GP, 3GPP, WMV, MP3, WAV, WMA, AAC, M4A 1280x720 pixeli Format: FLV Audio: MP3, 44.1 kHz Video: VP6F Trilulilu Da Da Vimeo

2GBytes

500 MBytes/sptmn

10 minute

Nu are 3GP, 3GPP, ASF, ASX, AVI, DIVX, MKV, MOV, MP4, MPE, MPEG, MPG, OGG, WMV 1280x720 pixeli Format: MP4 Audio: AAC, 44.1 kHz Video: H.264 (AVC)

Formate pentru ncrcare suportate

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

Rezoluia maxim suportat

1280x720 pixeli Format: FLV, MP4

Convertete fiierul n

Audio: MP3/AAC,44.1 kHz Video:Flash video/H.264 (AVC)

6.2. Integrarea tutorialului n pagini Web

Un pas important n publicarea tutorialelor n aplicaii Web l reprezint alegerea modalitii de integrare propriu-zise. Avem de a face cu trei situaii [18]. Legtura (link) ctre un coninut multimedia, o modalitate simpl, dar eficient, indic un fiier audio sau video stocat mpreun cu toate paginile HTML proprii i alte fiiere.
<a href="Sunet.mp3">Sunet</a>?

Atunci cnd se acceseaz o astfel de legtur utilizatorul alege ntre salvarea fiierului i rularea lui ulterioar sau deschiderea direct n browser cu ajutorul aa 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 Pregtirea tutorialelor multimedia pentru publicarea lor online - 6 Browsere-le vor fi nevoite s recurg la plug-in-uri (programe ajuttoare) pentru rularea coninutului, ceea ce poate fi un dezavantaj deoarece vizitatorii pot fi diveri i diverse pot fi i plug-in-urile utilizate de acetia pentru rulare [18]. Eliminarea acestui inconvenient este posibil prin utilizarea tehnologiei HTML5. Se va vedea n viitor dac facilitile acesteia vor avea un impact benefic asupra internauilor. Plug-inurile pot fi lansate folosind elementele (tag-urile) <object>, <embed> i <applet>. Gzduire (hosted) presupune ca materialul audio-video propriu s fie gzduit de un server dedicat unei alte aplicaii Web (youtube.com, vimeo.com, trilulilu.ro); coninutul media va fi afiat n pagina Web proprie sau se va face o legtur ctre locaia extern. Avantajul unei astfel de soluii l reprezint faptul c aceste siteuri pot gzdui i rula materiale media de nalt calitate i o bun rezoluie, pentru cunosctorii n domeniu se amintesc 720p i 1080p. Prin legtur ctre ele un simplu utilizator poate afia/rula coninut video de o bun calitate: http://vimeo.com/13301141 Cteva recomandri la modul general (incluznd 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 fiierelor multimedia n pagini Web continu prin prezentarea anumitor tag-uri specifice incluse n linii de cod corespunztoare [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 lime i nlime (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 folosete atributul codebase pentru a specifica locaia de descrcare a softului. Adresa din exemplu va conine ntotdeauna ultima versiune a player-ului QuickTime. Parametrul controller are valoarea false dac se dorete 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 nelege elementul object va ignora elementul embed. Atributul pluginpage definete calea de unde poate fi descrcat 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 Pregtirea 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 utiliznd site-ul de partajare audio-video youtube.com [19] Rulnd un material video n site-ul sus amintit se poate observa c n partea dreapt a videoclipului exist dou tipuri de informaii, ambele se pot utiliza pentru integrare ntr-o pagin Web proprie. URL - adresa Web a videoclipului utilizabil pentru a crea o legtur 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 ci a videoclipului atrage cu sine un posibil dezavantaj: dac materialul este ters din aplicaia youtube.com atunci n cadrul

6.2 - Integrarea tutorialului n pagini Web 71 paginii Web proprii va deveni nefuncional. Pentru nlturarea acestui inconvenient se recomand descrcarea clipului pe calculatorul propriu, utiliznd 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 fiierul video s fie salvat n acelai director cu celelalte fiiere ale aplicaiei multimedia proprii, ntr-un subdirector denumit video. Drept urmare, codul de mai sus cunoate modificri rezultnd:
<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>

Aplicaiile Web, codul corespunztor 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 coninut Flash pe dispozitive cunoscute cum sunt iPhone-ul i iPadul, au determinat apariia HTML5. n literatura de specialitate este vzut o tehnologie a viitorului, permind introducerea coninutului 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-inurilor 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 Pregtirea tutorialelor multimedia pentru publicarea lor online - 6 Atributul controls are o importan deosebit, specific browser-ului s adauge bara de control facilitnd rularea videoclipului de ctre vizitator. Lipsa atributului presupune crearea unui script Java care s genereze acelai 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 rmne o soluie viabil, o alternativ, deoarece aplicaia este destul de inteligent gndit 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 pregtirea tutorialelor sau elementelor audio video pentru publicarea lor online. Posibilitile de editare, compresie i integrare a materialelor multimedia n pagini Web sunt multiple, iar urmtorii ani i vor pune amprenta decisiv n utilizarea i evoluia acestora.

Anexa 1: Aplicaii utile n domeniul multimedia

Categorie

Nume Video Download Helper FireShot ColorZilla Adobe Dreamweaver Tutoriale HTML Editor HTML gratuit

Adres https://addons.mozilla.org/en-US/firefox/addon/3006 https://addons.mozilla.org/en-US/firefox/addon/5648 https://addons.mozilla.org/enUS/firefox/addon/colorzilla/ http://www.adobe.com/products/dreamweaver.html http://www.w3schools.com/html/ http://www.pagebreeze.com/ http://www.w3schools.com/css http://www.ucware.com/juststyle/#download http://purecssmenu.com/ http://www.godaddy.com/

Add-on-uri utile pentru Mozilla Firefox

HTML&CSS Tutoriale CSS Editor CSS gratuit Editor CSS Menu

nregistrare i gzduire site Web

http://www.bluehost.com/ http://www.inregistrare-domenii.ro/ http://www.rotld.ro http://www.google.com http://www.ask.com

Motoare de cutare

http://www.alltheweb.com http://search.aol.com/aol/webhome http://www.seekport.com http://www.picsearch.com

74 Anexa 1: Aplicaii utile n domeniul multimedia

Categorie Nume Adobe Captivate Captur ecran i video Camtasia Studio Replay Media Catcher Replay Video Capture Sound Forge Adobe Audition Adobe Premiere Editare i conversie video DVD Video Soft Free Studio Wondershare Xilisoft Video Converter Animaii Adobe Flash Gif Animator Adobe Photoshop Gimp Editare imagini Sumo Paint Pixlr editor FotoFlexer Image Editor Aviary Photo Editing API Color Scheme Designer Kuler Color Match Remix HTML Color Picker Fonturi Photoshop 1001 Free Fonts Adres http://www.adobe.com/products/captivate.html http://www.techsmith.com/camtasia.html http://www.replaymediacatcher.org/ http://www.applian.com/replay-video-capture/ http://www.sonycreativesoftware.com/soundforge http://www.adobe.com/products/audition.html http://www.adobe.com/products/premiere.html http://www.dvdvideosoft.com/ http://www.wondershare.com/ http://www.xilisoft.com/ http://www.adobe.com/products/flash.html http://www.gif-animator.com/ http://www.photoshop.com/products http://www.gimp.org/ http://www.sumopaint.com http://pixlr.com/ http://fotoflexer.com/ http://www.aviary.com/ http://colorschemedesigner.com/ http://kuler.adobe.com http://colormixers.com/ http://www.w3schools.com/tags/ref_colorpicker.asp http://www.1001freefonts.com/handwriting-fonts.php

nregistrri audio

Alegerea culorii ntro aplicaie Web

Anexa 2: Tutoriale Adobe Captivate

nregistrarea unei aplicaii desktop Exemplificarea se va face nregistrnd aciuni executate n cadrul softului Total Commander.

Se pornete aplicaia ce se dorete nregistrat (prezentat), respectiv se deschide Adobe Captivate (5.x). n pagina de Start se alege Software Simulation.

Se selecteaz Application Window > Automatic Recording. Din opiunile pentru nregistrarea automat se recomand No Panning i modul de nregistrare Demo(nstration).

76 Anexa 2: Tutoriale Adobe Captivate

Prin apsarea butonului de Record ncepe nregistrarea propriu-zis. Se desfoar activitatea planificat. Adobe Captivate salveaz o captur de ecran de fiecare dat cnd se efectueaz o aciune (ex: selectarea unui meniu), captur nsoit de sunetul unui declanator foto. Print Screen permite la orice moment de timp nregistrarea unui instantaneu a ecranului. Pentru ncheierea nregistrrii se apas tasta End.

Se deschide automat fereastra de salvare, se introduc numele proiectului i locaia unde se va salva proiectul. Pre-vizualizarea nregistrrii 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 modificri ulterioare asupra proiectului: File > Save sau Save as.

77

Pentru integrarea ntr-o pagin Web sau rularea de sine stttoare pe un calculator propriu se recomand publicarea n formatul .swf, care permite pstrarea aciunilor i interaciunii n cadrul slide-urilor: File > Publish> Flash (SWF).

Editarea unui proiect Sunt enumerate principalele aciuni de editare, manipulare i inserare de obiecte noi ntr-un slide, ulterior o parte sunt reluate i explicate pas cu pas.

Aciuni directe asupra slide-urilor: adugare, tergere, copiere, nregistrare de noi slide-uri.

78 Anexa 2: Tutoriale Adobe Captivate

Modificarea formei de afiare a mouse-ului, poziiei de nceput i de sfrit a micrii lui. Inserarea de butoane pentru navigare, csue transparente care necesit interaciune cu utilizatorul, csue sub form de text (Button, Click Box, Text Entry Box). Ajustarea timpului de expunere pentru fiecare obiect din scen prin intermediul timeline-ului. Adugarea de mesaje text (Text Captions), forme geometrice, zone cu rollover (Rollover Caption, Rollover Image, Rollover Slidelet) Adugarea de imagini ca i obiecte n sine sau de slide-uri sub form de imagini (Image Slide) Adugarea de sunet de fundal, sunet pentru fiecare slide n parte, nregistrare de voce. Inserarea clipurilor video i a altor animaii sub form de swf-uri sau flv-uri. Inserarea de texte animate (text animation). Adugarea de widget-uri i efecte (Windows > Widgets, Windows > Effects).

Crearea de chestionare de evaluare i autoevaluare (Quizz-uri). Manipularea de variabile i aciuni avansate (afiarea 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 pstrarea sau nu a raportului de aspect. Dac se introduce o valoarea mai mare dect cea a proiectului iniial se va activa zona din stnga If new size is larger, n caz contrar zona din dreapta If new size is smaller. Pentru proiectul iniial 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 limea de 1200 (Rescale Project to Fit New Size). - pstrarea dimensiunii proiectului iniial i adugarea unei zone de fundal de la valoarea de 1024 pn la valoarea menionat de 1200 (Keep on the same size and position the project). Proiectul iniial poate fi poziionat conform opiunilor din figura urmtoare.

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 lmuriri suplimentare referitoare la aciunea desfurat 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 iniial, zon definit de utilizator.

81

Operaia de rescalare a unui proiect (fie mrirea dimensiunii, fie reducerea ei) este definitiv, fr posibilitatea revenirii asupra operaiei.

Importarea unui fiier PSD

Se creeaz materialul multimedia corespunztor n Photoshop, acesta va conine o colecie 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 librria Captivate ntr-un director identic cu numele fiierului PSD. Toate imaginile importate pot fi supuse proceselor de editare specifice Captivate.

Efecte ale obiectelor

Efectele aplicate obiectelor atrag atenia utilizatorului n momentul rulrii 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 dispoziie (Glow, Blur) sau efecte de culoare (transparene, luminozitate) i transformri geometrice de baz (rotaii, scalare, deformare).

83

n cazul alegerii unui efect Motion Path pentru a defini/modifica direcia de micare se apas pe csua care apare n colul 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 corespunztoare urmnd calea Quizz > Question Slide. Se va afia o list cu opiunile disponibile, exemplificarea se va face pe varianta Multiple Choice - Graded, care ofer posibilitatea generrii automate a unui anumit punctaj (note).

Fereastra nou deschis permite o serie de opiuni care sunt menionate n continuare. Se poate alege numrul de rspunsuri 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 nsoesc utilizatorul n cazul unor rspunsuri corecte, incomplete sau a unei limite de timp. Butoanele de navigare clear, back i skip permit faciliti suplimentare celui ce completeaz chestionarul n cazul n care ele sunt activate (selectate) n momentul crerii. n figura de mai jos s-a ales pstrarea unui singur buton - Next.

85

Dezvoltatorul unui astfel de chestionar poate alege opiunea de generare automat a unui raport (Report Answer), iar pentru personalizarea informaiilor de tip text afiate se editeaz cmpurile direct din slide. Raportul conine informaii despre punctajul obinut, numrul total de ntrebri 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 opiunea de generare ntrebri 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 cteva exemple de variabile de sistem i cum se insereaz ele. Data curent. Se urmeaz calea Insert > Standard Objects > Text Caption. Din fereastra de proprieti se alege zona marcat cu X i opiunea Variable Type System > cpInfoCurrentDateString. Se poziioneaz n slide.

Afiarea sau ascunderea barei de control - Pentru aceasta n caseta de proprieti a slide-ului n zona Action se alege opiunea Assign > cpCmndShowPlaybar i n cmpul With se completeaz cu 1 pentru vizualizare i 0 pentru ascunderea barei de control.

87

Variabile utilizator i aciuni 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, cmpurile n care utilizatorul va introduce numele i parola. Pentru csua corespunztoare 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 csua corespunztoare parolei unde Variable Associated se completeaz cu varParola. Se pstreaz butonul de Submit i se activeaz Password Field. Se creeaz un obiect Text Caption care se va afia doar n momentul n care utilizatorul va introduce datele greit. Se completeaz n fereastra de proprieti ItemName cu LoginInvalid i se selecteaz Visible.

Se creeaz un slide nou (slide 2) care se va afia n momentul n care utilizatorul introduce datele corect. Pe acest slide se insereaz un buton Continu care va face salt la slide-ul numrul 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 cte slide-uri sunt necesare pentru a prezenta o anumit tematic.

Pentru crearea aciunilor avansate se utilizeaz variabilele: varNume (mihai), varParola (mihai), numarIncercari (setat iniial 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 proprietile acestuia se selecteaz On Enter: Continue, respectiv On Exit: Execute Advanced Actions i se alege scriptul validare. Pe slide-ul 3, la proprietile 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 librria Captivate widget-ul JumbledWordQuestion.swf. Este gratuit doar pentru versiunea Adobe Captivate 4.0, a devenit comercial pentru versiunile 5.x.

Se introduce n cmpul Words To Be Jumbled un cuvnt pentru anagramare, de exemplu streaming. Se introduce un Text Captions cu ntrebarea corespunztoare: Care tehnologie st la baza transmisiunilor video pe Internet? Pentru a testa acest widget la previzualizarea proiectului se deplaseaz literele n csue n ordinea corect.

Crearea unui fiier cu extensia .wdgt Un fiier cu aceast extensie definete un widget care utilizeaz legturi de fiiere (mai multe fiiere interconectate). Fiierul WDGT conine fiiere SWF interconectate i un fiier de descriere .xml care conine informaii despre legturi.

Se vor lua n calcul trei fiiere Demo.swf, Demo_1.swf i Demo_2.swf. Fiierul de descriere .xml arat n felul urmtor:
<?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>

Fiierele .swf i .xml se copiaz ntr-un director, se arhiveaz i se modific extensia n .wdgt. Se plaseaz n librria Captivate corespunztoare widgeturilor (locaia 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 gsim:
if (wm == 'Preview') { Widget_name._visible = true; }

rezultatul rulrii codului permite vizualizarea widget-ului n zona de pre-afiare sau n caz contrar dac nu se dorete 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 rmn de actualitate datorit unitii i pstrrii unei interfee de lucru asemntoare de la o variant de software la cealalt. Cum se ndeprteaz puncte nedorite?

Se deschide imaginea original n Adobe Photoshop i se selecteaz unealta Healing Brush Tool. Se mrete imaginea (Zoom - Ctrl +), se ine apsat Alt pentru a lua o mostr din imagine i se deseneaz n zonele cu defecte. Pentru mbuntirea rezultatului se poate ncerca Clone Stamp Tool. Se ine apsat Alt i se selecteaz zona care se dorete clonat. Ulterior se apas click n zona cu defecte. Cele dou zone trebuie s fie asemntoare ca i culoare, altfel se va simi 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 retuat. 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 nclzete o imagine?

Se ncarc imaginea ce se dorete ajustat. Pentru a pstra originalul intact, se creeaz un duplicat al ei. Click-dreapta pe strat > Duplicate Layer. Se selecteaz Layer > New Adjustment Layer i se alege o opiune din lista pus la dispoziie n funcie de ce se dorete prelucrat (ex: Curves).

94 Anexa 3: Tutoriale Adobe Photoshop

Din lista de canale se selecteaz Red, se trage de linia aprut n direcia stnga-sus. Dac se doresc operaii direct pe imaginea iniial se poate utiliza Image > Adjustments i lista de opiuni pus la dispoziie (Levels, Contrast, Hue, Saturation, Channel Mixer, Exposure etc.

Cum se cenzureaz o parte dintr-o fotografie?

Se deschide imaginea n care se dorete introdus zona de cenzur. Cu ajutorul uneltei de selecie rotunde (Elliptical Tool), se selecteaz zona de interes, se apas combinaia de taste Ctrl+C, respectiv Ctrl+V. Rezultatul este un strat nou ce conine selecia fcut. Se acceseaz Filter > Pixellate > Mosaic. n fereastra nou aprut Cell Size va lua o valoare potrivit (ex: 45).

Cum se schimb culoarea ochilor?

Se ncarc imaginea ce se dorete ajustat.

95

Cu ajutorul uneltei Elliptical Tool se face o selecie n jurul irisului. Selecia nu trebuie s fie exact. Fr a se renuna la selecie, se acceseaz modul Quick Mask. Cu ajutorul uneltei Eraser Tool se pot corecta eventualele greeli n selecie. Se reintr n Standard Mode. Se creeaz un strat nou cu selecia respectiv, se umple irisul folosind Edit > Fill > Color. Se seteaz Preserve Transpercy i Blend Mode la Hue (Soft Light) sau se pot ncerca alte setri pn se obine culoarea potrivit.

Cum se schimb culoarea unei maini?

Se ncarc imaginea ce se dorete ajustat. Se selecteaz folosind Lasso Tool sau Polygonal Lasso Tool toate prile unde se dorete o culoare nou. Cu Shift se adaug la o selecie, iar cu Alt se sustrage. Se copiaz selecia 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 dorete 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 fiierul Cortina. Pentru un efect pronunat 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 ajustri se poate utiliza Image > Adjustments > Levels. Se afieaz/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 faa unui fundal alb-negru.

Efect Motion Blur

Se realizeaz o selecie a prii din imagine care se dorete prelucrat. Se copiaz selecia pe un nou strat. Se aplic Filter > Blur > Motion Blur (ex: unghiul la 0 grade i distana la 90 pixeli). Se deplaseaz selecia dac este cazul. Pentru un efect mai puternic se poate utiliza opiunea 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 ct mai apropiat de o imagine veche real vom aduga 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 iniial Mihai WebSite se poate ascunde sau terge.

99

Se deplaseaz fiecare strat (liter) astfel nct s avem o suprapunere parial a literelor (vezi figur). Deplasarea se face cu CTRL i sgei. Fiecrei litere i se adaug o anumit culoare. Blending Options > Gradient Overlay cu setrile urmtoare Opacity 50% i Scale 150%. Gradientul se alege liniar, combinaie 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. Opional se pot aduce i alte modificri gen: Duplicate Layer, Normal >Screen i/sau Image > Adjustments > Brightness/Contrast. Pentru a obine efectul de oglindire se duplic stratul ultim rezultat. Se rotete imaginea cu 180o (CTRL+T, click dreapta Rotate 180o) Se modific direcia 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 dorete introdus n interiorul textului ca i strat nou poziionat deasupra stratului cu informaie text. Se creeaz o masc de tiere (Clipping Mask - ALT i click stnga pe linia dintre cele dou straturi) Se deplaseaz imaginea n interiorul textului i se poziioneaz pentru a obine 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 rotete 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 rotete imaginea la loc - 900 CW. Se reface textul Filter > Distort > Polar Coordinates, Rectangular to Polar. Se mai pot face modificri 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 innd tasta SHIFT apsat, un cerc.

101

Se seteaz opacitatea la 50% i din Blending Options se alege Stroke, Size 8 px, Inside, Black Color Se definete pensula: poziionare pe Background, selecia scenei cu CTRL+A i definirea propriu-zis cu Edit > Define Brush Preset. Se reine 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 convertete 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 setrile 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 crui mod se schimb n Color Dodge. Selectm Brush Tool, o anumit dimensiune a pensulei, culoarea alb i desenm n scen fie innd apsat i trgnd, fie printr-o simpl apsare. Se aplic stratului un filtru Blur > Gaussian Blur, Radius: 1-2 px. Opional se poate aduga un nou strat i se deseneaz cu ajutorul pensulei.

102 Anexa 3: Tutoriale Adobe Photoshop Efect linii strlucitoare

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) urmtoarele opiuni: culoare alb, mrime 2-4 px, Hardness 100%, Opacity/Flow 100% Shapes Dynamics cu Size Jitter 0%, Control - Off la toate opiunile 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 opiunea 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 ajustri de genul Blending Options (ex: Drop Shadow). Pentru adugarea 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 transformri ale liniilor utiliznd 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 - rezoluie 72 pixels/inch - spaiu de culoare RGB 8 bii - fundal White

Text MIHAI ONIA - Myriad Pro, Regular 27 px, Crisp, csu culoare #ffffff - Drop Shadow, Angle 1350, Opacity 50%, Distance 2 px, Spread i Size 0%, Blend Mode > Multiply, csu culoare #000000.

Text WEB SITE - Myriad Pro, Regular 27 px, Crisp, csu culoare #333300 - Drop Shadow, Angle 1350, Opacity 42%, Distance 2 px, Spread i Size 0%, Blend Mode > Normal, csu culoare #ffff99

104 Anexa 3: Tutoriale Adobe Photoshop

Text butoane (Home, Portofoliu, Hobby, Foto, Contact) - Arial Regular 18 px, Crisp, csu culoare #ffffff Text meniu subsol pagin - Arial Bold 12 px, csu culoare #336633 Poz mare - efect de poz veche, a se vedea tutorialul corespunztor ntr-un paragraf anterior Poze mici - redimensionate cu Edit > Transform > Scale - desaturate cu Image > Adjustments > Desaturate

Fundal semitransparent verde (sub imagini) - Rectangle Tool, csu culoare #ccffcc, opacitatea stratului 30% - efect Drop Shadow, Angle -1350, Opacity 78%, Distance 2 px, Spread 100% i Size 0%, Blend Mode > Multiply, csu culoare #669966 - efect Stroke, Size 1px, File Type Pattern

Buton sub form eliptic - Ellipse Tool, culoare alb - redimensionri 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, csua 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, csu 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 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-UKMINERVA-M Andrei Ternauciuc, Onia Mihai, Ghidul tutorialului multimedia in domeniul elearning, Proceedings of the 2nd International Scientific Conference - ELSE, Editura Universitatii Nationale de Aparare Carol I", 2006, ISBN: (10) 9737854-35-7 (13) 978-973-7854-35-3, pag. 97 - 102, Bucuresti, Romania Mihai Onia, Contribuii la utilizarea tehnologiilor video n nvmntul electronic, Teze de doctorat ale UPT, Seria 7, Nr. 25, Editura Politehnic, ISSN: 1842 7014, ISBN: 978-606-554-255-6 McKinney Engineering Library, Multimedia Tutorial Production Guide http://www.utexas.edu/computer/grants/di4/tutorialguide.PDF, septembrie 2011 Ko, S, Rossen, S 2010, Teaching Online: A Practical Guide, Routledge, 3 edition ISBN-13: 978-0415997263 Barbara Obermeier, Photoshop CS 5 for Dummies, Wiley Publishing, ISBN 9780-470-60821-0, 2010 Doug Sahlin, Claudia Snell, Building Web Sites All-in-one For Dummies, 2nd edition, Wiley Publishing, Inc., ISBN: 978-0-470-38541-8, 2009 Jennifer Niederst, Web Design in a Nutshell. A Desktop Quick Reference, OReilly & Associates, ISBN: 1-56592-515-7, 1999 http://www.wikipedia.org, http://www.tutorialspdf.com/, septembrie 2011 Daniel Haiduc, Curs de Grafic Computerizat, Centrul de nvmnt la Distan, http://csid.upt.ro, decembrie 2000

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10] [11]

[12]

Corneliu I. Toma, Florin Alexa, Radu. A. Vasiu, Principiile televiziunii analogice i digitale, ISBN 973-625-267-1, Editura Politehnica 2006. Paul Zelansky, Mary Pat Fisher, Les theories de la couleur, ISBN 2-35278-0071, Thalia Edition 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 Ghid de utilizare Adobe Captivate 5, noiembrie 2011 http://help.adobe.com/en_US/captivate/cp/using/captivate_5_help.pdf 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 Sue Valentine, A Comparison of Animators (GIF89, QuickTime, Shockwave, Flash, Java, dHTML) http://jabba.edb.utexas.edu/multimedia/TReports/AnimationValentine.pdf, iulie 2011 Matthew MacDonald, Add Audio&Video to Your Site: The Missing Manual, OReilly Media, Inc., ISBN: 9781449382506, 2011 Iasmina Ermalai, Mihai Onia, Proiecte de dezvoltare multimedia pentru nvmnt la distan, campusul virtual al Universitii Politehnica Timioara, http://cv.upt.ro, iulie 2011 Dezvoltatorii Webmonkey, ncapsularea audio i video n pagini HTML5, http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pag es/, iulie 2011

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]