Professional Documents
Culture Documents
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
TUTORIALE MULTIMEDIA
Colecia MULTIMEDIA
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
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
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.
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
Adnotri i marcaje
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].
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.
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/
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.
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
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/
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.
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.
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
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
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.
28 Grafic computerizat - 4
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.
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.
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 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]
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:
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]:
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].
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
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.
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.
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.
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].
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
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 - 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.
Pensula de vindecare a petelor (Spot Healing Brush) ndeprteaz defectele sau obiectele nedorite.
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)
Stampila de clonare dup tipar (Pattern clone Stamp) picteaz cu o parte din imagine ca tipar.
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.
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.
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.
Unealta Zoom mrete sau reduce zone din suprafaa vizibil a unei imagini.
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.
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.
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.
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.
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 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:
Transparency:
Off
Disposal Method:
Do Not Dispose
5.3 - Flash 61
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.
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});
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.
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.
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)
Convertete fiierul n
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.
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>
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.
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/
Motoare de cutare
nregistrri audio
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).
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.
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.).
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.
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.
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.
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.
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.
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.
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
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.
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;} }
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.
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).
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.
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).
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.
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.
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.
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.
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.
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).
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).
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.
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
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.
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.
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
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]