Aulikki Hyrskykari Antti Sand

Koko: px
Aloita esitys sivulta:

Download "15.4.2015 Aulikki Hyrskykari Antti Sand"

Transkriptio

1 Aulikki Hyrskykari Antti Sand

2 o Edellinen luento Kertausta tekstin muotoilusta Lokeromallia kehystykset, taustakuvat Visuaalinen sommittelu rautalankamallit asemointi o Tällä luennolla Lomakkeet - lomakkeen määrittely - lähetys käsiteltäväksi Esiprosessoitavat tyylipohjakielet (Sass) CSS-kehykset (Foundation)

3 o Tähän asti on käsitelty miten WWW-sivuja käytetään tiedon välittämiseen käyttäjälle. o Lomakkeiden avulla voidaan saada tietoa toiseen suuntaan, käyttäjältä sivun julkaisijalle. o Lomakkeet ovat keskeinen osa vuorovaikutteisten verkkopalvelujen toteuttamisessa, esimerkiksi hakukoneet verkkokaupat informaatiopalvelut (kirjastot, tietokannat jne.) www-pohjaiset sähköpostipalvelut mielipidekyselyt tapahtumiin, kursseille yms. ilmoittautumiset

4 o Lomakkeet koostuvat kahdesta osasta: (1) WWW-sivulla näkyvästä, HTML:n ja CSS:n avulla määritellystä lomakkeesta ja (2) Lomakkeelle annettujen tietojen käsittelyn tekevästä ohjelmasta ("lomakkeenkäsittelijä", tallennettuna palvelimelle).

5 o Lomakkeet on koettu HTML:ssä hankaliksi, koska muotoilu ja käsittely vaatii muita sivuelementtejä enemmän sekä CSS että Javascript-koodausta o HTML5:ssä tämä on pyritty ottamaan huomioon sisältää huomattavan määrän uusia elementtejä uusia attribuutteja lomakkeen käsittelyä varten o Selaimet eivät vielä tue kovin kattavasti uusia piirteitä HTML-tulkit jättävät tunnistamattomat elementit tai attribuutit käsittelemättä uudet ominaisuudet jäävät vain huomiotta tulevat käyttöön sitä mukaan kun uudet selainversiot osaavat niitä tulkita

