Monikielisyys, MIME-tyyppi, Xetor ja vieraskirja - Demo 8

Mallivideot

Demoissa harjoitellaan muutamia palvelinpuolen säätöjä sekä toteutetaan Nanonanon sivulle lyhyt CV ja vieraskirja.

Monikielisyys

Monikielisyys -mallivideo

HTTP-protokolla ja Apache-WWW-palvelin tukevat suoraan automaattista kielenvalintamekanismia, joka palauttaa selaimelle oikeankielisen dokumentin selaimen asetuksien mukaan. Selaimien kieliasetuksia voi säätää suoraan niiden asetuksista ja voi esim. laittaa kielet mieleiseensä järjestykseen.

Muutetaan Nanonanon sivuston etusivu monikieliseksi seuraavasti:

Tarkemmin Apachen automaattisesti kielivalinnasta voi lukea dokumentista Apache Content Negotiation.

application/xhtml+xml

MIME-tyyppi -mallivideo

W3C:n suositus XHTML:n mediatyypeistä sanoo, että XHTML 1.1 -dokumentit pitäisi jakaa selaimille käyttäen application/xhtml+xml-mediatyyppiä. Tämän mediatyypin käyttäminen varmistaa, että dokumentteja käsitellään kuten XML-dokumentteja eikä HTML-dokumenttien tapaan tagisoppana.

Oikean mediatyypin käyttäminen aiheuttaa myös pieniä muutoksia CSS:n toimintaan. Normaalisti text/html-muodossa jaetuissa dokumenteissa body-elementti toimii CSS:n kannalta uloimpana juurielementtinä vaikka oikeasti uloin elementti on html. Mediatyypin muuttaminen voi nyt aiheuttaa, että sivulle ilmestyy esim. valkoinen marginaali mikä johtuu siitä, että selain tulkitsee nyt myös html-elementille CSS-asetuksia. Tästä aiheutuvat ongelmat on helpointa kiertää määräämällä CSS:ssä html-elementille taustaväriksi sama kuin body-elementillä ja nollaamalla marginaalin, rajan ja paddingin. Myös body-elementin määritykset kannattaa tarkistaa.

html {
	margin: 0;
	padding: 0;
	border: 0;
}

Valitettavasti Internet Explorer ja ehkä jotkut vanhemmat selaimet eivät ymmärrä application/xhtml+xml-mediatyyppiä. Ongelma voidaan helposti kiertää käyttämällä Apachen mod_rewrite-moduulia, jolla voidaan säätää Apache käyttämään oikeaa mediatyyppiä sen ymmärtäville selaimille. Lisätään .htaccess-tiedostoon seuraavat rivit:

# Laitetaan rewrite-engine päälle
RewriteEngine on
RewriteOptions inherit
RewriteBase    /

# Tutkitaan ilmoittaako selain tukevansa application/xhtml+xml-mediatyyppiä
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
# Tutkitaan onko pyydetty osoite .html-tiedosto ja pyyntö HTTP/1.1-protokollaa
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
# Jos ehdot täyttyvät niin määrätään käytettäväksi application/xhtml+xml
# ja iso-8859-1-merkistö:
RewriteRule .* - "[T=application/xhtml+xml; charset=iso-8859-1]"

# Sama kuin edellä mutta otetaan huomioon .shtml-tiedostot:
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{REQUEST_URI} \.shtml$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - "[T=application/xhtml+xml; charset=iso-8859-1]"

Lisätietoja: Content-typing XHTML

XML ja CSS

Edellä tehty mediatyyppiviritys voi aiheuttaa pieniä muutoksia WWW-sivun ulkoasuun. Normaalisti text/html-muodossa jaetuissa dokumenteissa body-elementti toimii oletuksista poiketen koko dokumentin juurielementtinä CSS:n kannalta, vaikka oikea juurielementti olisikin html-elementti. Tämä ei pidä paikkaansa enää application/xhtml+xml-muodossa jaetuissa dokumenteissa vaan niissä täytyy osata CSS:llä määrätä myös html-elementin taustaväri yms.

Xetor

Xetor -mallivideo

Kokeillaan jEdit-editorin toimintaa XHTML:n kirjoittamisessa. Sovellusprojekteissa on toteutettu jEdit-editorin päälle lisäominaisuuksia, jotka helpottavat koodin kirjoittamista ja muokkaamista. Tehdään Nanonanolle Curriculum Vitae.

