Demo 5 - HTML5, salasanasuojaus, SSI ja CSS

Mallivideot

Videot eivät sisällä ääntä.
Ongelmia videon katselussa?

Näissä demoissa harjoitellaan HTML5:sen käyttöä videon ja äänen linkittämisen sekä lomake-elementtien osalta, tehdään salasanasuojaus, harjoitellaan SSI:n käyttöä sekä aletaan harjoittelemaan CSS:n käyttöä.

HTML5-ominaisuudet

Tehdään HTML5-sivu, jolle lisätään video- ja äänitiedosto.

Kokeillaan lisäksi muutamaa HTML5-lomakeominaisuutta edellisessä demossa tehtyyn sähköpostilomakkeeseen.

Salasanasuojaus

Yksittäinen kansio ja sen alikansiot on helppo suojata salasanalla.

SSI (Server Side Includes)

Samanlaisena toistuvien elementtien lisääminen ja muokkaaminen on vaivalloista, sillä samaa koodia joudutaan normaalisti kopioimaan useille sivuille. Toistuvia osia ovat usein esimerkiksi vakionavigointipalkki ja sivun päivitystiedot. Parempi ratkaisu on keskittää kaikille sivuille yhteiset osat samaan paikkaan ja liittää ne automaattisesti kullekin sivulle sopivaan paikkaan. Tähän voidaan käyttää esimerkiksi Apache-palvelimissa toimivaa SSI-tekniikkaa. WWW-palvelin tulkitsee dokumenttiin upotetut komennot ennen sivun lähettämistä selaimelle.

Tehtävä: Helpotetaan kolmannessa demossa tehdyn Opetusteknologia-sivuston ylläpitoa ja navigointia lisäämällä kaikille dokumenteille yhteinen navigointi yhteen tiedostoon, josta sitä on helppoa keskitetysti ylläpitää.

  1. Aloita uusi täysin tyhjä dokumentti (ilman HTML5/XHTML-sivun pohjatietoja). Kopioi tähän dokumenttiin luomasi Opetusteknologia-sivuston etusivulla olevan listan (ul-elementti) lähdekoodi.
  2. Lisää listaan ensimmäiseksi uusi lista-alkio (li) nimeltä Etusivu.
  3. Muuta kaikki linkit puoliabsoluuttisiksi (jos teit ne alunperin suhteellisina), jotta samat linkit toimivat miltä tahansa sivulta. Esim: 
    <li><a href="/~omatunnus/opetusteknologia/demot/">Demot</a></li>
  4. Lisää puoliabsoluuttinen linkki myös äsken luotuun Etusivu-lista-alkioon.
  5. Tallenna navigointipalkki navbar.include-nimellä Opetusteknologia-sivuston juureen W:\opetusteknologia\.
  6. Muuta W:\opetusteknologia\-hakemistossa olevan index.html-tiedoston nimeksi index.shtml.
    • Useissa Apache-palvelimissa oletuksena .shtml-päätteiset tiedostot prosessoidaan SSI-komentojen varalta. Hakemistosta palautetaan yleensä index.shtml-tiedosto, jos hakemistossa ei ole index.html-tiedostoa. Voimme siis käyttää hakemistoissa aivan hyvin index.shtml-nimisiä tiedostoja, koska linkkimme viittaavat hakemistoihin eivätkä index.html-tiedostoihin.
  7. Muuta index.shtml-tiedostoa siten, että lisäät uuden väliotsikon (h2) ennen address-lohkoa. Laita lohkolle nimeksi Navigointi.
  8. Lisää äsken luodun väliotsikon perään navigointilista seuraavalla SSI-komennolla: 
    <!--#include virtual="/~omatunnuksesi/opetusteknologia/navbar.include"-->
  9. Kokeile selaimella miten etusivu toimii nyt selaimessa: 
    http://users.jyu.fi/~omatunnus/opetusteknologia/

    Jos kaikki meni oikein, niin edellä lisäämäsi SSI-komennon tilalla pitäisi selaimessa näkyä ihan normaali navigointilista, jonka WWW-palvelin lisäsi navbar.include-tiedostosta SSI-komennon kohdalle.

  10. Varmista, että navigointipalkin linkit toimivat.
  11. Kokeillaan lisätä SSI:n avulla myös dokumentin muutosaika sivulle. Siirrä index.shtml-tiedoston lopussa oleva strong-elementti pois address-lohkosta ja sijoita se p-elementin sisälle address-lohkon perään. Korvaa aikamääre rivillä: 
    <!--#config timefmt="%Y-%m-%d %T"--><!--#echo var="LAST_MODIFIED"-->
    • Ensimmäinen kommentti määrää SSI:n päivämäärämuotoilun.
    • Jälkimmäinen kommentti aiheuttaa varsinaisen muutosajankohdan lisäämisen.
    • Kokeile selaimella ilmestyikö muutosaika sivulle.
    • HUOM! Jos muutosajankohta tai muut SSI-komentosi eivät tunnu toimivan, niin varmista että hakemistossasi ei ole enää index.html- ja/tai index.htm-nimisiä tiedostoja. Jos niitä löytyy, niin silloin index.shtml-tiedostoja ei prosessoida hakemiston oletustiedostoiksi. Tällöin kyseiset index.html- ja/tai index.htm-tiedostot täytyy joko nimetä uudelleen tai poistaa, jotta index.shtml-tiedoston saa toimimaan hakemiston oletustiedostona.
  12. Siirrä address-lohko omaan tiedostoon address.include. Lisää se etusivun loppuun ennen sivun päivitysaikaa SSI-komennolla: 
    <!--#include virtual="/~omatunnuksesi/opetusteknologia/address.include"-->
    • Miksi päivitysajankohtaa ei voitu siirtää suoraan address.include-tiedostoon?
  13. Lisää SSI-komentojen avulla navigointipalkki, tekijätiedot ja muutosajankohta myös muille edellisessä demossa tekemillesi sivuille. Muista muuttaa tiedostojen päätteet shtml-muotoon, jotta SSI-komennot toimivat.
  14. Validoi lopuksi sivujen HTML-koodit ja korjaa mahdolliset virheet.

