Shotokan karate do rjavega pasu

Miha Filej, 63030084

22. maj 2006

1

Kazalo

1 Povzetek 1

2 Uvod 1

2.1 Zahteve . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2.2 Potek dela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2.3 Uporabljeni formati . . . . . . . . . . . . . . . . . . . . . . . . 2

2.4 Uporabljena orodja . . . . . . . . . . . . . . . . . . . . . . . . 2

3 Priprava videozapisov 3

3.1 Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

4 Na£rtovanje 3

4.1 Skica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

4.2 Shema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

5 Gradnja 5

5.1 Zgradba XHTML dokumenta . . . . . . . . . . . . . . . . . . 5

5.2 Dodajanje vsebine in povezovanje . . . . . . . . . . . . . . . . 6

5.3 Vklju£evanje videoposnetkov v HTML dokumente (OBJECTelement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

6 Oblikovanje 9

7 Zaklju£ek 9

7.1 Testiranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

7.1.1 Prednosti . . . . . . . . . . . . . . . . . . . . . . . . . 9

7.1.2 Slabosti . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2

1 Povzetek

Cilj projekta je bil objaviti videoposnetke, ki prikazujejo zahtevane tehnikein kate za prehajanje med posameznimi pasovi pri shotokan karateju. Medijje svetovni splet, osnovni format dokumenta pa HTML. V poro£ilu bomsku²al opisati potek dela na projektu, ki je obsegal obdelavo videomaterialain objavo na spletu.

2 Uvod

2.1 Zahteve

• neodvisnost od brskalnika

• podprtje ²ir²e palete lo£ljivosti

• prijaznost do po£asnej²ih povezav

• CD izvedba

2.2 Potek dela

Po zajetju videoposnetkov je bil vsak £lan skupine zadolºen za en pas. Podogovoru s koordinatorjem glede lo£ljivosti in kodekov je sledila pretvorbavideomateriala v spletu prijazen format.

Za tem je bilo potrebno za£eti z na£rtovanjem. Z nekaj skicami na papirjusta nastala postavitev osnovnih elementov in navigacijski model. Skicam jesledil natan£nej²i izris v digitalni obliki, takoj za tem pa je pri²la na vrstoimplementacija osnovnih elementov v HTML. Ko se je zasnova ujemala zna£rtom je pri²lo na vrsto programsko generiranje vsebine in vklju£evanjevidea v spletne dokumente. Zadnja faza je bilo oblikovanje izgleda po skicah,implementacija z CSS in dodajanje JavaScript funkcionalnosti.

Po kon£anem izvajanju je preostalo ²e testiranje na razli£nih napravah, op-eracijskih sistemih in brskalnikih.

V nadaljevanju bo vsak del podrobneje razloºen.

3

2.3 Uporabljeni formati

• Vsebinska plast: XHTML 1.0 Strict http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict

• Prezentacijska plast: CSS 2 http://www.w3.org/TR/REC-CSS2/

• Vedenjska plast: JavaScript http://www.w3.org/TR/html4/interact/scripts.html

• Videozapisi: QuickTime (MPEG-4)

2.4 Uporabljena orodja

• VirtualDub MPEG-2 http://fcchandler.home.comcast.net/stable/

• SUPER http://www.erightsoft.com/SUPER.html

• Cinelerra http://cinelerra.org/

• Macromedia Fireworks 8 http://www.adobe.com/products/fireworks/

• Adobe Photoshop CS2 http://www.adobe.com/products/tryadobe/

• Macromedia Dreamweaver 8 http://www.adobe.com/products/dreamweaver/

• PHP 5.1.4 http://www.php.net/

3 Priprava videozapisov

Ta del projekta bom opisal le na kratko, ker gre za precej preporsto opravilo.Navedel bom le uporabljena orodja in podrobnosti o kon£nih videozapisih.

3.1 Format

Za format zapisa sem se odlo£il na podlagi predvajalnikov, ki so na voljokot vti£niki za brskalnike in kvaliteti zapisa, ki jo format ponuja pri manj²ihdatotekah, ki so primerne za objavo na spletu.

Dale£ najbolj²i predvajalnik je po mojem mnenju Apple QuickTime. Njegoveprednosti so:

4

• kompaktni in pregledni kontrolni gumbi

• nevsiljiv izgled, ki ne bo kazil podobe spleti²£a

• prenosljivost

• nizka poraba sistemskih sredstev

Eden izmed bolj²ih na£inov zapisa, ki dobro deluje v navezi z mov vseboval-nikom je MPEG-4 (tako za video kot za avdio zapis).

Kot skupina smo se odlo£ili za uporabo dveh lo£ljivosti, za hitrej²e in po£as-nej²e povezave.

bolj²a kvaliteta slab²a kvalitetaavdio bitrate 22kbps stereo 16kbps mono

sli£ic na sekundo 15 15video lo£ljivost 360x240 240x180

avdio semplirna frekvenca 44100 Hz 44100 Hz

4 Na£rtovanje

4.1 Skica

Pri na£rtovanju moramo razmisliti, kako bomo uprabniku prikazali naslednjeelemente:

• naslov, ki kaºe trenuten poloºaj (glava dokumenta)

• videoposnetek

• osnovno navigacijo

• podrobno navigacijo

• ostale informacije (noga dokumenta)

Po nekaj poskusih sem se odlo£il za kompozicijio, ki je prikazana na spodnjiskici.

5

4.2 Shema

Ker je zaporedje elementov je sedaj znano, jim lahko dolo£imo to£ne poloºajein velikosti. Pri izbiri je potrebno biti pozoren, da zajamemo najpogostej²elo£ljivosti, ki jih imajo na²i obiskovalci. Tako je najmanj²a povr²ina, ki²e zajame celotno vsebino 800 krat 600 pikslov, dizajn pa zadiha pri ²iriniokrog 1000 pikslov in poljubni vi²ini nad 700 pikslov, kar zajame ve£inoobiskovalcev. Uporabnikom z ve£jimi vidnimi povr²inami bo prikaz zapolnilsredino vidnega polja.

6

5 Gradnja

5.1 Zgradba XHTML dokumenta

Pri gradnji HTML dokumenta je potrebno paziti, da izbrani elementi £im-bolj pripomorejo k semanti£nosti dokumenta. Ker je vsebine precej malo,izbrani elementi obsegajo: naslove v treh nivojih (H1, H2, H3), neurejenesezname (UL, LI) in OBJECT element za prikaz videoposnetka (razlaga im-plementacije sledi v naslednjih poglavjih). Poleg pomenskih sta v dokumentuuporabljena tudi DIV in SPAN elementa, ki sluºita kot pomo£ pri logi£nemuin vizualnemu zdruºevanju ter kasnej²emu pozicioniranju.

7

5.2 Dodajanje vsebine in povezovanje

Ker se tudi potem, ko je na£rt ºe postavljen, stvari lahko ²e spreminjajo -bodisi zaradi manj²ih napak bodisi zaradi bolj²ih re²itev, ki sprva niso bileo£itne - je lo£eno urejanje vsakega HTML dokumenta posebej zelo neprak-ti£no. V ta namen imamo na razpolago ²iroko paleto streºni²kih skriptnihjezikov, na katerih so nastali zelo uporabni frameworki, ki nam t.i. tem-plating zelo olaj²ajo, £e ga ºe ne naredijo povsem transparentnega. Polegtega lahko spleti²£u dodamo vrsto funkcionalnosti, kot so seje, shranjevanjenastavitev, kompresija,...

Tukaj naletimo na prvo oviro, saj je ena izmed zahtev ta, da mora spleti²£ebiti dostopno tudi iz prenosnega medija (CD).

8

Problema sem se lotil na razli£ne na£ine. Najprej bom opisal tiste, ki semjih zaradi neprakti£nosti opustil.

T.i. templating z obstoje£imi razvojnimi okolji

Obstaja nekaj orodij, ki nam omogo£a, da dolo£imo del dokumenta, ki pred-stavlja ogrodje, nato pa med ustvarjanjem novih spreminjamo samo delevsebine. Re²itev se izkaºe za neprimerno za tolik²no koli£ino dokumentov(kon£na razli£ica jih ima 274), ki so poleg tega ²e na nekoliko kompleksenna£in medsebojno povezani (kategorija z dvema vrstama elementov, kvalitetavideozapisa in pogled).

Frameset in frame-i

Uporaba framesetov je (iz razvojnega stali²£a) prakti£na re²itev, ki za delo-vanje ne potrebuje nobene vrste skriptnih jezikov (niti na strani streºnikain niti na strani odjemalca, £eprav lahko slednji dodajo precej²njo merofunkcionalnosti) in se je v preteklosti veliko uporabljala.

V preteklosti zato, ker so s £asom pri²lje na plano njihove slabosti, ki razvi-jalce sedaj odvra£ajo od uporabe. Teºave za£nejo z odjemalci, ki framesetovne podpirajo (predvsem druge naprave, kot so telefoni in dlan£niki z manj²imizasloni) in nadaljujejo s tistimi, pri katerih frame-i niso zaºeljeni (slabovinim,ki uporabljajo bralnike zaslona oteºujejo navigacijo, spletnim iskalnikom paprehajanje med dokumenti).

�eprav bi lahko zaradi posebne vsebine, ki jo obsega na² projekt nekolikopozabili na zgoraj omenjene teºave, ne smemo pozabiti na naslednje: pove-zovanje dokumentov je na ta na£in nekoliko laºje (pri treh frame-ih namnamesto ²tirikratnega ostane samo ²e enojno povezovanje), vendar tak na£in²e vedno obsega skoraj 300 ro£no vpisanih povezav.

Generiranje vsebine na strani odjemalca

Tak²na re²itev bi bila najpreprostej²a, saj bi z enkratnim de�niranjem po-datkovne strukture v obliki kazala na celotno vsebino kaj hitro imeli narazpolago funkcionalno spleti²£e, vendar smo na ta na£in omejeni samo naodjemalce, ki to podpirajo.

9

Vnaprej²nje generiranje vsebine

Pri tak²ni re²itvi imamo na razpolago poljubno orodje, ki mora generiratiHTML datoteke: od preprostej²ih do zmoglivej²ih programskih jezikov, bashskript, itd...

Odlo£il sem se za uporabo streºni²kega skriptnega jezika PHP, ki je sicer pre-cej priljubljen za dinami£no generiranje strani. Tukaj gre za podoben princip,le da namesto serviranja dokumentov uporabniku, jih vnaprej zapi²emo nadisk.

Skripte sem razdelil na tri dele: osnovno (index) stran, strani z kazali na ele-mente, in elemente same. Podrobnej²e zgradbe ne bom opisoval, ker menimda presega namen tega poro£ila.

Kljub vsemu imamo ²e vedno eno slabo lastnost. Ker mora biti spleti²£edostopno iz prenosljivega medija, izgubimo uporabniku prijazne URL naslove.Uporabnik namesto do map dostopa neposredno do datotek. Z nekaj trudabi bila izvedljiva tudi navigacija z mapami, vendar bi bili ²e vedno prisiljenidostopati do datoteke index.html.

5.3 Vklju£evanje videoposnetkov v HTML dokumente(OBJECT element)

Na spletu lahko sre£amo vrsto na£inov vgrajevanja videoposnetkov, vendarsamo OBJECT element je podprt s strani W3 konzorcija. Zakaj se torejuporabljajo drugi na£ini? Glavni razlog so muhe Internet Explorerja priuprabi OBJECT in Microsoftov (nestandardni) EMBEDED element.

Problem je vse prej kot teºak. Obstaja na£in, da IE OBJECT element vseenoprebere in to je z uporabo classid atributa, ki ga prisili, da vklju£eni objekttretira kot ActiveX gradnik. Kaj pa ostali brskalniki, ki teh gradnikov nepodpirajo? Dovolj je nekaj minut raziskovanja, da pridemo do re²itve: gnez-denje OBJECT elementov. W3C standardi predvidevajo, da se izrisovanje vprimeru neprepoznanega objekta opusti in nadaljuje z elementi, ki so vsebo-vani v OBJECT-u. Ker IE ne deluje po predpisih, bomo najprej poskrbelizanj, nato pa ²e za ostale brskalnike. Nazadnje pripravimo ²e obvestilo obmorebitnih teºavah pri prikazovanju vklju£enega videa, ki uporabnika pri-jazno obvesti, da potrebuje ²e nekaj programske opreme.

Nato ostane ²e nekaj malenkostnih popravkov, ki so skupaj s podatki opodprtih brskalnikih dosegljivi na naslovu http://realdev1.realise.com/

rossa/rendertest/quicktime.html.

10

Na koncu dodamo ²e preprosto JS knjiºnico, ki posku²a ugotoviti, £e imaobiskovalec potrebne vti£nike name²£ene, poleg tega pa pred videoposnetekvklju£i sliko, ki prepre£i, da bi se video za£el nalagati brez uporabnikovevednosti.

6 Oblikovanje

Odlo£il sem se za preprost izgled, saj dolo£eno mero ºivahnosti spleti²£u dajoºe sami videoposnetki. Dosledno sem upo²teval dolo£ene mere in poloºajeelementov dolo£ene v shemi.

7 Zaklju£ek

7.1 Testiranje

Prikaz videa sem testiral na treh operacijskih sistemih s ²estimi brskalniki.

OS/brskalnik rezultatWinXP Firefox 1.5 pravilen prikazWinXP IE 6.0 pravilen prikaz

WinXP Opera 8.5 pravilen prikazWin98 IE 5.5 ni prikaza *

Linux Firefox 1.5 pravilen prikazLinux Konqueror ni prikaza*

* - prikazano sporo£ilo o napaki

7.1.1 Prednosti

• kon£ni izdelek podoben na£rtu

• kon£ni izdelek je dostopen razli£nim odjemalcem in uporabnikom

7.1.2 Slabosti

• porabniku neprijazni URL naslovi

• delu uporabnikov vsebine ²e vedno niso dostopne

11