CLT132 Visuaalisuus: suunnitteluperiaatteita CSS, Internal Style Sheet (viikko 8)

Esitys aiheesta: "CLT132 Visuaalisuus: suunnitteluperiaatteita CSS, Internal Style Sheet (viikko 8)"— Esityksen transkriptio:

1 CLT132 Visuaalisuus: suunnitteluperiaatteita CSS, Internal Style Sheet (viikko 8)

2 CLT132 – kevät 2008Sauli Nurmi Kuva, teksti ja värit Lienee ilmiselvää, että kuva, teksti ja värit ovat tärkeimpiä elementtejä www- sivuilla Ei ole yhtä ilmiselvää, milloin ja miten niitä pitäisi käyttää On perusperiaatteita, joita on hyvä noudattaa, mutta lopulta asia on aina tapauskohtainen

3 CLT132 – kevät 2008Sauli Nurmi Kuva, teksti ja värit, jatkoa Pääsääntöisesti tärkein elementti on aina tekstisisältö (HyperText Markup Language), jota voi tukea kuvilla ja väreillä (jotka eivät siis periaatteessa idealistisesti kuuluisi HTML:ään…) Hyvä neuvo suunnittelussa on miettiä, mitä tahtoo sivuilla sanoa Seuraava askel on miettiä, tukeeko kuvien tai värien käyttö sanomaa… jos ei, silloin ne ovat (periaatteessa) turhia

4 CLT132 – kevät 2008Sauli Nurmi Idealismi vs. realismi Käytännössä Internet on täynnä asioita, jotka eivät ole periaatteessa ”oikein” Esim. kuvagalleriat… Turhan tiukka idealismi johtaisikin tilanteeseen, missä Internet olisi vain mustaa tekstiä valkoisella pohjalla, eli lähinnä sähköinen lomakearkisto Visuaalisuutta ja kikkailua ei kannata täysin hylätä, mutta kannattaa silti käyttää niitä tehokeinoina, ei itseisarvona

5 CLT132 – kevät 2008Sauli Nurmi SUCK!!!!!!!! Internet on myös täynnä sivuja jotka ”sucksii” ja kybällä Vikaa voi olla joko sisällössä (määrittely subjektiivista) tai toteutuksessa (jossain määrin objektiivista – muista suunnitteluperiaatteet) Hyviä (!?) esimerkkejä löytyy esimerkiksi tältä sivustolta: http://www.webpagesthatsuck.com/

6 CLT132 – kevät 2008Sauli Nurmi Yleisiä virheitä Virheet ovat jo jossain määrin tuttuja kurssin aiemmista tehtävistä ja esimerkeistä, kertauksen vuoksi: Liian isojen tai sekavien kuvien käyttö Epäsopivat “väkivaltaiset” värit Sekava tai toimimaton navigaatio Satunnaisuus tai epäjohdonmukaisuus, mikä saa käyttäjän epätietoiseksi Kaksi ensimmäistä ovat visuaalisuuden kompastuskiviä Nämä voivat myös aikaansaada esim. kolmannen!

7 CLT132 – kevät 2008Sauli Nurmi Selvää tekstiä, kiitos Kuvien (+värien) käyttö navigaatiossa voi olla näyttävää, mutta johtaa huonosti suunniteltuna ongelmiin Esim. mitä jos kuvat eivät lataudu? Onko ALT-teksti informatiivinen (tai ylipäätään olemassa) ja ajaako se saman asian esim. klikattavana linkkinä? Oma erityisryhmänsä on näkövammaiset, jotka eivät voi käyttää joitakin sivuja ollenkaan

8 CLT132 – kevät 2008Sauli Nurmi Oppia vastaesimerkin kautta Charles Simonyi (Microsoft-miljardööri ja avaruusturisti) on omalla kustannuksellaan luonut informatiivisen avaruusmatkasivun http://www.charlesinspace.com/ Sivu on näyttävä visuaalisesti ja teknisesti, mutta Flash-toteutuksen vuoksi… Tekstiä ei voi kopioida Yksittäisiä alasivuja ei voi ”bookmarkata” Näkövammaiset eivät saa sivusta muuta irti kuin otsikon (title): Charles in Space

9 CLT132 – kevät 2008Sauli Nurmi Hyvä lähtökohta Lähtökohtaisesti marginaaliryhmien ehdoilla suunnittelu ei periaatteessa ole suositeltavaa, kuitenkin esim. näkövammaisten huomioinen www- suunnittelussa tuottaa sivuja, jotka ovat selkeitä myös normaalikäyttäjälle

10 CLT132 – kevät 2008Sauli Nurmi HTML + CSS “Uusi” standardointi HTML + CSS on itse asiassa paluuta peruslähtökohtiin HTML on tekstisisältö CSS on muotoilu Mahdollistaa saman sisällön tarjoamisen eri kohderyhmille! Esim. näkövammaisen ääniselain lukee vain HTML-sisällön, normaaliselain taas esittää sen CSS:n määrittelemänä

11 CLT132 – kevät 2008Sauli Nurmi Text-to-speech Sama periaate on näkövammaisten lisäksi laajempikin kieliteknologinen lähestymistapa: mahdollistetaan tekstin koneellinen muutos puheeksi! Flashiä, Javaa tai kuvia on näkevän ihmisenkin vaikea tulkita puheena, saati sitten kognitiivisesti epäpätevän koneen

12 CLT132 – kevät 2008Sauli Nurmi Text-to-speech, jatkoa Muunnosta tekstin ja puheen välillä käsitellään syvällisemmin muilla opintojaksoilla, esim. puhesynteesin kurssit HTML:n kannalta tärkeää on tiedostaa se, että pelkistetty teksti on helposti muutettavissa puheeksi Esim. … tagien väli on suhteellisen triviaalia lukea koneellisesti ääneen (mikäli sisältö on jotain oikeaa, synteesiksi mallinnettua kieltä)

13 CLT132 – kevät 2008Sauli Nurmi Suunnittelun apuvälineitä Näkörajoitteisille suunnattujen sivujen suunnitteluun luotuja apuvälineitä voi käyttää myös muuten Hyvä apusivu on Colorblind Web Page Filter, jossa on mahdollista valita esim. eri värisokeuksien mukaisia filttereitä ja katsoa miltä sivu näyttää http://colorfilter.wickline.org/

14 CLT132 – kevät 2008Sauli Nurmi Apuvälineitä, jatkoa Saavutettavuuden (accessibility) tarkistamiseen on tietenkin myös dedikoituja validaattoreita, kuten http://www.cynthiasays.com/ + muita... Toimintaperiaate on sama kuin millä tahansa HTML-validaattorilla

15 Kokeile käytännössä CLT132 – kevät 2008Sauli Nurmi Näkövammaisille on omia erityisselaimia, kuten (ilmainen) WebbIE http://www.webbie.org.uk/ Seuraksi on hyvä asentaa jokin “screenreader”, kuten vaikka tämä http://www.screenreader.net/ Kokeilepas vaikka yliopiston “hienoa” Alma-portaalia tällä yhdistelmällä...

16 CLT132 – kevät 2008Sauli Nurmi Lisätietoa aiheesta Saavutettavuuteen liittyen on olemassa hyviä online-materiaaleja, tässä muutama: Saavutettava.fi http://saavutettava.fi High accessibility, high design http://www.naarvoren.nl/artikel/high_accessibility Web Accessibility http://webdesign.about.com/od/accessibility/ Web_Accessibility_Web_Usability.htm

17 CLT132 – kevät 2008Sauli Nurmi Onko kaikki tämä oleellista? Hyvän www-suunnittelun näkökulmasta: KYLLÄ. Kieliteknologin yleissivistyksen näkökulmasta: vielä enemmän KYLLÄ.

18 CLT132 – kevät 2008Sauli Nurmi Standardipeliä Oleellista on tässäkin asiassa noudattaa standardeja ja suosituksia Standardit ja www tosin ei ole maailman onnellisin avioliitto… Mikäli koodi tukisikin standardeja, tukeeko selain? Testaa itse (paras tulos 100/100): http://acid3.acidtests.org

19 CLT132 – kevät 2008Sauli Nurmi CSS, Cascading Style Sheets Kurssin eräs pääteemoista on CSS eli Cascading Style Sheets Wikipedian mukaan suomeksi: kaskadiset tyyliohjeet Visuaalisen muotoilun ohjeita Vertaa näitä elementtien attribuutteihin, molemmat tekevät saman asian Suosituksen mukaisesti CSS, käytännössä myös attribuuttimenetelmä toimii yhä

20 CLT132 – kevät 2008Sauli Nurmi CSS-shokkihoito Tässä kaikki neljä tapaa hoitaa CSS:n liittäminen osaksi dokumenttia: 1) STYLE-elementissä (Internal Style Sheet) 2) Linkitetyssä määritysdokumentissa (External Style Sheet) 3) Kussakin yksittäisessä elementissä attribuutin tavoin (Inline Styles) 4) Importoimalla ulkopuolinen määritys (@import)

21 Universaali tyylimääritys Kuten edellä todettu, esim. STYLE- elementin määritys dokumentin alussa määrittää koko dokumentin tyylin Ulkoiset tiedostot voivat määrittää useiden dokumenttien tai kokonaisten sivustojen tyylejä Vertaa: 1000 sivun ulkoasun muuttaminen käsityönä on tuskaa, yhden tiedoston muuttaminen triviaalia CLT132 – kevät 2008Sauli Nurmi

22 Internal Style Sheet Internal Style Sheet on dokumentin sisäinen elementti, jota merkataan style-tagein HUOM! Style-attribuutti tulee vain Inline Styleen, eli elementtikohtaiseen tyylimääritykseen Tulee yleensä HEAD-elementin sisään HEAD on metatietoa, eli tietoa tiedosta, ja tyylimääritys on tietoa dokumentin tyylistä CLT132 – kevät 2008Sauli Nurmi

23 Internal Style Sheet, jatkoa Internal Style Sheet määrittää muotoilut niille elementeille, joiden määrittelyt se sisältää Ei määritystä merkitsee oletusmäärityksen käyttöä (joko selaimesta tai universaalimäärityksestä, esim. External Style Sheet) Inline Style ajaa Internal Style Sheetin ohi (jos ja vain jos se on elementissä) CLT132 – kevät 2008Sauli Nurmi

24 Cascading Order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1) Browser default 2) External style sheet 3) Internal style sheet (inside the tag) 4) Inline style (inside an HTML element) http://www.w3schools.com/css/css_intro.asp CLT132 – kevät 2008Sauli Nurmi

25 Esimerkki hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} http://www.w3schools.com/css/css_howto.asp CLT132 – kevät 2008Sauli Nurmi

26 Esimerkki, selitettynä head-elementin alkutagi style-elementin alkutagi hr {color: sienna} vaakaviivan tyylimääritys (vaikuttaa jokaiseen elementtiin) p {margin-left: 20px} kappaleen tyylimääritys (vaikuttaa jokaiseen elementtiin) body {background-image: url("images/back40.gif")} bodyn tyylimääritys, lisää tässä myös taustakuvan sivulle CLT132 – kevät 2008Sauli Nurmi

27 Käyttö käytännössä Tyylin määrittely kertaalleen HEADissa vaikuttaa kaikkiin määriteltyihin elementteihin dokumentissa CSS:ssä on älykäs sisäkkäinen periytyminen, ts. sisempi elementti (yleensä) perii ulomman ominaisuudet Katso esim. http://www.hytti.uku.fi/~ppaakkon/css.html#periytyminen CLT132 – kevät 2008Sauli Nurmi

28 Käyttö käytännössä, jatkoa Elementtejä voidaan myös määritellä joukossa tai yksinään Class-attribuutti määrittää joukon, ID- attribuutti yksilön Näillä saavutetaan periaatteessa samantapainen lopputulos kuin Inline- määrityksellä (eli style-attribuutilla) CLT132 – kevät 2008Sauli Nurmi

29 Esimerkki, attribuutit (1/4).punkku {color: red}.sinkku {color: blue} Määritellään siis punkku punaiselle värille ja sinkku siniselle… tämän jälkeen näitä voi käyttää class- attribuutin arvona CLT132 – kevät 2008Sauli Nurmi

30 Esimerkki, attribuutit (2/4) Tämän jälkeen koodissa voidaan käyttää näitä seuraavalla tavalla: Terve, terve. Moro, moro. CLT132 – kevät 2008Sauli Nurmi

31 Esimerkki, attribuutit (3/4) #matti {color: red} #maija {color: blue} ID-toimii periaatteessa samalla tavalla, mutta pisteen tilalle tulee määritykseen ”risuaita” CLT132 – kevät 2008Sauli Nurmi

32 Esimerkki, attribuutit (4/4) Tämän jälkeen koodissa voidaan käyttää näitä seuraavalla tavalla, huomaa että ID:n on oltava yksilöivä eli kahdella elementillä ei saa olla sama ID: Matti on dorka. Maija on ihq. CLT132 – kevät 2008Sauli Nurmi

33 Lisää aiheesta CSS Tutorial http://www.w3schools.com/css/default.asp CSS - Tyylimäärittely http://www.hytti.uku.fi/~ppaakkon/css.html Johdanto CSS-tyyliehdotuksien käyttöön Web-sivuilla http://weppipakki.com/css/tekstit/cssintro.htm

34 CLT132 – kevät 2008Sauli Nurmi Viikon oleellisin asia Ymmärtää hyvän sivusuunnittelun lähtökohdat, esim. suhteessa saavutettavuuteen Osata toteuttaa Internal Style Sheet – sivunmuotoiluja käytännössä Ainakin periaatteellisella tasolla sisäistää kaskadinen järjestys sekä esim. class- ja id-attribuuttien toiminta