Lisätietoa

CSS

Muotoillaan kolmannessa demossa tehtyjen WWW-sivujen ulkoasua CSS:n avulla keskitetysti yhden tiedoston avulla.

Perusmääritykset

  1. Luo aluksi tyhjä tiedosto nimeltä tyyli.css opetusteknologia-hakemistoon. Lisää tiedostoon seuraavat rivit ja tallenna tiedosto: 
    body {
  background-color: white;
  color: black;	
  font-family: "Courier New", monospace;
}
  2. Avaa seuraavaksi Firefoxilla sivu http://users.jyu.fi/~tunnus/opetusteknologia/. Aletaan tehdä ulkoasumäärityksiä Firefoxin Web Developer -työkalun (asennusohjeet demossa 3) avulla.
  3. Varmista, että sivulle on linkitetty tyyli.css-niminen CSS-tiedosto. Jos linkitystä ei ole, niin lisää se head-elementin sisälle seuraavasti: 
    <link href="tyyli.css" rel="StyleSheet" type="text/css" />
  4. Valitse Web Developer -työkalupalkista CSS | Edit CSS. Laajenna palkkia hieman niin, että näet paremmin tekstit.
  5. Napauta Pin CSS -painiketta Edit CSS -palkin ylälaidasta. Painike tulee siis olla valittuna: Pin päällä. Tämä on olennaista, sillä jos menet muulle sivulle selaimessa eikä Pin ole päällä, niin muutokset katoavat! Pidä tehtävät ja muut sivut omassa ikkunassa ja kolmannessa demossa luomasi WWW-sivut (joiden ulkoasua aletaan nyt muokata) omassa ikkunassa.
  6. Vaihda sivulla käytetty kirjasin seuraavasti:
    • Etsi body-lohko. Ohjeet CSS:n merkintätavoista löytyvät luennolta 3.
    • Kirjoita ominaisuuden font-family arvoksi (kaksoispisteen jälkeen): 
      Verdana, Arial, "Trebuchet MS", sans-serif;
    • Verdana, Arial ja "Trebuchet MS" ovat käytettävien kirjasimien nimiä. Listasta ensimmäisenä löytyvää kirjasinta käytetään sivulla oletuksena. WWW-sivun tekijä ei voi tietää mitä kirjasimia on asennettuna kunkin selaajan koneelle, joten kannattaa antaa useita vaihtoehtoja.
    • sans-serif tarkoittaa päätteetöntä kirjasinperhettä, josta poimitaan käyttöön jokin kirjasin, jos mitään muuta kirjasinta ei ole käytettävissä.
  7. Ulkonäkömuutoksien pitäisi näkyä heti dokumentissa, vaikka tyylitiedostoa ei olekaan tallennettu vielä. Voit vaihdella kirjasimien järjestystä ja kokeilla miten sivun ulkoasu muuttuu.
  8. Määritellään seuraavaksi sivun marginaali. Lisää body-elementille määrittelyt: 
    margin-left: 5%;