6 owufoo ( voit tarkistaa miten eri selaimet ja selainversiot tukevat HTML5- lomakkeen uusia - input-tyyppejä - input-attribuutteja - lomake-elementtejä osivustolla myös esimerkkikuvia lomake-elementtien toiminnasta helppo kokeilla livenä uusien piirteiden toimintaa

7 <form {lomake-elementin attribuutit}> {elementit lomakkeen sisällä - määräävät lomakkeen sisällön} {elementti, joka lähettää lomakkeen käsittelyyn (input type="submit")} </form> Lomakkeen mahdolliset attribuutit: accept-charset action autocomplete novalidate target enctype method name

8 accept_charset: Määrittää merkistökoodauksen, jota palvelin lomakkeelta odottaa - jos tämä jätetään antamatta oletuskoodaus sama kuin mitä HTML-dokumentissa on käytetty. <form accept-charset="utf-8"> action: Määrittää lomakkeenkäsittelijän <form action="mailaa.pl"> autocomplete : Kenttien automaattitäyttö (ehdottaa aiempia syötteitä) <form autocomplete="on"> enctype: Kenttien arvojen koodauksen määrittelymahdollisuus <form enctype="multipart/form-data">

9 method: Lomakkeen tiedot voi lähettää verkkosovellukselle kahdella eri tavalla, get- tai post-metodia käyttäen. <form method= post"> name: Antaa lomakkeelle nimen, jota ohjelmat käyttävät tunnistetietona lomakkeen avulla lähetettyihin tietoihin viitattaessa. Nimen tulee olla yksikäsitteinen (lomakkeiden kesken) <form name="sukunimi"> novalidate : Määrittää, että lomakkeelle annetuille tiedoille ei tehdä automaattista tarkistusta ennen lähetystä. <form novalidate> target: Määrittää missä lomakkeen aktivioman cgi-ohjelman palauttama HTMLdokumentti näytetään <form target ="_blank >

10 o kenttien esittelyissä saattavat globaalin id-attribuutin ja lomakkeen name-attribuutin roolit joskus vaikuttaa sekavilta o arvojen ei välttämättä tarvitse olla samat, vaikka yleinen käytäntö on antaa niille samat arvot <input type="checkbox" id="film" name="film" value="elokuva" /> name o pakollinen jokaiselle syötekentälle o arvon avulla verkkosovellus palvelimella tunnistaa miltä elementiltä syötetieto on peräisin Id o käytetään verkkosivun sisällä kenttään viittamiseksi

11 <form {lomake-elementin attribuutit}> {elementit lomakkeen sisällä - määräävät lomakkeen sisällön} {elementti, joka lähettää lomakkeen käsittelyyn (input type="submit")} </form> o Lomake-elementin sisälle kirjoitettavat elementit määrittävät lomakkeen kentät <button> <datalist> <fieldset> <input> <legend> <keygen> <label> <meter> <optgroup> <option> <select> <textarea> <output> <progress> o <input>-elementin avulla voidaan esitellä suurin osa lomakkeen syötekentistä, käsitellään se seuraavassa ensin

12 o Yleinen lomakkeen syöte-elementti, type attribuutti määrittelee tarkemmin millaisesta syöte-elementistä on kyse. o Sallittu sisältö: ei sisältöä (tyhjä elementti) o Sallitut attribuutit: globaalit attribuutit, type, accept, alt, autocomplete, autofocus, checked, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, value, width, o Sallittu äiti-elementti: elementti, joka voi saada phrasing-sisältöä Minkä tyyppinen syöte-elementti? <input type="text" id="sivu-id" name="palvelin-id" value="oletusarvo" />

13 o Yhden tekstirivin syöttö, password-kentässä merkit piilotetaan näkyvistä, size attribuutilla syötettävän merkkijonon pituus <fieldset> <legend>tekstiä ja salasana </legend> <label for="kja-tunnus">tunnus:</label> <input type="text" name="kja-tunnus" id="kja-tunnus" size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input type="password" name="password" id="password" size="15" /> </fieldset>

14 o Painikkeita, joista kolme ensimmäistä ovat painikkeen näköisiä, ja neljäskin käyttäytyy kuten painike, vaikka onkin kuva button: ei erikseen määriteltyä toiminnallisuutta, toiminnallisuus toteutettava itse esim. Javascriptillä reset: palauttaa lomakkeen kentät alkuarvoihinsa submit: lähettää lomakkeen tiedot käsittelyyn image: kuten submit, mutta voidaan tehdä jostain kuvasta <input type="submit" value="lähetä" />

15 o Valintaruutu (valittu/ei-valittu) <fieldset> <legend>oletko kiinostunut [input/type=checkbox]</legend> <label for="film">elokuvista</label> <input type="checkbox" name= kiinnostus" id="film" value="elokuva" /> <label for="kirja">kirjallisuudesta</label> <input type="checkbox" name="kiinnostus" id="kirja" value="kirja" /> <label for="garden">puutarhan hoidosta</label> <input type="checkbox" name="kiinnostus" id="garden" value="puutarha" /> <label for="sport">urheilusta</label> <input type="checkbox" name="kiinnostus" id="sport" value="urheilu" /> <label for="cars">autoilusta</label> <input type="checkbox" name="kiinnostus" id="cars" value="autot" /> </fieldset>

16 o Radiopainike, ts. ryhmä valintoja, joista vain yksi voi olla valittuna <fieldset> <legend>ikäsi [input/type=radio]</legend> <label for="alle20">alle 20</label> <input type="radio" name="ika" id="alle20" value="alle20" /> <label for="20-39">20-39</label> <input type="radio" name="ika" id="20-39" value="20-39" /> <label for="40-59">40-59</label> <input type="radio" name="ika" id="40-59" value="40-59" /> <label for="yli59">yli 60</label> <input type="radio" name="ika" id="yli59" value="yli59" /> </fieldset>

17 o Kenttä, jota ei näytetä lomakkeella voidaan käyttää arvojen tallentamiseen näkymättömiin lomakkeelle o Esimerkiksi <input type="hidden" name="date-submitted" value=" "> Tyypillinen käyttö o ohjelman generoimia arvoja lomakkeelle talteen näkymättömiin o esimerkiksi kenttien tietoja niin että ne voidaan lomakkeelle palattaessa palauttaa käyttäjä ei joudu syöttämään tietoja kaikkiin kenttiin uudelleen

18 o Uusia komponentteja: <input type = month week time date datetime datetime-local > o Aikaan liittyvän syötteen vastaanottamiseen osassa on toteutettuna kalenterityyppinen käyttöliittymäkomponentti o Wufoo:

19 o Käyttöliittymäkomponentti värin, verkko-osoitteen, sähköpostiosoitteen ja puhelinnumeron vastaanottamiseen o Wufoo:

20 o Luvun syöttäminen tai valinta joltain väliltä (liukukontrollin avulla) ja kenttä hakulausekkeen syöttämiseksi hakukoneelle. o Wufoo:

21 accept="audio/* video/* image/* MIME_type" Määrittää (tiedoston latauskomponentin yhteydessä) minkä tyyppisiä tiedostoja, tiedoston latauskomponentin avulla hyväksytään ladattavaksi palvelimelle (ääntä, videota tai kuvia) alt= "seliteteksti kuvalle" vain image-tyyppisen käyttöliittymäkomponentin yhteydessä Autocomplete [= autocomplete ] määrittää, käytetäänko syötekenttää kirjoitettaessa automaattitäydennystä autofocus [="autofocus"] määrittää että komponentti aktivoidaan sivun latauduttua (ts. tälle kentälle/painikkeelle annetaan fokus aluksi checked [=checked] käytössä syötetyyppien radio ja checkbox yhteydessä; asettaa niissä kyseisen vaihtoehdon (esi)valituksi.

22 disabled [= disabled ] asettaa komponentin passiiviseen tilaan, jolloin käyttäjä ei pääse muokkaamaan sen sisältöa tai napsauttamaan sitä hiirellä, passivoidun komponentin nimi/arvo -paria ei välitetä palvelimelle. form= lomakkeen-id" komponenetti liitetään kuuluvaksi tiettyyn lomakkeeseen (vaikka se ei olisikaan <form>-elementin sisällä), näin komponentin arvo välitetään palvelimelle lomakkeen mukana vaikka se sijaitsisikin sivulla visuaalisesti lomakkeen muista komponenteista erillään formaction="lomakkeenkäsittelijä-url" painikkeelle määritellä muitakin lomakkeenkäsittelijöitä kuin elementin esittelyssä annettu formenctype="application/x-www-form-urlencoded multipart/formdata text/plain" määrittää kentästä palvelimelle lähetettävän tiedon koodauksen (käytettäessä post-metodia) formmethod ="get post" painikkeelle määritelty lähetystapa, joka syrjäyttää lomakkeelle annetun lähetystavan

23 formnovalidate[="formnovalidate"] ehkäisee lomakkeen lähetyspainikkeessa lomakkeen kenttien automaattisen tarkistuksen palvelimelle lähetettäessä formtarget="iframe-nimi _blank _self _parent _top" vain submit-tyyppisen käyttöliittymäkomponentin yhteydessä, jos useampia lähetyspainikkeita height = ei-negatiivinen luku" määrää kuvan avulla muodostetun syötekomponentin korkeuden pikseleissä list = datalist-id" liittää syötekentän <datalist>-elementtiin, jossa on lueteltu kenttään mahdollisesti syötettäviä arvoja, joita käytetään kun automaattinen täydentäminen ehdottaa kentälle arvoksi. max min = number date kentän suurin pienin mahdollinen arvo

24 maxlength= luku" määrää kuinka monta merkkiä syötekenttään maksimissaan otetaan vastaan multiple= multiple" antaa mahdollisuuden valita useamman tiedoston kerralla name= nimi" antaa komponentille nimen, jota käytetään tunnistetietona kun elementin arvo lähetetään lomakkeenkäsittelijälle pattern="säännöllinen lauseke" mahdollistaa hyväksyttävän arvon määrittelemisen säännöllisten lausekkeiden avulla placeholder= vihje kenttään voi antaa vihjeeksi alku-arvon, joka esimerkiksi kehottaa antamaan syötteen tietyssä

25 readonly [="readonly ] asettaa kentän passiiviseen tilaan, sen arvoa ei pääse muokkaamaan. required [="required"] pakollisti täytettävä kenttä: kenttään on annettava arvo ennen kuin lomakkeen voi lähettää käsittelyyn size= " positiivinen luku" kenttään näkyviin mahtuvien merkkien lukumäärä src= uri -osoite" käytössä vain image-tyyppisellä kentällä: osoite, josta kuva noudetaan value="merkkijono" käytetään rajoittamaan hyväksyttäviä syötekentän arvoja, sekä lukuarvojen rajoittamiseen että ajan painoarvon määrittämiseen width= ei-negatiivinen luku" kuvan avulla muodostetun syötekomponentin leveys pikseleissä

26 <fieldset> o Asettaa kentät lomakkeella omaksi kehystetyksi ryhmäkseen, ryhmälle voi antaa otsikon <legend>-elementin avulla. o Sallittu sisältö: <legend>-elementti, jota voi seurata mitä tahansa flowsisältöä o Sallitut attribuutit: globaalit attribuutit, name, disabled, form o Sallittu äiti-elementti: elementti, joka voi saada flow-sisältöä <fieldset> <legend>tekstiä ja salasana</legend> <label for="kja-tunnus">tunnus:</label> <input id="kja-tunnus" type="text" name="kja-tunnus"size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input id="password" type="password" name="password"size="15" /> </fieldset>

27 <fieldset><legend> o Antaa lomakkeella otsikon <fieldset>-kenttäryhmälle. o Sallittu sisältö: mitä tahansa phrasing-sisältöä o Sallitut attribuutit: globaalit attribuutit o Sallittu äiti-elementti: kenttäryhmä, ts. <fieldset>-elementti <fieldset> <legend>tekstiä ja salasana</legend> <label for="kja-tunnus">tunnus:</label> <input id="kja-tunnus" type="text" name="kja-tunnus"size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input id="password" type="password" name="password"size="15" /> </fieldset>

28 <fieldset><legend><label> o Antaa kentälle nimikkeen. o Sallittu sisältö: flow- tai phrasing-content. o Sallitut attribuutit: globaalit attribuutit, for, form o Sallittu äiti-elementti: kenttäryhmä, ts. <fieldset>-elementti <fieldset> <legend>tekstiä ja salasana</legend> <label for="kja-tunnus">tunnus:</label> <input id="kja-tunnus" type="text" name="kja-tunnus"size="22" value="anna käyttäjätunnuksesi" /> <label for="password">salasana:</label> <input id="password" type="password" name="password"size="15" /> </fieldset>

29 o Syötekomponentti useamman rivin tekstille. o Sallittu sisältö: merkkimuotoista tietoa o Sallitut attribuutit: globaalit attribuutit, autofocus, cols, dirnamea, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap o Sallittu äiti-elementti: elementti, joka voi saada phrasing-sisältöä <textarea id="msg" rows="10" cols="40" name="msg">

30 o Elementti erilaisten painikkeenomaisesti toimivien komponenttien toteutukseen esimerkiksi teksti voi toimia painikkeena o Sallittu sisältö: phrasing sisältöä o Sallitut attribuutit: globaalit attribuutit, autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value o Sallittu äiti-elementti: elementti, joka voi saada phrasing-sisältöä <button name="kentan-id">nimesi:</button>

31 o Toteuttaa valintalistan <select> <option> <optgroup> o Sallittu sisältö: nolla tai enemmän <optiongroup>- ja <option>elementtejä o Sallitut attribuutit: globaalit attribuutit, autofocus, disabled, form, multiple, name, required, size o Sallittu äiti-elementti: elementti, joka voi voida flow-sisältöä <label for="age">ikäsi: </label> <select id="age" name="age"> <option>valitse</option> <option>alle 20</option> <option>20-39</option> <option>40-59</option> <option>yli 60</option> </select>

32 <select> <option> <optgroup> o Määrittelee valintalistan, valintaruudun tai radiopainikkeen vaihtoehdot o Sallittu sisältö: tekstimuotoista tietoa o Sallitut attribuutit: globaalit attribuutit, label, selected, value o Sallittu äiti-elementti: <select> <optgroup> <datalist> <label for="age">ikäsi: </label> <select id="age" name="age"> <option>valitse</option> <option>alle 20</option> <option>20-39</option> <option>40-59</option> <option>yli 60</option> </select>

33 <select> <option> <optgroup> o Ryhmittelee vaihtoehtoja valintalistassa. o Sallittu sisältö: tekstimuotoista tietoa o Sallitut attribuutit: globaalit attribuutit, disabled, label o Sallittu äiti-elementti: <select> <form action="kasittelija.php"> <select id="kirja" name="on-lukenut" multiple="multiple"> <optgroup label="sofi Oksanen"> <option>puhdistus</option> <option>kun kyyhkyset katosivat</option> </optgroup> <optgroup label="arto Paasilinna"> <option>aatemi ja Eeva</option> <option>jäniksen vuosi</option> <option>kylmät hermot, kuuma veri</option> </optgroup> </select> <form>

34 <datalist> o Liittää tekstityyppiseen <input>-syotekstikenttään listattribuuttia käyttäen ennakkoon määritellyn listan arvoja, joita tarjotaan automaattisena täydennyksenä kun kenttään kirjoitetaan sisältöä. o Sallittu sisältö: nolla tai enemmän <option>-elementtejä o Sallitut attribuutit: globaalit attribuutit o Sallittu äiti-elementti: elementti, joka voi voida phrasing-sisältöä <input type="text" list="isotkaupungit" name="kotikaupunki"> <datalist id="isotkaupungit"> <option value="tampere"> <option value="helsinki"> <option value="oulu"> <option value="turku"> <option value="rovaniemi"> </datalist>

35 <keygen> o Elementin avulla luodaan salausavainpari, jota käytetään salaamaan tiedot jotka kulkevat palvelimen ja selaimen välillä o Sallittu sisältö: tyhjä elementti o Sallitut attribuutit: globaalit attribuutit, autofocus, challenge, disabled, form, keytype, name o Sallittu äiti-elementti: elementti, joka voi voida phrasing-sisältöä <form action="kasittelija.php" method="get"> Pankkitilin numero: <input type="text" name="tilinro" /> Salaus: <keygen name="salaus" /> <input type="submit" value="lähetä" /> </form>

36 <output> o Vastaavasti kuin <input>-elementtiä käytetään tiedon tuomiseen verkkosivun lomakkeelta käsittelyyn, tulisi <output>-elementtiä käyttää ohjelmassa tuotettujen (selaimessa javascriptillä laskettujen tai palvelimelta saatujen) tietojen näyttämiseen. o Sallittu sisältö: tyhjä elementti o Sallitut attribuutit: globaalit attribuutit, for, form, name o Sallittu äiti-elementti: elementti, joka voi voida phrasing-sisältöä

37 <progress> o Piirtää horisontaalisen palkin, jolla voi visualisoida tehtävän etenemistä. Esimerkiksi arvo 20 piirtää puoleen väliin täytetyn palkin, jos maksimiarvoksi on annettu 40 (kuten esimerkissä alla) o Sallittu sisältö: phrasing sisältö o Sallitut attribuutit: globaalit attribuutit, value, max o Sallittu äiti-elementti: elementti, joka voi voida phrasing-sisältöä Progress bar: <progress value="20" max="40"></progress>

38 <meter> o Piirtää horisontaalisen palkin, jolla voi visualisoida suhteellista määrää. Esimerkiksi arvo 0.5 piirtää puoleen väliin täytetyn palkin. o Sallittu sisältö: phrasing sisältö o Sallitut attribuutit: globaalit attribuutit, value, min, max, low, high, optimum o Sallittu äiti-elementti: elementti, joka voi voida phrasing-sisältöä Mittari1: <meter value="2014" min="2000" max="2100" ></meter> Mittari2: <meter value="0.75"></meter>

39 o Lomakkeen kenttiin syötetyt tiedot lähetetään palvelimelle tiedot vastaanottaa ja käsittelee palvelimella cgi-ohjelma ohjelma määrätään lomakkeen action attribuutilla o cgi-ohjelma rajapinta (Common Gateway Interface) lomakkeen ja palvelimella tiedot vastaanottavan ohjelman välillä siis WWW-palvelimella suoritettava ohjelma, joka saa selaimelta (yleisimmin HTML-lomakkeilta) tietoja ei sidottu mihinkään tiettyyn ohjelmointikieleen toteutetaan usein tulkattavilla, ns. skriptikielillä (Perl, Phythonilla, PHP) mahdollista myös kirjoittaa erilliseen käännettävillä kielillä (C#, Java, C++ tai erityisesti verkkosovellusten laatimiseen räätälöityjen ohjelmointiympäristöjen avulla, kuten ASP.NET tai J2EE ohjelman suoritus tapahtuu palvelimella, ei selaimessa - palvelimella oltava ko. kielen tulkki (tai kääntäjä) - voivat käyttää palvelimella sijaitsevia tiedostoja tai tietokantoja lähettää (tyypillisesti) palautesivun selaimelle

40 <form action="cgi-ohjelman-url"method="get"> get selain liittää lomakkeen tiedot verkkosovelluksen osoitteeseen lähettää pyynnön verkkosovelluksen omaavalle www-palvelimelle lomakkeen tiedot näkyvät verkko-osoitteessa?-merkin perässä, muuttujat on eroteltu toisistaan &-merkillä. käytetään pienissä lomakkeissa, tilanteissa, joissa ei ole tarpeen peittää lomakkeen tietoja käyttäjältä (tai muilta koneen lähettyvillä olevilta) useimmat web-hakukoneet käyttävät lomakkeissaan get-metodia mahdollistaa kyselyn tallentamisen ja edelleen lähettämisen toisille asiasta kiinnostuneille tai tietojen lähettämisen lomakkeenkäsittelijälle myös kokonaan ilman verkkolomaketta <form action="cgi-ohjelman-url"method= post"> post lähetetään HTTP-kutsun mukana omassa kentässään käytetään suositeltavaa, kun verkkosovellukselle lähetetään suuri määrä tietoa tai tiedon piilottaminenkäyttäjältä tai tietokoneen ympärillä olevilta silmäpareilta on tarpeen huomattava kuitenkin, että - myös post-metodilla tiedot lähetetään verkkosovellukselle täysin salaamattomina - kolmas osapuoli voi lukea kaikki lomakkeella lähetettävät tiedot (myös salasanat) arkaluonteisia tietoja lähetettäessä tulisikin varmistua siitä, että asiakassovellus (web-selain) keskustelee wwwpalvelimen kanssa esim. SSL-salatulla HTTPS-protokolla. o Esimerkit kurssisivuilla

41 CSS tyylipohjien kirjoittamisesta o CSS ei ole ohjelmointikieli vaan määrittelykieli tyylipohjien kirjoittamiseen käytetty kieli itse ei ole kovin tyylikäs o Tyylisääntöjä määritelty, esim. SMACSS (by Jonathan Snook): valitsinten mahdollisimman alhainen painoarvo sääntöjen määrittelyjärjestys valitsinten johdonmukainen nimeäminen toiston välttäminen : dry code = don t repeat yourself Jonathan Snook: SMACSS o CSS:n antama tuki heikko siitä puuttuu muuttujat, modulaarisuus, funktiot johtaa helposti monimutkaisiin vaikeasti hallittaviin tyylipohjiin

42 Esiprosessoitavat tyylipohjakielet o Tyylipohjakieliä, joihin on otettu piirteitä ohjelmointikielistä o Sass (Syntactically Awesome StyleSheets) helpottaa ja nopeuttaa css-tyylipohjien kirjoittamista muuttaa css-määrittelyt ohjelmointikielenomaisemmaksi tuo kieleen muuttujat, sisäkkäisyyden modulaarisuuden, operaattorit, SASS-kielellä tallennettujen tiedostojen tiedostopääte.scss (vanha, sisennyksiin nojaava versio oli.sass) selaimet kuitenkin tulkitsevat vain HTML-kieltä ja CCS-sääntöjä».scss-tiedostot käännetään esiprosessorilla.css-tiedostoiksi

43 asenna koneeseen Ruby-kielen tulkki ( (Macissä jo valmiina) asenna sass: - avaa Rubyn komentoikkuna (Start Command Prompt with Ruby) - kirjoita komentoikkunaan sass paketin asennuskomento: gem install sass - nyt koneessasi on Sass-tulkki - voit tarkistaa antamalla komennon gem install sass jos asennus onnistui, saat tiedon siitä mikä Sass-versio sinulle tuli asennetuksi, esim (Media Mark)

44 o Kun kirjoitat.scss tiedostoja käynnistät Sass-tulkin taustalle kerrot missä hakemistossa olevat scss-tiedostot muunnetaan automaattisesti css-tiedostoiksi oletetaan, että kirjoitat scss-tiedostoja kansioon: polku/scss ja haluat että ne käännetään css-tiedostoiksi kansioon: polku/css mistä mihin annat Ruby-komentoikkunassa komennon: sass --watch polku/scss:polku/css o Esimerkiksi: sass --watch C:Users/ah/Documents/jwt/scss:C:Users/ah/Documents/jwt/css Tai komennolla cd (change directory) ensin samaan tiedostoon, silloin ei tarvitse määrillä polkua: Prosessi lopetetaan komennolla: ctrl/c

45 o Voidaan esitellä muuttujia o Alkavat $-merkillä.scss.css o Voidaan esitellä muuttujia o Alkavat $-merkillä

46 Sass Basics: o Sisäkkäisyys valitsinten hierarkkinen esittäminen äiti-valitsin sisäkkäisissä säännöissä (&) o Osittaminen partials / import ( osa) o extend toistuvia koodin osien avulla (drykoodi) o mixins kuten extend, mutta mahdollistaa parametrien välittämisen koodipalalle (käytetään esim. selainmoottori-prefixien yhteydessä) o Mahdollistaa operaattorien käytön mittayksiköiden määrittelyssä

47 o Periaate yksinkertainen sivujen toteutuksessa perusidea muutenkin on, että sivujen sisältö ja tyylit erotettu toisistaan sisältöön voi liittää useita tyylitiedost» valmiita tyylipohjakirjastoja, joissa vakioitu tyylejä elementeille, vimpaimille, sommitteluille, jne. jotka voi ottaa suoraan käyttöön omille sivuilleen o Näitä käyttääkseen tulisi itse ymmärtää css:ää pystyy tarvittaessa ymmärtämään / muokkaamaan / korjaamaan yllättävästi käyttäytyviä elementtejä o Paljon eri vaihtoehtoja harjoituksissa katsotaan esimerkkinä Foundation-framework Toinen suositeltava vaihtoehto on esimerkiksi Twitter Bootstrap

Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome

Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn

Lisätiedot

JWT Hyrskykari, SIS, Tampereen yliopisto 4/3/2014

JWT Hyrskykari, SIS, Tampereen yliopisto 4/3/2014 3.4.2014 Aulikki Hyrskykari o Edellinen luento Kertausta tekstin muotoilusta Lokeromallia kehystykset, taustakuvat Visuaalinen sommittelu rautalankamallit asemointi o Tällä luennolla Kertausta asemoinnista

Lisätiedot

JWT Hyrskykari, SIS, Tampereen yliopisto 4/25/2013

JWT Hyrskykari, SIS, Tampereen yliopisto 4/25/2013 25.4.2013 Aulikki Hyrskykari Lomakkeet Javascript perusteet Tähän asti on käsitelty miten WWW sivuja käytetään tiedon välittämiseen käyttäjälle. Lomakkeiden avulla voidaan saada tietoa toiseen suuntaan,

Lisätiedot

ICT1TN004. Lomakkeet. Heikki Hietala

ICT1TN004. Lomakkeet. Heikki Hietala Lomakkeet Heikki Hietala Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen

Lisätiedot

Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä.

Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeet Lomake kannattaa asemoida taulukkoon: table. Silloin selitteet ja kentät saadaan sarakkeisiin. Kenttien ulkoasu voidaan määritellä tyyleillä. Lomakkeen tyylit kannattaa määritellä omaan, eriliseen,

Lisätiedot

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa WWW ja tietokannat WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa tekstiä, kuvia, hyperlinkkejä Staattiset sivut kirjoitettu kerran, muuttaminen käsin ongelmana pysyminen ajantasalla Ylläpito hankalaa,

Lisätiedot

2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet

2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot: palautelomake,

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu

Digitaalisen median tekniikat xhtml - jatkuu Digitaalisen median tekniikat xhtml - jatkuu 26.3.2004 Harri Laine 1 Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1

Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1 Digitaalisen median tekniikat xhtml - jatkuu 30.4.2004 Harri Laine 1 XHTML lomakkeet Lomakkeet mahdollistavat tiedon välityksen asiakkaalta (selaimesta) tiedon vastaanottajalle Vastaanottaja voi olla sähköpostiosoite

Lisätiedot

Digitaalisen median tekniikat xhtml - jatkuu

Digitaalisen median tekniikat xhtml - jatkuu Digitaalisen median tekniikat xhtml - jatkuu Harri Laine 1 Kehykset IFRAME - elementti (inline frame) mahdollistaa kehysten upottamisen myös muihin kuin frameset.dtd:n mukaisiin dokumentteihin IFRAME toimii

Lisätiedot

Taustaa. CGI-ohjelmointi

Taustaa. CGI-ohjelmointi Taustaa CGI-ohjelmointi CGI = Common Gateway Interface Hyvin yksinkertainen ja helppo tapa toteuttaa dynaamisuutta ja interaktivisuutta htmldokumentteihin Kehitetty tiedon siirtoon palvelimen ja asiakasselaimen

Lisätiedot

10 Lomakkeet Kontrollit. 10 Lomakkeet

10 Lomakkeet Kontrollit. 10 Lomakkeet 154 Suurin osa HTML-dokumenteista on tarkoitettu vain selailtaviksi ja katseltaviksi ilman, että katselijan rooli olisi ollut muuta kuin passiivinen. Lisäämällä dokumenttiin lomake-elementti, voidaan pieni

Lisätiedot

TIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G

TIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G TIETOJENKÄSITTELY/PIKATAIVAL2 Tehtävä G 1 Tehtävänäsi on määritellä tietokantaan KisatSVNL.mdb lomake Kilpailut ohessa olevan mallin mukaan. Lomake on tarkoitettu kilpailutietojen lisäykseen, selailuun

Lisätiedot

Johdatus edistyneeseen web-kehitykseen. Juuso Lappalainen

Johdatus edistyneeseen web-kehitykseen. Juuso Lappalainen Johdatus edistyneeseen web-kehitykseen Juuso Lappalainen Tällä kurssilla tehdyt sivut - Staattisia html-sivuja, joissa ei ole tiedon tallennusta, backendia tai mitään muutakaan ihmeellistä. - Käyttäjä

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

Sähköpostitilin käyttöönotto

Sähköpostitilin käyttöönotto Sähköpostitilin käyttöönotto Versio 1.0 Jarno Parkkinen jarno@atflow.fi Sivu 1 / 16 1 Johdanto... 2 2 Thunderbird ohjelman lataus ja asennus... 3 3 Sähköpostitilin lisääminen ja käyttöönotto... 4 3.2 Tietojen

Lisätiedot

T-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

T-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot T-111.361 Hypermediadokumentin laatiminen -Ohjelmointi Peruskäsitys www-ohjelmoinnin kentästä Tekniikat interaktiivisuuden toteuttamiseen tekniikat tekniikat Tietokannat Juha Laitinen TKK/TML juha.laitinen@hut.fi

Lisätiedot

582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus

582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus 582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus Sisältö Mikä on web-sovellus? Selaimen rooli web-sovelluksessa Palvelimen rooli web-sovelluksessa Aineistopyynnöt Tiedon välittäminen

Lisätiedot

Excel-lomakkeen (syöttötaulukko) käyttäminen talousarvio- ja suunnitelmatietojen toimittamisen testaamisessa Kuntatalouden tietopalvelussa

Excel-lomakkeen (syöttötaulukko) käyttäminen talousarvio- ja suunnitelmatietojen toimittamisen testaamisessa Kuntatalouden tietopalvelussa Valtiokonttori 1 (8) Excel-lomakkeen (syöttötaulukko) käyttäminen talousarvio- ja suunnitelmatietojen toimittamisen testaamisessa Kuntatalouden tietopalvelussa Valtiokonttori 2 (8) Sisällys 1 Yleistä...

Lisätiedot

Mitä direktiivi käytännössä velvoittaa?

Mitä direktiivi käytännössä velvoittaa? Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön

Lisätiedot

2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet

2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot: palautelomake,

Lisätiedot

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin) 23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN

Lisätiedot

Lomakkeiden suunnittelu. Aiheina

Lomakkeiden suunnittelu. Aiheina Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:

Lisätiedot

Action Request System

Action Request System Action Request System Manu Karjalainen Ohjelmistotuotantovälineet seminaari HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos 25.10.2000 Action Request System (ARS) Manu Karjalainen Ohjelmistotuotantovälineet

Lisätiedot

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti

Lisätiedot

2 Web-lomakkeet. 2 Web-lomakkeet

2 Web-lomakkeet. 2 Web-lomakkeet 2 Web-lomakkeet Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot:

Lisätiedot

Lomakkeiden suunnittelu. Aiheina

Lomakkeiden suunnittelu. Aiheina Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä Peruskontrollit lomakkeissa Asetteluista lomakkeella Oppimistavoite:

Lisätiedot

Muuttujien määrittely

Muuttujien määrittely Tarja Heikkilä Muuttujien määrittely Määrittele muuttujat SPSS-ohjelmaan lomakkeen kysymyksistä. Harjoitusta varten lomakkeeseen on muokattu kysymyksiä kahdesta opiskelijoiden tekemästä Joupiskan rinneravintolaa

Lisätiedot

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa

Lisätiedot

Maestro Sähköpostilähetys

Maestro Sähköpostilähetys Maestro Sähköpostilähetys Maestrossa on toiminut sähköpostin lähetysmahdollisuus käyttäen SMTP-protokollaa. Tällöin sähköposti lähtee suoraan Maestrosta eikä käytä käyttäjän sähköpostitiliä. Elisan asiakkaiden

Lisätiedot

Lyseopaneeli 2.0. Käyttäjän opas

Lyseopaneeli 2.0. Käyttäjän opas Lyseopaneeli 2.0 Käyttäjän opas 1. Esittely Lyseopaneeli on Oulun Lyseon lukion käyttäjätietojen hallintapalvelu jonka tarkoitus on niputtaa yhteen muutamia oleellisia toimintoja. 2. Yleistä paneelin käytöstä

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

IDL - proseduurit. ATK tähtitieteessä. IDL - proseduurit

IDL - proseduurit. ATK tähtitieteessä. IDL - proseduurit IDL - proseduurit 25. huhtikuuta 2017 Viimeksi käsiteltiin IDL:n interaktiivista käyttöä, mutta tämä on hyvin kömpelöä monimutkaisempia asioita tehtäessä. IDL:llä on mahdollista tehdä ns. proseduuri-tiedostoja,

Lisätiedot

Tikon ostolaskujen käsittely

Tikon ostolaskujen käsittely Toukokuu 2013 1 (7) 6.3.0 Copyright Aditro 2013 Toukokuu 2013 2 (7) Sisällysluettelo 1. Käyttäjäasetukset... 3 2. Yleiset parametrit... 3 3. Kierrätysasetukset... 3 4. palvelimen tiedot... 4 5. lähetyksen

Lisätiedot

ATK tähtitieteessä. Osa 3 - IDL proseduurit ja rakenteet. 18. syyskuuta 2014

ATK tähtitieteessä. Osa 3 - IDL proseduurit ja rakenteet. 18. syyskuuta 2014 18. syyskuuta 2014 IDL - proseduurit Viimeksi käsiteltiin IDL:n interaktiivista käyttöä, mutta tämä on hyvin kömpelöä monimutkaisempia asioita tehtäessä. IDL:llä on mahdollista tehdä ns. proseduuri-tiedostoja,

Lisätiedot

5. HelloWorld-ohjelma 5.1

5. HelloWorld-ohjelma 5.1 5. HelloWorld-ohjelma 5.1 Sisällys Lähdekoodi. Lähdekoodin (osittainen) analyysi. Lähdekoodi tekstitiedostoon. Lähdekoodin kääntäminen tavukoodiksi. Tavukoodin suorittaminen. Virheiden korjaaminen 5.2

Lisätiedot

Lomakkeiden suunnittelu. Aiheina

Lomakkeiden suunnittelu. Aiheina Lomakkeiden suunnittelu Saila Ovaska Informaatiotieteiden yksikkö, Tampereen yliopisto *) Osan luentokalvoista on laatinut Jenni Anttonen syksyllä 2009. Aiheina Lomakesuunnittelun perusteita Lomake-esimerkkejä

Lisätiedot

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN -Mene osoitteeseen keskustanuoret.fi/user - Kirjoita saamasi käyttäjätunnus ja salasana - Klikkaa yllä olevaa piirisi logoa niin

Lisätiedot

Sisällys Clerica Web-sovellusten käytön aloittaminen 2

Sisällys Clerica Web-sovellusten käytön aloittaminen 2 Sisällys Clerica Web-sovellusten käytön aloittaminen 2 Kirjautuminen järjestelmään 2 Myyntilaskut 2 Ostolaskujen käsittely 4 Uuden laskun syöttö 6 Palkkailmoituslomake 8 Palkkailmoituksesta kopio 9 Henkilötietojen

Lisätiedot

Asiointipalvelun ohje

Asiointipalvelun ohje Asiointipalvelun ohje Yleistä 1. Kirjautuminen 2. Yhteystiedot 3. Vastaustavan valinta 1. Yleistä 2. Palkkatietojen lataaminen tiedostosta 4. Lomake 1. Yleistä 2. Linkit ja vastaajan tiedot 3. Lomakekäsittely

Lisätiedot

Julkaiseminen verkossa

Julkaiseminen verkossa Julkaiseminen verkossa H9T1: Tiedostojen vienti internetiin Yliopiston www-palvelin, kielo Unix käyttöjärjestelmästä hakemistorakenne etäyhteyden ottaminen unix-koneeseen (pääteyhteys) komentopohjainen

Lisätiedot

Site Data Manager Käyttöohje

Site Data Manager Käyttöohje Site Data Manager Käyttöohje Sisällysluettelo Sivu Mikä on SDM 2 SDM asennus 2 Ohjelman käyttö 3 Päävalikko 4 Varmuuskopion tekeminen 5 Täydellisen palautuksen tekeminen 6 Osittaisen palautuksen tekeminen

Lisätiedot

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi

Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi CT30A3200 - WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen HTML-lomakkeet HTML-lomakkeiden avulla voidaan WWW-sovelluksessa hakea käyttäjän

Lisätiedot

ARVO - verkkomateriaalien arviointiin

ARVO - verkkomateriaalien arviointiin ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue

Lisätiedot

Harjoitus 2 (viikko 45)

Harjoitus 2 (viikko 45) Mikäli tehtävissä on jotain epäselvää, laita sähköpostia vastuuopettajalle (jorma.laurikkala@uta.fi). Muista lisätä static-määre operaatioidesi otsikoihin, jotta ohjelmasi kääntyvät. Muista noudattaa hyvän

Lisätiedot

Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle

Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle Peltotuki Pron Lohkotietopankkimoduli tärkkelysperunalle Versio 2008.1 15.10.2008 ohje 15.10.2008 Asennus, käyttöönotto ja päätoiminnot Ohjelmiston tarkoitus Ohjelmiston tarkoitus on yhdistää Peltotuki

Lisätiedot

Tikon ostolaskujen käsittely

Tikon ostolaskujen käsittely Toukokuu 2014 1 (8) Toukokuu 2014 2 (8) Sisällysluettelo 1. Käyttäjäasetukset... 3 2. Yleiset parametrit... 3 3. Kierrätysasetukset... 3 4. palvelimen tiedot... 4 5. lähetyksen aktivointi... 5 6. Eräajot

Lisätiedot

TT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD)

TT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD) TT00AA12-2016 - Ohjelmoinnin jatko (TT10S1ECD) Ohjelmointikäytännöt 21/3/11 Mikko Vuorinen Metropolia Ammattikorkeakoulu 1 Sisältö 1) Mitä on hyvä koodi? 2) Ohjelmointikäytäntöjen merkitys? 3) Koodin asettelu

