Multimedia T3

download Multimedia T3

of 21

Embed Size (px)

Transcript of Multimedia T3

  • 8/6/2019 Multimedia T3

    1/21

    Multimedia Georgeta Drul

    UNIVERSITATEA DIN BUCURETIFacultatea de Jurnalism i tiinele Comunicrii

    MULTIMEDIA

    Titular: Conf. dr. Georgeta DRUL

    TUTORAT 1:Definiie. Aplicaii. Caracteristici ale documentului multimedia.Etape n realizarea documentului multimediaEchipa de realizatoriInterfee pentru documentul multimedia online i offline

    TUTORAT 2:Componente multimedia: Imaginea fix.Componente multimedia: AnimaiaComponente multimedia: SunetulComponente multimedia: Video

    TUTORAT 3:Asamblarea unui document multimedia offline cu DirectorRealizarea unui document multimedia online

    Obiective curs:- Cunoaterea etapelor de numerizare i a caracteristicilor componentelor

    multimedia digitale ce particip la realizarea documentelor multimedia;- Cunoaterea caracteristicilor i modalitilor de lucru cu documentul

    multimedia online i offline, cu suport de difuzare reeaua Internet i suportul optic dedistribuie CD-ROM.

    1

  • 8/6/2019 Multimedia T3

    2/21

    Multimedia Georgeta Drul

    TUTORAT 31. Asamblarea unui document multimedia offline cu Director

    Cu un soft authoring ca Macromedia Director se pot crea documentemultimedia offline care s animeze site-uri Web sau se pot realiza chiocuri i

    prezentri interactive pentru educaie, divertisment sau informare stocate pe CD-ROMsau DVD-ROM. Documentul creat de Director conine medii, filme i fiiere diferitei multiple. Manevrarea lui este mai complex dect manevrarea altor documente. n

    plus, formatul fiierului n care se lucreaz documentul este diferit de formatul n carese va face distribuia acestuia. Astfel, un proiect multimedia Director poate fidistribuit ca format film Shockwave, acceptat de browserii web i ca format proiectorexecutabil ce se execut pe platformele utilizator ca aplicaii independente.

    Softul author Macromedia Director asambleaz proiectulmultimedia rspunznd de sincronizarea spaial, temporal, intermedii i interactivdintre componentele media de natur diferit.

    Documentele multimedia se realizeaz pe un storyboard care are o anumitstructur. Aceast structur este liniar, arborescent sau interactiv de tip hiper,compus din scene individuale caracterizate de proprieti i din legturi (link-uri)ntre acestea.

    Rolul principal al produselor authoring este de a furniza omodalitate de combinare i de manevrare a diferitele medii pe ecran. Ajutate de unnumr mare de instrumente, de palete i ferestre, precum i de un limbaj inclus, aceste

    produse sunt capabile s gestioneze n timp i spaiu, mediile digitale.

    Software-ul authoring multimedia Director este un produs al firmeiMacromedia, cu suport biplatform, Macintosh i Windows - PC. Alturi de alte

    produse authoring, Director organizeaz proiectul asemntor tehnicii realizriifilmului, cu o serie de actori n distribuie, cu cadre trase i organizate, care n finalasigur derularea unui film, cu o vitez de maximum 25 - 30 de cadre pe secund,viteza derulrii unei secvene video. n plus, anumite cadre se pot derula la viteze

    particularizate n proiect, dup necesitile de prezentare a acestuia.Softul Director organizeaz storyboard-uli evenimentele care l compun pe

    axa timpului, prin fereastra Score i cu ajutorul unui limbaj script, inclus. FereastraScore asigur sincronizarea i secvenierea obiectelor i evenimentelor printr-un tabelde rnduri i coloane, care sunt completate progresiv cu diferiii participani la proiect,

    2

  • 8/6/2019 Multimedia T3

    3/21

    Multimedia Georgeta Drul

    prin manevre ale creatorului de proiect sau prin intermediul script-urilor acionate demesaje.

    Tratarea mediilor i a elementelor de interfa ca obiecte, permite setarea decaracteristici i de proprieti specifice fiecruia, fixarea unui comportament autonom,

    prin comenzi ale limbajului de programare specific Director, denumit Lingo.

    Lucrul cu mai multe ferestre asigur organizarea n timp i spaiu acomponentelor multimedia.

    O caracteristic specific a soft-ului authoring multimedia Director esteposibilitatea sa de a lucra simultan cu numeroase ferestre care ajut la ntocmireaproiectului propriu-zis. Un proiect multimedia poate fi construit din mai multe fiiere-film Director. La rndul su, fiecare film are o distribuiie, un numr de elementemultimedia participante, conform schemei:

    Fig Structura unui document multimedia offline realizat cu softul Director

    Prezentarea ferestrelor Director implicate n realizarea unui proiect multimedia:

    Fereastra SCEN: Locul unde se ntmpl....totulProiectul multimedia se realizeaz i se execut pe scen (STAGE). Aceasta

    reprezint suprafaa de creare i de derulare n timp, pentru toate filmele Director.

    nainte de a trece la realizarea propriu-zis a proiectului, se fixeaz proprietileacestei suprafee, care se poate extinde chiar i peste limitele ecranului. FilmulDirector de pe scen se deruleaz, parcurgndu-se axa timpului, chiar dac i alteferestre ale produsului sunt deschise i active. Aceast facilitate permite urmrireafilmului att pe scen, ct i n fereastra de sincronizare i organizare, Score, sauurmrirea membrilor filmului n fereastra Cast. Un element pus n scen trebuientotdeauna s fie nregistrat pe axa timpului n fereastra Score, pentru a participa larealizarea filmului. nregistrarea derulrii filmului se realizeaz cu comenzilecunoscute ale unui VCR: Play, Step Forward i Stop, sau mai simplu prin fereastra

    Control Panel care regleaz, n plus, i tempo-ul desfurrii acestuia.

    3

    Document multimedia offline

    Film Director2

    Scena 22

    Scena 21

    Film Director1

    Scena 11

    Scena 13

    Scena 12

    Film Director3

    Scena 31

    Scena 32

    Film Director4

    Scena 42

    Scena 43

    Scena 41

  • 8/6/2019 Multimedia T3

    4/21

    Multimedia Georgeta Drul

    Setrile proprietilor scenei pot fi suprafixate, prin anularea celor iniiale,apelnd la opiunile de proiecie (Projector Options), opiuni care vor fi folosite detoate filmele Director, derulate sub un acelai proiector. Aceste opiuni permit, n

    plus, fixarea unei animaii permanente pe background-ul scenei (comanda Movie

    Properties).

    Fereastra CAST specificdistribuia filmuluiAceast fereastr prezint ntr-un tabel sau sub form de list toate

    componentele ce particip la realizarea proiectului multimedia. Ea conine toate datelegrafice, sunetele, palete de culoare, script-uri Lingo, butoane de interaciune,animaie, tranziii, video digital, text precum i alte fiiere de film Director. Undocument multimedia Director poate lucra cu mai multe ferestre Cast.

    Fiecare element al ferestrei este nsoit de un numr, un icon i eventual un

    nume, ce se atribuie n momentul includerii sau crerii lui n CAST i i identificpoziia n CAST Window.

    Membrii CAST pot fi creai sau sunt importai sub forma unor fiiere n primalocaie liber din fereastr, dac iniial, nu a fost selectat nici o alt poziieneocupat. Asupra ferestrei CAST se pot executa operaiile obinuite de editare:tiere, copiere sau tergere de elemente. Fiecare membru CAST este caracterizat de omare varietate de proprieti ce pot fi fixate direct prin comenzi sau prin instruciuniale limbajului Lingo.

    Fig. Componentelemultimedia care vor participa

    ntr-un document multimedia realizat cu Director, afiate n fereastra cast

    n cadrul unui proiect Director se poate lucra cu mai multe biblioteci CASTcare pot fi interne sau externe. Bibliotecile CAST interne sunt create odat cu

    4

  • 8/6/2019 Multimedia T3

    5/21

    Multimedia Georgeta Drul

    proiectul Director i stocate n acelai fiier cu documentul. Bibliotecile externe suntstocate separat de un document i pot fi folosite de mai multe fiiere Director.Fiierele bibliotec CAST externe au extensia .CST.

    Fereastra SCORE organizeaz proiectul n timpEste locul ce permite compunerea proiectului pentru animarea, afiarea i

    execuia membrilor CAST. Fereastra este construit ca un tabel de coloane, cereprezint cadrele (frames) executate la o anumit vitez specificat n canalul detemporizare ide rnduri ce reprezint canalele n care se vor pune actorii, membriiCAST. Fiecare canal este compus din irul de cadre. Primele ase canale din SCOREau destinaie special: de temporizare, pentru paleta de culori, dou canale pentrusunet, un canal pentru efecte speciale i unul pentru script-uri care modific cadrele.Restul de canale sunt denumite canale sprite unde se aeaz celelalte componente

    multimedia.Un obiect aflat ca membru CAST, aezat n SCORE pe un canal i avndun anumit comportament la un moment dat pe axa timpului se recunoate subdenumirea desprite. Ordinea n care sprite-urile apar n SCORE determin aezarealor pe scen pe axa Oz, dnd senzaia de adncime. Tot ceea ce se realizeaz pe scentrebuie s se nregistreze prin fereastra SCORE.

    Fig. Derularea n timp a unui proiect prin fereastra Score

    Fereastra Marker denumete cadrele cu o anumit etichet, markerEste tipul de fereastr ce permite furnizarea de informaii suplimentare pentru

    organizarea elementelor i evenimentelor n SCORE. Fereastra ine evidena unorcadre care au fost denumite prin marker-e. Ea prezint corespondena dintre numrulcadrului i numele acestuia i este eficient pentru generarea, editarea i manevrarea

    5

  • 8/6/2019 Multimedia T3

    6/21

    Multimedia Georgeta Drul

    componentelor SCORE cnd se poate pierde numerotarea lor. Aceste markere sepstreaz indiferent cum se editeaz SCORE. De exemplu, cadrul cu numrul 43 se vanumi cap3 i se va apela cu acest marker i nu prin numrul su.

    Fig. Lista de markere ce separ proiectul n scene

    3.2.2 Generarea unui proiect multimedia cu DirectorProiectul multimedia poate fi creat punnd direct pe STAGE, ntr-o anumit

    relaie spaial elementele din CAST. Aceast variant este foarte eficient n ceea ce privete organizarea spaial a proiectului. Relaiile temporale dintre elementeleCAST ale proiectului trebuie ajustate prin intermediul ferestrei Score. n aceastfereastr este uor s se fixeze pentru fiecare element durata sa de execuie, precum isincronizarea elementelor care au timpi comuni de desfurare.

    Principalele etape n generarea unui document multimedia offline cu softulDirector:

    I. Se creaz un fiier nou care va conine proiectul i pentru care vor fi setate opiunilegate de dimensiunea i caracteristicile acestuia.

    ntruct proiectul se desfoar pe ecran trebuie aleas o dimensiune a Stage-ului exprimat n pixeli. Aceast dimensiune trebuie corelat cu dimensiuneaecranului monitorului n lucru, dar i cu dimensiunea cea mai frecvent pentru

    ecranele unde va fi consultat proiectul. Neconcordana dintre dimensiunile scenei idimensiunile de afiare ale ecranului duce la distorsionri sau eliminri din suprafaade vizualizare a diferitelor elemente. Se pot alege dimensiuni standard, cunoscute carezoluii standard de ecran pentru scenele proiectului sau se poate lucra cu odimensiune particularizat a scenei, n concordan cu cele spuse mai nainte. Deasemenea trebuie precizat cota (valoarea lui X i Y) punctului stnga sus unde va fi

    poziionat scena.Redarea de calitate pe ecran a proiectului este influenat i de sistemul

    coloristic de afiare, care poate fi System Win sau Mac n funcie de platforma

    calculator folosit, poate fi GrayScale sau NTSC. n funcie de sistemul coloristic se

    6

  • 8/6/2019 Multimedia T3

    7/21

    Multimedia Georgeta Drul

    va alege a anumit culoare de background pentru scenele unde se va desfuraproiectul. Toate aceste opiuni sunt proprieti ale obiectului Movie.

    Fig. Setarea caracteristicilor scenei prin paleta sa de proprieti

    II. Crearea i importarea elementelor media i de interaciune n CAST-uldocumentului multimedia.

    Se poate stabili din acest moment care vor fi elementele ce vor compunescenele. Director are posibilitatea de a importa diferite elemente (filme, sunet, video,imagini) create i stocate iniial n alte fiiere, dar poate s i creze elemente media ide interaciune prin editoarele proprii, incluse. Fiecare element introdus va ocupa unloc liber n CAST-ul proiectului i va fi caracterizat de un anumit set de proprieti

    precum i de un comportament general.

    Editoarele incluse programului Director permit crearea de texte, de formegrafice vectoriale bazate pe descrieri matematice. Aceste elemente nu trebuie stocaten fiiere separate, ele vor face parte din structura fiierului proiect.

    7

  • 8/6/2019 Multimedia T3

    8/21

    Fig. Editorul dedesenare permite creareai fixareaproprietilorformelordesenate.

    Multimedia Georgeta Drul

    III. Completarea SCORE cu membrii din biblioteca CAST.Crearea CAST-ului permite nceperea asamblrii propriu-zise a proiectului

    multimedia. Aducerea membrilor CAST n celulele SCORE nseamn declanareamodului nregistare n canalele n care acetia sunt plasai. Plasarea membrilor CAST

    pe scen i nregistrarea lor n SCORE casprite-uri se face prin operaii drag & drop

    cu ajutorul mouseului i echivaleaz cu comanda Step Record. Cnd plasarea acestorase face direct pe scen i nu n celule SCORE specificate, Director va fixa elementelen primele celule gsite libere, cele mai apropiate de selecia SCORE curent.

    Umplerea canalelor SCORE se face n funcie de tipul elementului introdus ide ordinea n care acesta a fost apelat. Astfel, bitmap-urile, textele, cmpurile text,

    butoanele, filmele, video digital se pun n canalele numerotate de la 1, sunetul se vaaeza numai pe canalele sale specifice, ca i paletele de culoare, tranziiile sauscripturile frame.

    IV. Fixarea proprietilor sprite-urilor SCOREAceast etap presupune setarea proprietilor pentru elementele CAST careau fost puse n SCORE i se numesc sprite-uri. Toate acestea specific uncomportament particular al elementului pe parcursul derulrii proiectului i se produc

    prin comenzi Sprite properties (meniul MODIFY).

    V. nregistrarea proiectuluiModul automat folosit pentru nregistrarea proiectului este nregistrarea pas cu

    pas a unui canal (step-by-step) i corespunde aducerii membrilor CAST n fereastraSCORE sau pe scen. Canalele sprite nregistrate sunt trasate de ctre un indicator

    8

  • 8/6/2019 Multimedia T3

    9/21

    Multimedia Georgeta Drul

    rou aflat pe axa timpului, ce simbolizeaz capul de citire i semnalizeaz aceaststare. Un canal sprite n modul nregistrare se poate copia n mai multe cadre prinfolosirea comenzii Step Forward (meniul Control) sau direct din Control Panel.

    Un alt mod de a nregistra pe un canal este modul real-time carenregistreaz

    micarea unui sprite pe mai multe cadre dup cum acesta este deplasat pe scen cuajutorul mouse-ului.

    VI. Animarea proiectuluin principal, animarea unui proiect multimedia Director se realizeaz fie prinmecanismele furnizate prin fereastra SCORE sau prin comenzi ale limbajuluiLingo.

    Animarea prin fereastra SCORE poate fi tratat n cteva modaliti ce suntalese individual, pe cazuri i necesiti specifice. Astfel, se poate considera c unelement al proiectului va putea fi deplasat de ctre utilizator n timpul redriidocumentului multimedia oriunde dorete pe suprafaa scenei. O astfel de animaie sefolosete, mai ales, la proiectele de divertisment sau educaie care pun utilizatorul sncerce combinarea mai multor piese ntr-un ntreg. Realizarea acestui efect se face

    prin selecia checkbox-ul Moveable din Score. Deplasarea pe scen a elementelorMoveable se poate face att n timpul redrii ct i la proiectarea documentuluimultimedia.

    Animarea pe baza tehnicii cadrelor cheie se bazeaz prin comenzile In-Between Special i In-Between (meniul Insert). Acest efect produce deplasarea unuisprite pe un anumit numr de cadre dup un anumit traseu descris ntre dou cadrecheie, cu o anumit vitez. Cadrele iniial i final trebuie marcate prin comandaKeyFrame i vor determina forma traseului spriteului. ntre cele dou cadre finale sealeg cadre intermediare ce trebuie selectate pentru a modifica forma traseului.Animarea prin introducerea cadrelor cheie (keyframes) se realizeaz prin definirea

    punctelor iniial i final ce stabilete traseul total al obiectului animat, apoi marcareaacelor puncte n care obiectul i schimb direcia de mers (comanda Insert keyframe).

    Traseul parcurs se poate vizualiza direct pe ecran i este modificabil direct cu mouse-ul.

    Introducerea animaiei n proiectele multimedia se poate face apelnd lacomportamente deja create care se pot ataa elementelor din scen. Comportamentelecunoscute ca Behaviors dau flexibilitate proiectului realizat. Astfel, n loc s seexecute o serie de cadre aa cum a fost stabilit n Score, un comportament poatecontrola derularea proiectului n funcie de ndeplinirea anumitor condiii ievenimente specifice. Derularea proiectului se va face dup comportamentul ce se

    ataeaz unui sprite aflat n scen sau n Score. Se apeleaz la biblioteca decomportamente, apelat cu Library Palette. Fiecare comportament are un nume i un

    9

  • 8/6/2019 Multimedia T3

    10/21

    Play trecerea n modul run-time

    Stop trecerea n modulauthoring

    Viteza de derulare aproiectului (fps)

    Multimedia Georgeta Drul

    icon care i precizeaz tipul. La ataarea comportamentului la un sprite, o serie deparametrii permit particularizarea acestuia.

    Tot prin intermediul bibliotecii de comportamente se poate opri derularea proiectului sau saltul la un anumit cadru n anumite condiii, se poate controla

    navigarea acestuia.

    VII. Execuia proiectului din SCOREDerularea document multimediaului se poate urmri prin poziionarea capului

    de citire din fereastra Score ce traverseaz fiecare cadru din proiect. Lucrul cuproiectul multimedia n Director se face n modul authoring dar i n modul run-time.Proiectele create n softul authoring Director sunt salvate n fiiere de extensie .DIR.Acest format de fiier nu este cel cu care documentul va fi, n final, distribuit.

    Trecerea la modul run-time n care proiectul va fi derulat va fi declanat prin butonulPlay al ferestrei Control Panel. ntoarcerea la modul authoring se marcat se apsareabutonului Stop din acelai panou.

    Fig Fereastra Control Panel

    2. Realizarea unui document multimedia online

    10

  • 8/6/2019 Multimedia T3

    11/21

    Multimedia Georgeta Drul

    2.1 Crearea de pagini n limbajul HTMLDocumentul Web, ca document hipermedia, este construit din mai multe

    fiiere, fiecare cu adres unic (URL) i din legturile dintre acestea. Descriereacomponentelor lui se realizeaz prin limbajul HTML (HyperText Markup Language)

    ce stocheaz informaia creat n fiiere cu extensie .htm sau .html. Un fiier HTMLeste un document text ce conine o serie de etichete (marcaje) ce indic browseruluicum s afieze un anumit coninut. Etichetele HTML sunt coduri ale limbajului ceofer informaii despre structura paginilor Web, apariia i coninutul acestora. ndescrierea relaiilor structurale dintre elementele paginii, anumite etichete HTMLconin i o serie de atribute.

    Pagina afiat de browser este citit ca surs HTML, ca enumerare de etichete.Un element al limbajului HTML, o etichet, include un nume, atribute i coninutul dedate, de forma urmtoare:

    coninut_de_date.

    Etichetele HTML arat browser-ului cum s redea pagina text, s prezinte

    grafica, sunetul i video. Interpretorul browserului citete pagina i separ etichetelepentru procesare. Se poate constata c cele mai multe dintre etichete cer o nchidere ainstruciunii, notat cu , altele cum sunt

    sau
    nu au etichet de nchidere.O parte dintre etichete cer atribute ce dau informaii suplimentare despre elementulrespectiv. Diferiii browseri Web recunosc diferit anumite seturi dintre elementele

    limbajului HTML.Toate documentele HTML sunt cuprinse, n mod obligatoriu, ntre etichetele

    i i ele indic unitatea structural cea mai cuprinztoare. ntre acesteetichete sunt deschise alte perechi de etichete, necesare definirii subcomponentelorstructurale sau de coninut ale documentului, cum ar fi perechile i .

    O pagin HTML este mprit n 2 zone: HEAD i BODY.- Zona HEAD conine informaii de identificare a documentului, paginii Web;- Zona BODY conine informaia afiat i citit n ecran de ctre utilizator.

    Spre exemplu, n zona HEAD ntlnim etichete de tipul:- i Care deschid documentul i sunt referite ca document type prolog indicnd cdocumentul este conform standardului HTML, definit de Internet Engineering TaskForce (IETF). De asemenea, se definete tipul document, document type definition

    DTD, ca PUBLIC (adic nu este dependent de sistem) i setul de etichete utilizat npagin, n Englez (EN). Aceast linie este opional n cadrul unui fiier HTML.- Titlul documentului va determina afiarea headerului paginii,

    printre care i titlul ce apare pe bara de titlu a browser-ului.

    Spre exemplu, n zona HEAD ntlnim etichete de tipul:

    11

  • 8/6/2019 Multimedia T3

    12/21

    Multimedia Georgeta Drul

    - Corpul propriu-zis al paginii ncepe cu eticheta nsoit de diferiteatribute, cum ar fi cele legate de backgroundul paginii.- Imaginea este inclus n pagina Web prin eticheta care arat locaia inumele fiierului imagine (/exemplu/imagini/entete.gif), dimensiunea lui exprimat n

    pixeli (130 *28), diferite proprieti, cum ar fi linia de contur.Pe lng limbajul HTML se pot folosi i alte limbaje n construirea paginii

    Web. Astfel, programarea poate fi folosit pentru a modifica radical aspectul ifuncionalitatea acesteia.

    Elementele limbajului HTML se grupeaz pe mai multe categorii principale.

    2.2 Etichete de structur pentru organizarea documentuluintreaga structur a documentului HTML este cuprins ntre etichetele

    i , cu subdiviziunile i , i . ------ Etichete obligatorii cu care ncepe sau se termin orice

    pagin fiier Web. ----- Conine informaii ce caracterizeaz fiierul i pagina ce

    urmeaz a fi afiat. nume_document

    _afiat_pe_bara_titlu eticheta este cuprins n structura head i furnizeaz untitlu pentru pagin, titlu ce va fi afiat pe bara titlu alturide numele browserului.

    eticheta apare n cadrul componentei head pentru atransmite informaii ce nu sunt recunoscute de limbajulHTML i de browseri, dar d informaii pentru motoarelede cutare, furniznd cuvinte cheie de regsire, numeleautorului sau alte informaii ajuttoare.

    .coninutul de dateal documentului

    eticheta cuprinde coninutul propriu-zis al paginii iseteaz prin atributele sale caracteristicile de afiare ifuncionare ale acesteia, cum ar fi background-ul.

    Pentru caracteristicile ntregii pagini sunt setate valorile atributelor etichetei. Aceste valori ce se pstreaz permanent n document i sunt date pentru

    atributele urmtoare:- BGCOLOR=#rrggbb sau BGCOLOR=nume_culoare ce stabilete culoarea

    fondului de pagin i nu e consumator de resurse. Culoarea poate aprea ca fondde pagin prin alegerea unei valori hexazecimale aflate ntr-o palet de culoare.Codajul culorii este RRGGBB (Red Green Blue).

    - BACKGROUND=URL_imagine fixeaz pe fundalul paginii o imagine transparent, existent de pe un server. Acest atribut esteconsumator de resurse, n sensul creterii timpului de transfer a paginii. Pe acestconsiderent, textura paginilor ar trebui s fie simpl, relativ monocrom pentru a

    preservi lizibilitatea paginii i pentru a crete viteza de transfer.

    12

  • 8/6/2019 Multimedia T3

    13/21

  • 8/6/2019 Multimedia T3

    14/21

    Multimedia Georgeta Drul

    - modific culoarea caracterelor cuprinse ntreetichete;

    - stabilete fontul cu care se vor scrie caracterele;

    - centrarea textului pe ecran.

    - include comentarii n HTML

    - insereaz o linie orizontal sau un separator ntre seciunile text

    TEM:1. Folosindu-v de comenzile unui editor HTML care genereaz automat

    etichete, creai o pagin Web simpl, care s conin doar text formatat.Vizualizai sursa acestei pagini i urmrii etichetele create.

    2. n aceleai condiii mai creai o pagin Web. Cele dou pagini trateaz aceleaitem.

    2.4 Legarea paginilor Web i construirea structurii hipertext Navigarea prin site-ul Web, parcurgnd paginile HTML sau coninutul

    multimedia se realizeaz prin hiperlegturi declanate de ctre utilizator. Legturaextern declaneaz un URL specificat pentru a descrca sau a deschide un alt fiieraflat pe acelai server sau pe alt server i se creaz prin etichetele ancor , i cu un atribut HREF (de referin) care indic acest URL. O ancor cu atributul

    NAME creaz o legtur intern, un bookmark la o locaie din interiorul aceluiaifiier.

    Pentru definirea oricrui tip de legtur, trebuie precizate punctul su denceput sau de lansare (ancora) i punctul de destinaie, care poate fi un URL sau un

    bookmark. Astfel, la activarea unei legturi (de obicei la clicul mouseului pe un obiectactiv), browserul ncarc, citete i red fiierul destinaie sau se poziioneaz pe un

    bookmark.

    Definirea de ancore numite i de legturi interne

    nume_ancor - definete locaia intern nume_ancor - definete o legtur intern ctre

    o locaie destinaie din acelaifiier.

    Definirea ancorelor referite i a legturilor externe sau executabile

    nume_ancor - definete o legtur extern ctre un altfiier sau resurs.

    nume_ancor

    - definete o legtur extern, ctre oanumit locaie destinaie, dintr-un alt

    14

  • 8/6/2019 Multimedia T3

    15/21

    Multimedia Georgeta Drul

    fiier.Definirea de legturi externe ctre serveri ai altor servicii Internet, ca puncte

    destinaie nume_ancor - legarea la un server Web;

    nume_ancor - stabilete o conexiune cu unserviciu de pot electronic.

    Definirea de legturi executabile

    nume_ancor

    - definete o legtur executabil, al crui punct destinaie este un script aflat peserver. Serverul va declana scriptul nfuncie de irul de date trimis. Serverii

    pot interpreta diferit acest ir.

    TEM:1. Creai legturi externe ntre paginile Web create i legturi interne n interiorullor.

    2.5 Folosirea de imagini n paginile unui site WebLa inserarea unei imagini n pagina Web se specific numele fiierului

    corespunztor, locul i calea pn la acesta, precum i proprietile sale: decupajultextului n jurul fotografiei (text wrapping), poziionarea fa de text, nlimea (n

    pixeli), limea (n pixeli), spaialitatea, textul alternativ, imaginea de rezoluie mic

    alternativ, cadrajul. Imaginea dintr-o pagin poate fi editat numai de un editorextern specializat i poate folosi o hart de zone i legturi.

    Dup modul n care sunt afiate i funcioneaz, imaginile din paginile Webpot fi:- imagini inline cnd afiajul lor se face automat n fereastra browserului, la transferul

    paginii Web, odat cu apariia textului pe pagin. Imaginile se gsesc n documentulHTML n aceleai condiii ca pe o pagin imprimat. De obicei, aceste imagini au unformat standardizat aa cum este GIF (Graphics Interchange Format) sau JPEG( Joint Picture Expert Group). Folosirea acestor formate pentru imaginile inline

    asigur corectitudinea livrrii imaginii n browser. Aceste imagini trebuie s seregseasc n permanen pe server mpreun cu pagina HTML.- imagini externe care nu apar pe ecran odat cu pagina, ci sunt propuse printr-olegtur hipertext a crei extremitate poate fi un fiier imagine. Aceste imagini se potafia de ctre browser sau de ctre o aplicaie helpersauplug-in.- imagine hart clicabil (image map) ataeaz pe diferite zone ale sale, legturiexterne ctre URL-uri diferite. Imaginea se desparte n zone pe baza unui sistem decoordonate, msurate n puncte sau n pixeli. O imagine hart se folosete, mai ales,

    pentru crearea de home-pageuri ilustrate. Gestiunea imaginii hart este fcut de ctre

    server prin intermediul unui program instalat sau direct la staia client.

    15

  • 8/6/2019 Multimedia T3

    16/21

    Multimedia Georgeta Drul

    Pentru introducerea de imagini inline i hart n paginile Web se foloseteeticheta mpreun cu atributele sale care specific proprietile, caracteristicilede poziionare i de formatare ale acestora:

    - afieaz o imagine inline prin aliniere

    la baza sa a textului care o nconjoar.

    - afieaz o imagine prin aliniere n partea de sus a textului care onconjoar.

    - afieaz o imagine prin aliniere lacentru a textului care o nconjoar.

    - nlocuiete cu text explicativ oimagine ce nu se poate afia ntr-un

    browser.

    - imaginea este afiat cu chenar degrosime msurat n n puncte.

    - imaginea este afiat n diferiteformate pe ecran, o variant de rezoluiemic i una de rezoluie mare, normal,

    prin atributul lowsrc.

    Imaginile hart cer etichetei atribute suplimentare, specifice pentruapelul hrii:

    - includerea unei imagini care folosete ohart definit la server, cu numele dat deatributul ISMAP.

    - includere o imagine care folosete ohart definit la client cu numele dat deatributul USEMAP.

    TEM:1. Inserai imagini externe i inline n paginile Web create. Urmrii cum s-a

    modificat codul surs al paginii.

    2.6 Organizarea coninutului unei pagini Web folosind tabele i listeOrganizarea i ordonarea coninutului paginilor HTML apeleaz tehnici pentru

    construirea de tabele variate, liste ordonate i neordonate, frameuri i layere.

    16

  • 8/6/2019 Multimedia T3

    17/21

    Multimedia Georgeta Drul

    Construirea de tabele n paginile HTML este realizat prin setul de etichete, care pot fi nsoite de atribute pentru detalii de afiare. ntre acestea,se regsesc etichetele (Tabel Row) i (Tabel Data) pentru definirea tuturorliniilor i celulelor tabelului. Coninutul celulelor poate fi text, imagini, liste, legturi

    hipertext, elemente de formular sau alte tabele. Reprezentarea tabelului depinde debrowserul utilizat la vizualizarea lui.

    - definete un tabel.

    - determinarea unui tabel cu chenar, msurat npixeli.

    - definete un tabel n care limea celulei estemsurat n pixeli, valori absolute. Atributelecellpadding i cellspacing stabilesc ce distan,msurat n pixeli, se va pstra ntre coninutulunei celule i cadrul su.

    - include un rnd ntr-un tabel i provine de laTable Row.

    coninut_celul - definete o celul de pe rndul curent i indicinformaia ce o va completa. Provine de la TableData.

    coninut_celul

    - definete o celul de pe rndul curent, omsoar n pixeli, valori absolute i i specificconinutul.

    coninut_celul

    - definete o celul de pe rndul curent, cu

    dimensiunea msurat n valori relative fa deconinutul su.

    - definete o celul de pe rndul curent i foreazun aliniament vertical al coninutului su.

    - Crearea unui entete de tabel. Etichetele provinde la Table Header. Fiecare parte de entet seintroduce separat, prin propriile etichete .

    Sursa HTML pentru crearea unui tabel cu dou rnduri i cinci coloane, reprezentat can fig. 6:Nr. crt

    Nume si prenume

    Rezultate obtinute la teste

    17

  • 8/6/2019 Multimedia T3

    18/21

    Multimedia Georgeta Drul

    Rezultate obtinut la examenMedia

    1.

    Avram Camelia6

    7

    6,5

    2.Andronache Teodor9

    9

    9

    Fig. 6 Tabel codificat n HTML

    Un alt element de organizare a informaiei n paginile HTML sunt listeleneordonate i ordonate (sau numerotate). Ele se creaz prin setul de etichete: i

    (UnorderedList) respectiv i (OrderedList). Fiecare element din

    cadrul listelor este cuprins ntre etichete i . Liste HTML

    Categorii de etichete HTML sub forma de lista ordonata

    Etichete de structurare

    18

  • 8/6/2019 Multimedia T3

    19/21

    Multimedia Georgeta Drul

    Etichete de formatare a textului Etichete de includere de imagini Etichete de creare a listelor si tabelelor

    Categorii de etichete HTML sub forma de lista neordonata

    Etichete de structurare Etichete de formatare a textului Etichete de includere de imagini Etichete de creare a listelor si tabelelor

    Fig. 7 Codul HTML care creaz o list ordonat i una neordonat

    TEM:1. Reorganizai pagina Web deja creat astfel nct coninutul su s fie repartizat

    n cadrul celulelor unui tabel. Urmrii codul HTML al paginii, n acestform.

    2.6 Realizarea i folosirea imaginilor hart n paginile WebImaginile hart, denumite i imagini senzitive, se folosesc cel mai des n

    homepage-uri pentru a lansa numeroase conexiuni din zone diferite. Zonele definitede o hart pot fi de form rectangular, eliptic sau poligonal i sunt date decoordonatele lor. Imaginii hart i se ataeaz un sistem de coordonate cu centrul ncolul stnga sus. Msurarea zonelor n pixeli se face pornind de la acest sistem de

    coordonate. Din fiecare zon definit se va declana o legtur ctre un URLspecificat. Imaginile hart se pot crea pe server (acesta determin coordonatele iURL-urile zonelor) sau direct la client (adic sarcinile legate de zonele imaginii iURL-urile adresate revin clientului).

    19

    ImagineaY (pixeli)

    X (pixeli)

    URL_1

    URL_2

    URL_3

  • 8/6/2019 Multimedia T3

    20/21

    Multimedia Georgeta Drul

    Fig. 9 Definirea zonelor imagine prin specificarea coordonatelor punctelor reprezentative

    Definirea hrii imagine se realizeaz ntre etichetele i , n felulurmtor:

    Coordonatele zonelor sunt ntotdeauna exprimate n pixeli. Zonele clicabilepot fi rectangulare, eliptice sau poligonale i se exprim prin cuvintele cheie: RECT,CIRCLE i POLY. Sistemul de coordonate ataat imaginii are originea n colulstnga sus. Pentru fiecare dintre zone se iau n considerare urmtoarele coordonate:

    - Zona RECT se determin prin coordonatele x0,y0, pentru colul stnga susi x1,y1 pentru colul dreapta jos;

    - Zona CIRCLE se determin prin coordonatele x0,y0, ale centrului cerculuii x1,y1 ale unui punct de pe circumferin;

    - Zona POLY se definete prin maximum 100 de vectori i prin specificareacoordonatelor x0,y0, x1,y1 x100,y100, x100,y100 ale extremitiloracestora.

    1. Folosirea i apelul hrii de coordonate se realizeaz prin atributul USEMAPasociat etichetei , astfel:

    .Prin valoarea dat atributului USEMAP (numele_hrii), clientul primete n

    pagina HTML punctele ce definesc zonele i conexiunea spre URL-urile specificate.Aceast tehnic uureaz activitatea de programare i permite att definirea hrii

    imagine ct i folosirea ei n cadrul aceluiai fiier, fr a se mai apela un programexterior.4. Verificarea i testarea imaginii cu zonele clicabile definite.

    Editoarele HTML permit, n general, crearea automat de hri imagine printrasarea cu ajutorul unor instrumente a zonelor senzitive. Coordonatele acestora ilegturile stabilite vor fi nregistrate la crearea hrii. Iat un exemplu:

    20

  • 8/6/2019 Multimedia T3

    21/21

    Multimedia Georgeta Drul

    TEM:1. Creai o imagine hart la utilizator folosindu-v de o imagine potrivit.

    21