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

• Mallivideot
• Monikielisyys
• application/xhtml+xml
  • XML ja CSS
• Xetor
• Taulukoiden esteettömyysominaisuudet
  • Esimerkki abbr-, axis- ja scope-attribuuteista
• Vieraskirja
• Lisätehtäviä

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:

• Siirrä Nanonanon sivusto people.cc.jyu.fi-palvelimelle ellet ole vielä tehnyt sitä (ks. demo 7).
• Lisätään .htaccess-tiedostoon seuraavat rivit:

  # Tehdään var-päätteisistä tiedostoista tyyppikartta-tiedosto,
  # joka kertoo mikä tiedosto sisältää mitäkin kieltä
  AddHandler type-map .var
  ## Käytetään kansion indeksitiedostona index.var-tiedostoa
  ## tavallisen index.shtml-tiedoston sijaan
  ## Määrätään indeksitiedostovaihtoehdot:
  DirectoryIndex index.var index.html index.shtml
  

• Seuraavaksi luodaan index.var-tiedosto ja lisätään siihen rivit:

  URI: index.en.shtml
  Content-type: text/html
  Content-language: en
  
  URI: index.fi.shtml
  Content-type: text/html
  Content-language: fi
  

  Yllä kerrotaan, että index.en.shtml-tiedosto sisältää englanninkielisen version ja index.fi.shtml-tiedosto suomenkielisen version.

• Kopioi alkuperäinen nanonanon etusivu eli index.shtml sekä index.en.shtml että index.fi.shtml-nimille.
• Muokkaa index.en.shtml-tiedostoa ja käännä sen sisältä ainakin osittain englanniksi.
• Kokeile selaimella Nanonanon etusivua. Muuta selaimen kieliasetuksia ja kokeile muuttuuko sivu (esim. Mozillassa Edit | Preferences | Navigator | Languages, Opera File | Preferences | Languages).
• Lisää suomenkieliseen tiedostoon linkki suoraan englanninkieliseen tiedostoon ja päinvastoin ihan siltä varalta, että jotkut käyttäjät eivät osaa säätää selaimensa kieliasetuksia.

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]"

• Kokeile sivuston toimintaa edellisten rivien lisäyksen jälkeen sekä Mozillalla että Internet Explorerilla.
  • Mozillassa kannattaa kokeilla myös Shift (vaihtonäppäin) + Reload ("kierrätyspainike") -yhdistelmää (tai Shift+Ctrl+R), mikä estää sivun hakemisen selaimen välimuistista.
  • Mozillassa näet palvelimen ilmoittavan mediatyypin View|Page Info -valinnalla kohdasta type:. Jos Mozilla ilmoittaa tyypiksi application/xhtml+xml ja IE näyttää sivun normaalisti niin kaikki on kunnossa.
• Ongelmatapauksissa:
  • Mikäli IE valittaa "The XML page cannot be displayed" niin tarkista, että sinulla on edellisissä demoissa .shtml-tiedostoille määritellyt asetukset kunnossa.
  • Jos selain valittaa "Server error!", niin tarkista etteivät kommentit ole kopioitaessa rivittyneet.
  • Kokeile suoraa linkkiä tiedostoon http://people.cc.jyu.fi/~tunnus/nanonano/index.shtml. Palvelinongelmien takia viittaukset hakemistoihin saattavat antaa väärän MIME-tyypin.

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.

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

   Kieli	Kirjoitus	Puhe
   suomi	Äidinkieli	Äidinkieli
   englanti	Hyvät tiedot	Erinomainen
   ruotsi	Hyvät tiedot	Tyydyttä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ä

• Lisää navigointiin linkit CV:een ja vieraskirjaan.
• Toteuta Nanonanon kotisivulle skaalautuva kuvagalleria. Gallerian toteuttamiseen saat vinkkejä luennolta 6 tiedostoista galleria.html ja kuvagalleria.css.