Lisätiedot

Ohjelmoinnin perusteet Y Python

Ohjelmoinnin perusteet Y Python Ohjelmoinnin perusteet Y Python T-106.1208 20.1.2010 T-106.1208 Ohjelmoinnin perusteet Y 20.1.2010 1 / 40 Arvon pyytäminen käyttäjältä Käyttäjän antaman arvon voi lukea raw_input-käskyllä. Käskyn sulkujen

Lisätiedot

Ohjelmoinnin peruskurssi Y1

Ohjelmoinnin peruskurssi Y1 Ohjelmoinnin peruskurssi Y1 CS-A1111 12.9.2018 CS-A1111 Ohjelmoinnin peruskurssi Y1 12.9.2018 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

Harjoituksen aiheena on tietokantapalvelimen asentaminen ja testaaminen. Asennetaan MySQL-tietokanta. Hieman linkkejä:

Harjoituksen aiheena on tietokantapalvelimen asentaminen ja testaaminen. Asennetaan MySQL-tietokanta. Hieman linkkejä: Linux-harjoitus 6 Harjoituksen aiheena on tietokantapalvelimen asentaminen ja testaaminen. Asennetaan MySQL-tietokanta. Hieman linkkejä: http://www.mysql.com/, MySQL-tietokantaohjelman kotisivu. http://www.mysql.com/doc/en/index.html,

