Erikoismerkit, CSS, esteettömyys, käytettävyys, WWW-grafiikka

• tietokone0602.mp3 3.5M
• tietokone0603.mp3 3.6M
• tietokone0604.mp3 3.6M
• tietokone0605.mp3 3.3M
• tietokone0606.mp3 3.5M
• tietokone0607.mp3 2.8M

Erikoismerkit HTML-dokumentissa ja URLeissa

HTML-dokumentissa

Perussääntönä kannattaa pitää, että kaikki erikoismerkit pitää koodata HTML-dokumenteissa. Nykyään selaimet ymmärtävät aika hyvin skandimerkkejä, joten niiden koodaaminen ei ole välttämätöntä.

URLeissa

Perussääntönä kannattaa pitää, ettei käytä erikoismerkkejä URLeissa. Jos niitä on kuitenkin pakko käyttää, niin merkit on koodattava merkkiä vastaavalla heksadesimaaliluvulla.

Linkkejä erikoismerkkien koodaamisesta

• Jukka Korpela, "Merkit ja koodaukset".

CSS (Cascading Style Sheets)

Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets, level 1 (CSS1)-suosituksen mukaisesti

Periaate

• Dokumenttien rakenne määritellään HTML:n avulla.
• Dokumenttien ulkoasu määritellään CSS-tyylilomakkeen avulla.

Hyödyt

• Dokumentin rakenne on yksinkertainen.
• Perusdokumenttien tekeminen helppoa.
• Sivuilla yhtenäinen ulkoasu.
• Ulkoasun määrittämiseen ei mene aikaa.
• Keskitetty ulkoasun päivitys.

Muistettava

• Sivujen tiedot on saatava myös ilman tyylejä!
• Tyylit eivät saa häiritä sivujen käyttäjiä!
• Sivut testattava huolellisesti erilaisilla selaimilla!

Tyylien määrittäminen

Perusperiaate on muuttaa olemassaolevien HTML-elementtien ominaisuuksia.

Syntaksi

tyylinimi {

  ominaisuus:  arvo;

}

Esimerkki

body {
  color:  black;
  background-color:  white;
}

Tyylien liittäminen dokumenttiin

HTML-dokumentin otsikkotietoihin seuraava määritys:

  <link href="tyylit.css" rel="stylesheet" type="text/css"  />

Erilliseen tyylitiedostoon (tyylit.css) seuraava määritys:

h1 {
  color:red; 
  text-align: center;
}

Asiayhteyden mukaan määräytyvät tyylit

Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.

p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:

p strong {
		background-color: white;
		color: red;
}

Esimerkki asiayhteyden mukaan määräytyvästä tyylistä.

Tyylien aliluokat (engl. selectors)

Aliluokat täytyy aina liittää rakenteellisesti oikeaan elementtiin.

class-attribuutti

Seuraavassa esimerkki class-attribuutin käytöstä

<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus </p>

Esimerkki aliluokan lisäämisestä tyylitiedostoon.

p {
  background-color: white;
  color: green;
  text-align: center;
}

p.varoitus {
  background-color: white;
  color: red;
}

Edellisen aliluokan yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.

.varoitus {
  background-color: white;
  color: red;
}

Esimerkki tyylin aliluokan käytöstä .

Näennäisluokat (pseudoluokat)

Näennäisluokat ovat tyylien erikoistapauksia, jolla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan onko linkki vierailtu vai ei.

a:link {		/* vierailematon linkki */
	color: blue;
	background-color: transparent;
}

a:visited {		/* vierailtu linkki 	*/
	color: purple;
	background-color: transparent;
}

a:active {		/* aktiivinen linkki 	*/
	color: red;
	background-color: transparent;
}

a:hover {   /* kohdistettu linkki */ 
  color: blue;
	background-color: gray;

}

Esimerkki näennäisluokkien käytöstä.

Pituuksien määrittäminen

Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em-yksikköinä. em suhteutetaan aina oletusfontin kokoon. px (pikseli) yksikköä voi käyttää reunusten ja marginaalien määrittelyssä mutta ei kirjasin koon määrittämiseen.

p {
	font-size: 120%;
}
h1 {
	margin-top: 1em;
}
h2 {
	border: 1px solid black;
}

Kommentit

Kommentointi onnistuu c-kielestä tutulla tavalla:

strong { /* Korostamiseen käytettävä tyyli */
       background-color: white;
       color: red;
}

Sivuilla käytettävät värit

Värien määrittämisessä on käytössä useita tapoja. Helpoin tapa on käyttää prosentteja:

p {
	background-color: rgb(100%, 100%, 100%) /* valkoinen */
}

Linkkejä värien määrittämisestä:

• HTMLHelp, "RGB Color Values"
• Gernot Metze, "Color Tables"

Esimerkkejä

• Kirjasimen ominaisuuksien muuttaminen
• Marginaalien, rajojen ja täytteen muuttaminen
• Listan ominaisuuksien muuttaminen
• Float

Tarkemmin CSS:n eri ominaisuuksia voi lukea Tietoverkot työvälineenä -kurssin monisteesta ja luentosivuilta.

Kuvat WWW:ssä

Kuvankäsittelytermistöä

• Pikseli (engl. pixel) - kuvapiste
• Resoluutio - kuvapisteiden määrä esim. 1024 kertaa 768 pikseliä (1024x768).
• Bittisyvyys - kuvan esittämien värin määrä (esim. 24 bit - 16 milj. väriä).

  • Bittejä	2^	Värien määrä
    1	2^1	2
    2	2^2	4
    4	2^4	16
    8	2^8	256
    15	2^15	32768
    16	2^16	65536
    24	2^24	16 miljoonaa

• Indeksoidut värit(engl. indexed colors) ja täysvärit eli 16 miljoonaa väriä
• Lomitus (engl. interlacing) - kuva tarkentuu tasoittain näytölle.
• Läpinäkyvyys (engl. transparency) - jonkin värin kohdalta tausta näkyy läpi.
• Häviöllinen (engl. lossy) ja häviöttömät kuvaformaatti

Bittikarttaformaatit

• Kuva esitetään bittikarttana, joka koostuu pikseleistä.
• Kuvan värien määrä riippuu kuvapikselin tiedon pituudesta (esim. 8 bittinen kuva 256 väriä)
• Kuvan koko on karkeasti pikseleiden lukumäärä kertaa värien bittisyys (+lisainfot).
• Kuvia ei voi suurentaa kunnolla.

JPEG

• Käytetään valokuvien näyttämiseen WWW:ssä.
• Pakkausaste voidaan määritellä. (Pakkausasteiden vertailu)
• 16 miljoonaa väriä (24 bit).
• Tukee lomitusta (progressive jpeg).
• Ei tue läpinäkyvyyttä.
• Häviöllinen (lossy), joten informaation palauttaminen ei onnistu.
• Selaimet tukevat formaattia hyvin.

PNG

• Käytetään viivapiirroksien ja kaavioiden esittämiseen WWW:ssä.
• Käytetään myös kuvaoriginaalien säilyttämiseen.
• Tukee lomitusta.
• Tukee läpinäkyvyyttä (alpha channel).
• Lisenssivapaa pakkausalgoritmi, jossa ei menetetä tietoa.
• GIF-formaattia parempi pakkaustapa.
• Tulee korvaamaan GIF-formaatin.

GIF

• Käytetään viivapiirroksissa ja kaavioissa.
• Tukee lomitusta (interlaced gif).
• Tukee "taustavärin" läpinäkyvyyttä.
• Tukee animaatioita.
• Maksimissaan 256 väriä (8 bit).
• Lisenssimaksuja vaativa pakkausalgoritmi.

BMP

• Windowsissa yleisesti käytettävä kuvaformaatti.
• Kuvat yleensä huomattavan suuria.
• Selaimet eivät tue BMP-formaattia.

TIFF

• Soveltuu kuvaoriginaalien säilyttämiseen.
• Selaimet eivät tue TIFF-formaattia.

Vektorigrafiikka

• Kuvan tieto esitetään matemaattisina lausekkeina.
• Koon suurentaminen mahdollista tarkkuuden säilyessä.
• Usein pienempi tiedostokoko bittikarttakuvaan verrattuna.
• Ei sovellu valokuvien näyttämiseen.

SVG (Scalable Vector Graphics)

• Tulevaisuuden WWW:ssä käytettävä vektorigrafiikkaformaatti.
• Selaimet eivät tällä hetkellä tue formaattia ilman erillisiä lisäosia.

Kuvatiedoston koko

Kuvatiedoston kokoon vaikuttavat seuraavat asiat:

• Kuvan värien lukumäärä.
• Kuvan fyysinen koko (pituus kertaa leveys).
• Käytettävä kuvaformaatti.

WWW-sivuille tulevat kuvat

Kuvia laitettaessa WWW-sivuille kannattaa muistaa seuraavat asiat:

• Käytä mahdollisimman pieniä ja ydinasian sisältäviä kuvia.
• Käytä sivuilla pieniä kuvia (engl. thumbnail), joista mahdollisuus päästä suurempaan kuvaan.
• Merkitse suuremman kuvan yhteydessä kuvan koko linkkitekstin yhteyteen.
• 600x400 kokoinen kuva mahtuu näytölle lähes aina.
• Kaaviokuvissa värimääräksi kannattaa valita pienin mahdollinen.
• Valitse tilanteeseen oikea formaatti.(formaatin ja värimäärän vaikutus kuvan kokoon)

Kuvankäsittelyn perustoimintoja

• Rajaus (engl. crop)
• Kääntäminen (engl. rotate)
• Koon muuttaminen (engl. resize tai resample)
• Erilaiset korjaukset.
• Efektit.

Kuvat käyttötarkoituksen mukaan

Seuraavassa muutamia vinkkejä kuvien käyttämiseen.

• Kuvien säilytys
  • Suuri koko.
  • TIFF- tai PNG-formaatti
• WWW-sivuille tulevat valokuvat
  • JPEG-formaatti.
  • Mahdollisimman suuri pakkausteho
• WWW-sivuille tulevat kaaviokuvat
  • Värimäärä mahdollisimman pieneksi.
  • PNG-formaatti.

Ohjelmistoja kuvien käsittelyyn

• Paint Shop Pro 7.0 30 päivän testiversio
• Macromedia Fireworks
• Photoshop 5.5
• Photo-Paint
• Irfanview Ilmainen

Yllämainittujen graafisella käyttöliittymällä varustettujen ohjelmien lisäksi voi käyttää myös komentoriviliittymällä toimivaa ImageMagick-ohjelmistoa, joka on täysin ilmainen ja löytyy useimmille eri käyttöjärjestelmille. Jukka Korpela on kirjoittanut pikaohjeen ImageMagickin asentamisesta Windowsiin. ImageMagic löytyy valmiiksi asennettuna atk-keskuksen st-sarjan (silmu, itu, verso) linux-koneista ja www-palvelimesta.

Lisätietoa kuvista ja kuvankäsittelystä

• Kuvat & WWW
• Grafiikkaformaat ja niiden käsittely
• Kuvankäsittely