Xetor-editorin ympäristö

  1. Tallenna Xetorin 26.4.2004 päivätty versio C:\Mytemp-hakemistoon (oikealla napilla linkkiä ja valinta Save Target as).
  2. Avaa paketti hakemistoon C:\Mytemp\jEdit
  3. Tallenna cv.html W:\www\tyot-hakemistoon. Jos et ole tallentanut demo 1:ssa Nanonanon omakuvaa hakemistoon W:\www, niin tee se nyt.
  4. Käynnistä komentorivi (Start | Command Prompt) ja siirry jEdit-hakemistoon komennolla
    cd C:\Mytemp\jEdit
  5. Käynnistä sovellus komennolla
    java -jar jedit.jar
  6. jEdit haluaa ladata dokumenttityypin määritykset internetistä. Mikäli alussa tulee kyselyjä, niin tallenna kaikki painamalla Yes useampaan kertaan.
  7. Mikäli jEdit ei näytä siltä kuin ylläolevassa kuvassa (vasemmalla rakennenäkymä jne.), niin avaa seuraava ohje ja muuta asetukset sen mukaan. Lisäksi valitse valikosta Utilities | Global Options | Editing | Folding mode-kohtaan valinta sidekick.
  8. Valitse valikosta File | Open. Valitse roots:, josta W:\www\tyot ja lopuksi avaa cv.html.
  9. Dokumentissa on virheitä. Napauta vasemmasta laidasta Error List auki ja katso mitä virheitä dokumentissa on. Virhepalkin kokoa voi muuttaa ottamalla kiinni palkin oikeasta reunasta jos virhekuvaukset eivät näy. Virhekuvaukset voivat tulla esiin myös koodinäkymässä.
  10. Napauta vasemmassa laidassa olevaa virhettä niin pääset koodi-ikkunassa kohtaan, jossa virhe todennäköisesti sijaitsee. Korjaa virhe ja katso muuttuiko virhelista. Kun kaikki virheet on korjattu koodinäkymän reunaan pitäisi tulla kolmioita, joita napauttamalla saadaan lohkoja näkyviin/pois näkyvistä.
  11. Järjestellään lohkot parempaan järjestykseen. Valitse vasemmasta laidasta Structure Browser. Ellei dokumenttipuu ole näkyvissä, niin napauta rakennenäkymässä elementtien edessä olevaa vipua niin että body- elementti aukeaa tai napauta koodi-ikkunassa johonkin lohkoon, joka on body -elementin sisällä. Valitse lohko, joka sisältää img-elementin. Napauta oikealla ja valitse Cut. Siirrä lohko viimeisen div-elementin jälkeen valitsemalla se ja valitse Paste after oikean napin valikosta. Vaihda samaan tapaan div-elementtien paikkaa.
  12. Sulje koodinäkymän vasemmasta laidasta ul-lohko ja div-lohkot napauttamalla lohkojen vierellä olevista kolmioista. Näin saat paremman näkymän oman koodin kirjoittamiselle.

Taulukoiden esteettömyysominaisuudet

Esteetön taulukko -mallivideo

Taulukoiden otsikkosoluille voidaan määritellä lyhenteet (abbr) esim. ääniselaimia tai pienessä tilassa toimivia selaimia varten. Lyhennettä käytetään tarvittaessa esim. jos selain haluaa tiivistää taulukon pieneen tilaan. Ääniselain voi taas lukea lyhenteen ennemmin kuin toistaa usein mahdollisesti hyvinkin pitkää otsikkoa.

Otsikkosoluille on hyvä määritellä myös vaikutusalue (scope), joka voi yksinkertaisimmillaan olla col eli sarake tai row eli rivi. Tämän perusteella esim. ääniselain osaa paremmin yhdistää oikean otsikon oikeisiin soluihin.

Lisäksi soluja voidaan vielä luokitella niiden sisällön mukaan käyttämällä axis-attribuuttia. Luokittelun voi itse vapaasti keksiä.

Esimerkki abbr-, axis- ja scope-attribuuteista