Lisätiedot

Olet tehnyt hyvän valinnan hankkiessasi kotimaisen StorageIT varmuuskopiointipalvelun.

Olet tehnyt hyvän valinnan hankkiessasi kotimaisen StorageIT varmuuskopiointipalvelun. StorageIT 2006 varmuuskopiointiohjelman asennusohje. Hyvä asiakkaamme! Olet tehnyt hyvän valinnan hankkiessasi kotimaisen StorageIT varmuuskopiointipalvelun. Ennen asennuksen aloittamista Varmista, että

Lisätiedot

Palomuurit. Palomuuri. Teoriaa. Pakettitason palomuuri. Sovellustason palomuuri

Palomuurit. Palomuuri. Teoriaa. Pakettitason palomuuri. Sovellustason palomuuri Palomuuri Teoriaa Palomuurin tehtävä on estää ei-toivottua liikennettä paikalliseen verkkoon tai verkosta. Yleensä tämä tarkoittaa, että estetään liikennettä Internetistä paikallisverkkoon tai kotikoneelle.

Lisätiedot

Sähköpostitilin käyttöönotto. Versio 2.0

Sähköpostitilin käyttöönotto. Versio 2.0 Sähköpostitilin käyttöönotto Versio 2.0 Sivu 1 / 10 Jarno Parkkinen jarno@atflow.fi 1 Johdanto... 2 2 Thunderbird ohjelman lataus ja asennus... 3 3 Sähköpostitilin lisääminen ja käyttöönotto... 4 3.1 Tietojen

