MÄRGISTUSKEELED JA NENDE PRAKTILISUS E-POE NÄITEL

Transcription

1 Eesti Ettevõtluskõrgkool Mainor Infotehnoloogia Õppetool Veebitehnoloogia eriala Julia Levtšenko MÄRGISTUSKEELED JA NENDE PRAKTILISUS E-POE NÄITEL Lõputöö Juhendaja: Jüri Majak, PhD Tallinn 2015

2 RESÜMEE Antud lõputöö kirjutamise eesmärk oli autori jaoks uurida märgistuskeeli. Märgistuskeeli kasutavad veebiarendajad oma igapäevatöös kogu aeg, seetõttu tekkis vajadus välja selgitada, millised on need märgistuskeeled ning millal millist kasutada. Selleks tuli esmalt uurida märgistuskeelte ajalugu, mis aitas samuti mõista nende arengusuundasid. Niisiis on töö eesmärgiks märgistuskeelte ajaloo uurimine ning nende praktilisuse analüüs e-poe osade loomise põhjal. Käesoleva töö teoreetiline osa põhineb vastava ala kirjanduse analüüsil. Lisaks on autor uurinud, milliseid metoodikaid kasutavad e-poodide loomisel Eesti veebiarendajad. Töö autor viis uuringu läbi kümne erinevast ettevõttest veebiarendaja seas. Uuringu läbiviimiseks kasutas autor küsitluse meetodit, et saada kõigilt arendajatelt vastuseid samadele küsimustele. Töö praktilises osas viis töö autor läbi e-poe erinevate osade loomise mitmes uuritavas märgistuskeeles. Veebiarendajate seas läbi viidud uuring näitas, et Eesti veebiarendajad ei kasuta midagi tavapäratut oma igapäevatöös. Suurtest keeltest, mis on märgistuskeelte ajaloos olulisel kohal olnud, teadsid kõik arendajad, ent mitte kõiki ei olnud nad proovinud. Samuti selgus, et veebiarendajad ei tunne terminoloogiat (märgistuskeele definitsioon). Praktiline erinevate märgistuskeelte kasutamine oli väga kasulik kogemus ning näitas, et spetsiifilised märgistuskeeled võivad küll huvitavad olla, ent nad jäägu siiski oma erialaste veebilehtede loomise jaoks. Tavatooteid pakkudes (antud juhul kõrvaklapid) on siiski kõige otstarbekam kasutada HTMLi ja XMLi. 2

3 SISUKORD RESÜMEE... 2 SISSEJUHATUS Märgistuskeelte kategooriad Märgistuskeelte taksonoomia Märgistuskeelte areng ja ajalugu Generalized Markup Language Standard Generalized Markup Language What You See Is What You Get HyperText Markup Language extensible Markup Language XMLil põhinevad märgistuskeeled Wireless Markup Language Vector Markup Language extensible Application Markup Language Theological Markup Language MusicXML Human Markup Language GraphML Artificial Intelligence Markup Language MathML XHTML HTML Miks märgistuskeeled pole omaette keeled? MÄRGISTUSKEELTE KASUTAMINE E-POODIDE LOOMISEL Valimi moodustamine ja küsimustik Tulemused ja nende analüüs Märgistuskeelte rakendatavus e-poe loomisel What You See Is What You Get MathML HTML5 uued elemendid XML Analüüs KOKKUVÕTE KASUTATUD MATERJALID LISA 1. Märgistuskeelte taksonoomiliste kategooriate erinevused...43 LISA 2. Küsitlusankeet Eesti veebiarendajate jaoks

4 SISSEJUHATUS Veebiprogrammeerimises kasutatakse erinevaid programmeerimiskeeli. Veebilehtede loomisel on suur osa märgistuskeeltel (ingl. k markup language), mida ei liigitata tavaliste programmeerimiskeelte alla. Neist kõige levinumat, HTMLi, õpetatakse isegi põhikooli õpilastele. Märgistuskeeli on palju, neid kategoriseeritakse ning igaühel on oma kasutuspõhimõte ja eesmärk. Millist märgistuskeelt mille jaoks kasutatakse seda soovib antud lõputöö kirjutaja selgeks teha. Samuti on eesmärgiks uurida, kas ja milliseid märgistuskeeli kasutatakse e-poodide loomisel. Mõned põhilised variandid proovib töö kirjutaja ka ise läbi ning analüüsib märgistuskeelte praktilisust e-poe loomisel. Töö esimeses peatükis räägib autor märgistuskeelte ajaloost ja jagunemisest, samuti kasutusaladest. Teises peatükis uurib autor, milliseid märgistuskeeli kasutades on valminud erinevad e-poed. Samuti on teises peatükis näha, kuidas autor on proovinud märgistuskeeli e-poe loomisel ning kui otstarbekas see oli. Töö kirjutamisel on autor mitmeid kordi kasutanud lühendit ML Markup Language, märgistuskeel. See lühend võib esineda märgistuskeele nimetuses, nt JsonML Json Markup Lanuage. Sellisel juhul ei ole autor eraldi lühendit lahti selgitanud. 4

5 1. MÄRGISTUSKEELED Märgistuskeel (ingl. k markup language) on dokumendi teksti sisse selle töötlemise lihtsamaks muutmiseks loodud manustatavatest lipikutest (e märgenditest) koosnev käsukeel. Lipikuid kasutatakse peamiselt dokumendi elementide või elemendirühmade kuvamiseks ja identifitseerimiseks. Märgistuskeeled identifitseerivad elemente peamiselt pidevas tekstis, mitte andmebaasides, kus elemendid on rohkem struktureeritud. (Vallaste, 2015) Levinumad märgistuskeeled on HTML, XML, XAML, XHTML. Märgistuskeeled jagunevad kategooriatesse: üldotstarbelised märgistuskeeled, sisu sündikeerimise märgistuskeeled, lihtsustatud märgistuskeeled, kasutajaliidese märgistuskeeled, vektormärgistuskeeled, laiendatud märgistuskeeled. Igast kategooriast on eraldi juttu edasistes peatükkides. 1.1 Märgistuskeelte kategooriad Üldotstarbelised on sellised märgistuskeeled, mida saab kasutada enam kui ühes situatsioonis või enam kui ühel eesmärgil. Väga paljud märgistuskeeled põhinevad üldotstarbelistel keeltel. Näiteks HTML (HyperText ML) on domeenispetsiifiline märgistuskeel ja see põhineb SGMLi (Standard Generalized ML) süntaksil, mis on üldotstarbeline märgistuskeel. Üldotstarbelised märgistuskeeled on veel XML (extensible ML), YAML, GML (Geography ML). Sisu sündikeerimise märgistuskeeled on näiteks RSS (Rich Site Summary), aga ka Atom ja vähemtuntumatest SyncML (Synchronization ML), OPDS (Open Publication Distribution System), ICE (Information and Content Exchange) (Wikipedia, 2015). Sündikeerimine tähendab Internetis ühe ja sama sisu ühiskasutust erinevatel veebisaitidel (Vallaste, 2015). Seda nimetatakse ka söödaks. Tavaliselt sisaldavad need veebisaidi poolt regulaarselt värskendatavat publitseeritud sisu, näites uudised. Kõik sündikeerimise märgistuskeeled põhinevad XML-l. (Microsoft, 2009) Lihtsustatud märgisuskeeled on lihtsa ja mitte esiletükkiva süntaksiga. Need on loodud selliselt, et neid saaks kasutada üldistes tekstiredaktorites. Samuti on neid lihtne lugeda. Esituseks mõeldud lihtsustatud keeled on AsciiDoc, Haml (HTML Abstraction ML), JsonML (Json JavaScript Object Notation), Wikitext (märgistuskeel, mida kasutavad 5

6 Wikipedia-taolised veebisaidid). HTML kirjeldab veebilehe struktuuri, andes brauserile juhiseid, kuidas see välja nägema peab. Kasutajaliidese märgistuskeeled visualiseerivad ja kirjeldavad graafilist kasutajaliidest ja selle objekte (nupud, kerimisribad, rippmenüüd). Paljud kasutajaliidese märgistuskeeled on XMLi dialektid ning on sõltuvad skriptimiskeele mootorist (tarkvara, mis teostab tähtsaid ja sageli korduvaid funktsioone). Kasutajaliidese märgistuskeeled on näiteks QML (Qt ML), MXML (Macromedia extensible ML), XAL (extensible Application Language) ja XAML (extensible Application ML). Vektormärgistuskeel on Microsofti poolt välja töötatud märgistuskeel, mis kirjeldab vektorgraafikat. Vektromärgistuskeele katkendid lisatakse veebilehe HTML koodi sisse. Vektormärgistuskeelt (Vector ML) toetasid Internet Explorer viiendast kuni üheksanda versioonini, kümnes seda enam ei toeta. (Microsoft, 2015) Laiendatav märgistuskeel (XML Extensible ML) on andmete struktureerimiseks mõeldud märgistuskeel, mis pakub abivahendit märgendite (tags) ja nende struktuuriliste seoste defineerimiseks. XML loodi selleks, et keerulise struktuuriga dokumente veebis kasutada, alternatiivid HTML ja SGML ponud selleks praktilised. (O Reilly Media, 2015) 1.2 Märgistuskeelte taksonoomia Märgistuskeeli liigitatakse veel teise süstemaatika alusel: ettekandelised, protseduurilised ja kirjeldavad märgistuskeeled. Seda taksonoomiat kasutasid esmakordselt aastal Coombs, Renear ja DeRose oma artiklis Markup systems and the future of scholarly text, mida kasutatakse märgistuskeelte teooria allikaks. Märgistuskeelte taksonoomiliste kategooriate erinevusi illustreerib lisas 1 toodud pilt, mis on pärit eelnimetatud artiklist. (Coombs, Renear & DeRose, 1987) Ettekandelisi märgistuskeeli (presentational ML) kasutavad traditsioonilised tekstitöötlusprogrammid, kus tekitatakse WYSISWYG (What You See Is What You Get) efekt (Hwang, 2015). Kood kirjutatakse otse teksti sisse, jättes see kasutaja jaoks nähtamatuks (Bray, 2003). Protseduurilised märgistuskeeled (procedural ML) asendavad paljudes tekstitöötluse süsteemides ettekandelisi. Protseduuriline märgistuskeel sisaldab käske, mis näitavad, 6

