Tallinna Ülikool Digitehnoloogiate Instituut ZURB Foundation 5 õppematerjal Seminaritöö Autor: Hainer Savimaa Juhendaja: Jaagup Kippar Autor :
|
|
- Ülle Palu
- 5 aastad tagasi
- Vaatused:
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 Diana Lõvi (SV valdkond) Järgmised e-lõunad: 10. oktoober
RohkemArcGIS 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
RohkemMicrosoft 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
RohkemMicrosoft 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
RohkemMicrosoft 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
RohkemCSS 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öö
RohkemElisa 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
RohkemFRESENIUS Õ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?
RohkemControl 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)...
RohkemMicrosoft 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,
RohkemGRUPI-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
RohkemProgrammi 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).
RohkemEBSCO 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
RohkemMüü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
Rohkemmagistriöö.doc
Tallinna Ülikool Matemaatika-loodusteaduskond Informaatika osakond Diana Pugatšova Koolide kodulehekülgede hindamisvõimalusi Magistritöö Juhendaja: Mart Laanpere Autor:......... 2005 Juhendaja:.........
RohkemMicrosoft 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
RohkemE-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-
RohkemTiia 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
RohkemMS 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
RohkemB120_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
RohkemExcel 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
RohkemKom 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
RohkemOtsinguteavituse 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
RohkemMicrosoft 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
Rohkem1 / 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?-
RohkemCPA4164 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
RohkemHoia 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
RohkemPintsli 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
RohkemAjaveeb-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
RohkemTartu Ü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
RohkemPÄ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...
RohkemPealkiri
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,
RohkemMicrosoft 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...
RohkemMida 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.
RohkemG 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
RohkemJuhend 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
RohkemTaskuprinter 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
RohkemVää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.
Rohkem1. Ü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
Rohkem6 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
RohkemPraks 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
RohkemDJI 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
RohkemKASUTUSJUHEND
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
RohkemSAF 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
RohkemTõ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
RohkemJABRA 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
RohkemMicrosoft 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
RohkemPowerPoint 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.
RohkemPowerPointi 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
RohkemMTAT 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)
RohkemTartu 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
RohkemKOOLITUSTE 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
RohkemKOTKAS 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
RohkemSINU 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
RohkemOperatsioonisü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
RohkemMINIMED 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
RohkemPraks 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.
RohkemInfix 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
RohkemPealkiri
Andmebaasid II praktikum Andmebaaside administreerimine Andmete sisestamine KESKKOND, KASUTAJAD, ÕIGUSED Mõisted Tabelid, vaated, trigerid, jpm on objektid Objektid on grupeeritud skeemi Skeemid moodustavad
RohkemMicrosoft 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
RohkemEID 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
RohkemMicrosoft 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
RohkemP9_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,
RohkemVõ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
RohkemOutlookist 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
RohkemKasutajajuhend 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
RohkemKOVTP-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
RohkemloogikaYL_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
RohkemKasutajajuhend 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
RohkemPowerPoint 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
RohkemLoeng03
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
RohkemMTAT 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(内容)
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
RohkemMicrosoft 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
RohkemTartu Ü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
RohkemView 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])
Tarkvara projekt seminar VI Eelmise iteratsiooni tagasivaade, testimine, installatsioonijuhend, järgmise iteratsiooni näited. Karel Kravik Administratiivset:protestid Probleem: protestide hulk ja kvaliteet
RohkemDocument number:
WNR Kiirpaigaldusjuhend Lisateavet, juhised ja uuendused saab leida internetist aadressil http://www.a-link.com Kiirpaigaldusjuhend Komplekt sisaldab: - WNR repiiter - Paigaldusjuhend Ühendused / Ports:
RohkemVõ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
RohkemRü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
RohkemMicrosoft 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
RohkemSelgitused 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
RohkemStiiliraamat_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
RohkemSQL
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)
RohkemStandardBooks_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
RohkemKIIRJUHEND 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-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
Rohkemraamat5_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
RohkemRVT_ 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.
RohkemMüü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...
RohkemKiire 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
RohkemROHKEM 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
RohkemTarkvaraline 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
RohkemBild 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
RohkemEve 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...
RohkemMehaanikakool_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
RohkemAntennide 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
RohkemEDL 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