CLT132

1. CLT132 Vastauksia esille tulleisiin kysymyksiin CSS, Import & Kehykset (frames) (viikko 10)

2. Vastauksia kysymyksiin • Tällä viikolla, kuten edelliselläkin kerralla käsitellään aluksi jotain esille tulleita kysymyksiä • Nämä liittyvät enemmän tai vähemmän oleellisesti (tai ei ollenkaan...) päivän varsinaiseen teemaan, mutta aivan varmasti ovat kaikki hyödyllistä tietoa sinänsä CLT132 – kevät 2008 Sauli Nurmi

3. Oikea tapa kirjoittaa koodia • Aiemmin on jo käsitelty HTML-koodin kirjoittamista ja todettu, että sitä voi kirjoittaa täysin mielivaltaisen sekavasti • Selain ei välitä muotoiluista, ihminen välittää • Ihminen ei (tavallisesti) välitä syntaksivirheistä, selain taas sitäkin enemmän... CLT132 – kevät 2008 Sauli Nurmi

4. Koodia tyylimäärittelyissä • Sama edellä kuvattu perusperiaate pätee myös tyylimäärittelyissä – ja laajemmin ajateltuna ohjelmoinnissa kautta linjan • Sisäisesti konsistentti ja koherentti kirjoitustapa on tavoiteltavaa ja suositeltavaa, mutta koodia tulkitsevalle koneelle täysin yhdentekevää • Poikkeuksena eräät ohjelmointikielet... CLT132 – kevät 2008 Sauli Nurmi

5. Identtisiä määrittelyjä • Nämä kaikki tavat ovat selaimelle ja tietokoneelle identtisiä: { määritys } { määritys } { määritys } CLT132 – kevät 2008 Sauli Nurmi

6. Sama pätee Javassakin… • Nämä ovat identtiset koodit: Koodin lähde: http://www.mit.jyu.fi/~vesal/kurssit/ohj2/moniste/html/m-7_1.htm classHello { publicstaticvoid main(String[] args) { System.out.println("Helloworld!"); } } classHello { publicstaticvoid main(String[] args) { System.out.println("Helloworld!"); } } CLT132 – kevät 2008 Sauli Nurmi

7. Yhteenvedon tapaisesti • Jos ohjelmointi on tuttua, erilaisten muotoilujen sisältämä toiminnaltaan samanlainen koodi on täysin triviaali asia • Jos ohjelmointi ei ole tuttua, tämä voi aiheuttaa näennäisen ristiriidan logiikassa: • Jos koodin pitää olla eksaktia, niin miten täysin arbitraariset muotoilut sallitaan? • Oleellista huomata: eri kirjoitusasut toteuttavat saman syntaksin • Toisaalta: isot kirjaimet xhtml:n tageissä: virhe! CLT132 – kevät 2008 Sauli Nurmi

8. Tee mitä lystäät… • Mikäli meillä ei ole ulkoista painetta (esim. työnantajan käytännöt, jonkin typerän kurssin älytön ohjeistus yms.), on koodin kirjoitustavan valitseminen arbitraarista • Oleellista: ole systemaattinen!!! • Valitse mitä haluat, mutta käytä valintaa kautta linjan, ei siis yhtä tapaa yhdessä kohtaa, toista toisessa CLT132 – kevät 2008 Sauli Nurmi

9. Selainten väliset erot • Monia (ei välttämättä tällä kurssilla, mutta yleensä) hämmästyttää ja kummastuttaa selainten väliset eroavuudet • ...jotka ovat vielä melko pieniä verrattuna historialliseen tilanteeseen • Siltikin: selain A saattaa jossain tilanteessa toimia täysin eri lailla kuin selain B • Eli: jompikumpi selaimista toimii väärin • Tai: molemmat toimivat oikein, mutta asia on lähtökohtaisesti tulkinnanvarainen CLT132 – kevät 2008 Sauli Nurmi

10. Esimerkki, ALT-kuvaus • Kuvien vaihtoehtokuvaus toimii eri tavalla eri selaimissa: • IE: näyttää tekstin hiirellä osoittaessa • Firefox: ei näytä • Opera: ei näytä • WebbIE: näyttää tekstin hiirellä osoittaessa • Entä jos lisätään img-elementtiin title-attribuutti: • Kaikki näyttävät titlen tekstin; myös IE ja WebbIE valitsevat titlen altin sijasta CLT132 – kevät 2008 Sauli Nurmi