7 kuidas tekst vormistatud olema peab. Parimateks näideteks on LaTex ja PostScript. (Hwang, 2015) Kirjeldavates märgistuskeeltes (descriptive ML) kirjeldavad autorid ära tekstiosa elemenditüübi. Seda märgistuskeelte kategooriate nimetatakse tihti ka semantiliseks ning seda kasutatakse teksti erinevate osade määratlemiseks selle asemel, et näidata, kuidas neid töödelda. Levinumad kirjeldavad märgistuskeeled on HTML, SGML, XHTML ja XML. (Hwang, 2015) 1.3 Märgistuskeelte areng ja ajalugu Termin markup tuleb vastavast inglise keelsest väljendist mark up, mis tähendab otsetõlkes üles märkimist. See väljend võeti kasutusse traditsioonilise kirjastuse praktikast, kus näidati pika käsikirja puhul ääremärgistustena ära, mis stiilis mingi tekstiosa on (nt suured ja väikesed pealkirjad, nummerdamata nimekirjad). (Watson, 2005) William Tunnicliffe pakkus teadaolevalt esimesena välja idee kasutada märgistuskeelt aastal 1967 (Essays UK, 2013). Ta eelistas nimetada seda üldiseks kodeerimiseks. 1970ndatel aastatel juhtis Tunnicliffe GenCode standardi arendamist (kirjastustööstuse jaoks) ning hiljem oli ta komiteejuht ISOs (Rahvusvaheline Standardiorganisatsioon), mis lõi SGMLi, esimese standardiseeritud kirjeldava märgistuskeele aastal arendas Brian Reid oma väitekirja tarbeks välja märgistuskeele praktilise teostuse. (Deshmukh, 2005) Generalized Markup Language Vaatamata sellele peetakse tänapäeva märgistuskeelte loojaks IBMi teadurit Charles Goldfarbi. Tema tuli selle idee peale aastal, kui töötas primitiivse dokumendihalduse süsteemiga, mis oli mõeldud advokaadibüroodele. Samal aastal võttis ta osa IBMi keele GML (Generalized ML) loomises koos Raymond Lorie ja Edward Mosheriga. (Watson, 2005) Samuti veenis ta aastal IBMi juhatust kasutama GMLi turunduslikel eesmärkidel, osana IBMi dokumendikoostamise vahenditest (ingl k Document Composition Facility). Pärast seda oli GML mitmeid aastaid äris laialdaselt kasutuses. (Deshmukh, 2005) aastal alustas ta järgmiste arendustega, mis lõpuks viisid SGMLi (Standard Generalized ML) loomiseni, mis põhines GMLil ja GenCode l. See avaldati esmakordselt 7

8 1986. aasta oktoobris ISO 8879 standardis (Watson, 2005). Goldfarb hakkas juhtima SGMLi ISO komiteed (Dalakov, 2015) Standard Generalized Markup Language Esimene märgistuskeel, mille puhul oli selgeltnäthav erinevus dokumendi struktuuri ja välismuse vahel, oli Scribe. Selle arendas välja ja kirjeldas Brian Reid oma doktoritöös aastal. Scribe mõjutas SGMLi ning oli HTMLi ja LaTexi otsene eellane. (Deshmukh, 2005) SGMLi - Standard Generalized Markup Language - loomiseni viis idee, et märgistus peab keskenduba dokumendi struktuurilistele aspektidele ning jätma visuaalse esitlemise interpretaatorile. SGMLi loomisel ühendati mitmed ideed, sealhulgas Tunnincliffe i projekt, GenCode. (Deshmukh, 2005) SGML määratles ära teksti sisse tehtavate märgistuste süntaksi ning samuti kirjeldas, milised märgendid (tags) ja kus on lubatud. See andis autoritele võimaluse luua ja kasutada märgendeid, milliseid nad ise vajavad ning anda neile oma nimetus. Sellepärast võib SGMLi nimetada metamärgistuskeeleks: paljud konkreetsed märgistuskeeled on sellest tuletatud. Hilised 80ndad olid märkimisväärne aeg uute mahukate märgistuskeelte arengus (TEI, DocBook) aastal esitleti SGMLi kui ISO standardit nr SGMLi võeti hästi vastu ja kasutati suuremat dokumentatsiooni vajavatel aladel. Sellele vaatamata pidasid paljud seda keelt kohmakaks ja raskeks see tuleb sellest, et selle keelega püüti ära teha liiga palju ja peeti liiga paindlikuks. (Deshmukh, 2005) What You See Is What You Get Väljaspool kirjastustööstust on varasemaid märgistuskeele ilminguid leitud Unixi süsteemi tüpograafilistes vahendites (troff ja nroff). Need vahendid võimaldavad tekstidokumendi sisse lisada teksti vormindamise käskusid. Kirjastustööstuse tarkvara WYSIWYG (What You See Is What You Get) kättesaadavus tõrjus välja suure osa sellistest keeltest tavakasutajate seas, kuigi tõsisem kirjatööstus kasutab märgistusi teksti nähtamatute struktuuride jaoks, ning isegi WYSISYG-redaktorid salvestavad tavaliselt dokumendi märgistuskeele vormingutes. WYSIWYG-redaktorid on süsteemid, milles sisu ilmub ekraanile kohe muutmise ajal, näidates seda ligilähedaselt lõpptulemusele, olgu selleks prinditud dokument, veebileht või slaidiesitlus. (QuinnStreet, 2015) 8

9 WYSIWYG i realiseeris kirjastusstandard TeX. See on Donald Knuthi ndatel loodud tekstilao süsteem dokumentide trükiks ettevalmistamiseks. TeX keskendus teksti ja fontide kirjeldusele professionaalsete matemaatiliste raamatute trükiks ettevalmistamisel. See on kasutusel ka muude keeruliste tekstide (füüsika, IT) trükkimisel. TeXi kasutatakse akadeemilises maailmas, kus see on de facto paljude teadusharude standard. Lisaks TeXile on laialdaselt kasutatav ka märgistussüsteem LaTex (Lamport TeX Leslie Lamport oli süsteemi arendaja). (Lagendijk, 2010) What You See Is What You Get Sellisel põhimõttel töötavate programmidega saab veebilehe luua ka inimene, kes HTMLi ei tunne. Need programmid annavad võimaluse koodiridade kirjutamise asemel elemendid ühe hiireklõpsuga soovitud lehele saada. Sellised rakendused nagu Frontpage muundavad ise kasutaja soovid HTML koodiks. (Mantaro, 2005: xiii) Lisaks sellele on mugavus ka selles, et töötamise ajal näeb veebilehte umbes samasugusena, nagu see brauseris olema hakkab. Seetõttu on veebilehe muutmine kasutaja soovi kohaselt reaalajas väga lihtne. Sellistel programmidel on tavaliselt olemas ka mallid, niiet kõik, mis kasutaja tegema peab, on teksti ja piltide lisamine. Praegusel ajal on lihtsaimateks WYSIWYG redigeerimisprogrammideks Adobe Dreamweaver ja Microsoft Frontpage HyperText Markup Language SGMLi kasutamine piirdus äriprogrammide ja andmebaasidega, samal ajal kui WYSIWYG-vahendeid kasutati teistes dokumenditöötlusprogrammides aastal pakkus Tim Berners-Lee välja idee internetipõhisest hüpertekstisüsteemist. (Essays UK, 2013) Hüpertekst tähendab, et veebilehele saab panna lingi, mis viib edasi järgmisele veebilehele. Berners-Lee kirjeldas HTMLi ja kirjutas brauseri ja serveri tarkvara 90ndate lõpus. Esimene avalikuks saanud HTMLi kirjeldus oli dokument HTML Tags, mida mainis esimesena Berners-Lee internetis aasta lõpus. See kirjeldab 18 elementi, mida sisaldab algupärane ja suhteliselt lihtne HTMLi disain. Berners-Lee pidas HTMLi SGMLi rakenduseks. (Longman, 1998) HTMLi esialgsele versioonile järgnes aastal IETFi (Internet Engineering Task Force) poolt edasi arendatud HTML 2.0 (Keith, 2010). Alles see sai HTMLi ametlikuks versiooniks ja numbrit 2 kasutati selleks, et eristada seda, standardset versiooni, 9

10 eelnevatest. Kolmanda versiooni pakkusvälja W3C aastal ning uues versioonis pidi olema mitmeid uusi võimalusi, näiteks gif-toetus ja matemaatiliste valemite kujutamine. Järgnevas, neljandas versioonis (1998. a), toimus HTMLi puhastamine mitmed elemendid liigitati vanade alla ning neid ei soovitatud kasutada (nt element <font>, mille asemel soovitatakse kasutada CSS stiile). (Longman, 1998) Pärast seda toimus HTMLi arengus pööre: järgmise arenduse nimeks oli XHTML. Steven DeRose, arvutiteadlane, kinnitas, et HTML on veebi arengus põhifaktor tänu oma paindlikkusele ja laiendatavusele. HTMList sai veebilehtede ja muu informatsiooni, mida on vaja brauseris näidata, kirjutamiseks peamine märgistuskeel ning hetkel on HTML kõige sagedamini kasutatav märgistuskeel extensible Markup Language XML on metamärgistuskeel, mida tänapäeval kasutatakse üsna laialdaselt. XMLi arendas välja W3C (World Wide Web Consortium) komitee, eesotsas Jon Bosak. XMLi peamiseks eesmärgiks oli olla lihtsam SGML, fokusseerudes kindlale probleemile dokumendid internetis. XML on metamärgistuskeel nagu SGML, kasutajatel on lubatud luua mistahes märgendeid, siit nimetus extensible laiendatav. XMLi võeti lihtsalt vastu, sest iga XMLis kirjutatud dokument on samal ajal ka SGMLi dokument. Olemasolevad SGMLi kasutajad said kergesti XMLi peale üle minna. XML kaotas paljud SGMLi inimestele suunatud ja keerulised omadused, kuid osutus sellegipoolest kuldseks keskteeks oma paindlikkuse ja lihtsusega. XMLi kasutatakse praegu laialdaselt rakendustevaheliseks suhtluseks. (Essays UK, 2013) XML standardi eest vastutab W3C. XMLi kasutatakse dokumendi struktuuri loomiseks, mida tehakse paarissiltide abil, neid saavad kasutajad ise luua. XML dokumente kasutatakse näiteks Wordpressi varukoopiate tegemisel, RSS uudistevoo loomisel, vektorgraafika piltide salvestamiseks, veebipoe OpenCart seadete salvestamisel. (Metshein.com, 2012) 1.4 XMLil põhinevad märgistuskeeled Kuna XML on laiendatav keel, mille puhul saab ise märgistusi luua, saab luua palju erinevaid märgistuskeeli, mis põhinevad XMLil. Neid on peaaegu igas valdkonnas - muusika, graafika, teoloogia. Järgnevalt mõned näited. 10

11 1.4.1 Wireless Markup Language WML Wireless ML on märgistuskeel, mis võimaldab esitada veebilehtede tekstiosasid mobiiltelefonides ja pihuarvutites traadivaba ühenduse kaudu. Seda kasutatakse, et määratleda sisu ja kasutajaliidest nimetatud seadmetele. Samuti arvestab see väikeseid ekraane ja madalaid ülekandekiiruseid. WML on osa WAPist (traadita rakenduste protokoll) ning avatud lähtekoodiga, defineeritud on see WAPi spetsifikatsioonis. Kui HTMLi navigeerimisühikuks on leht, siis WMLis on selleks kaart (card) ning mitmed kaardid moodustavad kaardipaki (deck). (Tutorialspoint, 2015) Korraga kuvatakse ainult ühte kaarti. Järgnevas tabelis on välja toodud WMLi ja HTMLi erinevused. (Piprotar, 2008) Tabel 1. WMLi ja HTMLi erinevused WML Kasutab muutujaid WML skript säilitatakse eraldi failis Pildid säilitatakse formaadis WBMP (Wireless Application Protocol Bitmap) WBMP pilt on 2-bitine Tõstutundlik Vähem märgendeid WML kaartide komplekt moodustab kaardipaki. (Cards, Deck) HTML Ei kasuta muutujaid Javascript on samas HTML failis Pildid säilitatakse formaatides GIF, JPEG või PNG Pildid on palju suuremad Ei ole tõstutundlik Rohkem märgendeid HTML lehtede komplekt moodustab saidi (Pages, Site) WMLi on väga lihtne kasutada ja õppida ning see nõuab palju väiksemaid ülekandekiiruseid tänu WMLi dokumendid on lihtsad ja need pakitakse kokku enne seadmele saatmist. Samuti võrreldes HTMLi dokumentidega nõuab WMLi kuvamine vähem protsessori jõudlust ning mälu. WMLi negatiivseteks aspektideks võib nimetada, et erinevad seadmed võivad kuvada sisu erinevalt, sest nagu HTMLiski, ei määra WML, kuidas sisu kuvada tuleb. Samuti on erinevad ka vastuvõtvate seadmete ekraanide suurused ja klahvide asetused. (Piprotar, 2008) 11

12 Kui mobiiltelefoniga minnakse mingisugusele WML lehele, laetakse WAP serverist alla kõik selle lehe kaardid ning kui kasutaja läheb sama kaardipaki teisele kaardile, ei pea mobiili brauser serverile päringuid saatma. Järgneval pildil on lihtsama struktuuriga WML dokumendi näide (Tutorialspoint, 2015): Joonis 1. WMLi näide Esimene rida koodis ütleb, et tegemist on XML dokumendiga, versioon 1.0. Teine rida määratleb dokumenditüübi ja annab dokumendi tüübi definitsiooni (DTD) lingi. Ühes kaardipakis võib olla mitu kaarti, nagu näites. Tekst tuleb panna paragrahvi märgistuste sisse (<p>...</p>), mitte otse kaartidesse. Kommenteerimine on nagu HTMLis. (Tutorialspoint, 2015) WMLi elementideks on näiteks: <wml> (defineerib kaardipaki ), <card> (kaart kaardipakis), <big> ja <small> (suur ja väike tekst), <em> (rõhutatud tekst), sündmused <do>, <onevent>, <ontimer>, <onpick>; ülesandeelemendid <go>, <noop>, <prev> ja <refresh>. Järgenvalt näitelt on näha, kuidas muutujad name, age ja sex saadetakse serverisse (Tutorialspoint, 2015): 12

13 Joonis 2. Muutujate serverisse saatmine WMLiga Selleks, et saata andmed serverisse, tuleb kasutada märgistusi <go> ja <postfield>. Esimesega pannakse paika meetod POST või GET ja määratletakse serveripoolne skript, mis saadud andmeid käsitleb ning viimasega saadetakse muutujad serverisse. (Tutorialspoint, 2015) Vector Markup Language VML (Vector ML) toetab vektorgraafika informatsiooni märgistust samamoodi nagu HTML toetab teksti informatsiooni märgistust. VMLi sees luuakse sisu, kirjeldades ühendatud jooni ja kurve. Märgistus annab sellele semantilise ja ettekandelise info. VMLi kirjutamisel kasutatakse XMLi süntaksi ning samuti kasutab VML vektorgraafika kujunduse määratlemiseks CSSi. Järgmises näites on kasutatud VMLi, et luua joonis: (W3C, 1998) Joonis 3. VMLi koodi näide 13

14 Tulemus: Joonis 4. VML koodi tulemus Koodis on sinise värviga ära näidatud XMLi struktuur, rohelisega CSSi informatsioon, pruuniga HTML, lillaga VMLi joonte radasid ning mustaga VML ise joonise graafilised andmed. VMLi eeliseks tavalise pildi viite lisamise ees HTMLis on see, et kui tekib näiteks vajadus muuta sõna Idea mitmusesse Ideas, siis piisab VMLis vastavas kohas sõna muutmisest. Kui aga kasutada tavalist pilti, mille viide lisatakse HTMLi, siis tuleb see pilt ise ümber teha, mis on tunduvalt keerulisem. Samuti on VMLiga lihtne luua suur hulk samasuguseid kujundeid erineva tekstiga. VMLis on ka mõned eelmääratletud kujundid, et alati ei peaks radasid ise looma: line, polyline, curve, rect, roundrect, oval, arc ja image. (W3C, 1998) VML oli Microsofti projekt ning see toimib ainult Internet Exploreris, ja sedagi ainult Windowsis. Näiteks kasutatakse VMLi sellisel juhul, kui Microsoft Wordi või Microsoft Visio kasutamisel salvestatakse fail HTML formaadis. Sellised failid säilitavad täielikult vektorgraafika informatsiooni ning neid saab taasavada teistes Microsofti rakendustes, nag näiteks Microsoft PowerPoint. (Minh, Khuong, Hoang & Ngoc, 2012) IE 10. versiooniga lõpetati VMLi toetamine, VMLi tõrjus välja paindlikum SVG Scalable Vector Graphics aastal 2001 (Microsoft, 2015) extensible Application Markup Language XAML extensible Application ML on Microsofti poolt arendatud XMLi-põhine deklaratiivne märgistuskeel, mida kasutatakse paljudes.net tehnoloogiates, näiteks WPF (Windows Presentation Foundation) ja WF (Windows Workflow Foundation). WPF-s kasutatakse XAMLi kasutajaliidese elementide defineerimiseks ning sidumiseks andmete ja sündmustega. WF-is kasutatakse seda töövoogude defineerimiseks. Samuti kasutavad XAMLi Silverlighti, Windows Phone i ja Windows Store i rakendused. XAML toetab nii vektor- kui rastergraafikat. XAML võimaldab disaineritel, kes keskenduvad rakenduse välimusel, ja arendajatel, kes välimuse koodi kirjutavad, töötada samal koodibaasil, 14

15 tõhustades sellega produktiivsust. (Rouse, 2006) Järgnevas lihtsas näites on näha, kui erinev on ühe rohelise kasti loomine XAMLiga ja C#-ga (Gamal, 2014). Joonis 5. Kasti näide XAMLiga ja C#-ga XAML esindab otseselt spetsiifilise hulga toetuse tüüpide objektide algväärtust. XAML võimaldab töövoogu, kus erinevad osapooled saavad töötada kasutajaliideses ning samuti rakenduse loogikat, kasutades võimalikult erinevaid tööriistu. XAMLi struktuur näitab hierarhilisi suhteid mitmete objektide vahel. XAMLi elemendid on otseselt ühenduses CLRi (Common Language Runtime) objektijuhtumitega ja atribuudid on ühenduses CLRi atribuutide ja sündmustega nende objektidega seoses. (Microsoft, 2015) Kõik, mida luuakse või rakendatakse XAMLiga, saab väljendada ka traditsioonilise.net keelega, nagu C# või VisualBasic.NET. Põhjuseks, miks siiski kasutatakse nii palju XAMLiga on selles, et selle töötlemiseks vajalikud tööriistad ei ole nii keerulised. XAML põhineb XMLil ning seetõttu on disainerite ja arendajate omavaheline töö lihtsustatum, nad ei pea sisu jagamiseks ja muutmiseks seda kompileerima. (Microsoft, 2015) Theological Markup Language ThML (Theological ML) loodi aastal Kristliku Klassikalise Eeterliku Raamatukogu (CCEL) jaoks selleks, et luua elektroonilisi teoloogilisi tekste. Kui raamatud on kirjutatud ThMLiga, on CCELi jaoks mitmed toimingud lihtsamad: teema ja käsikirjade viited raamatute jaoks ja kogu raamatukogu jaoks, intelligentne otsing, teistesse vormindustesse automaatne muutmine, dokumentide järjestamine erinevatel viisidel. ThMLi dokumente on lihtne teisendada teistesse vormingutesse: HTML, lihtsad tekstifailid, PDF, RTF jm ning 15

16 neid on võimalik luua XMLi redaktoriga, tavalise tekstiredaktoriga või Microsoft Wordiga, kasutades vastavat malli. (CCEL, 2003) ThMLi luues on võimalik kasutda kõiki HTMLi elemente ja atribuute. Mõned HTMLi atribuudid on kasutusel ainult ThMLi elementides (style, class, id, title). Nagu HTMLiski, on kogu kood kahes osas: head ja body. Teksti struktuurilised osad on jaotatud märgistustega <divn>. Samuti on ThMLis olemas märgistus teksti katkemise kohta lehekülje lõppedes originaaltekstis: <pb />, mille atribuut n näitab järgmise lehekülje numbrit, kusjuures antud element peab asetsema uue lehekülje alguses. Paljude tekstide puhul on lisatud ka pilt originaalleheküljest, see on ka sel juhul href atribuudina pb elemendi sees. Järgnevas näites on näha ThMLi struktuuri (CCEL, 2003): <ThML> <ThML.head> </ThML.head> <ThML.body> <div1 type="book" title="admonitions on Things Internal" n="2"> <div2 type="chapter" n="1" title="of the Inward Life"> <div3 type="section" n="i"> <pb n="37" href="gif/0021a.gif" /> </div3> </div2> </div1> </ThML.body> </ThML> Palju teoloogiaalaseid tekste on ka võõrkeeles, seetõttu on olemas ka märgistus foreign ja atribuut lang, mille väärtused on määratletud standardiga ISO 639. (CCEL, 2003) aastaks oli CCELil umbes 650 dokumenti, mis olid loodud ThMLiga (Plantinga, 1998) MusicXML MusicXML on arendatud Recordale LLC poolt selleks, et kujutada noodikirja. See on disainitud selliselt, et oleks võimalik partituuride levitamine ja vahetus, eelkõige partituuride kirjutajate vahel aasta märtsiks toetas mingil määral MusicXMLi üle 190 rakenduse. (Makemusic, 2015) Järgnevas näites on ühemõõduline muusikapala, millel on täisnoot 1. oktavi C-l, taktimõõdus 4/4: Joonis 6. MusicXMLi noodi näide <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE score-partwise PUBLIC 16

17 "-//Recordare//DTD MusicXML 3.0 Partwise//EN" " <score-partwise version="3.0"> <part-list> <score-part id="p1"> <part-name>music</part-name> </score-part> </part-list> <part id="p1"> <measure number="1"> <attributes> <divisions>1</divisions> <key> <fifths>0</fifths> </key> <time> <beats>4</beats> <beat-type>4</beat-type> </time> <clef> <sign>g</sign> <line>2</line> </clef> </attributes> <note> <pitch> <step>c</step> <octave>4</octave> </pitch> <duration>4</duration> <type>whole</type> </note> </measure> </part> </score-partwise> Dokumendi element <score-partwise> sisaldab endas elemente <part> ja need omakorda koosnevad elementidest <measure>. MusicXML kood algab päisest, milles on üles loetletud muusikapartiid partituuris. Antud näite puhul on tegemist kõige lihtsama variandiga, ühepartiilise partituuriga, niiet loetletud ongi ainult üks partii, elemendiga <part> ja atribuudiga id. Nüüd kui alustada juba partii kirjutamisega, tuleb kasutada elementi <measure> atribuudiga number, mis peab vastama päises loetletud partii id-le. Elemendis <attributes> kirjeldatakse võtmeinfo, mis on vajalik selleks, et tõlgendada noodid ja muusikaline info antud partiis. Element <divisions> näitab noodi pikkust, <key> näitab võtmemärgi omadusi, <time> näitab taktimõõtu, <clef> on noodivõtme omadustega element. Nüüd kui omadused on paika pandud, tuleb luua noot. Element <pitch> peab sisaldama endas elemente <step> ja <octave>. Noodi kohta käivad veel elemendid <duration> ja <type>, mis antud juhul näitab, et tegemist on täisnoodiga. (Makemusic, 2015) 17

18 1.4.6 Human Markup Language HumanML on märgistuskeel, mida kasutatakse, et kirjeldada kontekstuaalselt inimsuhtluse juhtumite füüsilist, kultuurilist, žestilist ja sotsiaalset informatsiooni. Arendamisega alustas OASIS aastal 2001 ning aasta lõpuks esitleti spetsifikatsiooni: Human Markup Language Primary Base Specification 1.0. Selle eesmärgiks nimetati parendada inimsuhtuluse protsessi XMLi kasutamise läbi, sihiga lõpetada inimestevaheline möödarääkimine. Samamoodi nagu inimesed kasutavad emotikone, et anda edasi oma emotsioone, on HumanML koodis emotsionaalsed väärtused ja kavatsused märgistustesse lisatud. (Roland, 2005) GraphML GraphML on märgistuskeel, mida kasutatakse punktjoonskeemi (graaf) defineerimiseks ning selle struktuuriliste omaduste kirjeldamiseks. Punktjoonskeem koosneb punktidest node ja joontest edge. Järgnevas näites on defineeritud 11 punkti ja 12 joonega punktjooskeem. (Brandes, Eiglsperger & Lerner, 2004) Joonis 7. GraphMLiga loodud punktjoonskeem <?xml version="1.0" encoding="utf-8"?> <graphml xmlns=" xmlns:xsi=" xsi:schemalocation=" <graph id="g" edgedefault="undirected"> <node id="n0"/> <node id="n1"/> <node id="n2"/> <node id="n3"/> <node id="n4"/> <node id="n5"/> <node id="n6"/> <node id="n7"/> <node id="n8"/> <node id="n9"/> <node id="n10"/> <edge source="n0" target="n2"/> 18

19 <edge source="n1" target="n2"/> <edge source="n2" target="n3"/> <edge source="n3" target="n5"/> <edge source="n3" target="n4"/> <edge source="n4" target="n6"/> <edge source="n6" target="n5"/> <edge source="n5" target="n7"/> <edge source="n6" target="n8"/> <edge source="n8" target="n7"/> <edge source="n8" target="n9"/> <edge source="n8" target="n10"/> </graph> </graphml> GraphML dokument koosneb elemendist <graphml> ja alamelementidest <graph>, <node> ja <edge>. Sellest näitest on näha, kuidas igal punktil on oma id ning igal joonel on lähtekoht, kindla id-ga punkt, ja sihtkoht, samuti kindla id-ga punkt. Punktide ja joonte määramisel ei ole nende järjekord oluline. Element <node> võib sisaldada infot punkti värvi kohta. GraphMLiga on võimalik ka luua pesastatud punktjoonskeeme. Näide (Brandes et al, 2004): <node id="n5"> <graph id="n5:" edgedefault="undirected"> <node id="n5::n0"/> <node id="n5::n1"/> <node id="n5::n2"/> <edge id="e0" source="n5::n0" target="n5::n2"/> <edge id="e1" source="n5::n1" target="n5::n2"/> </graph> </node> Selleks lisatakse elemendi <node> sisse omakorda element <graph>, millel on omaette punktid ja jooned. Teise punkti sisse pandud skeem on hierarhiliselt madalam. (Brandes et al, 2004) Artificial Intelligence Markup Language AIML (Artificial Intelligence ML) on loomuliku keele loomise jaoks mõeldud märgistuskeel. See arendati välja ja aasta vahel tehisintellekti Aliceboti jaoks. AIMLi objektid koosnevad ühikutest topics ja categories. Kategooriad on põhilised teadmisteühikud AIMLis, iga kategooria koosneb sisendküsimusest ja väljundvastusest ning samuti valikulisest kontekstist. Küsimust nimetatakse mustriks - pattern ja vastust malliks template. Konteksti tüüp võib olla üks kahest: that või topic. AIMLi keel on lihtne, koosnedes vaid sõnadest, tühikutest ja metamärkidest ( _, * ). Sõnad võivad koosneda tähtedest ja numbritest. Konteksti that puhul jätab tehisintellekt meelde, mida tema või klient enne ütles/küsis. Näiteks võib tehisintellekt küsida, kas kliendile meeldivad 19

20 filmid. Kui klient selle peale vastab jah, peab tehisintellekt aru saama, mille peale klient vastas. Näide filmi küsimise kohta (Wallace, 2002): <category> <pattern>yes</pattern> <that>do YOU LIKE MOVIES</that> <template>what is your favorite movie?</template> </category> Antud näites kui tekib selline dialoog, on tehisintellekti järgmiseks küsimuseks, mis on kliendi lemmikfilm. Elemendi <srai> abil saab suunata kindla mustri juurde. Näiteks kõik tervitussõnad (Hello, Hi, Hola jne) suunavad mustrile Hello, millele on kindel vastuste valik ette antud. AIMLi abil saab tehisintellektile õpetada selgeks, mida mingisugustele küsimustele vastata, kuid on palju lauseid, millega tehisintellekt hakkama ei saa, nt keeleliselt kahemõttelised laused. Tehisintellekte täiendatakse pidevalt, aga täiuslikkuseni jõutakse alles siis, kui inimene ei suuda enam tehisintellekti lausetega petta. (Wallace, 2002) MathML MathML on märgistuskeel matemaatiliste esituste kirjeldamiseks, nii struktuuri kui sisu edastamiseks. Selle eesmärgiks on integreerida matemaatilised valemid veebi. HTMList ei piisa, selleks et esitada valemeid veebis. Selleks arendati aastal 1998 välja MathML. See ei ole mõeldud käsitsi kirjutamiseks, vaid selle käsitsemiseks on spetsialiseeritud haldusriistad nagu võrrandiredaktorid, või hoopis teistest matemaatilistest pakettidest edasi-tagasi eksportimiseks. Järgnevalt üks näide lihtsast matemaatilisest võrrandist ja selle kahest esitlusviisist. (W3C, 1999) Joonis 8. MathMLi võrrandi näide <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>x</mi> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>=</mo> 20

21 <mn>0</mn> </mrow> Tegemist on ettekandeliste märgendite abil võrrandi kirjeldamisega. Ettekandelised märgistused algavad tavaliselt tähega m ja seejärel kasutatakse järgnevaid tähti: o (operaator, tehtemärk), i (identifikaator), n (number). Märgistus <mrow> näitab horisontaalsesse gruppi korraldamist. (W3C, 1999) <apply> <plus/> <apply> <power/> <ci>x</ci> <cn>2</cn> </apply> <apply> <times/> <cn>4</cn> <ci>x</ci> </apply> <cn>4</cn> </apply> Semantilise märgistuse korral kasutatakse märgistusi <times/> (korda) ja <power/> (astmes), aga samuti ka <apply> funktsiooni või operaatori rakendamiseks, <factorial/>, <divide/>, <max/> ja <min/>, <plus/> ja <minus/>, <rem/> (jagatise jääk). MathML ei arvuta tehteid, kui näiteks madalama klassi õpilastele on vaja koostada tehe 3 + 4, siis MathML jätabki selle sellisel kujul, samal ajal kui tavalised arvutussüsteemid kuvavad väljaarvutatus väärtust 7. (W3C, 1999) 1.5 XHTML Alates aasta jaanuarist on kõik W3C soovitused HTMLi jaoks põhinenud enamasti XMLil, mitte enam SGMLi ning seda nimetati XHTMLiks (Extensible HyperText ML). Keele spetsifikatsioon nõuab, et XHTMLi veebidokumendid oleksid hästi moodustatud XML dokumendid. See võimaldab viimistletumaid ja jõulisemaid dokumente, kasutades samal ajal HTMLi märgendeid. Üheks põhiliseks erinevuseks HTMLi ja XHTMLi vahel on see, et viimasel juhul peavad kõik märgendid suletud olema, näiteks HTMLi tühimärgend <br> peab olema suletud tavalise lõpumärgendiga või kasutades erilist kaldkriipsu sulgeva noolsulu ees: <br />. Teine oluline erinevus on, et kõik tunnusega väärtused (attribute values) peavad olema jutumärkides. (Kyrnin, 2011) Kolmandaks peavad kõik märgendid ja väärtuse nimed olema XHTMLis väikese tähega, erinevalt HTMList, mis lubab mõlemat. (Keith, 2010) 21

