3.4.2014 Aulikki Hyrskykari o Edellinen luento Kertausta tekstin muotoilusta Lokeromallia kehystykset, taustakuvat Visuaalinen sommittelu rautalankamallit asemointi o Tällä luennolla Kertausta asemoinnista Mukautuva suunnittelu responsiivinen suunnittelu Sommitteluruudukkojen käyttö layout grids Lomakkeet - lomakkeen määrittely - lähetys käsiteltäväksi Esiprosessoitavat tyylipohjakielet (Sass) CSS kehykset (Foundation)
o Ajatuksena kelluttaa kukin palsta vasemmalle edellisen palstan viereen.. palsta1,. palsta2,.palsta3 { width: 300px; float: left; margin: 10px; } 960px o Kiinteässä asettelussa elementit eivät mukaudu ikkunan koon muutokseen elementtien mitat annetaan pikseleinä tai em yksikköinä o Skaalautuva sommittelussa elementit venyvät ikkunan koon muutoksen mukaisesti elementtien mitat annetaan prosentteina o Entä jos sisältö ei mahdu? overflow: visible hidden scroll auto ts. jos sisältö ei mahdu: annetaan value yli, leikataan, elementissä on vierityspalkit tai vierityspakit tuodaan automaattisesti tarvittaessa
o Elementtien sijoittelun parempi kontrolli + rivin pituuden kontrollointi reunojen tyhjät tilat o Jos käyttäjä muuttaa kirjasinkokoa, muutos saattaa aiheuttaa ongelmia o Sivun saa mukautumaan selainikkunan kokoon + sisältö kutistuu pieneen näyttöön leveässä näytössä helposti hankalan pitkiä rivejä o Sommittelu saattaa muuttua paljon ajatellusta»min width, max width: CSS piirteiden avulla edelliset voi yhdistää elastiseksi sommitteluksi (liquid layout) o Lohkotason elementti erotetaan muista elementeistä rivinvaihdolla varaa iselleen horisontaalisesti tilaa 100% äiti elementtinsä leveydestä. o Rivitason elementti varaa tilaa vain sisällön tarpeen mukainen lokero jos jatkuu useammalle riville, uudella rivillä se varaa itselleen uuden lokeron o Elementit luokittelu lohkotason ja rivitason elementteihin itse asiassa kyse on piirteen display oletusarvosta ne elementit, joilla display piirteen oletusarvo on - block luokiteltiin lohkotason elementeiksi (esim. <p>) - inline luokiteltiin rivitason elementeiksi (esim. <strong>) display: block inline inline block none inherit[..];
o Jos esimerkiksi muutetaan <p>: display piirteen arvoksi inline: peräkkäiset kappaleet kirjoittuvat yhteen <strong>: display piirteen arvoksi block: vahvennetut tekstinosat erotettaan muista elementeistä rivinvaihdolla o inline block elementillä on lohkotason elementin lokeromalli silti se käyttäytyy muuten kuten rivitason elementti (ei erotu muista elementeistä rivinvaidolla) o none yhdessä jonkin skriptikielen kanssa käytettynä hyödyllinen elementti voidaan kääntää näkymättömäksi näkymätön elementti ei varaa tilaa elementtivirrasta dokumentti käyttäytyy kuten elementtiä ei olisi lainkaan olemassa. o display piirteellä on iso valikoima muitakin arvoja, mm. elementti voidaan saada käyttäytymään kuten listan rivi, taulukko jokin taulukon osa (rivi, sarake, solu, otsikko ) o Ethan Marcot: Responsive Web Design (2010) antoi nimen ja kirjoitti näkyväksi periaatteet, joita CSS3:n uusi mediakyselymahdollisuus antoi. o Periaate aiemmin käytäntönä pyrkiä luomaan sivuista erilliset mobiiliversiot laitteistokirjon kasvaessa kestämätön käytäntö sivuston sisällöstä kirjoitetaan vain yksi versio lineaariseksi elementtien virraksi mediakyselyiden hyväksikäyttäen voidaan tilanteen mukaan tuottaa samasta sisällöstä kullekin laitteelle sopiva visuaalinen sommittelu o Resposive Design ajatuksen muunnelmia (sama perusajatus) progressive design, content focused tai mobile first suunnittelu o Sivun sisällön esittämiselle suunnitellaan erilliset rautalankamallit riippuen sen laitteen ominaisuuksista, jolla sivua katsotaan o Rautalankamallit toteutetaan omina CSS tiedostonaan, ja valinta kulloinkin käytettävästä CSS tiedostosta tehdään mediakyselyn antaman vastauksen perusteella
o @media media type [and (media feature experssion)] * o Mediakyselyt moduuli on valmis CSS3 standardi (W3C Recommendation 19 June 2012) o Mediakyselyä voi käyttää kuten valitsinta, esimerkiksi @media screen and (max device width: 480px) {.column { float: none; } } o Tai yhdistää myös <link> elementtiin, jolloin sen avulla voidaan valita koko käytettävä tyylipohja, esimerkiksi: <link rel="stylesheet" type="text/css" media="screen and (max device width: 480px)" href="mobiili.css" /> o Voidaan tiedustella selaimelta ovatko tietyt ehdot voimassa siinä ympäristössä, jossa dokumenttia ollaan esittämässä. tiedustellaan ensin laitetta: mediatyyppi, (media type) sen jälkeen yhden tai useammman mediapiirteen (media feature expression) voimassaoloa o Mediatyypit: o Mediapiirteet: screen, braille, embossed, handheld, print, projection, speech, tty ja tv.
o http://todomvc.com/ o http://snl.no/ o http://foodsense.is/tastemakers o http://bahs.com/ o http://stuffandnonsense.co.uk/ o Ruudukoita (gridejä) käytetään sommittelussa yleisesti o Valokuvissa tasapainon tai jännitteen luomiseksi o Kolmanneksen sääntö (Rule of third s) yleinen sommitteluohje 3x3 ruudukon risteyskohdat kuvan kannalta tärkeitä
o Etuja sivuston sivujen kesken yhtenäisempi vaikutelma tukee käyttäjää etsitty informaation etsinnässä (lisää ennustettavuutta) helpottaa uuden sisällön lisäämistä 12 x 60 px palstat, 20 px etäisyydellä toisistaan, sivuilla 10px marginaalit
Huom! sekä container_12 että gid_n luokka o Esimerkiksi 12 palstaa:.container_12 { margin-left: auto; margin-right: auto; width: 960px; }.container_12.grid_4 { width: 300px; }.container_12.grid_6 { width: 460px; } <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <div class="clear"></div> <section class="container_12 grid_6"> leveyteni on 1/2 sivusta </section> <section class="container_12 grid_6"> leveyteni on 1/2 sivusta </section> o Edellinen tuottaisi sivulle 10 px 20 px 20 px leveyteni on 1/3 sivusta leveyteni on 1/3 sivusta leveyteni on 1/3 sivusta 10 px leveyteni on 1/3 sivusta 20 px leveyteni on 1/3 sivusta
o Mahdollistaa erilaisia sommitteluja 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
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). 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
owufoo (http://wufoo.com/html5/) 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 <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
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"> 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 >
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 opakollinen jokaiselle syötekentälle oarvon avulla verkkosovellus palvelimella tunnistaa miltä elementiltä syötetieto on peräisin Id okäytetään verkkosivun sisällä kenttään viittamiseksi <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
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" /> 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>
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ä" /> 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>
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> 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="2014 04 22"> 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
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: o Käyttöliittymäkomponentti värin, verkko osoitteen, sähköpostiosoitteen ja puhelinnumeron vastaanottamiseen o Wufoo:
o Luvun syöttäminen tai valinta joltain väliltä (liukukontrollin avulla) ja kenttä hakulausekkeen syöttämiseksi hakukoneelle. o Wufoo: 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= "seliteteksti kuvalle" 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.
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 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
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ä 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="säännöllinen lauseke" 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ä
<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> <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>
<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> 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">
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> <select> <option> <optgroup> o Toteuttaa valintalistan 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>
<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> <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>
<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> <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>
<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öä <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>
<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> 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
<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 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
Esiprosessoitavat tyylipohjakielet o Tyylipohjakieliä, joihin on otettu piirteitä ohjelmointikielistä o Sass (Syntactically Awesome StyleSheets) http://sass-lang.com/ 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 http://sass-lang.com/install asenna koneeseen Ruby kielen tulkki (http://www.rubyinstaller.org/) (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. 3.2.14 (Media Mark)
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 o Voidaan esitellä muuttujia o Alkavat $ merkillä.scss.css o Voidaan esitellä muuttujia o Alkavat $ merkillä
Sass Basics: http://sass-lang.com/guide o Sisäkkäisyys valitsinten hierarkkinen esittäminen äiti valitsin sisäkkäisissä säännöissä (&) o Osittaminen partials / import ( _osa.scss @import osa) o extend toistuvia koodin osien esittely @extend säännön 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ä 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