Tallinna Ülikool Digitehnoloogiate Instituut ZURB Foundation 5 õppematerjal Seminaritöö Autor: Hainer Savimaa Juhendaja: Jaagup Kippar Autor :

Suurus: px
Alustada lehe näitamist:

Download "Tallinna Ülikool Digitehnoloogiate Instituut ZURB Foundation 5 õppematerjal Seminaritöö Autor: Hainer Savimaa Juhendaja: Jaagup Kippar Autor :"

Väljavõte

1 Tallinna Ülikool Digitehnoloogiate Instituut ZURB Foundation 5 õppematerjal Seminaritöö Autor: Hainer Savimaa Juhendaja: Jaagup Kippar Autor : Juhendaja : Tallinn 2015

2 Autorideklaratsioon Deklareerin, et käesolev seminaritöö on minu töö tulemus ja seda ei ole kellegi teise poolt varem kaitsmisele esitatud. Kõik töö koostamisel kasutatud teiste autorite tööd, olulised seisukohad, kirjandusallikatest ja mujalt pärinevad andmed on viidatud (kuupäev) (autor) 2

3 Sisukord Sõnastik... 5 Sissejuhatus ZURB Foundation 5 veebiraamistiku tutvustus Foundation 5 õppematerjalid Foundation 5 dokumentatsioon Tuts+ Webdesign Youtube õpetusvideod Muud veebiõpetused ZURB Foundation 5 komponendid Struktuur Media-queries Võrestik Plokkvõrestik Interchange Responsive Content Nähtavus Navigatsioon Peidetav menüü Ülemine menüüriba Leivapuru Küljemenüü Meedia Orbit liugur Elastne video Vormid Nupud

4 2.6 Tüpograafia Dialoogiaknad ja teavitused Dialoogiaken Paneelid Sisu Allapoole avanevad paneelid Hinnatabelid Tabelid Akordion Ülesanded Foundationi üles seadmine Ülesanded Hinnatabeli ülesanne (pricing table) Vormi ülesanne Dialoogi akna ülesanne (reveal modal) Näidislehestik Tagasiside Kokkuvõte Kasutatud kirjandus

5 Sõnastik breadcrumbs CMS dropdown embed front-end grid id iframe media-queries mobile-first open-source responsive tag leivapuru. Navigeerimisskeem, mis kuvab kasutaja asukoha veebisaidil. sisuhaldussüsteem. Tarkvara, mis haldab dokumente veebisaitide tarvis. allapoole avanev sisu või menüü manustama. Sisse ehitama, integreerima, sisse põimima. eessüsteem, eeskomponent. Veebilehele ilmuv kasutajaliides. võrestik, ruudustik. identifikaator sisu, mis manustatakse HTML lehena teise veebilehe sisse. CSS3 moodul, mis adapteerib sisu kuvamist vastavalt ekraani resolutsioonile. Veebilehtede disaini protsess, kus alustatakse veebi disainimist mobiilile esimesena. avatud lähtekood. Programm, mille lähtekood on tehtud programmeeriatele ja kasutajatele kättesaadavaks nii kasutamiseks kui muutmiseks. reageeriv. Disain veebilehtedel, mis reageerib ekraani resolutsioonile. märgend 5

6 Sissejuhatus Üliõpilastöö seminaritöö teemaks on ZURB Foundation 5 õppematerjal. Autor on motiveeritud kirjutama sellel teemal, sest hetkel puudub eestikeelne õppematerjal selle kiiresti areneva ja populaarsemaks muutuva veebiraamistiku kohta. Siinse seminaritöö põhieesmärgiks on tutvustada Foundation 5 veebiraamistikku ning luua läbi õpetuste eeldused õppematerjali läbitöötajal iseseisvalt veebilehtede kujunduste loomise oskused, kasutades seda raamistikku. Õppematerjali edukaks läbitöötamiseks on vajalik HTML (HyperText Markup Language) ning CSS (Cascading Style Sheets) tundmine heal tasemel ja Javascripti tundmine algtasemel. Siinses töös on põhirõhk pandud just komponentidele, mis töötavad vaid HTML ja CSS baasil. Siinne seminaritöö on kirjutatud toetudes enamasti ZURB Foundation 5 dokumentatsioonile ja Foundationi ametlikul veebilehel asuval informatsioonile ning artiklitele. 6

7 1 ZURB Foundation 5 veebiraamistiku tutvustus Foundation on responsive front-end raamistik, veebilehtede tegemiseks, mis adapteeruvad vastavalt ekraani suurusele ja seda kasutatakse kiirete prototüüpide loomisest kuni valmis veebilehtedeni. (Neilson, 2015) Foundation arendati ettevõtte ZURB poolt aastal 2008 Silicon Valley's, USA-s. Esialgselt oli see loodud vaid ettevõttesiseseks raamistikuks, et kirjutada front-end koodi mugavamini ja kiiremini. Foundation on open-source projekt -- lähtekood on saadaval avalikuks kasutamiseks ilma tasudeta (alates versioonist 2.0). Esimene avalik Foundation (2.0) avaldati oktoobris Seejärel, umbes pooleaastaste vahedega, ilmusid Foundation 3 (juuni 2012), Foundation 4 (veebruar 2013), ja senini viimane versioon, Foundation 5 (november 2013). Foundation on iga versiooniga olnud pioneeriks veebiraamistike alal. Foundation 2.0 oli esimene open-source veebiraamistik, Foundation 3 oli esimene semantiline raamistik ja Foundation 4 oli esimene veebiraamistik, mis kasutas mobilefirst arendust. Lisaks on ZURB veel teinud Foundation idele, Foundation veebilehtedele ja Foundation äppidele. Foundation on ainus front-end raamistik, mis on professionaalselt toetatud ettevõtte (ZURB) poolt. Alates 5. versioonist on olemas Foundationi kodulehel tugev toetussüsteem foorumi näol ning ka tasuline nõustamine. Foundation töötab kõikidel kaasaegsetel veebibrauseritel, ainus erand on Internet Explorer, mis on toetatud alates versioonist 9. Foundation 5 raamistik koosneb 12 tulbaks jagatud võrestikust (grid sytem), mis töötab protsendi-põhiselt; HTML ja CSS kasutajaliidese komponentidest, mallidest ja koodijuppidest. Foundation 5 sisaldab endas mitmeid valmis olevaid komponente ja võrestikku, mis on täielikult responsive olenemata ekraani suurusest (alates nutitelefonidest kuni suurte monitorideni). Seetõttu kasutatakse seda raamistikku tihti ka kiirete prototüüpide valmistamiseks. Üldiselt nõuab Foundation raamistik keskmisel tasemel HTML, CSSi ja JavaScripti oskamist, et luua veebilehti ja äppe. Foundationi komponentidel on kasutatud võimalikult vähe kujundust, et arendajad saaksid teha omanäolisi veebilehti, seejuures kartmata, et stiili muutmisel tekiks palju üleliigset (ja ennast kordavat) koodi. 7

8 Kõige parem viis enda soovitud sätete tegemiseks on kasutades CSS eelprotsessorit SASS (Foundation 5 toetab Libsass'i). SASS (Syntactically Awesome Stylesheets) on eelprotsessor CSS jaoks, mille abil saab kirjutada puhtamat ja kiiremini CSS koodi. Nagu varem mainitud, on Foundation mobile-first. Nutitelefonide kasutajate suure kasvuga on järjest enam tarvis arvestada ka veebilehe töökindluse ja kasutusmugavusega ka väikestel ekraanidel. Mobile-first lähenemine kujutabki endast seda, et kõigepealt arendatakse välja töökindel versioon väikesele ekraanile, ja seejärel liigutakse suurematele. Mobile-first lähenemine aitab ära hoida suure laadimisaja väikestel seadmetel, sest niiviisi ei lisata suurt ressurssi nõudvaid komponente mobiilsesse vaatesse. Kui vanasti arendati kõigepealt suurele ekraanile ja liiguti väiksema peale, järjest komponente peites, jäi oht, et väikestel (ja vähem võimsatel) seadmetel tekkisid raskused töökindluse säilitamisel. Foundation on hea mahuga ja järjest suureneva kasutajabaasiga raamistik, mille põhiline eelis teiste omataoliste ees seisneb responsive veebilehtede arenduses, mis töötaksid kõikide suurustega ekraanidel, niisamuti ka Foundationi võimekus erinevate stiliseeringute rakendamisel. (Webpop, 2013) 1.1 Foundation 5 õppematerjalid Foundationi kohta on internetis saadaval mitmeid erinevaid õpetusi, samuti on olemas mõned ingliskeelsed raamatud, mis pakuvad head ülevaadet Foundation veebiraamistiku kohta. Siinses õppematerjalis olen kasutanud materjale peamiselt kahest ingliskeelsest veebipõhisest õppematerjalist Foundation 5 enda dokumentatsioonist ja Tuts+ õppematerjalide keskkonnast Foundation 5 dokumentatsioon Foundation 5 dokumentatsioon on autori poolt kõige enam kasutatud materjalikogu. Dokumentatsioon on hästi koostatud ja sisaldab iga komponendi kohta põgusat tutvustust ja põhjalikke koodinäiteid. Lisaks on koodinäidete kõrval ka koodile vastavad 8

9 töötavad komponendid. Dokumentatsioonis on välja toodud HTML kood ning edasijõudnutele ka SASSi kood (stilistiliste muudatuste tegemiseks). Peale komponentide tutvustusele on dokumentatsioonis ka õpetused Foundationi raamistiku üles seadmiseks oma projekti tarbeks ning informatsioon SASSi ja Javascripti kasutamiseks kasutamiseks koos Foundationiga. Dokumentatsioon on üles ehitatud nõnda, et kõik komponendid on välja toodud vasakul asuvas menüüs ning on alagruppidesse jaotatud vastavalt funktsionaalsusele. Lingile vajutades avaneb valitud komponendi kohta informatsioon koodinäidete ja lihtsa seletuse näol. Edasijõudnutele on olemas info SASSi kohta ning muutujate nimekiri. Joonis 1 Foundationi dokumentatsiooni koduleht Algajatel oleks soovitatav kõigepealt läbi lugeda sissejuhatav pool dokumentatsioonist (setup alagruppi kuuluvad lingid) ning seejärel järgemööda erinevad komponendid läbi katsetada. Soovitatav oleks alustada struktuuriga seotud komponentidest (võrestik, media-queries, plokkvõrestik). Kõige suuremaid probleeme algajale õppijale tekitab dokumentatsiooni juures leiduvad vähesed kirjakeelsed seletused. Pikemate seletuste saamiseks võiks abi leida näiteks Tuts+ veebilehel leiduvatest Foundationi õpetustest. Foundationi dokumentatsioon asub aadressil: Tuts+ Webdesign Tuts+ veebidisainile pühendatud rubriigis on põgus ingliskeelne õppematerjal Foundationi kohta, mis sisaldab peamiste komponentide tutvustust ja koodinäiteid. 9

10 Võrreldes Foundationi enda dokumentatsiooniga, on komponente pikemalt kirjeldatud ja näited tunduvad autorile praktilisemad ja igapäevasemad. Joonis 2 Tuts+ Foundationi õpetuste sektsioon Tuts+ õpetused on sarnaselt Foundationi dokumentatsioonile lahterdatud gruppidesse funktsionaalsuse põhjal. Iga teema on hästi lahti seletatud seega oleks algajatele hea just Tuts+ õpetustest alustada, sest Foundationi dokumentatsioonis jääb vajaka pikematest kirjeldustest. Algajal oleks tungivalt soovituslik alustada esimesest õpetusest ( Getting started ) ning liikuda järgemööda edasi. Õpetused lähevad järk-järgult keerulisemaks, kuni jõutakse lõpuks välja pigem edasijõudnutele mõeldud SASSiga seonduvate õpetuste juurde, kus seletatakse, kuidas anda komponentidele personaalset kujundust. Tuts+ Foundationi-teemalised õpetused asuvad: Youtube õpetusvideod Youtube DevTips kanal sisaldab front-end arenduse ja disainiga seotud õpetlike videosid. Siin asub ka videote seeria Foundation veebiraamistiku kohta, kus on 10

11 näidatud, kuidas seada üles nimetatud raamistikku projekti tarbeks, millele järgnevad õpetused komponentide loomisest, mis annavad kokku seeria lõpuks ühe täieliku veebilehe. Video autor kasutab enda õppevideotes puhta HTML asemel Jade ja CSS asemel Sassi. Joonis 3 DevTips Foundation 5 õppevideo ekraanitõmmis DevTips Foundationi-teemaline videote seeria asub aadressil: Muud veebiõpetused James Stone i koduleheküljel leiduvad tema poolt kirjutatud artiklid ja viited raamatutele. Samuti on tema koduleheküljel videod tema Youtube kanalist. Stone arutab enda artiklites ja videotes erinevate Foundationit puudutavate teemade üle. Kahjuks puuduvad tema koduleheküljelt samm-sammulised õpetused. 11

12 Joonis 4 Ekraanitõmmis James Stone koduleheküljelt James Stone koduleht asub aadressil: Hea allikas samm-sammuliste õpetuste jaoks on ieatcss.com veebisait. Seal on näidatud kolm elulist näidet veebilehtede loomiseks. Autori arvates on õpetused põhjalikult ning hästi lahti seletatud. Lisaks õpetustele on seal ka Foundation veebiraamistiku sissejuhatav seletus ning võrestiku ja erinevate komponentide kirjeldused koos koodinäidetega. Joonis 5 Ekraanitõmmis ieatcss.com õpetuste lehelt Ieatcss.com Foundationi-teemaline õpetus asub aadressil: 12

13 2 ZURB Foundation 5 komponendid Foundation komponendid on suureks abiks mistahes veebilehe ehitamiseks. Olgu selleks Interchange või võrestik (grid), mille abil elemente oma lehel responsive ks muuta, samuti ka tabelid ja vormid. 2.1 Struktuur Järgnevates peatükkides on kirjeldatud Foundationi struktuurikomponentide põhimõtteid ja ülesehitust. Käsitletavateks teemadeks on media-queries, võrestik, plokkvõrestik, nähtavuse klassid ja Interchange Responsive Content Media-queries Foundation sisaldab sisseehitatud media-queries, aitamaks veebilehel olla responsive. Media-queries on olemuselt hulk tingimuslauseid, mis määravad, milliste suurustega ekraanidel milliseid stiilideklaratsioone veebilehe rakendatakse. Mis eristab Foundationit näiteks Bootstrapist on asjaolu, et Foundation kasutab mõõtühikuna pikslite asemel em, sest em võimaldab saavutada järjekindlama tulemuse responsive veebilehtede arendamisel. Tulevikus loodavad arendajad ZURB'is, et liigutakse täielikult em mõõtühikutelt üle rem ühikutele. Em mõõtu kasutades sõltub objekti suurus otseselt tema vanema (parent) objekti teksti suurusest. Näiteks kui vanema teksti suuruseks on defineeritud 14 pikslit, siis on 1em=14 pikslit. Kui soovida, et objekt oleks 300 pikslit lai, siis arvutuse teel saame: 300/14=21.428em. Rem mõõtühiku arvutamine toimub täpselt samamoodi, ainult et teksti suuruseks on lehekülje juurel (HTML elemendil) defineeritud teksti suurus. Foundation 5 raamistiku CSS failis on media-queries defineeritud järgnevalt: Väikesed ekraanid (ekraanid kuni 640 pikslit): 13

14 @media only screen { only screen and (max-width: 40em) { } Keskmised ekraanid (ekraanid vahemikus em (641 pikslit) kuni 64em (1024 only screen and (min-width: em) { only screen and (min-width: em) and (max-width: 64em) { } Suured ekraanid (ekraanid suuremad kui 1025 only screen and (min-width: em) { only screen and (min-width: em) and (max-width: 90em) { } Väga suured ekraanid (ekraanid vahemikus em (1441 piksllit) ja 120em (1920 only screen and (min-width: em) { only screen and (min-width: em) and (max-width: 120em) { } Ekraanid suuremad kui 1921 only screen and (min-width: em) { } Võrestik Foundation võrestik (grid) jagab ekraani vertikaalselt 12 võrdseks osaks. Tegelikkuses on kolm erinevat 12-osalist võrestikku erinevate ekraani suuruste tarbeks: small (nutitelefonid), medium (tahvelarvutid ja väiksemad sülearvutid) ning large (lauaarvutid ja keskmised ning suured sülearvutid). (Horek 2014) Joonis 6 Foundation 5 võrestiku visualiseering (ZURB, 2015) 14

15 Ülal paikneva joonisel on näha, kuidas terve ekraan on jaotatud 12 osaks. Seejärel on defineeritud terve ekraani laiune päis (header). Järgnevalt on uuel real (row) loodud kaks objekti. Main content nimelise objekti laiuseks on 8 tulpa ja Sidebar nimelise objekti laiuseks on 4 tulpa. Objekte võib teoreetiliselt olla ühel real kuni 12 (Foundationi võrestik toetab 12 tulbalist ekraani jaotumist). Tähtis on, et objektide kogulaius tulpades ei ületaks 12 tulpa. HTML koodis võrestiku kasutamiseks tuleb kõigepealt teha <div> element klassiga row, mis tähistab rida. Kõik ühel real paiknevad <div> elemendid tuleb paigutada samale reale (sama row klassi sisse): <div class= row > Koodinäide 1 Uue rea defineerimine klassiga "row Klass row töötab sarnaselt CSS parameetriga clear:both; see liigutab kõik järgmisele reale. Klassiga row elemendi sisse paigutatakse omakorda elemendid, mille klassis määratakse nende elementide laiused erinevatel ekraanidel. Nagu eelnevalt mainitud, on olemas kolm erinevat võrestikku Foundation'is. Foundation lubab väga mugavalt määrata elementide laiuseid -- elemendi klassi tuleb lisada ekraani suurus ja selle järgi sidekriipsuga elemendi laius tulpades sellel ekraanitüübil. <div class= small-12 medium-6 large-4 columns > Koodinäide 2 Elemendi laiuse defineerimine klasse kasutades small-12 tähendab, et väikesel ekraanil on element terve ekraani laiune, medium-6, aga seda, et keskmise suurusega ekraanidel on elemendi laiuseks pool ekraani laiusest ning large-4 määrab suurel ekraanil elemendi laiuseks kolmandiku ekraani laiusest ehk 4 tulpa. <div class= row > <div class= small-12 medium-6 large-4 columns >Tulp 1 <div class= small-12 medium-6 large-4 columns >Tulp 2 <div class= small-12 medium-6 large-4 columns >Tulp 3 Koodinäide 3 Kolme elemendi paigutamine kõrvuti ühele reale Koodinäide nr. 3 realiseerub erinevatel ekraanisuurustel järgnevalt: Tulp 1 15

16 Tulp 2 Tulp 3 Joonis 7 Koodinäite 3 realiseering väikestel ekraanidel Tulp 1 Tulp 2 Tulp 3 Joonis 8 Koodinäite 3 realiseering keskmistel ekraanidel Tulp 1 Tulp 2 Tulp 3 Joonis 9 Koodinäite 3 realiseering suurtel ekraanidel Et sektsioonid (<div> elemendid) oleksid ühesuguse kõrgusega, tuleb <div> elemendile, mille klassiks on row lisada parameeter data-equalizer ning selle elemendi sees asuvatele <div> elementidele parameetriks lisada data-equalizer-watch. <div class="row" data-equalizer> <div class="large-6 columns panel" data-equalizer-watch>... <div class="large-6 columns panel" data-equalizer-watch>... Koodinäide 4 Elementidele võrdse kõrguse määramine Plokkvõrestik Plokkvõrestikku (block-grid) kasutades saab jagada loendi sisu võrdselt võrestiku sees. Plokkvõrestiku kasutamine on väga lihtne. Seda saab kasutada näiteks piltide või paragraafide ühtlaseks jaotamiseks. Kui kasutada näiteks järjestamata loendit (unordered list), tuleb HTML-is lisada soovitud <ul> elemendile klass small-block-grid-3 (esimene parameeter on ekraani suurus; kui määrata keskmisele või suurele ekraanile, tuleb vastavalt kasutada medium ja large). Number 3 viitab sel juhul sellele, mitu elementi kuvatakse ühes reas. 16

17 <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4"> <li>pilt 1</li> <li>pilt 2</li> <li>pilt 3</li> <li>pilt 4</li> </ul> Koodinäide 5 Plokkvõrestiku(block grid) koodinäide Koodinäide 5 väljund brauseris oleks järgmine: Pilt 1 Pilt 2 Pilt 3 Pilt 4 Joonis 10 Koodinäite 5 realiseering väikestel ekraanidel Pilt 1 Pilt 2 Pilt 3 Pilt 4 Joonis 11 Koodinäite 5 realiseering keskmistel ekraanidel Pilt 1 Pilt 2 Pilt 3 Pilt 4 Joonis 12 Koodinäite 5 realiseering väikestel ekraanidel Interchange Responsive Content Interchange kasutab media-querie-sid, et dünaamiliselt laadida responsive sisu, mis on paremini sobiv vastavale ekraanile. Interchange võimaldab lisada ja vahetada HTML osasid(partial), et laadida erinevaid sektsioone mingit kindlat media-querie't silmas pidades. See on hea viis, kuidas laadida nutitelefonisõbralikud komponendid väikestel ekraanidel ja suuremad ning rohkem ressurssi nõudvad komponendid suurtel ekraanidel. Foundation kasutab data-interchange atribuuti, mis tuleb lisada soovitud div elemendile. <div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]"> Koodinäide 6 Interchange defineerimine 17

18 Iga argument kirjutatakse nurksulgude vahele, kuhu lisatakse objekti aadress, ning seejärel, peale koma,sulgude sees määratakse, millisel ekraanitüübil see kehtib. Kõik argumendid eraldatakse üksteisest omakorda komadega. <div data-interchange= [small_header.html, (small)], [large_header.html, (large)] > Koodinäide 7 Interchange defineerimine Koodinäite 7 juhul laaditakse väikesele ekraanile small_header.html-nimeline fail ning suurele ekraanile laetakse large_header.html fail Nähtavus Nähtavuse (visibility) klasside abil saab elemente peita ja kuvada sõltuvalt ekraani suurusest ja ekraani orientatsioonist. Peitmist ja kuvamist saab Foundationis kontrollida, kui lisada elemendi klassi järgmised parameetrid: <strong class="show-for-small-only">see tekst on nähtav ainult väikesel ekraanil.</strong> Koodinäide 8 Objekti nähtavaks määramine vaid väikestele ekraanidele show-for-small-only parameeter määrab, et see element on nähtav vaid väikestel ekraanidel. <strong class="hide-for-small-only">see tekst on peidetud ainult väikesel ekraanil.</strong> Koodinäide 9 Objekti nähtamatuks määramine vaid väikestele ekraanidele Analoogselt töötab ka elemendi peitmine. Show asemel on hide. Lisaks saab määrata, kas parameeter kehtib ainult (only) sellel ekraanitüübil või alates sellest ekraanist ja suurematel (up). Näiteks see tekst on nähtaval alates keskmise suurusega ekraanist ja sellest suurematel ekraanidel: <strong class="show-for-medium-up">see tekst on nähtaval keskmisest suurematel ekraanidel.</strong> Koodinäide 10 Teksti nähtavaks defineerimine vaid keskmistel ekraanidel Lisaks võimaldab Foundation tuvastada ekraani orientatsiooni ja vastavalt sellele kas peita või kuvada elemente. <strong class="show-for-landscape">see kiri on nähtav pikkupidi</strong> 18

19 <strong class="hide-for-portrait">see kiri on peidetud püstipidi</strong> Koodinäide 11 Ekraani orientatsiooni põhjal objektide peitmine või kuvamine 2.2 Navigatsioon Navigatsioon on front-end raamistiku üks olulisemaid aspekte. Foundation pakub mitmeid erinevaid menüüsid, mis peaksid ära katma kõik põhilised menüütüübid: horisontaalne, vertikaalne, peidetav menüü ja jaluse menüü Peidetav menüü Peidetav menüü (off-canvas) on positsioneeritud vaateväljast (viewport) väljas ja ilmuvad nähtavale alles aktiveerides. Aktiveerimine toimub enamasti vajutades nupule, mis viitab menüüle, ning seejärel ilmub menüü vaatevälja. Üldiselt kasutatakse peidetavat menüüd mobiilsetel seadmetel, et sisu jaoks rohkem ruumi oleks, kuid seda kasutatakse ka suurematel ekraanidel (peamiselt esteetilisust silmas pidades). <div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <a class="left-off-canvas-toggle" href="#" >Menüü</a> <aside class="left-off-canvas-menu"> <ul> <li><a href="#"><link 1</a></li>... </ul> </aside> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <a class="exit-off-canvas"></a> Koodinäide 12 Peidetud menüü koodinäide Peidetava menüü loogika on iseenesest väga lihtne - see on deklareeritud kõige välisemal elemendil, mis hoiab endas tervet lehte. <div class="off-canvas-wrap" data-offcanvas> Koodinäide 13 Kogu lehte ümbritsev objekt 19

20 Sellele jägneb objekt, kus sees on kogu lehe sisu. Selle objekti sisu on animeeritud, kasutades JavaScripti. <div class="inner-wrap"> Koodinäide 14 Menüüd ümbritsev objekt Järgneb tavaline tekstipõhine link, mille klassiks on määratud left-off-canvas-toggle. See käitub kui lüliti, mis aktiveerib(ja lülitab välja) peidetud menüü. off-canvas-menu on paneel, mis ilmub vasakult või paremalt, kui lüliti on aktiveeritud. Kuna tegu on küljel asuva peidetud menüüga, oleks soovitatav kasutada CSS3 sisalduvat tag'i <aside> (see on spetsiaalselt mõeldud vertikaalsete kõrvuti asuvate objektide paigutamiseks). <aside class="left-off-canvas-menu"> Koodinäide 15 Peidetud menüü asukoha määramine Kui soovida, et peidetud menüü oleks paremal poolel tuleb koodijupis left asendada right. exit-off-canvas peidab peidetava menüü. <a class="exit-off-canvas"></a> Koodinäide 16 Peidetud menüü peitmine Ülemine menüüriba Foundationi ülemine menüü (top bar) võimaldab lihtsasti kuvada keerukat menüüd väikesel, keskmisel või suurem ekraanil. Järgnev koodiriba kujutab endast horisontaalset menüüd, mille vasakus nurgas on pealkiri (või logo) ja tavaline nupp, paremal aga asub aktiivne link ning sellele järgnev mitmetasandiline (näites on kahetasandiline) menüü. Visuaalselt näeb see menüü välja selline: 20

21 Joonis 13 Ülemine menüü suurel ja keskmisel ekraanil Joonis 14 Ülemine menüü väikesel ekraanil Menüü HTML üleskirjutis on järgnev: <nav class="top-bar" data-topbar role="navigation"> <ul class="title-area"> <li class="name"> <h1><a href="#">minu leht</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>menüü</span></a></li> </ul> <section class="top-bar-section"> <ul class="right"> <li class="active"><a href="#">aktiivne nupp paremal</a></li> <li class="has-dropdown"> <a href="#">alammenüüga nupp</a> <ul class="dropdown"> <li><a href="#">esimene link alammenüüs</a></li> <li class="active"><a href="#">aktiivne link alammenüüs</a></li> </ul> </li> </ul> <ul class="left"> <li><a href="#">nupp menüü vasemas pooles</a></li> </ul> </section> </nav> Koodinäide 17 Ülemise menüü koodinäide Alustuseks on ülemise menüü ehitamiseks tarvis <nav> märgendit, mille klassiks on top-bar. Kogu menüü ehitatakse üles kasutades järjestamata loendit (unordered list), millel on märgitud Foundationi poolt pakutavad klassid. Näiteks menüü pealkirja jaoks 21

22 on olemas <ul> märgendi klass title-area. Enamasti pannakse title-area osasse lehe nimi, logo vms. Menüü nuppude jaoks on loodud uus sektsioon, mille klassiks on top-bar-section, ning see on <ul> elemente kasutades jagatud kaheks: vasak ja parem. Paremal pool asuvad kaks linki: aktiivne ja alammenüüga(mitmetasandiline menüü) link. Mõlemad luuakse <li> elemendile klasse määrates. Esimesel elemendil on klassiks active ning teisel has-dropdown. <li> elemendi (klassiga has-dropdown ) sisse tuleb teha uus <ul> objekt, mille klassiks on defineeritud dropdown. See määrab ära selle, et kõik selle objekti sees olevad <li> elemendid on mitmetasandilises menüüs alammenüü lingid. <li class="has-dropdown"> <a href="#">alammenüüga nupp</a> <ul class="dropdown"> <li><a href="#">esimene link alammenüüs</a></li> <li class="active"><a href="#">aktiivne link alammenüüs</a></li> </ul> </li> Koodinäide 18 Mitmetasandilise menüü koodinäide Ülemist menüüd on võimalik teha kogu aeg nähtavaks (nö. kleepuvaks), olenemata, millises lehe osas parasjagu asuda. Selleks tuleb ülemine menüü ümbritseda objektiga, mille klassiks on contain-to-grid sticky". <div class="contain-to-grid sticky"> <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">... </nav> Koodinäide 19 Menüü kleepuvaks tegemise koodinäide Leivapuru Leivapuru (breadcrumbs) kasutatakse tihti mõnel CMS-il (Content management system) põhineval veebilehel (näiteks Drupal, Wordpress, Joomla). Seda kasutatakse, kui mitmetasandiliste lehehierarhiate tõttu muutub navigeerimine veebilehel keeruliseks. Breadcrumbs näitab navigatsiooni rada. 22

23 Joonis 15 Breadcrumbs Breadcrumbs ehitatakse Foundationis kasutades järjestamata loendeid. <ul class="breadcrumbs"> <li><a href="#">link 1</a></li> <li><a href="#">link 1.2</a></li> <li class="unavailable"><a href="#">link 1.2.1</a></li> <li class="current"><a href="#">link </a></li> </ul> Koodinäide 20 Breadcrumbsi koodinäide Kõige pealt tuleb <ul> märgendile määrata klassiks breadcrumbs. Loendi elemendid kuvatakse ekraanile linkidena. Loendi elementidele on võimalik lisada klasse, tehes elemendi kättesaadamatuks (unavailable) või määrata, milline leht hetkel aktiivne on (current). Breadcrumbs täidab 100% oma vanema konteineri laiusest Küljemenüü Küljemenüü (side nav) nagu ka kõik teised navigatsioonikomponendid Foundationis, kasutab järjestamata loendeid ning neile määratud klasse. Määrates <ul> elemendile klassiks side-nav, rakendatakse kõigile loendi elementidele kujundust side-nav klassist. Lisades active klass <li> elemendile, on võimalik näidata, milline link hetkel aktiivne on. Kui soovida eraldada menüü elemente üksteisest, on mugav kasutada <li> elementi, mille klassiks on divider. See lisab kahe elemendi vahele joone. <ul class="side-nav"> <li class="active"> <a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li class="divider"></li> <li><a href="#">link 3</a></li> <li><a href="#">link 3</a></li> </ul> Koodinäide 21 Küljemenüü 23

24 Joonis 16 Koodinäite 21 visualiseering brauseris 2.3 Meedia Foundation sisaldab mitmeid komponente fotode, jooniste, teksti ja videode kuvamiseks veebilehtedel, nii, et erinevatel ekraanidel oleks tulemus samasugune Orbit liugur Orbit on Foundationi sisseehitatud liugur (või karussell). Seda on lihtne üles seada, kõik mida tarvis läheb on natuke HTML koodi ja pildifaile. Orbit liuguril ei ole limiiti: võib lisada nii mitu pilti, kui tarvis. <ul class= example-orbit data-orbit > <li> <img/> <div class="orbit-caption">pealkiri1 </li> <li> <img/> <div class="orbit-caption">pealkiri 2 </li> <li> <img/> <div class="orbit-caption">pealkiri 3 </li> </ul> Koodinäide 22 Orbid karusselli näide Märgendi <ul> klassiks tuleb määrata example-orbit. Loendi elementide sisse tuleb panna pilt ja pildi pealkiri. Pealkiri peab olema kirjutatud eraldi <div> elementi, mille 24

25 klassiks on orbit-caption. Niiviisi rakendatakse tekstile õiget kujundust vastavalt Foundationi sätetele. Lisaks on võimalik liugurit kasutada ka teksti kuvamiseks: <ul class="example-orbit-content" data-orbit> <li data-orbit-slide="headline-1"> <div> <h2>pealkiri 1</h2> <h3>alampealkiri</h3> </li> <li data-orbit-slide="headline-2"> <div> <h2>pealkiri 2</h2> <h3>alampealkiri</h3> </li> Koodinäide 23 Orbit karusselli kasutamine teksti kuvamiseks Sel juhul tuleb loendi <ul> klassiks määrata example-orbit-content. Lisaks tuleb loendi elementide <li> parameetriteks lisada unikaalne id (igal <li> elemendil peab olema erinev identifitseerimise võti). Järgnevalt tuleb lisada tekst <li> elemendi sisse. Soovitatav on lisatav sisu panna omakorda <div> elemendi sisse Elastne video Elastne video (flex video) lubab brauseritel automaatselt muuta video objektide suurust, vastavalt ekraani mõõtmetele. Kui tuua veebilehele video YouTube, Vimeo või mõnelt muult lehelt, mis kasutab iframe või embed objekte, tuleb see panna <div class="flexvideo"> elemendi sisse, et video suurus oleks brauseri poolt automaatselt muudetav ja proportsioonis ekraani suurusega. 2.4 Vormid Foundationi vormid on disainitud võimalikult lihtsaks. Vormid on Foundationis stiliseeritud tüübipõhiselt, mitte klassipõhiselt. Vormide ehitamine käib sama põhimõtte järgi nagu võrestiku ehitamine. Vormi märgendi vahele tuleb ehitada uus võrestik (kasutades klasse row ja columns). Iga vormi element pannakse eraldi <div> elemendi 25

26 sisse, millele antakse klassiks laiust tähistav klass(samad tähistused, mis võrestike puhul). <form> <div class= row > <div class= large-12 columns > <label>sisestus <input type= text placeholder= sisestusväli large-12 /> </lable> <div class= row > <div class= large-6 columns > <label>sisestus <input type= text placeholder= sisestusväli large-12 /> </lable> <div class= large-6 columns > <label>sisestus <input type= text placeholder= sisestusväli large-12 /> </lable> </form> Koodinäide 24 Vormi koodinäide Foundation pakub omalt poolt ka kujundust vormide veateadete esitamiseks. Selleks tuleb <label> märgendile klassiks määrata error. <form> <div class="row"> <div class="large-12 columns"> <label class="error">error <input type="text" class="error" /> </label> <small class="error">vigane sisend</small> Koodinäide 25 Veateate lisamine vormile 2.5 Nupud Nuppude loomiseks on tarvis vähe märgistust. Piisab vaid sellest, et lisada <a> märgendile klassiks button. <a href= # class= button > Koodinäide 26 Kujunduse andmine ankru märgendile Nupud on Foundationi poolt vaikimisi disainitud siniseks kastiks, valge tekstiga keskel: 26

27 Joonis 17 Nupu vaikimisi kujundus Foundationis Veel on võimalik lisada lisaklassid, et muuta nuppude suurust ja kuju. Suuruse defineerimiseks on kasutusel järgmised klassid: tiny (väga väike), small (väike) ja large (suur). Ilma defineerimata on nupp keskmist suurust. Kasutades klassi expand, täidab nupp 100% ennast ümbritseva konteineri laiusest. Samuti saab muuta nupu kuju. Kasutades klassi round, on tulemuseks ümarate nurkadega nupp ja kasutades klassi radius, on sellel nupul natukene pehmemad nurgad, kui tavalisel nupul. Joonis 18 Nuppude vaikimisi välimus Foundationis Lisaks on võimalik muuta nuppude värve, mis peaksid andma enda poolt edasi informatsiooni. Näiteks hoiatus või teavitus edukast käsu täitmisest. Selleks tuleb kasutada klasse: successful (edukas), secondary (teisejärguline nupp), alert (hoiatus), info ja disabled (mitte-aktiivne nupp). 27

28 Joonis 19 Värvilised teavitusnupud Foundation 5 võimaldab koondada nupud ka gruppidesse. See nõuab vähest vaeva - tuleb kasutada järjestama loendit (unordered list <ul>), mille klassiks on määratud button-group. Iga loendi elemendi klassiks on button. Võimalik on lihtsasti stiliseerida nuppude kuju, selleks tuleb <ul> märgendi klassi lisada uus klass: vastavalt kas radius (mitteteravad nurgad) või round (ümarad nurgad). <ul class="button-group radius"> <li><a href="#" class="button">button 1</a></li> <li><a href="#" class="button">button 2</a></li> <li><a href="#" class="button">button 3</a></li> <li><a href="#" class="button">button 4</a></li> </ul> <ul class="button-group round"> <li><a href="#" class="button">button 1</a></li> <li><a href="#" class="button">button 2</a></li> <li><a href="#" class="button">button 3</a></li> <li><a href="#" class="button">button 4</a></li> </ul> Koodinäide 27 Nuppude gruppidesse jaotamise koodinäide Joonis 20 Koodinäite 27 visualiseering Kui on soov, et kõik nupud jaotaksid omavahel võrdselt terve ennast ümbritseva konteineri laiuse, tuleb lisada <ul> klassile veel üks klass: even (millele järgneb sidekriipsuga nuppude arvu tähistav number). Näiteks, kui on kolm nuppu, tuleb klassiks even-3. Maksimaalselt on võimalik even-8 (kaheksa nuppu). 28

29 2.6 Tüpograafia Foundation tüpograafia kasutab rem mõõtühikut pikslite ja em asemel. Responsive veebi ajastul on rem (ja em) mõõtühik väga mugav viis, kuidas suhestuda objektide suurus teksti suurusega. Foundation kasutab Helvetica Neue fonti. Põhjateksti (base-text) suuruseks on määratud 16px ja reavaheks 1.6 ( 1.6 on paragraafidel, 1.4 pealkirjadel). Pealkirjad on stiliseeritud märgenditel <h1> kuni <h6>. Pealkirjade suurused on pikslites vahemikus 16 pikslit kuni 44 pikslit. Vaikimisi on pealkirja värviks must. Alampealkirjade jaoks tuleb pealkirja märgendi (nt <h1>) sisse panna <small> märgend, mis vaikimisi vähendab teksti 60% ja muudab värvi halliks (fonti muudetakse 35% heledamaks). <h1>h1. <small>pealkiri Foundationis</small></h1> <h2>h2. <small>pealkiri Foundationis</small></h2> <h3>h3. <small>pealkiri Foundationis</small></h3> <h4>h4. <small>pealkiri Foundationis.</small></h4> <h5>h5. <small>pealkiri Foundationis</small></h5> <h6>h6. <small>pealkiri Foundationis</small></h6> Koodinäide 28 Tüpograafia Joonis 21 Koodinäite 28 visualiseering 29

30 2.7 Dialoogiaknad ja teavitused Foundation sisaldab mitmeid erinevaid võimalusi hüpikakende ja teavituste kuvamiseks. Hüpikakende ja teavituste kasutamine on tehtud võimalikult lihtsaks ja kiireks. Kõik komponendid siin peatükis peale paneelide sisaldavad Javascripti, kuid lihtsamate muudatuste tegemine ei nõua otseselt JavaScripti tundmist Dialoogiaken Foundationi sisseehitatud dialoogiaken (reveal modal) töötab jquery baasil. HTML koodi märgistus on tehtud suhteliselt lihtsaks. Joonis 22 Dialoogiaken Kõigepealt tuleb mingile lingile juurde lisada parameeter data-reveal-id= mymodal. <a href= # data-reveal-id= mymodal >Vajuta siia dialoogiakna jaoks</a> Koodinäide 29 Dialoogiakna ühendamine lingi külge Järgmiseks tuleb luua uus <div> objekt, mille id-ks määrata data-reveal-id (siinjuhul mymodal), klassiks peab määrama reveal-modal. Lisaks peab määrama data-reveallabelledby= modaltitle (määratakse dialoogiakna nimeks pealkiri (kui dialoogiaknal 30

31 puudub pealkiri, siis ei pea lisama)), aria-hidden= true (aken on vaikimisi peidetud) ja role= dialoge. <div id= mymodal class= reveal-modal data-reveal aria-labelledby= modaltitle aria-hidden= true role= dialoge > Koodinäide 30 Dialoogiakna objekti defineerimine Järgmiseks tuleks lisada sisu just loodud <div> elemendi sisse. <h2 id= modaltitle >Pealkiri</h2> Koodinäide 31 Dialoogiaknale pealkirja lisamine Kindlasti lisada <div> elemendi sisse ka sulgemiseks nupp: <a class= close-reveal-modal aria-label= Close > Close</a> Koodinäide 32 Dialoogiakna sulgemise nupu defineermine Paneelid Paneel (panel) on lihtne aga kasulik komponent, mille abil eraldada osa sisu ülejäänud lehest. Vaikimisi pannakse see halli ploki sisse. Seda kasutatakse, kui soovitakse leht jaotada sektsioonideks või rõhutada mingit osa lehekülje sisust. Paneelide laius on kontrollitav võrestiku tulpade abil (üldjuhul võtab paneel laiuseks selle <div> objekti vanema objekti määratud laiuse). Paneeli ehitamiseks tuleb teha <div> objekt, mille klassiks on panel ning panna soovitud sisu selle <div> objekti sisse. Lisaklassina juurde määrates radius või round saab muuta paneeli nurkade kuju. <div class= panel radius > Koodinäide 33 Paneeli defineermine 2.8 Sisu Foundation sisaldab palju komponente lehel asuva sisu paigutamiseks ja kuvamiseks. Peamised komponendid on allapoole avanevad paneelid, tabelid ja akordion. 31

32 2.8.1 Allapoole avanevad paneelid Dropdown on olemuselt allapoole avanev paneel, kuhu saab panna sisu (teksti, lingid, pildid jne). Kõigepealt tuleb mingile nupule määrata parameeter data-dropdown= drop1 (või mingi muu nimi), aria-controls= drop1 ja aria-expanded= false. <a href= # data-dropdown= drop1 aria-controls= drop1 aria-expanded= false >Vajuta siia</a> Koodinäide 34 Allapoole avaneva paneeli aktiveerimise nupu defineerimine Kui kuvada mingit teksti ja pilti selles paneelis, siis tuleb teha <div> element, mille idks oleks seda paneeli avava nupu parameetri data-dropdown väärtus (siinjuhul drop1 ). Samuti tuleb parameetriks lisada data-dropdown-content (mis viitab paneeli tüübile) ja klassiks f-dropdown content. <div id= drop1 data-dropdown-content class= f-dropdown content aria-hidden= true tabindex= -1 > Koodinäide 35 Allapoole avaneva paneeli defineermine <a href= # data-dropdown= drop1 aria-controls= drop1 aria-expanded= false >Vajuta siia</a> <div id= drop1 data-dropdown-content class= f-dropdown content aria-hidden= true tabindex= -1 > <p>tekst kirjutatakse siia</p> Koodinäide 36 Allapoole avaneva paneeli terve koodinäide Lisaks on võimalik muuta paneeli avanemise suunda, lisades paneeli aktiveerivale <a> elemendile parameetriks data-options= align:left/right/top/down (valida üks vastavalt soovile) Hinnatabelid Veebipoodide arendajate heameeleks on Foundationisse sisse ehitanud hinnatabelid, mille üles seadmine on sama lihtne kui tavalise HTML tabeli tegemine. Hinnatabeli tegemiseks määratakse järjestamata loendi klassiks pricing-table. Iga loendi elemendi klassiks tuleb määrata vastavalt vajadusele järgnevad klassid: 32

33 title - loob stiili pealkirja jaoks price- loob stiile hinna jaoks description - stiil (toote) selgituse kohta bullet-item - omaduste välja toomiseks cta-button - nupu stiliseering <ul class="pricing-table"> <li class="title">standard</li> <li class="price">99 </li> <li class="description">toote kirjeldus</li> <li class="bullet-item">1 andmebaas</li> <li class="bullet-item">5gb mahtu</li> <li class="bullet-item">20 kasutajat</li> <li class="cta-button"><a class="button" href="#">osta nüüd!</a></li> </ul> Koodinäide 37 Hinnatabeli koodinäide Joonis 23 Hinnatabel 33

34 2.8.3 Tabelid Foundationi tabelid on stiliseeritud vaikimisi järgnevalt: must tekst ja tabeli rea taustavärviks hall või valge. Tabeli ehitamine ei erine kuidagi tavaliselt HTML-ist. Eraldi on stiliseeritud <thead> element, mis viitab tabeli päisele. Tabeli tulpade laiused tuleb määrata pikslites <thead> elemendi sees olevate <th> elementidel (width). <table> <thead> <tr> <th width="200">tabeli pealkiri</th> <th>tabeli päis</th> <th width="150">tabeli päis</th> <th width="150">tabeli päis</th> </tr> </thead> <tbody> <tr> <td>tabeli sius lahter 1</td> <td> Tabeli sius lahter 2</td> <td> Tabeli sius lahter 3 </td> <td> Tabeli sius lahter 4</td> </tr> <tr> <td>tabeli sius lahter 1</td> <td> Tabeli sius lahter 2</td> <td> Tabeli sius lahter 3 </td> <td> Tabeli sius lahter 4</td> </tr> <tr> <td>tabeli sius lahter 1</td> <td> Tabeli sius lahter 2</td> <td> Tabeli sius lahter 3 </td> <td> Tabeli sius lahter 4</td> </tr> </tbody> </table> Koodinäide 38 Tabeli HTML kood Joonis 24 Tabel 34

35 2.8.4 Akordion Akordion on horisontaalselt paiknevad sakid (tabs), mis avanevad ja kukuvad kokku (collapse). Joonis 25 Akordion Nende ehitamiseks tuleb järjestamata loend klassiks määrata accordion ning lisada parameeter data-accordion. Loendi sees olevale <li> elemendi klassiks tuleb määrata accordion-navigation. Edasi tuleb teha <a> element, mis käitub saki nupuna, mille aadressiks on järgnevalt loodava <div> elemendi id. Peale <a> elemendi loomist tuleb teha <div> element, millel on määratud id ja klassiks on määratud content active. <a href= paneel1a >Akordion</a> <div id= paneel1a class= content active >...(sisu) Koodinäide 39 Akordioni näide <ul class="accordion" data-accordion> <li class="accordion-navigation"> <a href="#paneel1a">sakk 1</a> <div id="paneel1a" class="content active"> Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore </li> <li class="accordion-navigation"> <a href="#paneel2a">sakk 2</a> <div id="paneel2a" class="content"> Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius </li> <li class="accordion-navigation"> <a href="#paneel3a">sakk 3</a> <div id="paneel3a" class="content"> Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 35

36 </ul> </li> Koodinäide 40 Kolmesakilise akordioni koodinäide 36

37 3 Ülesanded Siinses peatükis asuvad käesoleva õppematerjali praktilised ülesanded ning õpetused. Kõigepealt näitab autor, kuidas üles seada Foundation raamistikku, millele järgnevad kolm autori poolt välja mõeldud praktilist ülesannet ning raamistiku võimalusi tutvustava veebilehe kirjeldus. 3.1 Foundationi üles seadmine ZURB on Foundation 5 alla laadimiseks teinud 4 erinevat paketti, mis asuvad Foundationi kodulehel. Foundationi pakutavad paketid on: täispakett (complete), põhilised komponendid (essentials), valitud komponendid (custom) ja SASS (scss). Siinses õppematerjalis valib autor näitena esitamiseks täisversiooni üles seadmise. Foundationi täisversiooni installeerimiseks tuleb Foundationi kodulehelt alla laadida Complete pakett.zip failina. Edasi tuleb lahti pakkida kaust endale meelepärasesse kohta. Lahti pakitud kaust on uue projekti aluseks ning arendama peaks hakkama nende failide peale. Järgnevalt tuleks avada index.html faili sobiva tekstiredaktoriga (autor kasutab Sublime Text 2 nimelist tekstiredaktorit). Algselt on index.html fail kasutusel Foundationi tervituslehena. Et hakata oma projekti kallal töötama, tuleks enamus koodiread <body> märgendite vahelt ära kustutada. Alles tuleb jätta Javascript failide sisse toomise tarbeks <script> märgendid: <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> Koodinäide 41 index.html JavaScripti importimise märgendid Peale neid muudatusi peaks index.html kood välja nägema järgnev: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>foundation Welcome</title> 37

38 <link rel="stylesheet" href="css/foundation.css" /> <script src="js/vendor/modernizr.js"></script> </head> <body> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html> Koodinäide 42 index.html kood Kuigi index.html fail on algselt juba ühendatud foundation.css ja modernizr.js failidega, tuleb iseseisvalt juurde lisada nende järele (aga <head> märgendite vahele) <link rel="stylesheet" href="css/app.css"> Koodinäide 43 app.css faili ühendamine index.html faili Kausta nimega css tuleks luua uus fail nimega app.css. Täpsustuseks: loodava faili nimi võid olla ka midagi muud kui app, aga siinkohal, Foundationi hea tava järgides,saab loodav fail nimeks app.css. Äsja loodud faili tuleks hakata lisama enda poolt tehtavaid stilistilisi muudatusi (brauser loeb kõigepealt foundation.css poolt määratud sätted ja seejärel app.css failist kirjutatakse tehtud muudatused üle brauseris). Uut faili on eelkõige tarvis selleks, et edaspidi oleks ilma probleemideta võimalik uuendada Foundationi versiooni oma projektis (uuendatakse foundation.css faili). 3.2 Ülesanded Foundation 5 õppematerjali teoreetilise osa läbinu jaoks on autor välja mõelnud kolm praktilist ülesannet, mida enesekontrolliks lahendada. Autor kasutas ülesannete koostamisel hinnatabeli, dialoogiakna, akordioni, vormi ja nuppude komponente Hinnatabeli ülesanne (pricing table) Ülesanne: fotograaf soovib oma kodulehele hinnatabelit, mis sisaldab endas kolme ürituse pildistamise paketti: Digifoto, Digifoto+video, Foto+trükk. 38

39 Lahendus: Hinnatabel vajab <ul> elementi, mille klassiks on pricing-table. Elementide järjestus hinnatabelis on järjestatud vastavalt autori nägemusele (järjekorda saab muuta, kui muuta <li> loendi elementide järjekorda). Joonis 26 Hinnatabeli ülesande visualiseering Hinnatabeli ülesanne asub: Ülesande HTML kood <body> elemendi sees: <div class="row"> <div class="small-12 medium-6 large-4 columns"> <ul class="pricing-table"> <li class="title">digifoto</li> <li class="price">99 <hr> </li> <li class="bullet-item">1<span> tund</span></li> <li class="bullet-item">100 <span> fotot</span></li> <li class="bullet-item">5 <span> grupifotot</span></li> <li class="cta-button"><button class="button hind" href="#">vali pakett</button></li> </ul> <div class="small-12 medium-6 large-4 columns"> <ul class="pricing-table"> <li class="title">digifoto+video</li> <li class="price">199 <hr> </li> <li class="bullet-item">1<span> tund</span></li> <li class="bullet-item">100 <span> fotot</span></li> <li class="bullet-item">full-hd <span> video</span></li> <li class="cta-button"><button class="button" href="#">vali pakett</button></li> </ul> <div class="small-12 medium-6 large-4 columns"> <ul class="pricing-table"> 39

40 <li class="title">foto+trükk</li> <li class="price">149 <hr> </li> <li class="bullet-item">1<span> tund</span></li> <li class="bullet-item">100 <span> fotot</span></li> <li class="bullet-item">50 <span> foto trükk</span></li> <li class="cta-button"><button class="button" href="#">vali pakett</button></li> </ul> Koodinäide 44 Ülesande 1 lahendus Kujunduse muutmiseks tuleb foundation.css failis otsida üles pricing-table klassid ja kopeerida muudetavad väärtused app.css faili, et seal neid muuta ja üle kirjutada. Näiteks tabeli pealkirjalahtri tausta muutmine app.css failis:.pricing-table.title{ background-color: #333; } Koodinäide 45 css kood pealkirja tausta muutmiseks Analoogselt käib ka kõikide teiste klasside muutmine app.css faili kaudu Vormi ülesanne Ülesanne: Kasutades erinevaid vormi ja nupu komponente, luua registreerimisvorm, kus kasutaja saab saata fotograafile hinnapakkumise. Vormi ülesanne asub: HTML kood <body> elemendi sees: <form> <div class="small-12 medium-9 large-4" style="margin:20px auto;"> <div class="row"> <div class="small-12 medium-6 large-6 columns"> <label> Eesnimi <input type="text" placeholder="teie eesnimi"/> </label> <div class="small-12 medium-6 large-6 columns"> <label> Perkonnanimi <input type="text" placeholder="teie perekonnanimi"/> </label> <div class="row"> 40

41 <div class="small-12 medium-6 large-6 columns"> <label> Number <input type="text" placeholder="teie kontaktnumber"/> </label> <div class="small-12 medium-6 large-6 columns"> <label> <input type="text" placeholder="teie "/> </label> <div class="row"> <div class="small-12 medium-6 large-4 columns"> <label> Skype <input type="text" placeholder="skype"/> </label> <div class="small-12 medium-6 large-4 columns"> <label>teenus <select> <option value="fotograaf">fotograaf</option> <option value="videograaf">videograaf</option> <option value="foto_video">foto+video</option> </select> </label> <div class="small-12 medium-6 large-4 columns"> <label>kas soovite fototrükki?</label> <input type="radio" name="jah" value="jah"><label>jah</label> <input type="radio" name="jah" value="ei"><label>ei</label> <div class="row"> <div class="small-12 medium-12 large-12 columns"> <textarea placeholder="siia kirjutage oma sõnum meile"></textarea> </label> <div class="row"> <a href="#" class="button small">saada</a> </form> Koodinäide 46 Ülesande 2 lahendus 41

42 Joonis 27 Vormiülesande visualiseering Dialoogiakna ülesanne (reveal modal) Ülesanne: Kasutada erinevaid teavitamise komponente (näiteks tooltip ja reveal modal). Ekraanil kuvatakse erinevate akordioni-elementide vahel olevad projektide lühikokkuvõtted, mille lõpus on link Loe edasi, mis aktiveerib dialoogiakna ja kuvab selle projekti info täismahus. 42

43 Joonis 28 Dialoogiakna ülesande visualiseering Dialoogiakna ülesande näidisvariant asub aadressil: <div class="row"> <div class="small-12 medium-9 large-9 columns"> <ul class="accordion" data-accordion> <li class="accordion-navigation"> <a href="#panel1a">akordion 1</a> <div id="panel1a" class="content active"> <p><span data-tooltip aria-haspopup="true" class="has-tip" title="väikene teavitus!">lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent eu eleifend dui...<a data-revealid="mymodal">loe edasi...</a><p> <div id="mymodal" class="reveal-modal" data-reveal aria-labelledby="modaltitle" aria-hidden="true" role="dialog"> <h2 id="modaltitle">dialoogiakna pealkiri</h2> <p>tekst paragraaf 1<p> <p>tekst paragraaf 2.</p> <a class="close-reveal-modal" aria-label="close"> </a> </li> <li class="accordion-navigation"> <a href="#panel2a">akordion 2</a> <div id="panel2a" class="content"> <p><span data-tooltip aria-haspopup="true" class="has-tip" title="väikene teavitus!">lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent eu eleifend dui. Aliquam facilisis massa id erat pharetra hendrerit...<a data-reveal-id="mymodal2">loe edasi...</a><p> <div id="mymodal2" class="reveal-modal" data-reveal aria-labelledby="modaltitle" aria-hidden="true" role="dialog"> <h2 id="modaltitle">dialoogiakna pealkiri2</h2> <p>tekst paragraaf 1<p> <p>paragraaf2</p> <a class="close-reveal-modal" aria-label="close"> </a> </li> <li class="accordion-navigation"> <a href="#panel3a">akordion 3</a> 43

44 <div id="panel3a" class="content"> <p><span data-tooltip aria-haspopup="true" class="has-tip" title="väikene teavitus!">lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent eu eleifend dui. Aliquam facilisis massa id erat pharetra hendrerit...<a data-reveal-id="mymodal3">loe edasi...</a><p> <div id="mymodal3" class="reveal-modal" data-reveal aria-labelledby="modaltitle" aria-hidden="true" role="dialog"> <h2 id="modaltitle">dialoogiakna pealkiri3</h2> <p>tekst paragraaf 1<p> <p>paragraaf2</p> <a class="close-reveal-modal" aria-label="close"> </a> </li> </ul> Koodinäide 47 Ülesande 3 lahendus 3.3 Näidislehestik Näidislehestiku jagaks autor kolme suuremasse rühma: päis, sisu ja jalus. Päise osas on kasutatud Foundationi sisse ehitatud ülamenüüd (top-bar), lehekülg on joondatud keskele kasutades klasse small-centered medium-centered ja large-centered. Lisaks on kasutatud plokkvõrestikku (blockgrid) ja orbit karusell komponente. Plokkvõrestiku abil on tehtud lehekülge täies ulatuses läbiv piltide galerii. Galeriis kasutusel Plokkvõrestikul on eemaldatud esteetilistel põhjustel kõik veerised ja antud ette fikseeritud kõrgus fotode jaoks. Lehe jaluses on linkide tarbeks kasutusel inline-lists komponent. Kõik lehel kasutatud pildid pärinevad Foundationi koduleküljelt. Koos ülesannetega on näite leheküljel kasutatud järgmisi komponente: top-bar orbit karusell block-grid hinna tabelid (price-tables) nupud vormi komponendid akordion dialoogiaken (reveal modal) 44

45 inline-list Joonis 29 Vaade mobiilis Joonis 30 Vaade suurel ekraanil 45

Õppematerjalide esitamine Moodle is (alustajatele) seminar sarjas Lõunatund e-õppega 12. septembril 2017 õppedisainerid Ly Sõõrd (LT valdkond) ja Dian

Õppematerjalide esitamine Moodle is (alustajatele) seminar sarjas Lõunatund e-õppega 12. septembril 2017 õppedisainerid Ly Sõõrd (LT valdkond) ja Dian Õppematerjalide esitamine Moodle is (alustajatele) seminar sarjas Lõunatund e-õppega 12. septembril 2017 õppedisainerid Ly Sõõrd (LT valdkond) ja Diana Lõvi (SV valdkond) Järgmised e-lõunad: 10. oktoober

Rohkem

ArcGIS Online Konto loomine Veebikaardi loomine Rakenduste tegemine - esitlus

ArcGIS Online Konto loomine Veebikaardi loomine Rakenduste tegemine - esitlus PILVI TAUER Tallinna Tehnikagümnaasium ArcGIS Online 1.Konto loomine 2.Veebikaardi loomine 3.Rakenduste tegemine - esitlus Avaliku konto loomine Ava ArcGIS Online keskkond http://www.arcgis.com/ ning logi

Rohkem

Microsoft Word - TallinnLV_lihtsustatud_manual_asutuse_juhataja_ doc

Microsoft Word - TallinnLV_lihtsustatud_manual_asutuse_juhataja_ doc Tallinna Linnavalitsuse sõnumisaatja kasutusjuhend asutuse juhatajale Sisukord 1. Süsteemi sisenemine...2 2. Parooli lisamine ja vahetamine...2 3. Ametnike lisamine ametiasutuse juurde...2 4. Saatjanimede

Rohkem

Microsoft Word - requirements.doc

Microsoft Word - requirements.doc Dokumendi ajalugu: Versioon Kuupäev Tegevus Autor 1.0 04.03.2008 Dokumendi loomine Madis Abel 1.1 09.03.2008 Kasutuslugude loomine Madis Abel 1.2 12.03.2008 Kasutuslugude täiendused Andres Kalle 1.3 13.03.2008

Rohkem

Microsoft Word - Toetuste veebikaardi juhend

Microsoft Word - Toetuste veebikaardi juhend Toetuste veebikaardi juhend Toetuste veebikaardi ülesehitus Joonis 1 Toetuste veebikaardi vaade Toetuste veebikaardi vaade jaguneb tinglikult kaheks: 1) Statistika valikute osa 2) Kaardiaken Statistika

Rohkem

CSS juhend

CSS juhend Lehekülg 1/5 31.12.2012 21:11 CSS (Cascading Style Sheets) CSS on keel kujunduse loomiseks veebidokumentidele. Tänases praktikumis rakendame CSS-i veebidokumendile, kasutades programmi Dreamweaver. Töö

Rohkem

Elisa Ring Elisa Ringi mobiilirakendus Versioon

Elisa Ring Elisa Ringi mobiilirakendus Versioon Elisa Ring Elisa Ringi mobiilirakendus Versioon 1.0.85 15.01.2019 1 Elisa Ring... 1 1. Ülevaade... 3 1.1. Kirjeldus... 3 1.2. Tehnilised tingimused... 3 1.3. Kasutuselevõtt ja sisselogimine... 3 2. Rakenduse

Rohkem

FRESENIUS ÕPPEKESKUS KIIRJUHEND

FRESENIUS ÕPPEKESKUS KIIRJUHEND FRESENIUS ÕPPEKESKUS KIIRJUHEND SISUKORD 1. Kuidas saan Freseniuse õppekeskuksesse? 03 2. Kuidas sisse logida? 04 3. Mida teha, kui ma ei mäleta oma parooli? 05 4. Mida leian kodulehelt pärast sisselogimist?

Rohkem

Control no:

Control no: Smart Access Driftsprocedure A. Eeltingimused... 2 1. Nutitelefoni ühilduvus... 2 2. Kaabli valik... 2 a. Apple devices (Apple'i seadmed) (iphone 4/4S)... 2 b. Apple devices (Apple'i seadmed) (iphone 5/5c/5s)...

Rohkem

Microsoft Word - E-portfoolio-googlesites.docx

Microsoft Word - E-portfoolio-googlesites.docx Õpimapi ehk e-portfoolio loomine google sites keskkonnas Õpimapi loomise protsess I. Igapäevane õppetöö, mille õppeülesannete täitmise käigus loob õppija erinevaid materjale: klassitööd, kodutööd, esseed,

Rohkem

GRUPI-SMS Veebirakenduse kasutamise juhend Rakendus Elisa grupi-smsi rakendus Väljaandja Elisa Eesti AS Juhendi koostamise kuupäev Versioon

GRUPI-SMS Veebirakenduse kasutamise juhend Rakendus Elisa grupi-smsi rakendus Väljaandja Elisa Eesti AS Juhendi koostamise kuupäev Versioon GRUPI-SMS Veebirakenduse kasutamise juhend Rakendus Elisa grupi-smsi rakendus Väljaandja Elisa Eesti AS Juhendi koostamise kuupäev 05.02.2018 Versiooni kuupäev 30.01.2018 1 SISUKORD 1. ÜLEVAADE... 3 1.1

Rohkem

Programmi AnimatorDV Simple+ lühike kasutajajuhend

Programmi AnimatorDV Simple+ lühike kasutajajuhend Programmi AnimatorDV Simple+ esmane kasutusjuhend Programm AnimatorDV Simple+ on mõeldud animatsioonide loomiseks. Tegemist on tasuta tarkvaraga, mis töötab videoseadmetega (videokaamera, veebikaamera).

Rohkem

EBSCO täistekstiandmebaaside kasutamine Otsingu sooritamiseks: 1. Logi sisse 2. Vali EBSCOhost Web 3. Seejärel vali andmebaas, milles soovid otsingut

EBSCO täistekstiandmebaaside kasutamine Otsingu sooritamiseks: 1. Logi sisse 2. Vali EBSCOhost Web 3. Seejärel vali andmebaas, milles soovid otsingut EBSCO täistekstiandmebaaside kasutamine Otsingu sooritamiseks: 1. Logi sisse 2. Vali EBSCOhost Web 3. Seejärel vali andmebaas, milles soovid otsingut sooritada. Andmebaasid on temaatilised. Koolitööde

Rohkem

Müük (Microsoft Dynamics AX (Axapta) tarkvara) Paigaldusjuhend bifree.ee qlik.com

Müük (Microsoft Dynamics AX (Axapta) tarkvara) Paigaldusjuhend bifree.ee qlik.com Müük (Microsoft Dynamics AX (Axapta) tarkvara) Paigaldusjuhend bifree.ee qlik.com Microsoft Dynamics AX (Axapta) tarkvara 2 Seadistamise etapid 1. Laadige alla ja installeerige Qlik Sense Desktop. 2. Laadige

Rohkem

magistriöö.doc

magistriöö.doc Tallinna Ülikool Matemaatika-loodusteaduskond Informaatika osakond Diana Pugatšova Koolide kodulehekülgede hindamisvõimalusi Magistritöö Juhendaja: Mart Laanpere Autor:......... 2005 Juhendaja:.........

Rohkem

Microsoft Word - installation-guide.doc

Microsoft Word - installation-guide.doc Dokumendi ajalugu: Versioon Kuupäev Tegevus Autor 1.0 12.04.2008 Dokumendi loomine Maris Aavik 1.1 13.04.2008 Täiendamine Maris Aavik 1.2 13.04.2008 Täiendamine Andres Kalle 1.3 12.05.2008 Täiendused Kerli

Rohkem

E-arvete juhend

E-arvete juhend E- arvete seadistamine ja saatmine Omniva kaudu Standard Books 7.2 põhjal Mai 2015 Sisukord Sissejuhatus... 3 Seadistamine... 3 Registreerimine... 4 E- arve konto... 5 Vastuvõtu eelistus... 5 Valik E-

Rohkem

Tiia Salm 2011 Online kirjastus CALAMÉO Calameo kujutab endast on-line kirjastust, mis võimaldab oma dokumente avaldada e-raamatuna tasuta. Failid (Pd

Tiia Salm 2011 Online kirjastus CALAMÉO Calameo kujutab endast on-line kirjastust, mis võimaldab oma dokumente avaldada e-raamatuna tasuta. Failid (Pd Online kirjastus CALAMÉO Calameo kujutab endast on-line kirjastust, mis võimaldab oma dokumente avaldada e-raamatuna tasuta. Failid (Pdf, Word, Excel, PowerPoint, Open Office) tuleb esmalt keskkonda üles

Rohkem

MS Word Sisukord Uue dokumendi loomine... 2 Dokumendi salvestamine... 3 Faili nimi... 4 Teksti sisestamine... 6 Klaviatuuril mitteleiduvat sümbolite l

MS Word Sisukord Uue dokumendi loomine... 2 Dokumendi salvestamine... 3 Faili nimi... 4 Teksti sisestamine... 6 Klaviatuuril mitteleiduvat sümbolite l MS Word Sisukord Uue dokumendi loomine... 2 Dokumendi salvestamine... 3 Faili nimi... 4 Teksti sisestamine... 6 Klaviatuuril mitteleiduvat sümbolite lisamine... 6 Uue dokumendi loomine Dokumendi salvestamine

Rohkem

B120_10 estonian.cdr

B120_10 estonian.cdr Alati seal, et teid aidata Registreerige oma toode ja otsige abi koduleheküljelt www.philips.com/welcome B120 Beebimonitor Küsimus? Kontakteeruge Philipsiga Eestikeelne kasutusjuhend 2 Valgussensor USB

Rohkem

Excel Valemite koostamine (HARJUTUS 3) Selles peatükis vaatame millistest osadest koosnevad valemid ning kuidas panna need Excelis kirja nii, et

Excel Valemite koostamine (HARJUTUS 3) Selles peatükis vaatame millistest osadest koosnevad valemid ning kuidas panna need Excelis kirja nii, et Excel2016 - Valemite koostamine (HARJUTUS 3) Selles peatükis vaatame millistest osadest koosnevad valemid ning kuidas panna need Excelis kirja nii, et programm suudaks anda tulemusi. Mõisted VALEM - s.o

Rohkem

Kom igang med Scratch

Kom igang med Scratch Alustame algusest Getting Started versioon 1.4 SCRATCH on uus programmeerimiskeel, mis lubab sul endal luua interaktiivseid annimatsioone, lugusid, mänge, muusikat, taieseid jm Scratch'i saab kasutada

Rohkem

Otsinguteavituse esitamine Kultuurimälestiste riiklikus registris 1. Mine aadressile: ja vajuta nuppu Kodanikule. 2. Sisene

Otsinguteavituse esitamine Kultuurimälestiste riiklikus registris 1. Mine aadressile:   ja vajuta nuppu Kodanikule. 2. Sisene Otsinguteavituse esitamine Kultuurimälestiste riiklikus registris 1. Mine aadressile: https://register.muinas.ee ja vajuta nuppu Kodanikule. 2. Sisene registrisse ID-kaardi, Mobiili-ID-ga. Kasutajakonto

Rohkem

Microsoft Word - HOTSEC kasutusjuhend v1.900.docx

Microsoft Word - HOTSEC kasutusjuhend v1.900.docx HOTSEC Tarkvara kasutusjuhend v. 1.9 1 Sisukord Käivitamine:... 3 Programmi kasutamine... 4 Kasutajate lisamine ja eemaldamine:... 6 Jooksev logi:... 9 Häired:... 9 2 HOTSEC põhioperatsioonide kirjeldus

Rohkem

1 / loeng Tekstitöötlus Sisend/väljund Teksti lugemine Sõnad

1 / loeng Tekstitöötlus Sisend/väljund Teksti lugemine Sõnad 1 / 16 7. loeng Tekstitöötlus Sisend/väljund Teksti lugemine Sõnad 2 / 16 Sisend/väljund vaikimisi: Termid: read, write?-read(x). : 2+3. X = 2+3.?-write(2+3). 2+3 true. Jooksva sisendi vaatamine: seeing?-

Rohkem

CPA4164 USB 2.0 kõrgekvaliteediline videoadapter KASUTUSJUHEND 1. PEATÜKK - Ülevaade 1.1 Tutvustus CPA4164 USB 2.0 videoadapter võimaldab teil arvutis

CPA4164 USB 2.0 kõrgekvaliteediline videoadapter KASUTUSJUHEND 1. PEATÜKK - Ülevaade 1.1 Tutvustus CPA4164 USB 2.0 videoadapter võimaldab teil arvutis CPA4164 USB 2.0 kõrgekvaliteediline videoadapter KASUTUSJUHEND 1. PEATÜKK - Ülevaade 1.1 Tutvustus CPA4164 USB 2.0 videoadapter võimaldab teil arvutisse laadida ja redigeerida erinevatest analoogvideo

Rohkem

Hoia oma arvuti turvaline ja kiire 1.Leia start nupust alustades Juhtpaneel 2.Juhtpaneeli aadressiribalt leia Kõik juhtpaneeli üksused 3.Avanenud tööa

Hoia oma arvuti turvaline ja kiire 1.Leia start nupust alustades Juhtpaneel 2.Juhtpaneeli aadressiribalt leia Kõik juhtpaneeli üksused 3.Avanenud tööa Hoia oma arvuti turvaline ja kiire 1.Leia start nupust alustades Juhtpaneel 2.Juhtpaneeli aadressiribalt leia Kõik juhtpaneeli üksused 3.Avanenud tööaknas leia Windows Update 4.Lase arvutil kontrollida

Rohkem

Pintsli otsade juurde tegemine Esiteks Looge pilt suurusega 64x64 ja tema taustaks olgu läbipaistev kiht (Transparent). Teiseks Minge kihtide (Layers)

Pintsli otsade juurde tegemine Esiteks Looge pilt suurusega 64x64 ja tema taustaks olgu läbipaistev kiht (Transparent). Teiseks Minge kihtide (Layers) Pintsli otsade juurde tegemine Esiteks Looge pilt suurusega 64x64 ja tema taustaks olgu läbipaistev kiht (Transparent). Teiseks Minge kihtide (Layers) aknasse ja looge kaks läbipaistvat kihti juurde. Pange

Rohkem

Ajaveeb-veebileht.pptx

Ajaveeb-veebileht.pptx Inoftehnoloogia ja koostöö Ajaveeb ehk blog Ka veebipäevik, weblog - sisaldab perioodiliselt lisatavaid postitusi, mis on pööratud kronoloogilises järjekorras Ajaveeb võib olla avalik (nähtav kõigile lugejatele)või

Rohkem

Tartu Ülikool

Tartu Ülikool Tartu Ülikool Code coverage Referaat Koostaja: Rando Mihkelsaar Tartu 2005 Sissejuhatus Inglise keelne väljend Code coverage tähendab eesti keeles otse tõlgituna koodi kaetust. Lahti seletatuna näitab

Rohkem

PÄRNU TÄISKASVANUTE GÜMNAASIUM ESITLUSE KOOSTAMISE JUHEND Pärnu 2019

PÄRNU TÄISKASVANUTE GÜMNAASIUM ESITLUSE KOOSTAMISE JUHEND Pärnu 2019 PÄRNU TÄISKASVANUTE GÜMNAASIUM ESITLUSE KOOSTAMISE JUHEND Pärnu 2019 SISUKORD 1. SLAIDIESITLUS... 3 1.1. Esitlustarkvara... 3 1.2. Slaidiesitluse sisu... 3 1.3. Slaidiesitluse vormistamine... 4 1.3.1 Slaidid...

Rohkem

Pealkiri

Pealkiri Andmebaasid (6EAP) I praktikum Mida praktikumides tehakse? Õpitakse SQL i Tehakse andmebaas ope (igas praktikumis natuke, kuni lõpuks saab valmis) Tehakse andmebaas edu (kui ope on valmis, tehakse edu,

Rohkem

Microsoft Word - EHR.docx

Microsoft Word - EHR.docx earvekeskus E-ARVE TELLIMUSTE JUHEND 1 Sisukord E-arvete tellimused... 3 Klientide tellimused... 3 E-arve tellimuse lisamine... 3 E-arve tellimuse muutmine... 9 Minu tellimused... 10 Minu tellimuse sisestamine...

Rohkem

Mida räägivad logid programmeerimisülesande lahendamise kohta? Heidi Meier

Mida räägivad logid programmeerimisülesande lahendamise kohta? Heidi Meier Mida räägivad logid programmeerimisülesande lahendamise kohta? Heidi Meier 09.02.2019 Miks on ülesannete lahendamise käigu kohta info kogumine oluline? Üha rohkem erinevas eas inimesi õpib programmeerimist.

Rohkem

G aiasoft Programmi VERP ja Omniva Arvekeskuse liidese häälestamine ja arvete saatmine-lugemine VERP 6.3 ja VERP 6.3E Versioon ja hilisemad K

G aiasoft Programmi VERP ja Omniva Arvekeskuse liidese häälestamine ja arvete saatmine-lugemine VERP 6.3 ja VERP 6.3E Versioon ja hilisemad K Programmi VERP ja Omniva Arvekeskuse liidese häälestamine ja arvete saatmine-lugemine VERP 6.3 ja VERP 6.3E Versioon 6.3.1.51 ja hilisemad Kasutaja juhend 2016 Sisukord 1. Sissejuhatus...3 2. Liidese häälestus...3

Rohkem

Juhend nutiterminali seadistamiseks ja kaardimaksete vastuvõtmiseks Ingenico Link/2500 ja icmp

Juhend nutiterminali seadistamiseks ja kaardimaksete vastuvõtmiseks Ingenico Link/2500 ja icmp Juhend nutiterminali seadistamiseks ja kaardimaksete vastuvõtmiseks Ingenico Link/2500 ja icmp Terminali seadistamine Lülita telefonis või tahvelarvutis (edaspidi telefonis) sisse Bluetooth. (1) 1 1 Mudel

Rohkem

Taskuprinter KASUTUSJUHEND

Taskuprinter KASUTUSJUHEND Taskuprinter KASUTUSJUHEND Täname, et ostsite taskuprinteri Polaroid Mint. Käesoleva kasutusjuhendi eesmärk on anda teile juhiseid toote ohutuks kasutamiseks ja et see ei kujutaks endast kasutajale mingit

Rohkem

Väärtusta oma vabadust. Eesti Yale Seifide Kasutusjuhend Mudelid: YSB/200/EB1 YSB/250/EB1 YSB/400/EB1 YLB/200/EB1 YSM/250/EG1 YSM/400/EG1 YSM/520/EG1

Väärtusta oma vabadust. Eesti Yale Seifide Kasutusjuhend Mudelid: YSB/200/EB1 YSB/250/EB1 YSB/400/EB1 YLB/200/EB1 YSM/250/EG1 YSM/400/EG1 YSM/520/EG1 Väärtusta oma vabadust. Eesti Yale Seifide Kasutusjuhend Mudelid: YSB/200/EB1 YSB/250/EB1 YSB/400/EB1 YLB/200/EB1 YSM/250/EG1 YSM/400/EG1 YSM/520/EG1 YLM/200/EG1 Soovitame selle kasutusjuhendi alles hoida.

Rohkem

1. Üliõpilased 1.1 Tõendid Vali menüüst: Üliõpilased tõendid tõendite trükkimine. Avaneb vorm Tõendite trükkimine, vali tõendi liik Tõend õppim

1. Üliõpilased 1.1 Tõendid Vali menüüst: Üliõpilased tõendid tõendite trükkimine. Avaneb vorm Tõendite trükkimine, vali tõendi liik Tõend õppim 1. Üliõpilased 1.1 Tõendid Vali menüüst: Üliõpilased tõendid tõendite trükkimine. Avaneb vorm Tõendite trükkimine, vali tõendi liik. 1.1.1 Tõend õppimise kohta TLÜ-s Seda tõendiliiki saab väljastada ainult

Rohkem

6 tsooniga keskus WFHC MASTER RF 868MHz & 4 või 6 tsooniga alaseade SLAVE RF KASUTUSJUHEND 6 tsooniga WFHC RF keskus & 4 või 6 tsooniga alaseade SLAVE

6 tsooniga keskus WFHC MASTER RF 868MHz & 4 või 6 tsooniga alaseade SLAVE RF KASUTUSJUHEND 6 tsooniga WFHC RF keskus & 4 või 6 tsooniga alaseade SLAVE 6 tsooniga keskus WFHC MASTER RF 868MHz & 4 või 6 tsooniga alaseade SLAVE RF KASUTUSJUHEND 6 tsooniga WFHC RF keskus & 4 või 6 tsooniga alaseade SLAVE RF 868MHz 3-6 EE 1. KASUTUSJUHEND 6 tsooniga WFHC

Rohkem

Praks 1

Praks 1 Biomeetria praks 3 Illustreeritud (mittetäielik) tööjuhend Eeltöö 1. Avage MS Excel is oma kursuse ankeedivastuseid sisaldav andmestik, 2. lisage uus tööleht, 3. nimetage see ümber leheküljeks Praks3 ja

Rohkem

DJI GOGGLES Kiirjuhend V1.0

DJI GOGGLES Kiirjuhend V1.0 DJI GOGGLES Kiirjuhend V1.0 DJI Goggles DJI Goggles on mugavad prillid, mis on disainitud mugavaks FPV lendamiseks DJI toodetega. Nad loovad ultra-kõrge kvaliteediga pildi, minimaalse viivitusega pikamaa

Rohkem

KASUTUSJUHEND

KASUTUSJUHEND KASUTUSJUHEND Sissejuhatus Kui valvesüsteem on valvessepanekuks valmis ning puuduvad rikke- ning häireteated, kuvatakse sõrmistiku displeil kellaaeg, kuupäev ning tekst Enter Your Code sisestage kood Peale

Rohkem

SAF 7 demo paigaldus. 1.Eeldused SAF 7 demo vajab 32- või 64-bitist Windows 7, Window 8, Windows 10, Windows Server 2008 R2, Windows Server 2012, Wind

SAF 7 demo paigaldus. 1.Eeldused SAF 7 demo vajab 32- või 64-bitist Windows 7, Window 8, Windows 10, Windows Server 2008 R2, Windows Server 2012, Wind SAF 7 demo paigaldus. 1.Eeldused SAF 7 demo vajab 32- või 64-bitist Windows 7, Window 8, Windows 10, Windows Server 2008 R2, Windows Server 2012, Windows Server 2012 R2, Windows Server 2016 või Windows

Rohkem

Tõstuksed Aiaväravad Tõkkepuud Automaatika KÄIGUUKSED Käiguuksed on paigaldatavad kõikidele sektsioonuste tüüpidele. Käiguukse saab varustada kas tava

Tõstuksed Aiaväravad Tõkkepuud Automaatika KÄIGUUKSED Käiguuksed on paigaldatavad kõikidele sektsioonuste tüüpidele. Käiguukse saab varustada kas tava KÄIGUUKSED Käiguuksed on paigaldatavad kõikidele sektsioonuste tüüpidele. Käiguukse saab varustada kas tavalise või madala lävepakuga. Soovitav on ukse tellimise ajal käiguukse vajadus ning ning lävepaku

Rohkem

JABRA STYLE Kasutusjuhend jabra.com/style

JABRA STYLE Kasutusjuhend jabra.com/style Kasutusjuhend jabra.com/style SISUKORD 1. TERE TULEMAST... 3 2. PEAKOMPLEKT... 4 3. KANDMINE... 5 3.1 KUULARIKATETE VAHETAMINE 4. AKU LAADIMINE... 6 5. ÜHENDAMINE... 7 5.1 BLUETOOTH SEADMEGA ÜHENDAMINE

Rohkem

Microsoft Word - essee_CVE ___KASVANDIK_MARKKO.docx

Microsoft Word - essee_CVE ___KASVANDIK_MARKKO.docx Tartu Ülikool CVE-2013-7040 Referaat aines Andmeturve Autor: Markko Kasvandik Juhendaja : Meelis Roos Tartu 2015 1.CVE 2013 7040 olemus. CVE 2013 7040 sisu seisneb krüptograafilises nõrkuses. Turvaaugu

Rohkem

PowerPoint Presentation

PowerPoint Presentation Lühijuhend Turvaline juurdepääs, ühiskasutus ja salvestusruum failide jaoks. Rohkem võimalusi olenemata sellest, kus te asute! Logige oma Office 365 tellimusse sisse ja valige rakendusekäiviti kaudu SharePoint.

Rohkem

PowerPointi esitlus

PowerPointi esitlus Regulaaravaldised ja skriptimine Windows ja UNIX operatsioonisüsteemides WINDOWS 1. slaid Windows käsurida Käsureaks nimetan programme: cmd.exe powershell.exe Nendesse saab kirjutada käske, millega näiteks

Rohkem

MTAT Operatsioonisüsteemid - Turvalisus

MTAT Operatsioonisüsteemid - Turvalisus Regulaaravaldised ja skriptimine Windows ja UNIX operatsioonisüstemides WINDOWS 1. slaid Windows käsurida Käsureaks nimetan programme: cmd.exe powershell.exe command.com (tänapäevastes OS ei kasutata)

Rohkem

Tartu Kutsehariduskeskus IKT osakond Merlis Karja-Kännaste ASUTUSE DOKUMENDIREGISTRI AVALIK VAADE Analüüs Juhendaja Mirjam-Merike Sõmer Tartu 2015

Tartu Kutsehariduskeskus IKT osakond Merlis Karja-Kännaste ASUTUSE DOKUMENDIREGISTRI AVALIK VAADE Analüüs Juhendaja Mirjam-Merike Sõmer Tartu 2015 Tartu Kutsehariduskeskus IKT osakond Merlis Karja-Kännaste ASUTUSE DOKUMENDIREGISTRI AVALIK VAADE Analüüs Juhendaja Mirjam-Merike Sõmer Tartu 2015 SISUKORD SISSEJUHATUS... 3 1. VILJANDI LINNAVALITSUSE

Rohkem

KOOLITUSTE HALDAMINE E-TÖÖTUKASSA KASUTAJAJUHEND 1

KOOLITUSTE HALDAMINE E-TÖÖTUKASSA KASUTAJAJUHEND 1 KOOLITUSTE HALDAMINE E-TÖÖTUKASSA KASUTAJAJUHEND 1 Sisukord E-TÖÖTUKASSASSE SISSE LOGIMINE JA MINU KOOLITUSED AVALEHT... 2 UUE KOOLITUSE LISAMINE... 5 MÄÄRAMATA TOIMUMISAJAGA KOOLITUSED... 9 REGISTREERIMISTEATE

Rohkem

KOTKAS AVE kasutajakeskne juhend Loomise Muutmise kuupäev: kuupäev: Versioon: 2.0 Klient: Keskkonnaministeeriumi Infotehno

KOTKAS AVE kasutajakeskne juhend Loomise Muutmise kuupäev: kuupäev: Versioon: 2.0 Klient: Keskkonnaministeeriumi Infotehno Loomise 22.09.2015 Muutmise 10.10.2018 kuupäev: kuupäev: Versioon: 2.0 Klient: Keskkonnaministeeriumi Infotehnoloogiakeskus Projekt: Keskkonnaotsuste terviklik autonoomne süsteem (KOTKAS) Dokument: AVE

Rohkem

SINU UKS DIGITAALSESSE MAAILMA Ruuter Zyxel LTE3302 JUHEND INTERNETI ÜHENDAMISEKS

SINU UKS DIGITAALSESSE MAAILMA Ruuter Zyxel LTE3302 JUHEND INTERNETI ÜHENDAMISEKS SINU UKS DIGITAALSESSE MAAILMA Ruuter Zyxel LTE3302 JUHEND INTERNETI ÜHENDAMISEKS OLULINE TEAVE: LOE ENNE RUUTERI ÜHENDAMIST! Ruuter on sinu uks digitaalsesse maailma. Siit saavad alguse kõik Telia teenused

Rohkem

Operatsioonisüsteemi ülesanded

Operatsioonisüsteemi ülesanded Praktikum 2 OPERATSIOONISÜSTEEMIDE MASSPAIGALDUS Operatsioonisüsteemide masspaigaldus Suure arvu arvutisüsteemide korral ei ole mõistlik operatsioonisüsteeme paigaldada manuaalselt. Operatsioonisüsteemide

Rohkem

MINIMED 640G JA NIGHTSCOUT 640G pumbaga Nightscouti kasutamiseks on vaja: 1. Telefoni, mis töötaks info kogujana. Telefonil peab olema USB OTG ühendus

MINIMED 640G JA NIGHTSCOUT 640G pumbaga Nightscouti kasutamiseks on vaja: 1. Telefoni, mis töötaks info kogujana. Telefonil peab olema USB OTG ühendus MINIMED 640G JA NIGHTSCOUT 640G pumbaga Nightscouti kasutamiseks on vaja: 1. Telefoni, mis töötaks info kogujana. Telefonil peab olema USB OTG ühendus ja vähemalt Android 4.0.3 2. Contour Next Link 2.4

Rohkem

Praks 1

Praks 1 Biomeetria praks 6 Illustreeritud (mittetäielik) tööjuhend Eeltöö 1. Avage MS Excel is oma kursuse ankeedivastuseid sisaldav andmestik, 2. lisage uus tööleht, nimetage see ümber leheküljeks Praks6 ja 3.

Rohkem

Infix Operaatorid I Infix operaatorid (näiteks +) ja tüübid (näiteks ->) kirjutatakse argumentide vahele, mitte argumentide ette. Näiteks: 5 + 2, 2*pi

Infix Operaatorid I Infix operaatorid (näiteks +) ja tüübid (näiteks ->) kirjutatakse argumentide vahele, mitte argumentide ette. Näiteks: 5 + 2, 2*pi Infix Operaatorid I Infix operaatorid (näiteks +) ja tüübid (näiteks ->) kirjutatakse argumentide vahele, mitte argumentide ette. Näiteks: 5 + 2, 2*pi*r^2, Float -> Int Infixoperaatori kasutamiseks prefix-vormis

Rohkem

Pealkiri

Pealkiri Andmebaasid II praktikum Andmebaaside administreerimine Andmete sisestamine KESKKOND, KASUTAJAD, ÕIGUSED Mõisted Tabelid, vaated, trigerid, jpm on objektid Objektid on grupeeritud skeemi Skeemid moodustavad

Rohkem

Microsoft Word - TM70_SP-MG_kasutusjuhend.docx

Microsoft Word - TM70_SP-MG_kasutusjuhend.docx TM70 Touch-i kasutusjuhend Süsteemid: Magellan ja Spectra SP Põhiekraan Kuupäev/kellaaeg Välis-/sisetemperatuur Süsteemi olek Tsoonid Menüü Info OneScreen Monitoring SpotOn Locator Slaidiesitus Paanika-häire

Rohkem

EID TARKVARA (v.1812 baasil)

EID TARKVARA (v.1812 baasil) EID tarkvara ülevaade V.18.12 baasil Dokumendi info Loomise aeg 21.01.2019 Tellija RIA Autor Urmas Vanem, OctoX Versioon 19.01 Versiooni info Kuupäev Versioon Muutused/märkused 21.01.2019 19.01/1 Avalik

Rohkem

Microsoft Word - 56ylesanded1415_lõppvoor

Microsoft Word - 56ylesanded1415_lõppvoor 1. 1) Iga tärnike tuleb asendada ühe numbriga nii, et tehe oleks õige. (Kolmekohaline arv on korrutatud ühekohalise arvuga ja tulemuseks on neljakohaline arv.) * * 3 * = 2 * 1 5 Kas on õige, et nii on

Rohkem

P9_10 estonian.cdr

P9_10 estonian.cdr Registreerige oma toode ja saage abi kodulehelt www.philips.com/welcome P9/10 Eestikeelne kasutusjuhend 2 Ühendage P9 kõlar Bluetooth ühenduse kaudu oma Bluetooth seadmega, nagu näiteks ipadiga, iphone'iga,

Rohkem

Võrguväljaanded ja veebiarhiveerimine

Võrguväljaanded ja veebiarhiveerimine e24.ee folklore.ee delfi.ee www.ut.ee www.delfi.ee ut.ee Teeme ISE: harilikud hoidised virtuaalsetest viljadest veebiarhiivi riiulil Jaanus Kõuts, Eesti Rahvusraamatukogu 17.09.2013 Kogemused http://archive.org

Rohkem

Outlookist dokumendi registreerimine Plugina seadistamine Dokumendi registreerimine Outlookist Vastusdokumendi registreerimine Outlookist Outlooki plu

Outlookist dokumendi registreerimine Plugina seadistamine Dokumendi registreerimine Outlookist Vastusdokumendi registreerimine Outlookist Outlooki plu Outlookist dokumendi registreerimine Plugina seadistamine Dokumendi registreerimine Outlookist Vastusdokumendi registreerimine Outlookist Outlooki plugina ikoon on kadunud Outlooki kasutajad saavad dokumente

Rohkem

Kasutajajuhend pakkuja esindajale Riigihangete register (RHR) Tellija: Rahandusministeerium Loodud: Kehtib kuni: Tähtajatult 1

Kasutajajuhend pakkuja esindajale Riigihangete register (RHR) Tellija: Rahandusministeerium Loodud: Kehtib kuni: Tähtajatult 1 Kasutajajuhend pakkuja esindajale Riigihangete register (RHR) Tellija: Rahandusministeerium Loodud: 22.10.2018 Kehtib kuni: Tähtajatult 1 Sisukord 1 Muudatuste ajalugu... 4 2 Sisselogimine... 5 3 Minu

Rohkem

KOVTP-2 kasutusjuhend Versioon 5.4 ( )

KOVTP-2 kasutusjuhend Versioon 5.4 ( ) KOVTP-2 kasutusjuhend Versioon 5.4 (04.12.2017) Versioon Autor Kuupäev Selgitus 0.1 Madis Tänava 05.12.2013 Kasutajate haldamise peatüki valmimine 0.2 Madis Tänava 11.12.2013 Üldine kujundus peatüki valmimine

Rohkem

loogikaYL_netis_2018_NAIDISED.indd

loogikaYL_netis_2018_NAIDISED.indd . Lihtne nagu AB Igas reas ja veerus peavad tähed A, B ja esinema vaid korra. Väljaspool ruudustikku antud tähed näitavad, mis täht on selles suunas esimene. Vastuseks kirjutage ringidesse sattuvad tähed

Rohkem

Kasutajajuhend hankija esindajale Riigihangete register (RHR) Tellija: Rahandusministeerium Loodud: Kehtib kuni: Tähtajatult

Kasutajajuhend hankija esindajale Riigihangete register (RHR) Tellija: Rahandusministeerium Loodud: Kehtib kuni: Tähtajatult Kasutajajuhend hankija esindajale Riigihangete register (RHR) Tellija: Rahandusministeerium Loodud: 22.10.2018 Kehtib kuni: Tähtajatult Sisukord 1 Muudatuste ajalugu... 6 2 Mõisted ja lühendid... 7 3 Kasutajaks

Rohkem

PowerPoint Presentation

PowerPoint Presentation Mahara võimalused Marju Piir Triin Marandi Tartu Ülikool 2016 E-portfoolio Kogumik õppija poolt loodud, valitud, järjestatud, reflekteeritud ja esitletud materjalidest, tõendamaks õpitust arusaamist ja

Rohkem

Loeng03

Loeng03 Loeng 03 Failiõigused ja -manipulatsioon Operatsioonisüsteemide administreerimine ja sidumine I233 Katrin Loodus, Tallinn 2015 Failid ja kataloogid Mis on fail? Linuxi laadsetes süsteemides on kõik failid

Rohkem

MTAT Operatsioonisüsteemid - Turvalisus

MTAT Operatsioonisüsteemid - Turvalisus Regulaaravaldised ja skriptimine Windows ja UNIX operatsioonisüstemides WINDOWS 1. slaid Windows käsurida Käsureaks nimetan programme: cmd.exe powershell.exe command.com Nendesse saab kirjutada käske,

Rohkem

遥控器使用说明书(ROHS) ALPA-CS349-R09D(E)-0301(内容)

遥控器使用说明书(ROHS) ALPA-CS349-R09D(E)-0301(内容) KASUTUSJUHEND SIIRDATAV KDITSIEER KAUGJUHTIMISPULDI KASUTUSJUHEND AM-5PR(N) Täname teid, et olete soetanud endale meie õhukonditsioneeri Palun lugege hoolikalt käesolevat kasutusjuhendit enne seadme kasutamist

Rohkem

Microsoft Word - Errata_Andmebaaside_projekteerimine_2013_06

Microsoft Word - Errata_Andmebaaside_projekteerimine_2013_06 Andmebaaside projekteerimine Erki Eessaar Esimene trükk Teadaolevate vigade nimekiri seisuga 24. juuni 2013 Lehekülg 37 (viimane lõik, teine lause). Korrektne lause on järgnev. Üheks tänapäeva infosüsteemide

Rohkem

Tartu Ülikool Loodus- ja täppisteaduste valdkond Tehnoloogiainstituut Eesnimi Perekonnanimi Minu lõputöö pealkiri Bakalaureusetöö (12 EAP) Arvutitehni

Tartu Ülikool Loodus- ja täppisteaduste valdkond Tehnoloogiainstituut Eesnimi Perekonnanimi Minu lõputöö pealkiri Bakalaureusetöö (12 EAP) Arvutitehni Tartu Ülikool Loodus- ja täppisteaduste valdkond Tehnoloogiainstituut Eesnimi Perekonnanimi Minu lõputöö pealkiri Bakalaureusetöö (12 EAP) Arvutitehnika eriala Juhendaja: amet Eesnimi Perekonnanimi Tartu

Rohkem

View PDF

View PDF Fitbit Ionic - ikoonilisest nutikellast natuke puudu, kuid spordiks ja kontoriks käib 11. aprill 2018-1:27 Autor: Kaido Einama Fitbiti nutikellad on balansseerinud pulsikella ja nutikella piiril ning viimasel

Rohkem

(Microsoft PowerPoint - seminar_6_n\365uded-ainemudel tagasiside.ppt [Compatibility Mode])

(Microsoft PowerPoint - seminar_6_n\365uded-ainemudel tagasiside.ppt [Compatibility Mode]) Tarkvara projekt seminar VI Eelmise iteratsiooni tagasivaade, testimine, installatsioonijuhend, järgmise iteratsiooni näited. Karel Kravik Administratiivset:protestid Probleem: protestide hulk ja kvaliteet

Rohkem

Document number:

Document number: WNR Kiirpaigaldusjuhend Lisateavet, juhised ja uuendused saab leida internetist aadressil http://www.a-link.com Kiirpaigaldusjuhend Komplekt sisaldab: - WNR repiiter - Paigaldusjuhend Ühendused / Ports:

Rohkem

Võistlusülesanne Vastutuulelaev Finaal

Võistlusülesanne Vastutuulelaev Finaal Võistlusülesanne Vastutuulelaev Finaal CADrina 2016 võistlusülesannete näol on tegemist tekst-pilt ülesannetega, milliste lahendamiseks ei piisa ainult jooniste ülevaatamisest, vaid lisaks piltidele tuleb

Rohkem

Rühmatöö Moodle is Triin Marandi 2017 oktoober

Rühmatöö Moodle is Triin Marandi 2017 oktoober Rühmatöö Moodle is Triin Marandi 2017 oktoober Kes on kasutanud rühmatööd? Nutitelefonid välja ja hääletama! www.menti.com KOOD: 14 10 00 https://www.mentimeter.com/s/1c1250be4e6b7c4ec7608a4fa6d7d591/3e66049189e0

Rohkem

Microsoft Word - Iseseisev töö nr 1 õppeaines.doc

Microsoft Word - Iseseisev töö nr 1 õppeaines.doc TALLINNA TEHNIKAÜLIKOOL Raadio- ja sidetehnika instituut Mikrolainetehnika õppetool Iseseisva töö nr 1 juhend õppeaines Sideseadmete mudeldamine Ionosfäärse sidekanali mudeldamine Tallinn 2006 1 Teoreetilised

Rohkem

Selgitused Väikeste põllumajandusettevõtete arendamise toetuse taotlemise protsessi kohta e- PRIAs. Taotlusi saab eeltäita ajavahemikul

Selgitused Väikeste põllumajandusettevõtete arendamise toetuse taotlemise protsessi kohta e- PRIAs. Taotlusi saab eeltäita ajavahemikul Selgitused Väikeste põllumajandusettevõtete arendamise toetuse taotlemise protsessi kohta e- PRIAs. Taotlusi saab eeltäita ajavahemikul 27.03 02.04.2019 Taotlusi saab esitada taotlusperioodil 03.04 10.04.2019

Rohkem

Stiiliraamat_2016

Stiiliraamat_2016 SIHTASUTUSE ARCHIMEDES VISUAALNE IDENTITEET 2015 1 Sisukord 2 3 Korporatiivse identiteedi hierarhia 4 Toetuva kaubamärgistrateegia identiteedi hierarhia 5 TUNNUSGRAAFIKA 6 Värvipalett 7 Värvikasutuse soovitused

Rohkem

SQL

SQL SQL Teine loeng Mõtelda CREATE TABLE ( { INTEGER VARCHAR(10)} [ NOT NULL] ); Standard SQL-86 (ANSI X3.135-1986), ISO võttis üle 1987 SQL-89 (ANSIX3.135-1989) SQL-92 (ISO/IEC 9075:1992)

Rohkem

StandardBooks_versiooni_uuendusWin

StandardBooks_versiooni_uuendusWin Versiooni uuendamine Standard Books 7.2 põhjal Windows 7 või uuemale operatsioonisüsteemile SISUKORD 1. ÜKSIKKASUTAJA VERSIOONI INSTALLEERIMINE...lk 2 2. SERVER/MITMEKASUTAJA VERSIOONI INSTALLEERIMINE.lk

Rohkem

KIIRJUHEND Lugege kiirjuhend enne seadme kasutamist hoolikalt läbi. Kõik tärniga (*) märgitud juhised kehtivad WLAN + 3G mudelitele (Lenovo B6000-H(V)

KIIRJUHEND Lugege kiirjuhend enne seadme kasutamist hoolikalt läbi. Kõik tärniga (*) märgitud juhised kehtivad WLAN + 3G mudelitele (Lenovo B6000-H(V) KIIRJUHEND Lugege kiirjuhend enne seadme kasutamist hoolikalt läbi. Kõik tärniga (*) märgitud juhised kehtivad WLAN + 3G mudelitele (Lenovo B6000-H(V) / Lenovo B8000-H). Tehnilised andmed Mudeli nimetus

Rohkem

(Estonian) DM-RBCS Edasimüüja juhend MAANTEE MTB Rändamine City Touring/ Comfort Bike URBAN SPORT E-BIKE Kasseti ketiratas CS-HG400-9 CS-HG50-8

(Estonian) DM-RBCS Edasimüüja juhend MAANTEE MTB Rändamine City Touring/ Comfort Bike URBAN SPORT E-BIKE Kasseti ketiratas CS-HG400-9 CS-HG50-8 (Estonian) DM-RBCS001-02 Edasimüüja juhend MAANTEE MTB Rändamine City Touring/ Comfort Bike URBAN SPORT E-BIKE Kasseti ketiratas CS-HG400-9 CS-HG50-8 SISUKORD OLULINE MÄRKUS... 3 OHUTUSE TAGAMINE... 4

Rohkem

raamat5_2013.pdf

raamat5_2013.pdf Peatükk 5 Prognoosiintervall ja Usaldusintervall 5.1 Prognoosiintervall Unustame hetkeks populatsiooni parameetrite hindamise ja pöördume tagasi üksikvaatluste juurde. On raske ennustada, milline on huvipakkuva

Rohkem

RVT_ DC-Arctic, 1, en_GB

RVT_ DC-Arctic, 1, en_GB Kasutusjuhend RVT 64 DC, RVT 354 DC, RVT 54 DC, RVT 684 DC Kasutusjuhend Üldteave Siseseadet saab hõlpsalt kasutada infrapunakaugjuhtimispuldiga. Siseseade annab õigest andmeedastusest teada helisignaaliga.

Rohkem

Müügiarvete juhend VEP_

Müügiarvete juhend VEP_ MÜÜGIARVETE KASUTUSJUHEND Sisukord earvekeskusesse sisenemine... 2 Ettevõtte seadete määramine... 3 Ettevõtte kontole ligipääsude volitamine... 5 Käibemaksu koodide seadistamine... 6 Müügiarve koostamine...

Rohkem

Kiire Paigaldamine Otseühenduse Korral Lühi Manual DS-7000 Seeria NVR Salvestiste Jaoks

Kiire Paigaldamine Otseühenduse Korral Lühi Manual DS-7000 Seeria NVR Salvestiste Jaoks Kiire Paigaldamine Otseühenduse Korral Lühi Manual DS-7000 Seeria NVR Salvestiste Jaoks Sisukord Käivitamine ja Sulgemine... 3 Et, sulgeda NVR seade:... 3 Käivitamisel Wizadi kasutamine... 4 Setup Wizardi

Rohkem

ROHKEM KUI HELISTAMISEKS Telefon Snom 715 JUHEND TELEFONI ETTEVALMISTAMISEKS

ROHKEM KUI HELISTAMISEKS Telefon Snom 715 JUHEND TELEFONI ETTEVALMISTAMISEKS ROHKEM KUI HELISTAMISEKS Telefon Snom 75 JUHEND TELEFONI ETTEVALMISTAMISEKS PAKENDI SISU Telefonijuhe Alus Telefoniaparaat Telefonitoru Võrgukaabel Kiirjuhend ALUSE PAIGALDAMINE Alust on võimalik paigaldada

Rohkem

Tarkvaraline raadio Software defined radio (SDR) Jaanus Kalde 2017

Tarkvaraline raadio Software defined radio (SDR) Jaanus Kalde 2017 Tarkvaraline raadio Software defined radio (SDR) Jaanus Kalde 2017 Sissejuhatus Raadiosidest üldiselt Tarkvaraline raadio Kuidas alustada 2 Raadioside Palju siinussignaale õhus Info edastamiseks moduleerid

Rohkem

Bild 1

Bild 1 Archives Portal Europe APEnet ja APEx Mäluasutuste talveseminar Otepää, 06.03.2012 Kuldar Aas, Rahvusarhiiv APEnet (I) Projekti rahastus econtentplus raames Projekti kestvus: 15.01.2009 15.01.2012 Partnerid

Rohkem

Eve Keerus-Jusupov SISUKORD Sissejuhatus Veebilehe koostamiseks vajaminevad programmid (tarkvara) Enne veebi

Eve Keerus-Jusupov SISUKORD Sissejuhatus Veebilehe koostamiseks vajaminevad programmid (tarkvara) Enne veebi SISUKORD Sissejuhatus... 4 1 Veebilehe koostamiseks vajaminevad programmid (tarkvara)... 5 1.1 Enne veebilehe loomist... 5 2 Joomla üleslaadimine... 5 3 Joomla installeerimine... 6 4 Joomla eestistamine...

Rohkem

Mehaanikakool_CVI_72dpi

Mehaanikakool_CVI_72dpi Mehaanikakool Stiiliraamat 2011 TUNNUSGRAAFIKA 4 5 6 7 8 9 10 11 12 13 14 15 16 Sümbol Logotüüp Logo Korporatiivsed värvid Korporatiivne kirjatüüp Logo värvilised ja mustvalged kasutusvariandid Sümboli

Rohkem

Antennide vastastikune takistus

Antennide vastastikune takistus Antennide vastastikune takistus Eelmises peatükis leidsime antenni kiirgustakistuse arvestamata antenni lähedal teisi objekte. Teised objektid, näiteks teised antennielemendid, võivad aga mõjutada antenni

Rohkem

EDL Liiga reeglid 1. ÜLDSÄTTED 1.1. EDL Liiga toimub individuaalse arvestuse alusel, kus mängijad on jagatud hooaja EDL Liiga tulemuste põhj

EDL Liiga reeglid 1. ÜLDSÄTTED 1.1. EDL Liiga toimub individuaalse arvestuse alusel, kus mängijad on jagatud hooaja EDL Liiga tulemuste põhj EDL Liiga reeglid 1. ÜLDSÄTTED 1.1. EDL Liiga toimub individuaalse arvestuse alusel, kus mängijad on jagatud hooaja 2017-2018 EDL Liiga tulemuste põhjal nelja liigasse. a. Premium Liiga (9 osalejat) b.

Rohkem

Praks 1

Praks 1 Biomeetria praks 6 Illustreeritud (mittetäielik) tööjuhend Eeltöö 1. Avage MS Excel is ankeedivastuseid sisaldav andmestik, 2. lisage uus tööleht, nimetage see ümber leheküljeks Praks6 ja 3. kopeerige

Rohkem