Razumijevanje kompjutora danas i sutra

1. Razumijevanje kompjutoradanas i sutra MULTIMEDIJA I WEB

2. Ciljevi učenja • Definiranje multimedije koja se bazira na Webu i navođenje prednosti i nedostataka upotrebe multimedije • Opis svakog od navedenih elemenata multimedije - tekst, grafika, animacije, zvuk i video – i navedite po čemu se razlikuju • Kratak opis osnovnih koraka i principa koji su uključeni u dizajniranje multimedijske Web stranice

3. Ciljevi učenja • Navesti različite zadatke koji su uključeni u razvoj multimedijalne Web stranice • Objasniti na koji se način markup i scripting jezici i drugi alati danas koriste u stvaranju multimedijalnih Web stranica • Raspraviti o mogućem formatu Web bazirane multimedije u budućnosti

4. Pregled Ovo poglavlje pokriva: • Tipove multimedijskih aplikacija baziranih na Webu i prednosti i nedostaci upotrebe multimedije • Pogled na osnovne multimedijske elemente • Korake i načela u dizajniraju multimedijskih Web stranica • Kako se multimedijalna Web stranica razvija i testira • Pogled na budućnost multimedije bazirane na Webu

5. Što je Web bazirana multimedija? • Web bazirana multimedija: web stranice koje sadrže više od jedne vrste medija – obično zvuk, video ili animacije kao dodaci tekstu i slikama • Multimedijske stranice obično sadrže interaktivne elemente s kojima korisnici izravno komuniciraju (kontroliraju trajanje zvuka ili videa, manipuliraju 3D objektima, igraju igrice) • Brzi kompjuteri i brze internetske veze čine multimediju baziranu na Webu puno feasible nego u prošlosti

6. Aplikacije web bazirane multimedije • Isporuka informacija (slike proizvoda, video spotovi, animacije itd.) • E-trgovina (slike proizvoda, uzorci glazbe i filmova itd.) - može se korsititi virtualna stvarnost da bi se stvorile trodimenzijalne slike proizvoda, kuća koje se prodaju itd.) • Zabava (online igrice, video spotovi, online glazba, interaktivne aktivnosti itd.) • Učenje koje se bazira na Webu (davanje uputa putem Interneta)

8. Prednosti i nedostaci upotrebe multimedije koja se temelji na webu • Prednosti Može se koristiti za više načina učenja • vizualno učenje • audio učenje • učenje dodirom Materijal je zamiljviji i ugodniji Mnoge ideje su pristupačnije (convey) • Nedostaci Trošak razvoja Potrebna količina prostora za spremanje Kompatibilnost i vrijeme downloadanja za multimediju baziranu na webu

9. Elementi multimedije • Tekst se koristi za pružanje osnovih informacija, također i za dodavanje tekstualnih izbornika i hyperlinkova Serif typefaces: čitkiji i koriste se za veće količine teksta Sans serif typefaces: koriste se za naslove, zaglavlja i bannere na web stranicama • Različite vrste teksta mogu pružiti vrlo različite osjećaje i utiske • Važno je izabrati prikladnu veličinu slova • Kada je potrebna određena vrsta teksta – kao npr. logo – umjesto toga se koristi grafički prikaz

10. Elementi multimedije • Grafika: digitalni prikazi fotografija, crtanje, grafikon ili drugi vizualni prikazi • Clipart: unaprijed nacrtani elektronsi prikazi – uključeni u neke softverske programe, besplatni putem Interneta, mogu se kupiti pojedinačno ili u zbirkama • Stock photographs: slike koje su dostupne za kupnju • Različiti grafički formati (TIF, GIF, BMP, JPEG, PNG, etc.)

11. Elementi multimedije • GIF: grafički format koji podupire 256 boja, obično se koristi za Web page line art images • Može biti proziran • Može biti interfaced • Koristi lossles file compression

12. Elementi multimedije • JPEG: pruža pravu boju i obično se koristi za fotografije koje se stavljaju na Internet • Može biti progresivan • Koristi lossy file compression • Iznos kompresije se naznači kad se dokument sprema

13. Elementi multimedije • PNG: specifično dizajniran za upotrebu sa slikama za Web stranice - lossless compession - može koristiti palete boja ili prave boje - nije u široj upotrebi • Biranje grafičkog formata - GIF –obično se koristi za line art (clipart, logo) - JPEG – obično se koristi za fotografije - Izabrati najprikladniji format - Za JPEG, kvaliteta kompresije i veličina dokumenta

15. Elementi multimedije • Thumbnail slika: mala slika na web stranici koja je povezana s većom slikom s većom rezolucijom • Koristi se da bi se štedjelo vrijeme loadanja stranica, cijeli sliku vide samo oni korisnici koji kliknu na nju