22 XHTML 2 arendas edasi W3C ja HTML5 arendas WHATWG Web Hypertext Application Technology Working Group. Samal ajal arendas ka W3C HTML 5 edasi (erinevus tühikus WHATWG arendas HTML5 ja W3C HTML aastal kuulutas W3C, et XHTML 2 enam ei uuendata (Keith, 2010). Järgmiseks spetsifikatsiooniks, mida kasutada, osutus HTML5, kuigi see arendati lõplikult välja aasta oktoobris. Selle ajani kasutati HTML5 neid osasid, mida veebibrauserid toetasid. (Kyrnin, 2011) 1.6 HTML5 HTML5 on W3C-e spetsifikatsioon, mis defineerib viienda suure HTMLi redigeerimise (QuinnStreet, 2015). HTML5 arenduse eesmärk oli multimeedia tehnoloogia toetuse taseme parandamine ning samal ajal säilitada lugemismugavust ja analüüsimise lihtsust. HTML5 loodi kui ühtne märgistuskeel, mis ühendab endas HTMLi ja XHTMLi süntaksilisi norme. See parandab dokumendite märgistust ja pakub ühtseid rakendusliideseid (API - Application Programming Interface) keerulistele veebirakendustele. (W3C, 2014) HTML5 positiivseteks külgedeks on otsingumootorite optimiseerimine, lokaalne hoiustamine ja online-vahemälu, veebirakendused, telefonide ühilduvus ja mängude arendus, video ja audio toetus, interaktiivsus ja elegantsed vormid, brauserite risttoetus ning paranenud semantika ja puhtam kood. (Telefonica, 2013) Paljud HTML5 omadused on loodud selliselt, et see jookseks hästi ka väiksema võimsusega seadmetel nagu näiteks tahvelarvutid ja nutitelefonid. HTML5-s on realiseeritud mitmed uued erilisused, uued elemendid ning matemaatiliste valemite ja mastabeeritava vektorgraafika (SVG - Scalable Vector Graphics) kasutamise võimalus. Need uuendused on arendatud selleks, et oleks lihtsam luua ja käsitleda veebi multimeedilist ja graafilist sisu ilma pluginateta ja kõrvaliste rakendusliidesteta. Rakendusliidesed ja dokumendiobjektide mudel on HTML5 spetsifikatsiooni põhiosad. (W3C, 2014) Mõned elemendid on juurde tekkinud, mõned aga muudetud, uuesti defineeritud või standardiseeritud (<a>, <cite>, <menu>). Dokumenditüübi märkimisel piisab lihtsast märgendist <!DOCTYPE html>. Järgnevalt on esitatud nimekiri uutest elementidest (Harold, 2007): nav navigeerimismenüü, mis sisaldab linke teistele lehtedele 22

23 article iseseisev kanne blogis, ajakirjas, kogumikus aside märge, soovitus, küljepaan, märkus dialog esitab vestlust mitme inimese vahel, kusjuures element dt näitab, kes on rääkija ja element dd näitab kõne sisu m/mark element näitab, et tekst on märgistatud, kuid pole rõhutatud time näitab ajahetke ning ei vaja erilist vormistust, kuid elemendiga peaks kasutama atribuuti datetime, mis sisaldab aega arvutile mõistetavamas vormis. Näiteks: o <p>kirjutan seda näidet o <time datetime=" t19:30:00-05:00">24. märtsil 2015 kell 19.30</time>. o </p> meter näitab numbrilist väärtust (palk, protsent, testitulemused). See element aitab brauseritel ära tunda koguseid. Kindel formaat puudub, on võimalik kasutada kuni kuus atribuuti: value, min, low, high, max, optimum. audio - enam ei ole tarvis kolmanda osapoole pluginaid. Samas tuleb jälgida, et kõik brauserid ei toeta kõiki audioformaate (nt Firefox vajab.ogg faili, samas kui Webkitile sobib ka.mp3 formaat). Selleks tuleb koodi lisada ühe audio kaks versiooni (Way, 2011): o o <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a>download this file.</a> </audio> video - samamoodi nagu audio element, saab sedagi kasutada otse videote lisamiseks. Atribuutideks näiteks preload, mis eellaeb video, ja control, mis annab kasutajale võimaluse video pausile panna, edasi kerida. Kuid ka selle elemendiga on brauseritel probleem, sest erinevad brauserid toetavad erinevaid formaate. Koodi näide, mida seetõttu tuleks kasutada (Way, 2011): o o <source src="cohagenphonecall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenphonecall.mp4" type="video/mp4; 'codecs='avc1.42e01e, mp4a.40.2'" /> lisaks veel section, header (ei ole sama mis head), footer, figure, progress, details, datagrid. 23

24 Uued elemendid on loodud dokumentide semantilise sisu rikastamiseks, samal põhjusel on ka mitmeid uusi atribuute. Näiteks lisati atribuut contenteditable, mida saab lisada näiteks nimekirja elemendile. Nagu nimi ütlebki, on tegemist nimekirjaga, mida kasutaja saab redigeerida: etteantud väärtused kustutada, uued asemele kirjutada. Seda on hea kasutada näiteks to-do listide jaoks. Samuti on loodud atribuut placeholder, mis säilitab kindlaksmääratud teksti tekstiväljas. Varem pidi selleks kasutama JavaScripti või leppima sellega, et atribuut value võib kaduda pärast seda, kui kasutaja otsustab siiski mitte kirjutada ja klikib tekstiväljalt välja. Kõik brauserid ei toeta kõiki uusi atribuute, nt ei toeta Firefox atribuuti placeholder. Samas on mõningaid elemente ja atribuute sellest HTMLi versioonist eemaldatud. Näiteks ei pea enam elementidele link ja script lisama atribuuti type, sest eeldatakse, et need märgendid viitavad stiililehtedele ja skriptidele. (Way, 2011) HTML5 elemendiga <canvas> saab JavaScripti koodi kasutades luua joonistusi, kui kasutaja on antud lehel. Need joonistused võivad sisaldada animeeritud elemente ning olla isegi interaktiived. (Smith, 2014) HTML5 saab kasutada alternatiivina Adobe Flashile. Mõlemal neil on omadused mis võimaldavad mängida veebilehtedel audiot ja videot ning mõlemal võimalus töötada vektorgraafikaga. Adobe Flashile polnud enne võrdväärseid alternatiive. Alates aasta jaanuarist on YouTube il vaikimisi HTML5 meediapleier, sest seda toetab rohkem seadmeid. (Garun, 2015) 30. septembril 2011 avaldati uuring: Millist HTMLi versiooni kasutavad 100 populaaseimat veebisaiti? Järgneval joonisel on uuringu tulemus. (binvisions, 2011) 24

25 Joonis populaarseima veebisaidi uuringu tulemus Samas aruandes avaldati veel mitmeid fakte. Üle 50% sotsiaalmeediast ja otsingumootoritest kasutab HTML5, kuigi see moodustab vaid 28% populaarseimatest veebilehtedest. Ülejäänud veebilehtedest ainult napilt üle 25% kasutab HTML5. Uuritud populaarseimate veebisaitide jaotus oli järgmine (binvisions, 2011): Sotsiaalmeedia 17% Failide hoiustamisteenu sed, e-poed ja kõik muu 50% Veebisaidid, mis pakuvad tooteid allalaadimiseks 13% Otsingumootorid 13% Meelelahutus ja uudised 7% Joonis populaarseima veebilehe jaotus Need uuringutulemused näitavad, et väga paljud veebisaidid kasutasid HTML5 juba enne, kui see avalikult publitseeriti. Praeguseks on sellest uuringust möödas üle kolme aasta ning numbrid on kindlasti teised, trendi arvestades on HTML5 kasutavaid veebisaite rohkem. 25

26 1.7 Miks märgistuskeeled pole omaette keeled? Sellist küsimust võib kohata üsna sageli. Tavaliselt puudutab see küsimus konkreetselt ühte märgistuskeelt: HTML. Põhjuseks on see, et suur osa inimesi puutub selle märgistuskeelega kokku esimesena ning tekib küsimus, kas see on omaette programmeerimiskeel. Leides vastuse sellele küsimusele, saame aru ka sellest, miks pole ükski märgistuskeel programmeerimiskeeleks. Põhjuseks, miks märgistuskeeli, näiteks HTMLi, peetakse programmeerimiskeeleks, võib olla see, et arvuti teeb midagi millegi kirjutamise tulemusel. Sellisel juhul oleks targeb kasutada väljendit koodimine, mitte programmeerimine. Lähtudes Ameerika riiklikust standardite infotehnoloogia sõnastikust (ANSDIT - American National Standard Dictionary of Information Technology) on märgistus lühidalt öeldes informatsion, mitte juhend. Seega, kuna pole juhendit, mida mingi elemendiga teha, ei saa olla tegemist programmeerimisega. (Korpela, 2005) Programmeerimiskeel on aga sõnastik ja grammatikareeglid, mille abil kirjutatakse arvutile instruktsioone. Igal programmeerimiskeelel (C, C++, Pascal jm) on oma märksõnade komplekt ja spetsiaalne süntaks programmikäskude organiseerimiseks. (Vallaste, 2015) Ei kirjeldavad ega protseduurilised märgistuskeeled pole programmeerimiskeeled, ehkki viimane võib nendega sarnaneda. HTML kuulub kirjeldavate märgistuskeelte alla, andes kindlat infot mingi elemendi kohta. Näiteks märgistus <h1>...</h1> näitab vaid seda, millega on tegemist, see ei näita, mis fondis või suuruses tuleb teksti kuvada. Veebilehitsejad on need, mis on programmeeritud sellise märgistusega teksti kuvama teistmoodi kui tavalist (suuremalt, rasvasemalt). Samamoodi HTMLi märgistus <font color="red"> pole otseselt juhend, veebilehtiseja on see, mis tõlgib selle märgistuse käsuks. (Korpela, 2005) Märgistuskeeled jäävad kategoriseerimises programmide ja andmete vahele. Konkreetselt HTML võib pidada andmeformaadiks. (Korpela, 2005) Seda kasutatakse struktuurilistel, mitte funktsionaalsetel eesmärkidel. HTML, nagu teisedki märgistuskeeled, ei sisalda tingimuslauseid (if/else) ega oska arvutada. Samuti ei töötle see sündmusi, ei täida ülesandeid, sellega ei saa muutujaid deklareerida ja funktsioone kirjutada. See kõik kinnitab, et märgistuskeeled pole programmeerimiskeeled. (Romy, 2012) 26

27 2 MÄRGISTUSKEELTE KASUTAMINE E-POODIDE LOOMISEL Pärast esimese WWW-serveri ja brauseri tutvustamist Berners-Lee poolt aastal hakkasid internetilehed arenema. Avati online-pangandus ning Pizza Hut avas e-pitsapoe ning samuti tutvustas Intership esimest e-poe süsteemi. Samal aastal tutvustas Netscape SSL-krüpteeringut, mis oli väga oluline e-poodide turvalisuse tagamisel. Esimene turvaline tehing tehti aastal Järgnevalt avasid suuri e-poode Amazon ja ebay. (ishift, 2010) E-poodide kõige tavalisemateks maksemeetoditeks on rahvusvaheliste e-poodide puhul krediitkaardiga maksmine. Eestis on see küll vähe levinud, kuid on ka mitmeid muid maksmise võimalusi, mida kasutatakse: Sularahas kauba kättesaamisel mobiilimakse otsekorraldus elektrooniline raha (bitcoin) kinkekaart postiülekanne (Western Union) veebipõhine maksmine (PayPal) Täna kasutatakse mitmeid erinevaid märgistuskeeli ning kindlasti ei saa neist kõrvale minna ka e-poodide loomisel. Autor on otsustanud uurida, milliseid märgistuskeeli kasutavad eesti veebiarendajad, luues e-poode. Selleks on autor otsustanud küsitleda kümmet veebiarendajat. Küsitlus osutus info kogumiseks kõige tõhusamaks meetodiks, sest sel viisil saab koguda igalt veebiarendajalt samaväärset infot. Nii on selle info töötlemine hiljem mugav. 2.1 Valimi moodustamine ja küsimustik Uuritavate inimeste valimiseks kasutas autor kihteesmärgiga valimit sellisel juhul valitakse uuritavad erinevatest rühmadest. Antud juhul valis autor erinevatest veebiarendusega tegelevatest ettevõtetest arendajaid. Ettevõtete valik oli juhuslik ning samuti oli iga ettevõtte ühe arendaja valik juhuslik. Valimi suuruseks oli kümme arendajat. Valim ei ole väga suur, põhjusel eelneva uuringust selgus, et kõik arendajad ei soovinud küsitlusele vastata. Seetõttu osutusid valituks arendajad järgnevatest ettevõtetest: Roller 27

28 Äritarkvara OÜ, Veebilehed OÜ, OÜ Web Expert, Nertivel OÜ, Elitec Group OÜ, OÜ Infovõrgud, Dreamcom Solutions OÜ, Pipfrog OÜ, OÜ Art Media Agency ja HansaNet OÜ. Uurimismeetodiks valis autor küsitluse, sest sellega saab koguda fakte, samuti infot käitumise ja tegevuse, teadmiste, väärtuste, hinnangute, suhtumiste, arusaamade ja arvamuste kohta. Küsitluse eeliseks on veel lisaks see, et andmeanalüüs on lihtsam, kuna kõik uuritavad vastavad samadele küsimustele. Küsimustiku koostamisel üritas autor jälgida, et küsimused oleksid lihtsa sõnastusega, üheselt arusaadavad ja kergesti vastatavad. Küsimustik on ära toodud lisas Tulemused ja nende analüüs Kahe esimese küsimuse puhul olid tulemused järgmised: st teab 10st kasutanud Joonis 11. Märgistuskeelte küsitluse tulemus Selgus, et igat märgistuskeelt, mida autor uuris, teadis vähemalt üks veebiarendaja. Kümnest arendajast kümme teadsid SGMLi, RSSi, HTMLi ja XMLi. SGMLi tuntakse üsna hästi, kuid kõik ei ole seda proovinud või kasutanud. Põhjuseks on ilmselt see, et 28

29 SGML on märgistuskeelte ajaloos olulisel kohal ning seetõttu on nende inimeste, kes on sellest kuulnud, protsent kõrgem. Proovinud on SGMLi reaalselt kuus inimest kümnest. HTMLi ja XMLi kasutavad kõik arendajad oma igapäevases töös, seetõttu on nende puhul tulemus 100%. Peaaegu iga arendaja (üheksa kümnest) on kasutanud RSSi. Tulemused on suhtelised ootuspärased. Enimkasutatavaid märgistuskeeli teavad kõik, sest ka kasutavad neid. Vähemtuntud märgistuskeeli aga teab vähem inimesi ning veel vähem inimesi on neid kasutanud. Mõni neist keeltest on lihtsalt märgistuskeelte ajaloos olnud ning neil ei ole tänapäeva programmeerimises erilist kohta. Kolmanda küsimuse vastustest selgus üks ootamatu tõsiasi. Nimelt ei tea paljud veebiarendajat, mis täpsemalt on märgistuskeeled. Küsimusele, mis märgistuskeeli kasutatakse, vastas nii mõnigi arendaja PHP ja CSS. Märgistuskeeltest kasutatakse HTMLi ja XMLi. Esimese kasutamise põhjuseks nimetas kuus arendajat kümnest front end i see on veebilehele ilmuv kasutajaliides, tänu millele saidi külastaja suhtleb selle dünaamiliste osadega (andmebaas, ostukorv). HTMLi kasutavad kõik arendajat, sest see on veebilehe standard ja ilma selleta ei saa e-poodi luua. XMLi kasutatakse enamasti erinevate liidestuste jaoks (nt majandustarkvara liidestamine üle rakendusliideste) selle tõi välja seitse arendajat. Samas märkis neli neist, et viimasel ajal domineerib XMLi asemel liidestamise jaoks JSON. 2.3 Märgistuskeelte rakendatavus e-poe loomisel Nagu eelmisest peatükist selgus, ei kasuta veebiarendajad just palju erinevaid märgistuskeeli oma töös. Kuna e-poodi ei saa kogu selle ulatuses kirjutada ainult ühes märgistuskeeles, tuleb leida muu võimalus. E-poe erinevate osade (esileht, tutvustus, menüü, lingid) jaoks saab kasutada erinevaid märgistuskeeli. Kuna veebilehe standard on HTML, siis see peab esinema läbivalt kogu veebilehes. Läbivaks ideeks e-poe loomisest on kõrvaklappe ja kõrvarõngaid müüv ettevõte. Tulenevalt sellest, et GML ja SGML on märgistuskeeled, mida enam ei kasutata ning millest on muud keeled arenenud, ei kasutanud autor neid kahte märgistuskeelt. Samuti ei ole autor rakendanud e-poe puhul keeli, mille puhul selgus eesti veebiarendajate seas tehtud küsitluse tulemusena, et seda ei kasutata. Esimese asjana proovib autor luua e-poe esilehe What You See Is What You Get meetodil, luues see programmis Adobe Dreamweaver CC. 29

30 2.3.1 What You See Is What You Get Uue faili loomisel pakub Dreamweaver (edaspidi lühendatult DW) erinevaid malle. Autor valis tühja malli. WYSIWYG meetodil veebilehte luua on üsna lihtne. Erinevad veebilehe osad, mida saab lisada, on valmiskujul olemas, kasutaja peab vaid sobiva välja valima ja sellele sisu looma. Näiteks on järgneval pildil pakutud nimekiri struktuuri elementidest, mida kasutaja saab lisada. Joonis 12. Dreamweaveri pakutavad struktuurielemendid Valides näiteks elemendi <div>, küsib programm kasutajalt, kuhu ta selle elemendi soovib paigutada: kas sinna, kus kursor asub, viimati aktiivse märgendi ette või järele, märgendi alguse järele või enne märgendi lõppu. Kasutaja teeb oma valiku ning redaktor, antud juhul Dreamweaver paigutab soovitud elemendi vajalikku kohta. Koodi kasutaja ise muutma ei pea. Näiteks paragrahvi elemendi puhul loob kasutaja sellele ise sisu, kirjutadess sinna soovitud teksti ( Tere tulemast meie e-poodi! ). Adobe Dreamweaveriga on lihtne luua veebilehte, eriti juhul, kui tegemist on inimesega, kes ei valda koodi kirjutamise oskust. Väga mugav on see, et veebilehele mingeid muutusi 30

31 tehes on need kohe eelvaatepaanis näha ning lehte ei pea kogu aeg brauseris avama, et seda kontrollida. Autoril oli küll üsna keeruline proovida teha seda vaid WYSIWYG meetodil, sest paratamatult tekkis tahtmine muuta koodi, mille programm valmiskujul ette andis. Järgnevas näites on autor loonud navigeerimisriba viidetega järgmistele lehtedele ning samuti lisanud bänneri. Joonis 13. Veebilehe loomine Adobe Dreamweaveris Kui valida Dreamweaveri pakutud mallide seast, ei pea nii palju tegelema veebilehe visuaalse poolega, sest sellisel juhul saab CSS faili lihtsalt juurde panna. Valmis mallide kujundus esitatakse õigesti järgmistes brauserites: Firefox (Windows ja Macintosh) 1.0, 1.5, 2.0 ja 3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 ja 8.0; Opera (Windows ja Macintosh) 8.0, 9.0 ja 10.0; Safari 2.0, 3.0 ja 4.0; Chrome 3.0 (Adobe Systems, 2015). Kui aga valmis malle ei soovi kasutada, on veel kaks võimalust. Üks võimalus on kasutada valmis CSS-faili, mis eeldab, et see peab olema kellegi poolt valmis tehtud. Teine võimalus on CSS-fail luua Dreamweaveriga. Valides uue faili aknas failitüübiks CSS, saab 31

32 luua uue stiililehe. Kasutaja saab valida, millistele märgenditele stiilid rakenduvad. Näiteks valib kasutaja märgendi table ja seab paika, millised näevad välja tabelid tema veebilehel. Muidugi peab kasutaja CSS-faili kinnitama oma veebilehele ning seda saab teha ka ise koodi kirjutamata. Samuti saab CSSi sisu lihtsalt veebilehe sisse importida, ilma eraldi CSS failita. Kokkuvõtvalt võib öelda, et Dreamweaveriga saab veebilehe väga edukalt tehtud, ent inimesele, kellel on natuke rohkem koodikirjutamise oskust, on keeruline teha seda vastupidi sellele, kuidas tavaliselt tehakse: enne kirjutatakse kood, siis vaadatakse, kuidas see välja näeb MathML Järgnevalt proovis autor veebilehe loomisel kasutada MathMLi. Seda ei ole toimiva veebilehe kirjutamiseks võimalik kasutada, sest kõik brauserid ei toeta seda. Erandiks on Mozilla Firefox. Samuti on vähe e-poode, mis vajaksid mingisuguste valemite kujutamist. Sellegipoolest otsustas autor proovida ka seda märgistuskeelt. HTML5 süntaks lubab kasutada MathMLi elemente dokumendis märgendite <math>...<math/> sees. Kõrvaklappidel arvutatakse näiteks võimendi võimsust, kui on teada nende tundlikkus ja takistus. Arvutamine koosneb mitmest etapist, millest esimese puhul arvutatakse võimendi takistuse kadu. Selle valem näeb välja selline: Z hp Loss = 20log ( ) Z out + Z hp (Antud töö kirjutamisel kasutatav programm Microsoft Word kujundab valemi otse õigeks) Selgus, et MathMLi ei toeta kõik brauserid. Tulemuse nägemiseks sobib enamlevinumatest brauseritest FireFox, samuti Safari. MathMLi on välja võrjunud teised lahendused, nagu näiteks MathJax (Perfect, 2013). Sellegipoolest otsustas autor proovida ning Firefoxis kuvati valem järgmisel kujul: Joonis 14. MathMLi valem Firefoxis 32

33 Koodi kirjutamisel kasutas autor ettekandeliste märgnedite varianti. Kood koos selgitustega: <mi>loss</mi> <!-- element <mi> näitab muutujat --> <mo>=</mo> <!-- operaatori element, antud juhul võrdlusmärk --> <mn>20</mn> <!-- numbri element --> <mi>log</mi> <mfenced> <!-- antud element võimaldab lisada sulgusid --> <mfrac> <!-- element murdude loomiseks --> <msub> <!-- element alaindeksi jaoks --> <mi>z</mi> <mrow> <!-- horisontaalne rida argumentidega --> <mi>hp</mi> </mrow> </msub> <mrow> <msub> <mi>z</mi> <mrow> <mi>out</mi> </mrow> </msub> <mo>+</mo> <!--asub sama mrow sees, et olla samal real--> <msub> <mi>z</mi> <mrow> <mi>hp</mi> </mrow> </msub> </mrow> </mfrac> </mfenced> </math> <!-- MathML lõpumärgend --> Brauseris Chrome kuvatakse seesama võrrand järgmiselt: Joonis 15. MathMLi valem Google Chrome's Nagu näha, ei toeta brauser seda mitte mingil määral. Teistesse brauseritesse sama valemi kuvamiseks tuleb kasutada muid tehnoloogiaid, LaTexi näiteks HTML5 uued elemendid HTML5-s on mitmeid uusi elemente, mida varem pole olnud, seetõttu otsustas autor proovida läbi mõned neist. Esimesena valis autor nimekirja, mida saab ise muuta. Kasutades tavalist elementi <ul> järestamata nimekirja jaoks ning lisades sellele atribuut contenteditable väärtusega true, saab järgmise tulemuse: 33

34 Joonis 16. Atribuudi 'contenteditable' kasutamine Selleks, et lisada otsinguväljale sõna otsing, saab kasutada HTML5 atribuuti placeholder. Kui kasutaja otsustab sinna midagi kirjutada ning siis mõtleb ümber, saab ta alati paremasse tekkiva risti peale vajutades oma kirjutatu eemaldada ning sõba otsing on taas nähtaval. Tulemus on järgnev: Joonis 17. Eeltäidetud otsinguväli Samuti on autor kasutanud HTML5 uut elementi <nav>, et koostada navigeerimisriba. CSS-ga stiili juurde andes näeb see välja järgmine: Joonis 18. Navigeerimisriba Üldiselt ei ole HTML5 kasutamises mitte midagi erilist, on juurde tekkinud mõned elemendid, mida on e-poes kindlasti huvitav ja sobilik kasutada (heli-või videoefektid). Arendajad, kelle põhitööks on veebilehtede loomine, kasutavad neid eeldatavasti oma igapäevases töös ning ei mõtlegi selle peale, et see on midagi muud kui HTML. See annab aga juurde uusi võimalusi ning e-poodide puhul on oluline, et see kliendile meeldejääv oleks. Siin tulevadki kõik uued elemendid ja atribuudid kasuks XML XML on mõeldud andmete näitamiseks, seega on sellega üsna keeruline luua veebilehte või mõnda selle osa. Küll aga on sellega võimalik luua näiteks tabeli, kus on pakutavad tooted nende omaduste ja andmetega. Või lihtsalt nimekirja, lisades juurde toodete pildid ja kirjeldused. Samuti saab näiteks lisada lingi nimega lisa ostukorvi, mis valitud toote 34

35 korvi lisab. Seda ei saa küll teha ainult XMLiga, aga idee on selles, et toodete visualiseerimist saab selle abil teha. Kui HTMLi stiilileheks on CSS, siis XMLi stiilileheks on XSLT. Tegelikult on võimalik XMLile lisada juurde CSS stiilifail, ent seda praktiseeritakse vähe. Sisuliselt muudab XSLT (extensible Stylesheet Language Transformations) XML koodi HTMLi-taoliseks, et brauserid saaksid seda paremini kuvada. Kõige lihtsamal kujul on kõrvaklappe võimalik kuvada tabeli kujul, kus on ära toodud tooteartikkel, tootja, toote pilt, värv, sagedusvahemik ja hind. Joonis 19. Kõrvaklappide tabel XMLi ja XSLT-d kasutades Tootja nimetuse peale vajutades võib lisada lingi, mis avab hüpikakna kirjeldusega tootja tegevusest antud valdkonnas. Samuti tuleb lisada pildi viide tabelisse pildi tulpa, aga sel juhul tuleb kindlasti jälgida, et piltide formaadid oleksid ühtlaselt sarnased. Värvuse võib tegelikult nimetuse asemel lisada värvilise ribana. Kõike seda ja palju muudki saab XMLi abil teha. XMLi on võimalik täiendada xpathi, xpointeri ja xlinki abil. Neist esimene, xpath, määratleb XML dokumendi osad ning kasutab avaldisi. Ilma selleta ei ole võimalik täiendatumaid XSLT faile luua võimalik, sest näiteks kui on tarvis valida kõik kõrvaklapid, mille tootja on Philips, tuleb kasutada XSLT lehes vastavas kohas väljendit Teisel juhul näiteks, kui on tarvis kuvada kõrvaklappe, mille hind on alla 20 : /korvaklapid/klapp[hind>35.00]. xpointer võimaldab linkidel osutada XML dokumendi spetsiifilistele osadele ning selleks, et navigeerida dokumendis, kasutab see xpathi. xlink on vajalik selleks, et luua hüperlinke, arvestades, et iga element võib XML dokumendis lingina käituda. Kuid seda ei 35