<table summary="WWW-julkaiseminen -kurssin viikkolukujärjestys">
<caption>Lukujärjestys</caption>
<tr><th>Päivä <br />Aika</th><th scope="col" axis="viikonpäivä" abbr="MA">Maanantai</th>
    <th scope="col" axis="viikonpäivä" abbr="TI">Tiistai</th><th scope="col" axis="viikonpäivä" abbr="KE">Keskiviikko</th>
    <th scope="col" axis="viikonpäivä" abbr="TO">Torstai</th><th scope="col" axis="viikonpäivä" abbr="PE">Perjantai</th>
</tr>
<tr><th scope="row" axis="aikaväli" abbr="8-10">08 - 10</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th scope="row" axis="aikaväli" abbr="10-12">10 - 12</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th scope="row" axis="aikaväli" abbr="12-14">12 - 14</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th scope="row" axis="aikaväli" abbr="14-16">14 - 16</th><td></td><td></td><td></td><td></td><td></td></tr>
<tr><th scope="row" axis="aikaväli" abbr="16-18">16 - 18</th><td></td><td>Luento klo 16-18</td><td></td>
    <td>Luento klo 16-18</td><td></td>
</tr>
<tr><th scope="row" axis="aikaväli" abbr="18-20">18 - 20</th><td></td><td></td><td></td><td></td><td></td></tr>
</table>
  1. Lisätään loppuun taulukko. Siirry koodinäkymässä jälkimmäisen div-elementin ja listan väliin ja kirjoita <-merkki ja odota hetki. Kelaa nuolinäppäimillä millaisia elementtejä voi body-elementin sisälle sijoittaa XHTML-standardin mukaan. Paina tämän jälkeen t-kirjainta niin saat näkyville vaihtoehdon table. Napauta enteriä, jolloin editori täydentää taulukon ja ehdottaa attribuuttien lisäämistä. Valikosta pääsee ohi painamalla enteriä, mutta valitse tässä tapauksessa attribuutti-valikosta summary-kohta ja lisää Value-sarakkeeseen Nanonanon kielitaidot: suomi äidinkieli, englanti sujuva ja ruotsi välttävä..
  2. Lisää taulukkoon otsikko caption-elementillä. Kirjoita sisään Kielitaito.
  3. Lisää taulukkoon rivi. Kirjoita <tr>, jolloin koodin pitäisi automaattisesti täydentyä lopputagilla. Lisää elementin sisään kolme th-elementtiä. Määritä kahden jälkimmäisen th-elementin axis-attribuuttiin arvoksi kielitaidot ja scope- attribuuttiin arvo col. Attribuuteilla voidaan määrittää tapa, jolla esimerkiksi ääniselaimet lukevat taulukon. Lisää asiaa taulukon luokittelusta W3C:n sivuilla. Elementit kannattaa valita listasta enterin painalluksella, niin saat attribuuttilistan näkyviin. Lisää th-elementtien sisään tekstit Kieli, Kirjoitus ja Puhe.
  4. Lisää uusi tr-elementti ja sisälle kolme td-elementtiä. Lisää ensimmäiselle td-elementille attribuutti axis arvolla kieli, scope-attribuuttiin arvo row ja abbr-attribuutti (lyhenne) vielä tyhjänä. Kopioi rivi pariin kertaan. Lisää ensimmäisen sarakkeen td-elementeille kohdat suomi, englanti ja ruotsi. Lisää kielille lyhenteet (abbr) käyttäen kaksikirjaimisia maakoodeja (fi, en, se). Yritä keksiä muillekin elementeille hyvät lyhenteet.
  5. Täydennä taulukon tiedot esimerkin mukaisesti:
    Kielitaito
    KieliKirjoitusPuhe
    suomiÄidinkieliÄidinkieli
    englantiHyvät tiedotErinomainen
    ruotsiHyvät tiedotTyydyttävät tiedot
  6. Valitse koko koodi näkyviin valikosta Folding | Expand All Folds.
  7. Tarkista miltä sivu näyttää osoitteessa: http://www.it.jyu.fi/users/tunnus/www/tyot/cv.html

Vieraskirja

Vieraskirja -mallivideo

Tehdään pienimuotoinen vieraskirja Nanonanon kotisivulle.

  1. Tallenna lisaysphp.txt-tiedosto W:\www\vieraskirja-hakemistoon nimellä lisays.php
  2. Avaa W:\www-hakemiston index.shtml-tiedosto HTML-kitillä tai jEdit:illä ja tallenna se (Save as...) vieraskirja-hakemistoon.
  3. Poista etusivulle kuuluvat tekstit, mutta jätä ylänavigointi, navigointipalkki ja lopussa olevat päivitystiedot paikalleen. Muokkaa suhteellisia viittauksia siten, että ne toimivat nykyisessä hakemistossa. Viittaa siis edellisessä hakemistossa oleviin tiedostoihin demo2.css ja navbar.html
  4. Lisää vieraskirjalle pääotsikko.
  5. Lisää lomake, johon laitat tekstikentät URL, E-mail, nimi ja tekstialueen kommenteille. Laita kenttien nimiksi (name) vkurl, vkemail, vkname ja vkcomment.
  6. Sijoita lomakkeen action-attribuuttiin lisays.php ja method-attribuuttiin post.
  7. Lisää lomakkeen loppuun submit-tyyppinen nappi, jonka name-attribuuttiin arvo vkadd.
  8. lisays.php käsittelee lomakkeelta ja lisää tiedot tiedostoon vieraskirja.html. Luo tyhjä tiedosto vieraskirja.html ja tallenna se vieraskirja-hakemistoon.
  9. Lisää vielä lomakkeelle piilokenttä, jonka name-attribuutiksi vkcss. Piilokentän arvoksi (value) voi määritellä haluamasi css-tiedoston, jota käytetään lomakkeen lähetyksen jälkeisessä sivussa. Määritelle css-tyyliksi sivustolla muutenkin käytetty demo2.css. Muista suhteellinen viittaus.
  10. Vieraskirjan kommenttien on tarkoitus tulla suoraan lähettämislomakkeen jälkeen. Liitä SSI:n include- komennolla vieraskirja.html-tiedoston sisältö dokumenttiin.
  11. Avaa SSH Secure File Transfer -ohjelma Start | Program | SSH Secure Shell -valikosta.
  12. Ota yhteys people.cc.jyu.fi-palvelimeen. Valitse oikeanpuolimmaisesta näkymästä www-linkki ja sen sisältä hakemisto nanonano. Valitse (vasemmalta puolelta) W:-aseman www-hakemisto. Kopioi koko vieraskirja-hakemisto oikealle puolelle. Kopioi samaan tapaan tyot-hakemisto people-palvelimelle. Vieraskirjan pitäisi nyt näkyä osoitteessa http://people.cc.jyu.fi/~tunnus/nanonano/vieraskirja/
  13. Avaa komentorivi valikosta Window | New Terminal. Siirry cd-komennolla vieraskirja-hakemistoon. Anna kaikille oikeus suorittaa (x) lisays.php-ohjelman. Anna lisäksi kaikille oikeus kirjoittaa (w) tiedostoon vieraskirja.html. Tämä ei ole pidemmän päälle järkevä ratkaisu, koska nyt kuka tahansa voi kirjoittaa vieraskirja.html- tiedostoon ja muuttaa sen sisältöä (järkevämpää olisi antaa +s lisays.php:lle, mutta tämä ei toimi people:ssa niin kuin pitäisi) .
  14. Testaa, että vieraskirja toimii. Mikäli toimivuudessa on ongelmia, niin korjaa kohdat HTML-kitissä ja siirrä uusitut tiedostot SSH Secure File Transferilla people-palvelimelle ennen uudelleentestausta.
  15. Vieraskirjaan lähetetyt tiedot tulevat seuraavassa muodossa vieraskirja.html-tiedostoon:
    <div class="vkentry">
      <div class="vkdate">Tue, 27 Apr 2004 16:02:28 +0300</div>
      <div class="vkurl">http://appro.mit.jyu.fi/</div>
      <div class="vkemail">jmantyla@cc.jyu.fi</div>
      <div class="vkname">Jukka Mäntylä</div>
      <div class="vkcomment">Mahtavat sivut!</div>
    </div>
    
    Aikamerkintä tulee automaattisesti. Lisää demo2.css-tiedostoon luokille vkentry, vkdate, vkurl, vkemail, vkname ja vkcomment sopivat tyylinmääritykset niin että vieraskirja-sivu näyttää järkevältä kommentteineen.

Lisätehtäviä

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/www/demot/demo8/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2004-05-05 22:43:47
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto