1 / 34

CLT132

CLT132. Vastauksia esille tulleisiin kysymyksiin CSS, Import & Kehykset (frames) (viikko 10). Vastauksia kysymyksiin. Tällä viikolla, kuten edelliselläkin kerralla käsitellään aluksi jotain esille tulleita kysymyksiä

verlee
Download Presentation

CLT132

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related