16. Elementi multimedije • Animacije: serija grafičkih prikaza koji se sukcesivno prikazuju da bi simulirali pokret • Java applet: mali program koji se ubacuje u web stranicu koji izvodi određenu zadaću • Animirani GIF: skupina GIF prikaza spremljenih kao animirani GIF dokument: slike se prikazuju sukcesivno da bi se simulirali pokret • Za kompleksnije animacije, programeri mogu koristiti Java Script ili drugi scripting jezik • Multimedia authoring software može se koristiti za stvaranje multimedijalnih elemenata

18. Elementi multimedije • Audio: zvuk (glazba, zvuk govora, zvučni efekti) • Može se snimati uz pomoć mikrofona ili MIDI uređaja, također se može snimiti s CDa ili skinuti s Interneta • Često se svira kad se nešto pojavi na web stranici ili kada korisnik klikne na link • Često je streaming audio da bi se ubrzala isporuka • Najčešći audio formati: .waw, .mp3, .midi, .aiff, .aac

19. Elementi multimedije • Video: stalni stream vizualnih informacija koje su podijeljene u odvojene prikaze ili okvire koji se prikazuju sukcesivno da bi se simulirao stvarni događaj • Zahtijeva veliku količinu prostora za spremanje • Obično je kompresiran radi uštede prostora • Streaming video se često koristi na web stranicama da bi se ubrzala isporuka • Najčešći video formati: .avi, .mpeg., .mov, .rm

20. Dizajn multimedijalne web stranice • Uključuje planiranje kako će izgledati i kako će funkcionirati web stranica • Dobro planiranje je dugoročno isplativo • Osnovna načela dizajniranja: Korisnici vole zanimljive i uzbudljive web stranice Korisnici nemaju strpljenja za stranice koje se sporo loadaju ili za teške aplikacije Planirati za sve potrebne metode isporuke i uređaje za pristup

21. Dizajn multimedijalne web stranice • Osnovna načela dizajniranja Napravite stranicu na način da se može koristiti sa što više moguće konfiguracija

22. Dizajn multimedijalne web stranice • Osnovna načela dizajniranja Osobita pozornost bi se trebala pridati: Dodacima koji zahtijevaju specifičan pretraživač Dodacima koji zahtijevaju dodatne komponente koje se rijetko koriste Veličini sadržaja stranice Predmetima sa širokim bandovima

23. Određivanje ciljane publike i ciljeva • Jedan od prvih koraka u dizajniranju multimedijalne aplikacije ili web stranice • Ciljevi stranice utječu na njen sadržaj • Ciljana publika utječe na izgled (kao što su stil, grafika, font i boje) stranice • Kad se definiraju ciljana publika i ciljevi, trebali biste imati ideju o glavnim temama uključenim u stranicu • Ako je potrebni sadržaj još uvijek nejasan, ponovno razmislite o publici i ciljevima i nemojte nastaviti dalje dok vam ne postane jasan

25. Korištenje flowcharta, page layouta i storyboarda • Koristi se za dizajniraje strukture i izgleda stranice • Flowchart: pokazuje kako su strane na web stranici povezane jedna s drugom • Page layout: pokazuje osnovni izgled strane na web stranici - obično jedan za početnu stranicu i drugi za ostale strane • Storyboard: ilustrira sadržaj animiranog slijeda ili drugih multimedijalnih komponenata

27. Bitne stvari o dizajnu navigacije • Korisnici bi trebali moći doći do svake strane unutar vaše web stranice s najviše tri klika mišem • Navigacijski linkovi bi trebali biti smješteni na istoj lokaciji na svakoj strani • Svaka stranica bi trebala imati link do početne strane vaše web stranice • Navigacijski alati se mogu koristiti kao pomoć pri navigaciji Padajući izbornici, mape stranica, pretraživači, tekstualni hyperlinkovi i navigacijski izbornici, slikovni navigacijski izbornici, mape slika, okviri, hyperlinkovi koji prikazuju opcije kada na njih stavimo miša

29. Bitne stvari o pristupu • Kompatibilnost s uređajima - Web stranice se prikazuju drugačije na različitim uređajima - Neki prijenosni uređaji prikazuju wireless markup language (WML) stranice umjesto HTMLa - Morate razmisliti o ovim uređajima pri dizajniranju stranica

30. Bitne stvari o pristupu • Pomoćna tehnologija: hardver i softver dizajniran za uporabu osobama s fizičkim nedostacima Utječe na web dizajn stoga što je manje klikanja i kretanja po stranici lakše, te neki uređaji ne mogu čitati grafiku Rehabilitation Act zahtijeva da savezne agencije imaju dostupne web stranice Savjeti za dostupnost: koristite alternativni tekstualni opis za sve slike, koristite značajne tekstualne hyperlinkove, koristite alternativne sadržaje za Flash, JavaScript i druge tipove animiranih elemenata, razmislite o stvaranju alternativne tekstualne stranice, imajte na umu mogućnost čitanja

