Multimedija i Web

1. Multimedija i Web Aleksandra Tomić, 23975, FIB Antoni Mičić, 24238, FIB Maja Škaljac, 23962, FIB Ivan Šimičević, 23979, FIB

2. Multimedija i Web Ukoliko ste barem jednom surfali internetom sigurno ste se sreli s multimedijom, neovisno o tome da li ste igrali igrice slušali glazbu ili pokrenuli neki video isječak.

3. Multimedija i Web • U našem seminarskom radu ćemo pokušati približiti pojam Multimedije i Weba tako što ćemo: • definirati multimediju sa stajališta Weba i navesti ćemo prednosti i nedostatke korištenja multimedije. • redom ćemo opisati svaki od slijedećih elemenata multimedije  tekst, grafika, animacije, audio i video zapise  i definirati ćemo njihove različitosti.

4. Multimedija i Web • Ukratko ćemo opisati osnovne korake i principe korištene u multimedija web site dizajnu. • Navesti ćemo pojedine zadatke uključene u kreiranje i razvoj multimedija web siteova. • Objasnit ćemo kako su markup languages, scripting languages i ostali alati danas korišteni u kreiranju multimedija web stranica. • Sagledati mogući izgled i važnost Web multimedije u budućnosti.

5. ŠTO JE WEB MULTIMEDIJA? • Web multimedija; web siteovi sadrže više od jednog tipa medija – uobičajeno zvuk, video ili animaciju, kao dodatak tekstu i slici. • Multimedijalni siteovi obično sadrže interaktivne elemente koje korisnik direktno pokreće (kontrolira prijenos zvuka i video isječaka, vješto upravlja 3D objektima, igra igrice). • Brzi kompjuteri i široki raspon internet veza čine Web multimediu bolje izvedivu i lakše koristivu nego u prošlosti.

6. APLIKACIJE WEB MULTIMEDIJE Web multimedija se može primjeniti u slijedećim slučajevima: 1. prijenos informacija (slike proizvoda, video isječci, animacije) 2. E-commerce (slike proizvoda, isječci filmova i glazbe i drugo) 3. Zabava (internet igrice, video isječci, glazba, interaktivne aktivnosti...) 4. Web-based training (WBT) – isporučivanje naputaka pomoću weba.

7. Slika 1: Aplikacije Web multimedije

8. PREDNOSTI I NEDOSTATCI KORIŠTENJA WEB MULTIMEDIJE PREDNOSTI: • Može zadovoljiti raznolikostima stilova učenja: • vizualno učenje • slušno učenje • kinestetično učenje (podučavanje i stil učenja na način da student zapravo poduzima određenu fizičku aktivnost, radije nego samo slušanje predavanja) • Predmetnu građu čini interesantnijom i zabavnijom • Mnoge ideje se jednostavnije primjenjuju NEDOSTATCI: • Razvoj ima svoju cijenu i zahtjeva određeno znanje • Prostor potreban za pohranu pojedine količine memorije • Kompatibilnost i vrijeme učitavanja web multimedije

9. ELEMENTI MULTIMEDIJE • Tekst • Grafika • Animacija • Audio zapisi • Video zapisi

10. Tekst • Tekstom se predstavlja osnovni sadržaj i sama bit dodaju se izbornici i hiperlinkovi: • Serif typefaces: bolje čitljivo, koristi se za veće dijelove teksta • Sans serif typefaces: koristi se za naslove, zaglavlje i banere web stranica • Različiti oblici pisma (fonta) mogu doprinjeti različitom dojmu kod korisnika • Važno je primjeniti odgovarajuću veličinu slova (fonta) • Kada je potrebna pojava teksta u dosljednom obliku (kao npr. Logotip) – umjesto teksta koristi se grafika (grafička slika)

11. Slika 2: Primjeri logotipa

12. Grafika • Digitalna prezentacija fotografije, crteža, grafikona ili drugog slikovnog prikaza. • Clip art  prethodno nacrtani elektronički image: • Sadržan u nekim softverskim programima (npr. Word) • Besplatno dostupan pomoću Weba • Može biti nabavljen individualno ili unutar kolekcije • Stock fotografije  fotografije dostupne za kupnju • Različiti grafički formati MF, GIF, BMP, JPEG, PNG...

13. GIF GIF grafički format koji podržava 256 boja, obično korišten za linijske crteže na Web stranici • Može biti «transparent» (transparent – kada se boja pozadine stranice vidi kroz prozirne djelove slike; nontransparent – kada slika ima svoju boju pozadine) • Može biti «interlaced» (noninterlaced – kada se slika pojavljuje od vrha do dna; interlaced – kada se slika pojavi, ali loše kvalitete i onda se ravnomjerno poboljšava kvaliteta slike) • Koristi «lossless file compression» - Kompresija je sažimanje podataka bez gubitka podataka. Tehnika sažimanja (kompresije) podataka u kojoj se podaci ne gube

14. Slika 3: «Transparent» i «interlaced» GIF

15. JPEG JPEG  podržava stvarne boje i uobičajeno se koristi kod fotografija umetnutih u web stranice.  (JointPhotographicExpertsGroup) StandardnakompresijaslikailivideozapisakojajerazvijenanaročitozbogkorištenjanaInternetu. Većinafotografijasemožesnažnokompresiratisovommetodombezvelikoggubljenjanakvaliteti.  Oznaka .jpg ili .jpeg je ime ekstenzije dana JPEG grafičkim datotekama

16. JPEG JPEG • može biti «progressive» (napredan) • koristi «lossy file compression» - sažimanje, odnosno komprimiranje podataka pri kojem se neki podaci mogu izgubiti. Ova tehnologija sažimanja podataka pokušava ukloniti ponavljajuće ili nepotrebne informacije. • količina kompresije je specificirana kada je dokument snimljen

17. Slika 4: Kompresija u JPEG datotekama utječe osim na veličinu i na kvalitetu prikaza

18. PNG • PNG– posebno dizajniran za korištenje slika na web stranici • Koristi metodu sažimanja podataka «lossless copression» koja osigurava da kvaliteta slike ne oslabi • Koristi mješavinu boja ili prave boje • Još uvijek nije toliko rasprostranjen

19. Odabir grafičkog formata: • GIF - najčešće se koristi za linijske crteže na web stranicama (crtežne isječke,logotipe…) • JPEG – najčešće se koristi za fotografije • potrebno je odabrati grafički format koji najbolje odgovara pojedinoj slici • kod JPEG-a, potrebno je provoditi metodu sažimanja podataka čineći datoteku manjom, uz istovremeno osiguravanje kvalitete slike

20. Slika 5: Grafički formati

21. Minijatura («thumbnail» slika) - umetnuta sličica na web stranici, linkom povezana sa slikom izvorne veličine i bolje rezolucije - koristi se kako bi se skratilo vrijeme učitavanja, jer sliku u izvornoj veličini mogu vidjeti samo oni korisnici koji kliknu na minijaturu i time ne usporavaju učitavanje stranice za sve korisnike Slika 6:Thumbnail

22. Animacija - serija grafičkih slika prikazuje se uzastopnim slijedom simulirajući time pokret Java Applet - malen program umetnut u web stranicu koji izvodi specifičan zadatak Animacijski GIF (Animated GIF) - skupina GIF slika spremljenih kao animacijski GIF dokument umetnut u web stranicu. Slike se prikazuju uzastopnim slijedom kako bi se simulirao pokret

23. Animacija JavaScript – višeplatformski skriptorski jezik koji koriste dizajneri za složenije animacije Vlastiti multimedijski softver (Multimedija authoring software) – koristi se pri kreiranju multimedijskih elemenata Flash – mnoge igrice i druge animirane ili interaktivne aktivnosti koje se mogu naći na web stranicama koriste ili Flash ili Shockwave. Za pregled sadržaja izvan domašaja pretraživača potrebni su plug-inovi.

24. Slika 7: JavaScript i Flash