Lisätiedot

Palvelinpuolen ohjelmointi

Palvelinpuolen ohjelmointi Palvelinpuolen ohjelmointi Staattiset ja dynaamiset web-sivut Staattiset web-sivut ovat valmiissa muodossaan palvelimella (tai paikallisesti omalla koneella). Javascript mahdollistaa paikalliset dynaamiset

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

NELLI-Tunnis. Käyttäjän tunnistus NELLI-tiedonhakuportaalissa yleisissä kirjastoissa. Versio 1.0. 16.5.2006 Ere Maijala Kansalliskirjasto

NELLI-Tunnis. Käyttäjän tunnistus NELLI-tiedonhakuportaalissa yleisissä kirjastoissa. Versio 1.0. 16.5.2006 Ere Maijala Kansalliskirjasto NELLI-Tunnis Käyttäjän tunnistus NELLI-tiedonhakuportaalissa yleisissä kirjastoissa Versio 1.0 16.5.2006 Ere Maijala Kansalliskirjasto Sisällysluettelo Johdanto...3 Tekniikka...3 Esimerkit...4 XML-Skeema...5

Lisätiedot

Maventa Connector Käyttöohje

Maventa Connector Käyttöohje Maventa Connector Käyttöohje 17.4.2015 Sisällys 1. Esittely... 2 1.1. Käytön edellytykset... 2 1.2. Tuetut aineistomuodot... 2 2. Asennustiedosto... 3 2.1. Sisäänkirjautuminen... 7 3. Asetuksien määrittäminen...