11. Esimerkki, takaisin navigointi • Mikäli käytössä on esim. viisinäppäiminen hiiri, jossa on back-nappula, miten se toimii? • (Selityksenä seuraavaan: näppämistön ja hiiren painamisessa on eri eventtejä: kun painetaan alas, kun päästetään ylös, jne.) • IE, Firefox: button-up eventillä • Siis kun nappulan nostaa pohjasta • Opera: button-down eventillä • Siis kun nappulaa painaa alas • WebbIE: ei toimi... CLT132 – kevät 2008 Sauli Nurmi

12. Esimerkki, keskitys • Laitetaan headiin seuraava määritys: <style type="text/css"> .testijuttu { text-align:center; } </style> CLT132 – kevät 2008 Sauli Nurmi

13. Esimerkki, keskitys (2) • Laitetaan bodyyn seuraava taulukko: <div class="testijuttu"> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>r2, c1</td> <td>r2, c2</td> </tr> </table> </div> CLT132 – kevät 2008 Sauli Nurmi

14. Esimerkki, keskitys (3) • Mitä tapahtuu? • IE ja WebbIE: taulukko keskitetään • Firefox ja Opera: taulukkoa EI keskitetä... • Muutetaan: • text-align:center; tilalle text-align:-moz-center; • HUOM! Nyt siis laitetaan määrityksen epästandardia koodia... • Mitä tapahtuu? • Firefox: taulukko keskitetään • IE, Opera ja WebbIE: taulukkoa EI keskitetä... CLT132 – kevät 2008 Sauli Nurmi

15. Esimerkki, keskitys (4) • Muutetaan vielä edellistä: • text-align:-moz-center; tilalle margin: 0 auto; • Lisämuutos: • siirretään class="testijuttu" div-elementistä table-elementin attribuutiksi • Mitä tapahtuu? • Firefox ja Opera: taulukko keskitetään • IE ja WebbIE: taulukkoa EI keskitetä... CLT132 – kevät 2008 Sauli Nurmi

16. Mitä tästä voidaan päätellä? • Muutama esimerkki muutamalla selaimella osoittaa, että sivunkuvausta todellakin voi tulkita monin eri tavoin • ...ja nämä esimerkit olivat kaikki Windows-selaimilla ja uusimmilla versioilla! • Miten esim. Unix- ja Macintosh-selaimet? • Vanhat versiot? • Mobiiliselaimet? • Pelikonsolien ja digiboksien nettiselaimet...? CLT132 – kevät 2008 Sauli Nurmi

17. “Viisas” neuvo... • KISS on paitsi rock-bändi, myös neuvo: • Keep It Simple, Stupid • Mahdollisimman yksinkertainen koodi (oletettavasti) tuottaa mahdollisimman vähän ongelmia • Täysi yhteensopivuus kaiken kanssa lienee kuitenkin melko mahdotonta (ehkä poikkeuksena 7-bittinen ASCII-teksti) • Tapauskohtaisesti löydettävä kompromissi visuaalisuuden ja yhteensopivan toiminnan välillä • Mahdollista luoda myös eri versioita • Lisäksi: edelliset keskitysesimerkit yhdistettynä tod.näk. tuottaisivat saman näköisen lopputuloksen eri selaimilla • Tärkeää silti huomioida: sama lopputulos olisi kuitenkin ERI lopputulos, koska sen saa aikaan eri elementtien erilaiset tyylimuotoilut, lopputuloksen identtisyydestä huolimatta CLT132 – kevät 2008 Sauli Nurmi

18. CSS, Import • Viimeinen CSS-tekniikka on import-tekniikka (usein nimetty @import) • Käytännössä tässä ei ole juuri mitään uutta… aiemmin opittu ulkoinen *.css tiedosto toimii sellaisenaan, erona ainoastaan tapa, jolla tiedosto liitetään dokumenttiin CLT132 – kevät 2008 Sauli Nurmi

19. CSS, Import, jatkoa • Tyylitiedosto importoidaan näin (head-elementissä): <style type="text/css">@import url("styles.css");</style> • Miten tämä eroaa linkityksestä? • Ainakin joissain tapauksissa mahdollista käyttää importia yhteensopivuutta lisäävänä tekijänä, ks. esim. http://webdesign.about.com/od/beginningcss/f/css_import_link.htm CLT132 – kevät 2008 Sauli Nurmi