25. Audio zapisi • - zvukovi (glazba, glas, zvučni efekti) • Snimke mogu nastati koristeći mikrofon ili MIDI instrument, mogu biti pohranjene s CD-a, ili skinute s Interneta • Oglašava se kada se nešto dogodi na web stranici ili kada posjetitelj web stranice klikne na link • Da se ubrza isporuka, koristi se slijed zvučnih efekata «streaming audio»

26. Audio zapisi • Uobičajene ekstenzije audio datoteka: • .wav • .mp3 • .midi • .aiff • .aac

27. Video zapisi • slijed uzastopnih vizualnih informacija rastavljenih na odvojene slike ili isječke koji se prikazuju da bi simulirali stvarni događaj • iziskuje veliki kapacitet stranice • uobičajeno je sažimanje kako bi uštedjeli prostor • da se ubrza isporuka, koristi se poseban način slanja podataka, «streaming video»

28. Video zapisi uobičajene ekstenzije video datoteka: • .avi • .mpeg • .mov • .rm

29. DIZAJNIRANJE WEB STRANICE • Dizajniranje web stranice (web site design) sastoji se od planiranja kako će web stranicaizgledati i kako će raditi. • Dobro planiranje dugoročno se isplati. • Osnovni principi dizajniranja web stranica: • korisnici vole zanimljive i uzbudljive aplikacije • korisnici imaju malo strpljenja za aplikacije koje se sporo učitavaju, kao i za one koje se teško koriste • planiranje svih načina pristupa stranicama

30. Slika 8. postavljanje stranice koja će se moći koristiti sa što više različitih kofiguracija

31. posebnu pozornost treba posvetiti: • obilježjima koja zahtijevaju specifičan pretraživač • obilježjima koja zahtijevaju korištenje plug-inova • veličini sadržaja web stranice • veličini frekvencijskog opsega podataka

32. ODREĐIVANJE CILJEVA WEB STRANICE I KORISNIKA KOJIMA JE NAMIJENJENA • Jedan od prvih koraka u dizajniranju multimedijske aplikacije ili web stranice je određivanje ciljeva koji utječu na njen sadržaj. • Zatim je potrebno odrediti korisnike (auditorij) kojima je stranica namijenjena, što utječe na izgled stranice (stil, grafiku, font, boje…) • Jednom kad odredimo ciljeve i korisnike (posjetitelje), treba imati dobru ideju o temama i sadržaju koje će ta stranica uključivati. Ako je potrebiti sadržaj još uvijek nejasan, treba promisliti o korisnicima (posjetiteljima) i ciljevima i ne nastavljati proces dizajniranja dok sadržaj ne postane jasan.

33. Slika 9.: Primjer 4 stranice dizajnirane za različite korisnike

34. BOLD (izražen) - «Shopping stranice» često koriste žive boje veliki font i sl. kako bi stranici suvremen izgled, bogat bojama i oblicima • 2. CONSERVATIVE - mnoge stranice poduzeća koriste konzervativne izglede stranica koji se slažu s njihovom konzervativnom, odnosno poslovnom slikom u javnosti • 3. WHIMSICAL (maštovit) – stranice koje okupljaju mlade ljude često imaju maštovit izgled, sa puno slika, grafikona… • 4. BUSY (portali) – stranice dizajnirane za mnogobrojne korisnike, okupiran izgled sa puno linkova koji posjetiteljima omogućavaju da direktno idu na informacije koje traže

35. Korištenje flowcharta, page layouta i storyboarda • Koriste se za dizajniranje strukture i izgleda stranice • Dijagram toka: pokazuje kako se stranice odnose jedna prema drugoj • Izgled stranice: prikazuju osnovni izgled stranice na web stranici • Obično jedan za početnu stranicu i jedan za ostale stranice na siteu • Storyboards: ilustriraju sadržaj animiranih dijelova ili ostalih multimedijalnih sadržaja

37. Bitne stvari o dizajnu navigacije • Korisnici bi trebali biti u mogućnosti doći do većine stranica sa samo 3 klika mišem • Navigacijski botuni bi trebali biti smješteni na istoj lokaciji na svakoj stranici • Svaka stranica bi trebala imati link za početnu stranicu • Navigacijski alati mogu se koristiti kao pomoć pri navigaciji • Mapa stranice • Pretraživači • Tekstualni hiperlinkovi

39. PRISTUPNE OKOLNOSTI • Kompatibilnost uređaja • Web stranice se prikazuju drugačije na različitim uređajima • Neki mobilni uređaji prikazuju WML (wireless markup language) umjesto HTML • Takve uređaje treba uzeti u obzir pri kreiranju Web sadržaja

40. PRISTUPNE OKOLNOSTI • Pomoćne tehnologije: hardware and software dizajnirani za uporabu osoba sa fizičkim nedostatcima • utječe na Web dizajn jer je manja potreba uporabe miša lakša a pojedini uređaji ne mogu prikazivati grafičke prikaze • Rehabilitation Act zahtjeva od vlasti da imaju pristupačne Web stranice za osobe sa poteškoćama u razvoju • Savjeti za bolju pristupačnost • Koristite zamjenski tekstualni opis slika • Koristite značajne tekstualno orijentirane hiperveze • Koristite zamjenske sadržaje za Flash, JavaScript i ostale • vrste animiranih elemenata • Razmislite o kreiranju tekstualno orijentirane stranice • Imajte na umu čitljivost

42. NASTANAK MULTIMEDIJALNE WEB STRANICE • Jednom kada je Web stranica dizajnirana, vrijeme je za njezinu izradu • Tri osnovna koraka: • Kreiranje multimedijalnih elemenata • Kreiranje Web stranice • Testiranje, objavljivanje i održavanje stranice

43. Kreiranje multimedijalnih elemenata • Kreirajte sve pojedinačne multimedijalne sadržaje koji će se korisititi na stranici • Najčešće se koristi nekoliko različitih programa kao što su: • Grafički software • Animacijski software • Software za uređivanje zvuka • Software za uređivanje videa • Svaki pojedini element treba sačuvati u odgovarajućoj veličini, rezoluciji i formatu

44. Kreiranje Web stranice • Znakovni jezik: jezik koji koristi simbole ili oznake da bi opisao kako bi dokument trebao izgledati kada je prikazan u Web pregledniku • Većina Web stranica je izrađena uporabom znakovnog jezika • HTML (Hypertext Markup Language): originalni znakovni jezik • Koristi HTML znakove za označavanje mjesta gdje pojedini elementi pripadaju na Web stranici • Pojedini znakovi su spareni • Računalo i preglednik koji su u uporabi određuju kako će točno izgledati Web stranica

46. Kreiranje web stranice • XML (Extensible Markup Language): skup pravila za razmjenu podataka putem weba; addresses the content but not the formatting • XHTML (Extensible Hypertext Markup Language):novija verzija HTML-azasnovana na XML-u • XML; kontrolira izgled i format web stranice kao HTML • Striktnija pravila nego HTML • Polako zamjenjuje HTML

48. Kreiranje web stranice • Dinamičan HTML (DHTML): koristi se za pridodavanje dinamičnih sposobnosti i interakcije web stranicama • Wireless Markup Language (WML): koristi se za kreiranje Web stranica koji podržavaju WAP tehnologiju kao što su pametni mobiteli • ScalableVectorGraphics (SVG): koristi se za opisivanje slika na bazi vektora koji će se prikazivati u različitim veličinama na Web stranici kako bi se prilagodile veličini prozora pretraživača

49. Kreiranje web stranice • Scripting language (znakovni jezik): dopušteno korištenje znakova (instrukcija) u kodu Web stranice • JavaScript(nalik na Java programski jezik) • VBScript(temelji se na Microsoftovom Visual Basic programskom jeziku) • Perl (koristi se za pisanje CGI znakova koje služe za procesuiranje ulaznih podataka putem Web stranice) • AJAX: novi skup Web standarda koji se koristi za kreirati brže i učinkovitije interaktivne Web aplikacije