Lisätiedot

WCAG 2.1 Uudet kriteerit

WCAG 2.1 Uudet kriteerit WCAG 2.1 Uudet kriteerit Web Content Accessibility Guidelines 2.1 Verkkosisällön uudet saavutettavuuskriteerit (WCAG 2.1) Kimmo Sääskilahti Tero Pesonen WCAG:n versiot 1.0 toukokuu 1999 2.0 joulukuu 2008

Lisätiedot

H9 Julkaiseminen webissä

H9 Julkaiseminen webissä H9 Julkaiseminen webissä Tässä harjoituksessa opetetaan kaksi tapaa viedä tiedostoja jakoon webin kautta (tehtävä 1 ja tehtävä 3), sekä kokeillaan yksinkertaista, jokamiehen tapaa tehdä oma sivusto (tehtävä

Lisätiedot

Sähköposti ja uutisryhmät 4.5.2005

Sähköposti ja uutisryhmät 4.5.2005 Outlook Express Käyttöliittymä Outlook Express on windows käyttöön tarkoitettu sähköpostin ja uutisryhmien luku- ja kirjoitussovellus. Se käynnistyy joko omasta kuvakkeestaan työpöydältä tai Internet Explorer

Lisätiedot

Järjestelmäarkkitehtuuri (TK081702)

Järjestelmäarkkitehtuuri (TK081702) Järjestelmäarkkitehtuuri (TK081702) yleistyvät verkkopalveluissa Youtube Google... Avaavat pääsyn verkkopalvelun sisältöön. Rajapintojen tarjoamia tietolähteitä yhdistelemällä luodaan uusia palveluja,

Lisätiedot

1. Adobe Digital Editions ohjelman käyttöönotto

1. Adobe Digital Editions ohjelman käyttöönotto 1. Adobe Digital Editions ohjelman käyttöönotto Useimmat verkkokaupassa myytävät e-kirjat on suojattu Adobe DRM suojauksella. Näitä e-kirjoja voi lukea vain Adobe Digital Editions ohjelmalla, joka on asennettava

Lisätiedot

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista

Lisätiedot

Ohjelmoinnin peruskurssi Y1

Ohjelmoinnin peruskurssi Y1 Ohjelmoinnin peruskurssi Y1 CS-A1111 11.9.2019 CS-A1111 Ohjelmoinnin peruskurssi Y1 11.9.2019 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,

Lisätiedot

CMS Made Simple Perusteet

CMS Made Simple Perusteet CMS Made Simple Perusteet 1. Hallintaan kirjautuminen Kirjautumisruutuun pääset lisäämällä osakaskuntasi www-osoitteen perään liitteen /admin. Käyttäjätunnuksena toimii onkija ja salasanana postitse saamasi

Lisätiedot

Johdatus Ohjelmointiin

Johdatus Ohjelmointiin Johdatus Ohjelmointiin Syksy 2006 Viikko 2 13.9. - 14.9. Tällä viikolla käsiteltävät asiat Peruskäsitteitä Kiintoarvot Tiedon tulostus Yksinkertaiset laskutoimitukset Muuttujat Tiedon syöttäminen Hyvin

Lisätiedot

Ohjelmoinnin peruskurssi Y1

Ohjelmoinnin peruskurssi Y1 Ohjelmoinnin peruskurssi Y1 CS-A1111 13.9.2017 CS-A1111 Ohjelmoinnin peruskurssi Y1 13.9.2017 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,

Lisätiedot

Pipfrog AS www.pipfrog.com. Tilausten hallinta

Pipfrog AS www.pipfrog.com. Tilausten hallinta Tilausten hallinta Tilausten hallinta Tilausten hallinnassa on neljän tyyppisiä dokumentteja: Tilaukset, laskut, lähetykset ja hyvityslaskut, Tilaus on ensimmäinen dokumentti, jonka joko ostaja on luonnut

Lisätiedot

Ristijärven metsästysseura tysseura osti lisenssin jahtipaikat.fi verkkopalveluun, jotta seuran

Ristijärven metsästysseura tysseura osti lisenssin jahtipaikat.fi verkkopalveluun, jotta seuran Ohjeet. Sivu 1/7 Tämä ohje on tarkoitettu Ristijärven metsästysseuran jäsenille. Ohjeen tarkoitus on opastaa kuinka seuran jäsenet saavat Jahtipaikat.fi verkkosivustolla olevan metsästyskartta sovelluksen

Lisätiedot

Tietokannan luominen:

Tietokannan luominen: Moodle 2 Tietokanta: Tietokanta on työkalu, jolla opettaja ja opiskelijat voivat julkaista tiedostoja, tekstejä, kuvia, linkkejä alueella. Opettaja määrittelee lomakkeen muotoon kentät, joiden kautta opiskelijat,

Lisätiedot

NAVITA BUDJETTIJÄRJESTELMÄN ENSIASENNUS PALVELIMELLE

NAVITA BUDJETTIJÄRJESTELMÄN ENSIASENNUS PALVELIMELLE NAVITA BUDJETTIJÄRJESTELMÄN ENSIASENNUS PALVELIMELLE Ennen palvelinohjelman asennusta perustetaan tarvittavat kansiot. Oikeustasoista share- tai security-tason oikeudet riittävät; molempien oikeustasojen

Lisätiedot

Ohjelmoinnin jatkokurssi, kurssikoe 28.4.2014

Ohjelmoinnin jatkokurssi, kurssikoe 28.4.2014 Ohjelmoinnin jatkokurssi, kurssikoe 28.4.2014 Kirjoita jokaiseen palauttamaasi konseptiin kurssin nimi, kokeen päivämäärä, oma nimi ja opiskelijanumero. Vastaa kaikkiin tehtäviin omille konsepteilleen.

Lisätiedot

Visma Avendon asennusohje

Visma Avendon asennusohje Visma Avendon asennusohje 1 Versio 5.21 On tärkeää, että käytössäsi on aina uusin toimittamamme versio ohjelmistosta. Asentamalla viimeisimmän version saat käyttöösi ohjelman tuoreimmat ominaisuudet ja

Lisätiedot

SeaMonkey pikaopas - 1

SeaMonkey pikaopas - 1 SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston

Lisätiedot

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML AJAX-konsepti AJAX Asynchronous JavaScript And XML Viimeisin muoti-ilmiö web-ohjelmoinissa, termi Ajax tuli käyttöön vuoden 2005 aikana Joukko teknologioita, joiden avulla voidaan toteuttaa uudenlaisen

Lisätiedot

Sivuston nopeus. Poista hahmonnuksen estävä JavaScript ja CSS sivun yläosan sisällöstä

Sivuston nopeus. Poista hahmonnuksen estävä JavaScript ja CSS sivun yläosan sisällöstä Sivuston nopeus 66 / 100 Nopeus Pitäisi korjata: Poista hahmonnuksen estävä JavaScript ja CSS sivun yläosan sisällöstä Sivullasi on 2 estävää ohjelmaresurssia ja 1 estävää CSS-resurssia. Tämä viivästyttää

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

Lisätiedot

Facebook-sivun luominen

Facebook-sivun luominen Facebook-sivun luominen Facebook-sivun luominen Etene vaihe vaiheelta 1 Kirjaudu Facebook-palveluun omalla käyttäjätunnuksellasi. Sen jälkeen sivun alareunassa näkyvät toimintolinkit, joista sinun täytyy

Lisätiedot

ARVI-järjestelmän ohje arvioinnin syöttäjälle 13.4. 2015

ARVI-järjestelmän ohje arvioinnin syöttäjälle 13.4. 2015 ARVI-järjestelmän ohje arvioinnin syöttäjälle 13.4. 2015 Sisältö ARVI-menettelyn perusteet... 1 Arvioinnin syöttäminen... 2 Arvion lähettäminen TE-toimistoon... 5 Sovelluksen sulkeminen... 6 Virhetilanteiden

Lisätiedot

EMVHost Online SUBJECT: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT COMPANY: EMVHost Online Client sovelluksen käyttöohje AUTHOR: DATE: 15.03.

EMVHost Online SUBJECT: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT COMPANY: EMVHost Online Client sovelluksen käyttöohje AUTHOR: DATE: 15.03. EMVHost Online SUBJECT: COMPANY: COMMENTS: AUTHOR: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT NETS OY EMVHost Online Client sovelluksen käyttöohje NETS OY DATE: 15.03.2011 VERSION: 1.0 1 SISÄLLYS SISÄLLYS...

Lisätiedot

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina

Lisätiedot

Ohjeet e kirjan ostajalle

Ohjeet e kirjan ostajalle 1 Ohjeet e kirjan ostajalle 1. Ostaminen ja käyttöönotto 1.1. Näin saat e kirjan käyttöösi Lataa tietokoneellesi Adobe Digital Editions (ADE) ohjelma täältä: http://www.adobe.com/products/digitaleditions/.

Lisätiedot

KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille

KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille KServer Etäohjaus 1 (5) KServer Etäohjaus Spesifikaatio asiakaspuolen toteutuksille Palvelimen toteutuksen ollessa versio 1.0, spesifikaation versio 1.0.0. 2009, Riku Eskelinen/ KServer Software Development

Lisätiedot

1 Ohjeet. 1.1 Verkkolasku

1 Ohjeet. 1.1 Verkkolasku 1 1 Ohjeet 1.1 Verkkolasku Verkkolaskun lähettämiseen tarvittavien tietojen täyttäminen Verkkolaskujen lähettämiseksi on ensin tehtävä sopimus verkkolaskuoperaattorin (välittäjän) kanssa. Esim. kaikki

Lisätiedot

TIETOKONEYLIASENTAJAN ERIKOISAMMATTITUTKINTO

TIETOKONEYLIASENTAJAN ERIKOISAMMATTITUTKINTO TIETOKONEYLIASENTAJAN ERIKOISAMMATTITUTKINTO HARJOITUS: asennus ja konfigurointi TVAT-141 Windows Server 2008 Trial (120 days) Active Directory, AD Domain Name System, DNS Dynamic Host Configuration Protocol,

Lisätiedot

Sisällysluettelo. v.0.9 2

Sisällysluettelo. v.0.9 2 Käyttöopas Sisällysluettelo DYNAROAD HENKILÖKUNTA... 3 TIEPROJEKTIN LUOMINEN... 4 DYNAROAD KÄYTTÄJÄ... 5 TIEPROJEKTIN MUOKKAUS... 6 Työkohdetyyppien lisääminen... 7 Työkohteen lisääminen... 8 Urakoitsijoiden

Lisätiedot

UTIFLEET-VARAUSJÄRJESTELMÄ KÄYTTÄJÄN OHJE. Gospel Flight ry

UTIFLEET-VARAUSJÄRJESTELMÄ KÄYTTÄJÄN OHJE. Gospel Flight ry UTIFLEET-VARAUSJÄRJESTELMÄ Gospel Flight ry Versio 1.0 Hyväksytty Tekijä 1.11.2005 Tarkastanut 1.11.2005 Hyväksynyt Juha Huttunen 3.11.2005 Helia UTIFLEET-TIETOJÄRJESTELMÄ 2 SISÄLLYS 1 SOVELLUKSEN KÄYTTÖOIKEUDET

Lisätiedot

Ohjelmoinnin peruskurssi Y1

Ohjelmoinnin peruskurssi Y1 Ohjelmoinnin peruskurssi Y1 CS-A1111 14.9.2016 CS-A1111 Ohjelmoinnin peruskurssi Y1 14.9.2016 1 / 19 Oppimistavoitteet: tämän luennon jälkeen osaat kirjoittaa Python-ohjelman, joka pyytää käyttäjältä lukuja,

Lisätiedot

Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje

Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje Sisällysluettelo VIP Laajennettu raportointi... 3 Luo raportti Laajennetun raportoinnin työkaluilla... 4 Avaa Laajennettu raportointi... 4 Valitse

Lisätiedot

Flash ActionScript osa 4

Flash ActionScript osa 4 Flash ActionScript osa 4 Tekstikentät Flash:ssa tekstikenttä voi olla tyypiltään joko TLF Text tai Classic Text. TLF Text on uusi Flash CS5 tullut tyyppi. Sen animointi ja muotoilu ominaisuudet ovat monipuolisemmat

Lisätiedot

Office 2013 - ohjelmiston asennusohje

Office 2013 - ohjelmiston asennusohje Office 2013 - ohjelmiston asennusohje Tämän ohjeen kuvakaappaukset on otettu asentaessa ohjelmistoa Windows 7 käyttöjärjestelmää käyttävään koneeseen. Näkymät voivat hieman poiketa, jos sinulla on Windows

Lisätiedot

2.1.2011. Ohjelma on tarkoitettu pankkiyhteysohjelmalla vastaanotettujen Finvoiceverkkolaskujen

2.1.2011. Ohjelma on tarkoitettu pankkiyhteysohjelmalla vastaanotettujen Finvoiceverkkolaskujen OHJE 1 (7) FINVOICE-LASKUJEN ARKISTOINTIOHJELMA Ohjelma on tarkoitettu pankkiyhteysohjelmalla vastaanotettujen Finvoiceverkkolaskujen jatkokäsittelyyn. Ohjelman käyttötarkoitus: Ohjelma purkaa pankista

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

Ohjelmisto on tietokanta pohjainen tiedostojärjestelmä, joka sisältää virtuaalisen hakemisto rakenteen.

Ohjelmisto on tietokanta pohjainen tiedostojärjestelmä, joka sisältää virtuaalisen hakemisto rakenteen. 1 / 50 1. Etusivu Ohjelmisto on tietokanta pohjainen tiedostojärjestelmä, joka sisältää virtuaalisen hakemisto rakenteen. Virtuaali hakemistoihin voi tuoda tiedostoja tietokoneelta tai luoda niitä tällä

Lisätiedot

Javan asennus ja ohjeita ongelmatilanteisiin

Javan asennus ja ohjeita ongelmatilanteisiin Javan asennus ja ohjeita ongelmatilanteisiin Javaa tarvitaan Fivaldin Sovellusikkunan alaisiin sovelluksiin, jotka käyttävät Oracle Forms -tekniikkaa. Visma Fivaldin osalta suosittelemme aina käyttämään

Lisätiedot

ELM GROUP 04. Teemu Laakso Henrik Talarmo

ELM GROUP 04. Teemu Laakso Henrik Talarmo ELM GROUP 04 Teemu Laakso Henrik Talarmo 23. marraskuuta 2017 Sisältö 1 Johdanto 1 2 Ominaisuuksia 2 2.1 Muuttujat ja tietorakenteet...................... 2 2.2 Funktiot................................

Lisätiedot

Sivuston tiedotmysiteworthcheck.com

Sivuston tiedotmysiteworthcheck.com Sivuston tiedotmysiteworthcheck.com Luotu Huhtikuu 26 2019 09:24 AM Pisteet59/100 SEO Sisältö Otsikko Check you website value Pituus : 23 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta. Kuvaus

Lisätiedot

SUOMEN PANKKIYHDISTYS

SUOMEN PANKKIYHDISTYS FINVOICE-laskujen arkistointiohjelma Ohje 1 (5) FINVOICE-LASKUJEN ARKISTOINTILMA Ohjelma on tarkoitettu pankkiyhteysohjelmalla vastaanotettujen Finvoice-verkkolaskujen jatkokäsittelyyn. Ohjelman käyttötarkoitus:

Lisätiedot