20. 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: • Browser default • External style sheet • Internal style sheet (inside the <head> tag) • Inline style (inside an HTML element) http://www.w3schools.com/css/css_intro.asp CLT132 – kevät 2008 Sauli Nurmi

21. Importin käyttö • Import siis on käytännössä identtinen ulkoisen tyylitiedoston linkityksen kanssa, nykyselaimilla käyttö ja toiminta periaatteessa mielivaltaista ja keskenään vaihdettavaa • Importilla voi kuitenkin kikkailla yhteensopivuutta vanhempien selainten kanssa, mikäli tämä on tärkeää, kannattaa valita import linkin sijasta • Myös molemmat toimivat yhtä aikaa – toinen kysymys on se, miten järkevä ratkaisu on… CLT132 – kevät 2008 Sauli Nurmi

22. Lisää aiheesta • What's the Difference Between @import and link for CSS? - CSS FAQ http://webdesign.about.com/od/beginningcss/f/ css_import_link.htm • Tricking Browsers and Hiding Styles http://www.ericmeyeroncss.com/bonus/trick-hide.html • Hide CSS from browsers :: @import http://imfo.ru/csstest/css_hacks/import.php CLT132 – kevät 2008 Sauli Nurmi

23. Kehykset, frames • Viimeinen “iso asia” HTML:n suhteen on varmaankin kehysten käyttö • Kehyksillä siis tarkoitetaan ratkaisua, jossa sivu on jaettu useaan “laatikkoon” ja jokainen laatikko on itse asiassa oma itsenäinen sivu • Lisäksi on sivu, joka sitoo sivut yhteen • Yksinkertaistettuna siis: kehysten luominen tarkoittaa vain yhden (tai useamman) uuden sivun luomista CLT132 – kevät 2008 Sauli Nurmi

24. Kehykset, frames, jatkoa • Kuten lienee jo tässä vaiheessa selvää, kehysten käyttö ei ole nykyään suositeltavaa – vaikka yhteen aikaan se olikin todella suuri uutuus HTML-maailmassa • Nykyään kehystekniikan voi usein korvata dynaamisesti generoiduilla sivuilla (PHP, ASP, yms.) joissa saavutetaan kehystekniikan edut, mutta sivuutetaan haitat • Etuja: saadaan samaan näkymään sisältöä useasta eri lähteestä • Haittoja: käyttö monimutkaistuu, tietyt toiminnot (kuten ääniselaaminen) tulevat vaikeiksi CLT132 – kevät 2008 Sauli Nurmi

25. Esimerkkejä (ehkä varoittavia) • Seuraavat sivut pitäisivät olla useimmille jo entuudestaan tuttuja, nämä siis käyttävät kehystekniikkaa • Vasabåtarna… -en nostalgi tripp! http://www.vasabatarna.se/ • Long Life (formerly The Immortalist) http://www.cryonics.org/immortalist/index.htm • Sivuilla on varmaankin paljon asiaa (ainakin laivoista tai kryoniikasta kiinnostuneille), mutta kehysrakenne ei välttämättä selkiytä selaamista – etenkin jälkimmäinen sivusto on suoraan sanottuna syvältä! CLT132 – kevät 2008 Sauli Nurmi

26. Vertaa tähän • Seuraava sivusto on ehkä jonkun mielestä hieman sekavan näköinen, mutta se EI käytä kehyksiä http://www.kennetti.fi/ • Joissain asioissa sivusto vaikuttaa aika kauhealta, mutta koska sen on tehnyt henkilö, joka ylläpitää työkseen Särkänniemen kummitusjunaa (Orlochlessin torni), ehkä sivusto on tarkoituksella teemoitettu kuten on – toisinaan raja huonon HTML:n ja teemoitetun sisällön välillä on arbitraarinen… toinen kysymys on se, ymmärtääkö käyttäjä asiat samoin kuin tekijä CLT132 – kevät 2008 Sauli Nurmi

27. Kehyksen laatiminen • Kehyksen laatiminen on tässä vaiheessa opintoja jo täysin triviaalia: laaditaan yksi HTML-sivu, joka käytännössä vain jakaa itsensä joko horisontaalisesti tai vertikaalisesti kahteen alueeseen • Annetaan alueille jokin nimi (avautuvat linkit siis ”tähdätään” tietyn nimiseen kehykseen) • Määritellään myös kehysalueiden koko • …ja siinäpä se. • Tietenkin usein yksi kehys sisältää toisen kehysjaon, jne. jolloin kokonaisuutena ratkaisu voi olla hyvinkin monimutkainen (valitettavasti) CLT132 – kevät 2008 Sauli Nurmi

28. Kehyksen laatiminen esimerkki • Sivulla kehykset ylhäällä ja alhaalla (rajattu keskeltä): <frameset rows="50%,50%"> <frame src="frame_a.htm" name="ylakehys"> <frame src="frame_b.htm" name="alakehys"> </frameset> • Sivulla kehykset oikealla ja vasemmalla (rajattu ¼ ja ¾): <frameset cols="25%,75%"> <frame src="frame_a.htm" name="vasen_kehys"> <frame src="frame_b.htm" name="oikea_kehys"> </frameset> CLT132 – kevät 2008 Sauli Nurmi

29. Target-attribuutti • Kehystekniikan ”juju” on target-attribuutin käyttö • Linkin täytyy siis sanoa minkä nimiseen kehykseen linkki avautuu – lisäksi täytyy totta kai olla samalla tavalla nimetty kehys • Esim. edellisen kehysesimerkin frame-elementtien name-attribuuttien oltava samat kuin niihin linkittävien a-elementtien target-attribuuttien CLT132 – kevät 2008 Sauli Nurmi

30. Target-attribuutti, jatkoa • Mikäli jollekulle on jäänyt epäselväksi target-attribuutti, tässä kertausta muutamasta standardista attribuutista • target="_blank" • Avaa tyhjän sivun • target="_new" • Avaa uuden sivun • Edellisten ero on epäselvä… ne voivat toimia (tai olla toimimatta) samalla tavalla tai eri tavalla • Periaatteessa ensin mainitun pitäisi avata nykyselaimissa uusi välilehti, jälkimmäisen uusi ikkuna (uusi selainohjelman instanssi) CLT132 – kevät 2008 Sauli Nurmi

31. Target-attribuutti, vielä jatkoa • Lisäksi on seuraavat standardit määrittelyt • target="_self" • Avaa linkin “itsensä päälle” • target="_top" • Avaa linki “kaiken päälle” • Edellisten ero on esim. siinä, miten tapahtuu kehyksen sisällä olevassa linkissä: ensin mainittu avaa sen kehyksen sisällä, jälkimmäinen koko selainikkunan laajuuteen (korvaa siis kehysrakenteen, jonka osa on) • Tässäkin tapauksessa selainten asetukset voivat vaikuttaa siihen, miten nämä toimivat käytännössä CLT132 – kevät 2008 Sauli Nurmi

32. Omat target-attribuutit • Kehyksen nimissä voi käyttää mielivaltaisia nimiä, on tosin suositeltavaa pitää tässäkin tapauksessa nimeämiskäytäntö toimintaa kuvaavana • Ongelmia on tiedossa, mikäli nimeää kaksi kehystä samalla nimellä… (paitsi jos valinta on tietoinen, syystä tai toisesta) • Kuten edellä mainittu, oleellista on muistaa käyttää täysin identtisiä nimiä sekä linkeissä että kehyksissä, muuten homma ei tietenkään pelitä alkuunkaan… • Muuten asiassa ei pitäisi olla mitään kovin monimutkaista, ohjelmointia osaaville käyttö voi tuntua vähän samalta kuin muuttujien nimeäminen ja käyttö CLT132 – kevät 2008 Sauli Nurmi

33. Lisää aiheesta • HTML Frames http://www.w3schools.com/html/html_frames.asp • Frames in HTML documents http://www.w3.org/TR/html4/present/frames.html • Kehykset (frames) http://www.cs.tut.fi/~jkorpela/webjulk/3.8.html CLT132 – kevät 2008 Sauli Nurmi

34. Viikon oleellisin asia • Oppia ymmärtämään CSS:n import-tekniikan käytön periaatteet • Oppia kehystekniikan periaatteet • Jos jotain jää mieleen selainten välisistä eroista periaatteessa, niin hyvä (käytännössä näitä ei täysin osaa kukaan kattavasti) CLT132 – kevät 2008 Sauli Nurmi