Demo 4 - HTML5, salasanasuojaus, SSI ja CSS

Mallivideot

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

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

HTML5 - videot ja ääni

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

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 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 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 XHTML-deklaraatioita). 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 XHTML-koodit ja korjaa mahdolliset virheet.

Lisätietoa

CSS

Muotoillaan edellisessä 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 Stick-painiketta Edit CSS -palkin ylälaidasta. Painike menee harmaaksi: Stick päällä. Tämä on olennaista, sillä jos menet muulle sivulle selaimessa eikä Stick ole päällä, niin muutokset katoavat! Pidä tehtävät ja muut sivut omassa ikkunassa ja Nanonanon sivut 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 on pakko 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.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/opetusteknologia/demot/demo4/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2012-03-26 14:32:34
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta