Mediatyypit ja CSS-valitsimet - Demo 4

• Mallivideot
• Tulostus (print)
• Projisointi (projection)
• Mobiililaitteet (handheld)
• Valitsimet
• Lisätietoa

Näissä demoissa opetellaan lomakkeiden muotoilua CSS:llä, CSS:n mediatyyppejä tekemällä Nanonanon kotisivuille oma ulkoasu tulostusta, videotykillä esittämistä sekä mobiililaitteita varten. Lisäksi harjoitellaan tärkeimpien CSS-valitsimien käyttöä

Tulostus (print)

Tulostus -mallivideo

CSS-ulkoasupohjan päälle voi tarvittaessa tehdä lisä- tai muutosmäärityksiä erilaisten medioiden tarpeisiin.

• Tallenna print.css www-hakemistoon.
• Avaa Nanonanon sivustolla artikkelit/it-hakemistossa oleva XHTML-dokumentti ja lisää dokumenttiin linkki edellä tallentamaasi css-tiedostoon.
• Muuta lisäämäsi link-elementin media-attribuutin arvoksi print.

  <link rel="StyleSheet" href="../../print.css"
  type="text/css" media="print"/>

• Avaa Firefoxilla it-hakemistossa oleva sivu ja valitse Web developer toolbarista CSS|Display CSS By Media Type|Print
• Siirry muokkaamaan print.css-tiedostoa valinnalla CSS|Edit CSS
• Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen kannalta turhat sivuelementit eli Nanonanon sivujen tapauksessa .navbartop- ja .navbar-lohkot. Piilottaminen onnistuu display-ominaisuuden avulla:

  .navbartop, .navbar {
  	display: none;
  }

• Määritellään tulostukseen sopivat marginaalit body-elementille:

  body {
   margin-top: 1cm;
   margin-left: 1cm;
   margin-right: 1cm;
   margin-bottom: 1cm;
  }

  Määrittele haluamasi marginaalit. Oikeampi tapa olisi käyttää @page-valitsinta mutta sitä eivät selaimet juurikaan tue. Lisäksi täytyy muistaa, että määritellyt marginaalit tulevat käyttäjän omien tulostusasetusmarginaalien lisäksi.
• Tulostettaessa ongelmana voi olla esim. keskelle otsikkotekstiä osunut sivunvaihto. Tätä ongelmaa voi yrittää välttää page-break-before, page-break-inside ja page-break-after-ominaisuuksilla:
  • page-break-before määrää tehdäänkö sivunvaihto ennen lohkoa (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
  • page-break-inside määrää tehdäänkö sivunvaihtoja lohkon sisällä (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
  • page-break-after määrää tehdäänkö sivunvaihto lohkon jälkeen (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
  Kiellä sivunvaihdot otsikkoelementtien (h1,h2,h3,h4) jälkeen. Kiellä sivunvaihdot myös .kuva-tyyliltä ja poista kuvan leijutus (float: none;).
• Varmista vielä Firefoxin Print Preview -toiminnolla miten sivun tulostusasu muuttui.
• Lisää tulostusmuotoilut Nanonanon kotisivujen etusivulle. Mitä tulostusasetuksiin voisi vielä lisätä?
• Voit lisämuotoilla tulostusasua normaaleilla css-ominaisuuksilla jos haluat. Tarkemmin tulostamiseen liittyvistä erikoisasetuksista voit halutessasi lukea W3C:n CSS2.1 Paged media-sivulta.

Projisointi (projection)

Projisointi -mallivideo

CSS:stä löytyy oma mediatyyppi piirtoheittimellä ja videotykillä tehtäviä esityksiä varten. Voit kokeilla Operalla miltä tämä demosivu näyttäisi jos projection-median asetukset ovat käytössä. Käynnistä Opera-selain ja aseta se täysnäyttötilaan painamalla F11-näppäintä. Täysnäyttötilassa Opera käyttää projection-median ulkoasumäärityksiä.

projection-tilassa toimitaan sivuttain kuten paperitulostuksessakin joten kummassakin voi käyttää samoja css-ominaisuuksia. Lisää it-artikkeliin käyttöön projection.css-tyylitiedosto:

<link rel="StyleSheet" href="../../projection.css"
type="text/css" media="projection"/>

Lisää Amayalla projection.css-tiedostoon seuraavat määrittelyt:

• Poista näkyvistä navigointipalkit
• Suurenna kirjasimen koko kaksinkertaiseksi
• Pakota sivunvaihto aina ennen h2- ja h3-elementtejä
• Kiellä sivunvaihdot .kuva-tyylin sisällä
• Säädä koko sivun marginaalit sopiviksi

Valitettavasti Web Developer toolbar ei tunnista projection-mediatyyppiä.

Mobiililaitteet (handheld)

MobiiliCSS -mallivideo

WWW-sivuja selataan yhä enemmän kännyköillä, pda-laitteilla ja muilla pienillä vempaimilla. Näiden laitteiden suurin rajoitus on pieni näyttö. Sopivilla CSS-asetuksilla saadaan myös Nanonanon sivu näyttämään hienosti mobiililaitteissa.

• Ota Firefoxissa käyttöösi Handheld Tester
• Lisää it-artikkeliin viite handheld.css-tyyleihin:

  <link rel="StyleSheet" href="../../handheld.css"
  type="text/css" media="handheld"/>

• Valitse Web developer toolbarista CSS|Display CSS By Media Type|Handheld
• Kopioi handheld.css-tiedostoon pohjaksi koko demo2.css-tiedoston sisältö, jolloin kukin ominaisuus tulee uudelleenmääritellyksi. Älä siis poista ominaisuuksia vaan muuta niiden arvoja handheld-medialle sopiviksi!
• Aktivoi Handheld Tester Nanonanon it-artikkelisivulla ja muokkaa handheld.css-tiedostoa.
• Muokkaa handheld.css:ään sopivat CSS-säännöt, joilla saat sivun näyttämään siistiltä kapeassa ja matalassa selaimessa. Testaa sivua Handheld Testerin avulla. Mallia voit katsoa esim. tämän kurssisivuston handheld.css-tiedostosta. Huomioi erityisesti seuraavat seikat:
  • Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:

    img {
      max-width: 100%;
    }

  • Mobiililaitteiden näytöt ovat pieniä joten säädä sivun marginaalit minimiin. Poista turhat marginaalit myös muualta kuin body-elementistä.
  • Poista näkyvistä mahdolliset epäoleelliset osat sivusta.
  • Poista kaikki asemointi. Useimmat mobiililaitteet eivät tue asemointia mutta siltä varalta, että jokin tukee niin kaikki asemointi täytyy joko poistaa tai varmistaa, että asemoidut lohkot varmasti mahtuvat pieneen näyttöön. Helpointa tapa poistaa kaikki asemoinnit:

    position: static;

  • Muuta leivänmurunavigointi takaisin tavalliseksi listaksi.
  • Muuta sivun otsikoiden koot järkeviksi esim. h1-elementin kirjasinkoko voisi olla 120% ja h2 ja h3 jotain 100% ja 120% väliltä.
  • Määrää taulukoiden, textarea-elementin ja pre-elementin maksimileveydeksi 100%
  • Poista kaikki lohkojen leijutukset (float), koska niille ei juurikaan ole tilaa.
• Kokeile miten Operan Small Screen Rendering (SSR) -tekniikka näyttää Nanonanon sivut. Avaa sivu operalla ja paina Shift+F11 jolloin opera siirtyy emuloimaan kännyköitä. Painamalla uudelleen Shift+F11 opera palaa normaaliin näyttötilaan. Operan mobiiliversiota käytetään selaimena useissa kännyköissä.

Valitsimet

Valitsimet -mallivideo (HTML-kit)

Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Kopioi itsellesi V:-asemalle mallitiedosto. Valitsimista löytyy esimerkkejä luento 3:n sivulta. Aloita XetorjEditissä uusi CSS-tiedosto ja tallenna se valitsimet.css-nimellä V:-asemalle. Seuraavissa tehtävissä saat tehdä muutoksia vain ja ainoastaan tähän css-tiedostoon. Mitään muutoksia et saa tehdä edellä tallentamaasi mallitiedostoon vaan joudut miettimään millaisten valitsimien avulla pystyt seuraavat asiat toteuttamaan. Joudut kuitenkin tarkkaan tutkimaan millainen rakenne mallidokumentissa on.

Dokumentin rakennetta voit tutkia Mozillan DOM Inspector -työkalulla (Tools|Web Development|DOM Inspector). Valitsimien toimintaa sinun pitää testata Mozillalla tai Firefoxilla koska muilla selaimilla kaikki tarvitut valitsimet eivät välttämättä vielä toimi. Mallia voit katsoa myös esimerkkiratkaisun kuvakaappauksesta.

1. Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi
2. Muuta "Aliquam venenatis ipsum"-alkuisen kappaleen taustaväriksi harmaa
3. Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
4. Muuta navigointidivin sisällä oleva sed neque-teksti keltaiseks
5. Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555
6. Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi
7. Muuta listaa edeltävän tekstikappaleen ympärille musta raja
8. Muuta kaikkien niiden linkkien väri vihreäksi joissa on title-attribuutin arvona sana orci

Lisätietoa

• Authoring for Small-Screen Rendering (SSR)
• Making Small Devices Look Great
• Authoring for Small-Screen Rendering
• Web Pages With Multiple Views
• Writing For Devices
• XHTML and WML Elements in Nokia GSM Phones v1.1
• Browser Characteristics In Nokia GSM Phones v1.1
• Nokia Mobile Internet Toolkit 4.0