32. Razvoj multimedijalne web stranice • Nakon što je web stranica dizajnirana, vrijeme je za njezino stvaranje, a taj proces se naziva razvoj web stranice • Tri osnovna koraka: - Stvaranje multimedijalnih elemenata - Stvaranje web stranice - Testiranje, objavljivanje i održavanje web stranice

33. Stvaranje multimedijalnih elemenata • Napravite sve pojedinačne multimedijalne elemente koji će se koristiti na stranici • Obično se koristi nekoliko različitih softverskih programa kao što su: - Grafički softver - Animacijski softver - Softver za uređivanje audio snimaka - Softver za uređivanje video snimaka • Svaki element bi se trebao spremiti u prikladnoj veličini, rezoluciji i formatu dokumenta

34. Stvaranje web stranice • Markup language: jezik koji koristi simbole ili pločice da bi opisao kako dokument treba izgledati kad se prikaže na web pretraživaču Većina stranica se izrađuje s markup jezikom • Hypertext markup language (HTML): originalni markup language - koristi HTML pločice da bi pokazao kamo efekti i elementi pripadaju na stranici - neke pločice su u parovima - kompjutor i pretraživač koji se koriste još uvijek određuju kako će se stranica prikazivati

36. Stvaranje web stranice • Extensible Markup Language (XLM): set pravila za razmjenu podataka na webu; određuje sadržaj ali ne formatiranje • Extensible Hypertext Markup Language (XHTML): novija verzija HTMLa koja se temelji na XLMu: kontrolira izgled i format stranice kao HTML - Strožija pravila nego HTML - Počinje zamijenjivati HTML

38. Stvaranje web stranice • Dynamic HTML (DHTML): koristi se za dodavanje dinamičkin mogućnosti i interaktivnosti web stranice • Wireless Markup Language (WML): koristi se za stvaranje web stranica koje se prikazuju na WAP uređajima kao što su mobiteli • ScalableVectorGraphics (SVG): koristi se za opis vektorskih slika koji se prikazuju u različitim veličinama web stranicama da bi se podudarali s veličinama prozora pretraživača

39. Stvaranje web stranice • Scripting language: omogućuje uključenje uputa u kod web stranice Java Script (sličan Java programskom jeziku) VBScript (temelji se na Microsoft Visual Basic programskom jeziku) Perl (koristi se za pisanje CGI uputa za obradu podataka putem web stranice) • AJAX: nova skupina web standarda za stvaranje bržih i učnkovitijih interaktivnih web aplikacija

41. Stvaranje web stranice • Drugi alati za razvoj sadržaja ActiveX: skupina kontrola koje se koriste za stvaranje interaktivnih web stranica - proširuje OLE da bi se integrirao sadržaj jednog ili više programa - omogućuje velikom broju Windows dokumenata gledanje preko weba Virtual Reality Modeling Language (VRML): jezik za stvaranje 3D web stranica - najnovija verzija je X3D MHTLM (MIME HTLM): format za pretvaranje svih elemenata web stranice u jedan zajednički fajl

42. Stvaranje web stranice • Softver za autoring web stranice: koriste se za kreiranje potpunih web stranica - automatski generira prikladne HTML izjave - omogućuje vam stvaranje kohezivne web stranice, a ne samo individualnih web strana - omogućuje vam lako uključivanje: formulara i povezanost baza podataka za dinamičnije interakcije s korisnicima i drugih pomoćnih razvojnih alata, kao što su testovi za “pokvarene linkove” i testovi dostupnosti

44. Testiranje, objavljivanje i održavanje web stranica • Potrebno je kliknuti na hyperlink kako bi se osiguralo da će odvesti korisnika na pravo mjesto • Svaka moguća akcija koja se izvršava sa animiranim elementima bi se trebala testirati • Pažljivo pročitajte svaku stranicu ili ekran • Razmislite o “stres testu” • Obnavljajte sadržaj i i redovito provjeravajte linkove • XHTML stranice se mogu provjeravati s posebnim HTML provjeravačem

46. Budućnost web temeljene multimedije • Biti će uzbudljivija i pristutnija u svakodnevnim događajima nego danas • Novi tipovi multimedije će se stvarati da bi odgovarali našim rastućim potrebama za mobilnim sadržajima • Što više internetski korisnici koriste broadband, očekuje se veća povezanost između multimedijalnih stranica i televizije • Igraće konzole (Xbox, Sega Dreamcast 2, Sony Playstastion 2) imaju ugrađene Internetske i multimedijske sposobnosti • Interaktivna TV i video bi mogli uskoro postati norma weba

47. Sažetak • 1) što je web bazirana multimedija? • 2) elementi multimedije • 3) dizajn multimedijalne web stranice • 4) razvoj multimedijalne web stranice • 5) budućnost web bazirane multimedije