margin-right: 5%;
margin-top: 1%;
margin-bottom: 1%;

    Määritellään siis koko sivun vasemmaksi ja oikeaksi marginaaliksi 5 % sivun koosta. Ylä- ja alamarginaaliksi määritellään 1 % sivun koosta.

  9. Määritellään lisää marginaaleja. Nyt h1-, h2-, ja p-elementeille. Lisää näille kaikille määritykset seuraavaan tapaan: 
    h1 { 
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

    em-yksikkö suhteuttaa koon määrityksen selaimen oletusfontin kokoon.

  10. Keskitetään vielä pääotsikko (h1). Se onnistuu text-align: center; -määrityksellä.
  11. Tallenna tyylitiedosto opetusteknologia-hakemistoon napauttamalla Edit CSS -palkista Tallenna-painiketta (Save...). Valitse nimeksi tyyli.css.
  12. Validoi CSS-tiedostosi valitsemalla Web Developer -työkalupalkista Tools | Validate CSS, ja korjaa mahdolliset virheet.
  13. Käy muuttamassa muidenkin tekemiesi sivujen CSS-linkitys osoittamaan samaan tyyli.css-tiedostoon. Voit käyttää suhteellista tai puoliabsoluuttista viittausta. Kaikkien sivujen tulee siis käyttää yhtä ja samaa CSS-tiedostoa samasta hakemistosta. CSS-tiedostoa ei siis ole tarpeen kopioida erikseen jokaiseen hakemistoon. Testaa sivuja ja varmista, että ulkoasumääritykset tulivat käyttöön kaikille sivuille.

Navigoinnin ulkoasu

Määritellään seuraavaksi sivustolla käytetylle navigointilistalle erottuva ulkoasu.

  1. Käy ensin lisäämässä jokaiseen luomaasi HTML-tiedostoon navigointilistan ympärille div-elementti ja siihen class-attribuutti. Attribuutin arvoksi anna navbar: 
    <div class="navbar">
<ul>
...
</ul>
</div>
  2. Jatketaan seuraavaksi CSS-tiedoston muokkausta Web Developerin Edit CSS -toiminnon avulla. Lisää uusi .navbar-tyyli ja sille reunus seuraavalla tavalla: 
    border-style: solid;
border-width: thin;
border-color: black;

    Kokeile sivujen toimintaa selaimella.

    Pisteellä (.) alkavat tyylit ovat määrityksiä, joita voidaan käyttää minkä tahansa elementin yhteydessä kertomalla class-attribuutilla käytetyn tyylin nimi.

  3. Navigointilistalle voidaan määritellä myös taustaväri. Aina taustaväriä (background-color) määriteltäessä pitää muistaa määritellä myös tekstin väri (color). Lisää haluamasi värimääritykset.
    • Värien määritteleminen RGB-koodeina on selitetty esim. RGB Color Values -dokumentissa.
  4. Navigointilistalle voidaan määrittää myös normaalia kapeampi leveys, koska navigoinnissa ei ole leveää sisältöä: 
    width: 20%;
  5. Lisää navigointilistalle myös 1.5em:n marginaali (margin).
  6. Reunaviivan ja lohkon sisällön väliseen alueeseen pääsee käsiksi padding-ominaisuudella (täyte). Määrittele täytteeksi 1em.
  7. Tallenna lopuksi CSS-tiedosto ja validoi se.

Muut ulkoasumääritykset

Tehdään lopuksi vielä muutamia muita ulkoasumäärityksiä:

  1. Käy ensin lisäämässä Demot-sivulle sen ensimmäisen p-elementin yhteyteen id-attribuutti ja siihen arvoksi tarkein: 
    <p id="tarkein"><strong>Kurssin demojen aiheet</strong></p>
  2. Jatketaan seuraavaksi CSS-tiedoston muokkausta Web Developerin Edit CSS -toiminnon avulla. Lisää uusi #tarkein-tyyli ja sille 1.5-kertainen fontin koko seuraavalla tavalla: 
    font-size: 150%;

    Kokeile Demot-sivun toimintaa selaimella.

    Risuaidalla (#) alkavat tyylit ovat määrityksiä, joita voidaan käyttää sellaisten elementtien yhteydessä, joille on annettu tunniste (id). Erona class-attribuuttiin on se, että yhdessä HTML-tiedossa ei saa olla useampia samoja tunnisteita (id), mutta samannimisiä luokkia (class) saa olla useita.

  3. Lisää taulukon otsikkosoluille (th) muista soluista poikkeava taustaväri (background-color).
  4. Lisää kaikille taulukon soluille (th ja td) hieman täytettä (padding), jotta tekstit eivät ole ihan kiinni solujen reunaviivoissa.
  5. Tallenna CSS-tiedosto ja validoi se.
  6. Varmista lopuksi, että tekemäsi ulkoasumääritykset toimivat kaikilla sivuilla.

Lisätehtävä: WWW-lomakkeen muotoilu

Demossa 3 tehtiin sähköpostilomake, jonka ulkoasua nyt hieman muokataan.

Lomake-elementtien ulkoasun muokkaaminen toimii yleensä ottaen aika huonosti, sillä selaimiin on määrätty usein melko kiinteästi, miltä lomakkeet näyttävät. Hieman asemointia kuitenkin pystyy tekemään:

  1. Avaa demossa 3 tehty sähköpostilomake Firefoxiin ja valitse Web Developer -työkalupalkista CSS | Edit CSS.
  2. Lisää fieldset-elementille taustasta poikkeava väri. Värin voit valita myös kuvasta tai paletista esimerkiksi Firefoxin ColorZilla-työkalun avulla.
  3. Muuta kaikkiin lomake-elementteihin (input, option, textarea) tasalevyinen kirjasin eli esimerkiksi Courier New ja yleisvaihtoehto monospace.
  4. Määrää erilainen taustaväri toisen fieldset-lohkon sisällä olevalle fieldset-lohkolle.
  5. Tasataan lomake-elementit samalle tasolle vaakasuunnassa. Muuta ensin CSS:ssä label-elementin rivittyminen tekstin tasosta (engl. inline) lohkoksi (engl. block). Vinkki: käytä display-ominaisuutta.
  6. Määrää label-elementin leveydeksi 30%.
  7. Liu'uta (float) label-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvät label-elementtien oikealle puolelle.
  8. Estä vielä toisen label-elementin rivittyminen samalle riville toisen label-elementin kanssa. Se onnistuu clear-ominaisuudella.
  9. Lisää myös textarea-elementille clear-ominaisuus, jolloin saat sen rivittymään otsikon alapuolelle. Tee textarea-elementistä vielä lohkotason elementti display-ominaisuuden avulla, niin se rivittyy label-elementin alapuolelle isoillakin näytöillä.
  10. Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.
  11. Testaa lopuksi selaimella, että lomakkeesi näyttää suunnilleen mallikuvan lomaketta vastaavalta.
  12. Validoi CSS-tiedostosi ja korjaa mahdolliset virheet.

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/opetusteknologia/demot/demo5/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
 2016-11-07 12:33:36
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta