Tervehdys vain kaikille täältä Sveitsistä!
Rekisteröidyin eilen tänne kun kaipasin kipeästi webbisivujenteko-ohjeita ja keskustelu näytti täällä varsin asialliselta/asiantuntevalta ja vilkkaalta. Sain tehtäväkseni suunnitella (tai oikeammin päivittää) pienimuotoiset websivut pikkufirman yhtä projektia varten, jossa itsekin olen mukana. Nykyiset sivut löytyvät osoitteesta:
http://eija.home.cern.ch/eija/index.htm
Tämän hetkinen aikaansaannokseni puolestaan löytyy osoitteesta:
http://kokko.web.cern.ch/kokko/
Kaipaisin nyt muutamaa pikku vinkkiä noita "omia" sivujani koskien:
1.
Eli ensimmäinen ongelma koskee vierityspalkkeja. Olen määritellyt keskimmäisen "mainframen" leveydeksi * ja korkeudeksi *, joka siis tarkoittaa, että sivun pitäisi täyttää jäljellä oleva tila kun siitä vähennetään ulkokehyksen leveys 800 pikseliä ja vasemman ja oikean kehyksen leveys yht. 200 pikseliä sekä ylä ja alakehyksen leveydet 140 pikseliä ja 25 pikseliä. No nyt kun kirjoitan tekstiä pääkehykseen niin kaikki menee hyvin aina siihen asti kunnes teksti alkaa valumaan alareunasta yli ja selaimen pitää ottaa vierityspalkit käyttöön. Eli vierityspalkit ilmestyvät myös alareunaan vaikka näin ei pitäisi käydä. Tämän voit todeta klikkailemalla HOME- ja PERSONNEL-linkkejä. Tämä tapahtuu testaamistani kahdesta selaimesta IE:llä. Opera osaa näyttää sivun oikein. Olen kokeillut määrittää sivun sisällön kehykseen, jonka leveys olisi 100% tai vain 500 pikseliä, mutta tulos on yhtä laiha. Jostain ihmeen syystä sivu levenee itsestään kun sisältö sivulla ylittää kehyksen alareunan. Kokeilin määritellä taulukon myös CSS:llä eikä sekään auttanut. Miten tuon saisi korjattua niin, että sivu skaalautuu hyvin eli leveys on aina 100%, mutta vierityspalkkeja ei ilmesty alareunaan?
2.
Toinen ongelma koskee sivujen avausta kehyksiin. Elikkäs kun klikkaan PUBLICATIONS-linkkiä niin haluaisin, että vasempaan kehykseen avautuu sivu jossa on lueteltu vuosiluvun mukaan kaikki julkaisut ja thesikset ja mainframeen avautuu itse PUBLICATIONS-pääsivu. Nyt käyttäjä joutuu klikkaamaan ensin PUBLICATIONS-linkkiä ja sen jälkeen toisen kerran Publications-linkkiä, joka sitten avaa tämän linkkivalikkosivun vasempaan kehykseen. Miten saisin avattua kummankin sivun yhtä aikaa (eri kehyksiin) vain PUBLICATIONS-linkkiä klikkaamalla?
3.
Tämä kohta koskee sivujen muuta ulkoasua eikä varsinaisesti kaipaa vastausta mihinkään ongelmaan, joten voit skipata kohdan jos siltä tuntuu. Eli nyt voit laittaa kommentteja sivujen ulkoasusta, joskaan se ei ole tarpeellista (jos laitat niin pyri olemaan hellä, sillä murskaava kritiikki ei ole koskaan mukavaa, vaikka se olisi asiallistakin monien tuntien vääntämisen jälkeen). Laitoin sivujen
linkin myös sivujen tilaajalle ja häneltä tuli seuraavanlainen kommentti:
"Se on kylla hieman turhan
jäykkä minun makuuni, värit ovat vahvat ja reunat terävät.
Teksti on tungettu pieneen, vain osittain ruudun
tayttavaan tilaan. Vanhat sivut ovat mukavasti "ilmavat".
Mutta linkit on selkeasti esitelty, ja sivuilla
liikkuminen on näppärää. Näistä tulee oikein hyvat
webbisivut."
No sanotaan, että asiakashan on aina oikeassa, mutta silti mieleni tekee perustella hänelle omia valintojani. Väittelemään professorin kanssa en uskalla alkaa, sillä uskon, että hän on siinä asiassa entinen pertti :D Eli nykyisiin sivuihin verrattuna jäykkyyttä on pyritty poistamaan tekemällä sivuista enemmän skaalautuvat (eri näyttötiloihin ja ikkunassa toimivaksi), niin että itse asia pysyy aina ikkunan keskellä. Väreistä sen verran, että sininenhän tunnetusti rauhoittaa ja ainakin se sopii windowsin kanssa hyvin yhteen (heikko perustelu) :D Anyway, ajattelin lisätä skaalautuvuutta vielä poistamalla linkkivalikon ylhäältä ja siirtämällä sen vasempaan frameen. Silloin ne pysyisivät näkyvillä koko ajan, vaikka sivua kavennettaisiinkin ikkunassa. Muut linkit voisivat aueta oikeanpuolimmaiseen frameen. Lisäksi saisin tällä operaatiolla lisää pystysuuntaista tilaa itse pääkehykselle. Alakehyksen W3C-ikonit pitäisi kanssa saada siirrettyä muualle, jotta linkit alakehyksessä pysyvät näkyvissä kun sivua kavennetaan. Niiden jatkosijoituspaikkaa en ole vielä päättänyt.
Kiitoksia jo etukäteen jos sait vastattua edes kahteen ensimmäiseen ongelmaan. Niiden ratkaiseminen on nyt kaikken kiireellisintä. Kokeilenpa uudelleen lähettää tämän. Ensimmäisellä kerralla tuli vain viestit "Virheelliset käyttäjätiedot! ja Tietokantaan ei saatu yhteyttä!", jonka jälkeen jouduin kirjoittamaan koko tekstin uudelleen. Asiasta viisastuneena tallennan sen nyt etukäteen notepadilla :)
- Jari -
1. Tuo on IE:n bugi.
http://www.noscope.com/journal/2004/02/ie-horizontal-scrollbar-bug
2. Javascriptillä, muistaakseni jotenkin tähän tyyliin:
<a href="publications.htm" target="main" onclick="top.frames['vasen'].location.href = 'vuosiluvut.htm';"> PUBLICATIONS </a>
3. En näe yhtään hyvää syytä miksi käyttää frameja tuolla sivustolla.
3. Myöskään minä en näe kehysten käytölle mitään syytä. Alkuperäinen sivusto on toteuttu ilman niitä, joten en suosittelisi sinua huonontamaan sivuston käytettävyyttä ja saavutettavuutta.
Alkupäisen sivuston väritys on huomattavasti rauhallisempi ja vähemmän hyökkäävä kuin uuden version.
Selkeydeltään ja ulkoasultaan alkuperäinen sivusto on mielestäni parempi kuin uudistettu painos. Uudistettu painos tuo mieleen 90-luvun internetsivustot, jolloin suuret kontrastit ja kehykset olivat in. Toisaalta nykyistä pastellilinjaakaan ei pitäisi aina noudattaa.
Sivuston tekeminen kiinteän 800 pikselin levyiseksi on toisaalta hyvä ja taas toisaalta huono idea. Ideanahan ilmeisesti on, että sivusto näkyy kokonaisena kaikilla (myös niillä jotka tuskailevat 800x600 reson kanssa), muista kuitenkin ottaa huomioon myös mahdolliset selaimen reunukset ja toisinaan ilmestyvän vierityspalkin tila -> leveys about 770-780px. Toisaalta oikein toteutettu <div>/CSS- rakenne mahdollistaa huomattavasti paremman skaalautuvuuden kuin kiinteästi määritetyt arvot.
Ensisijaisesti suosittelen luopumaan kehyksistä ja palaamaan hetkeksi takaisin suunnittelupöydän ääreen.
http://www.aniway.fi/www_palvelu_kehykset.htm
http://ratkaisu.aisengaad.com/pages/frames.html
Kiitoksia paljon. Sain homman toimimaan oikein mallikkaasti nyt. Kumarrus folion suuntaan :)
Tuos frameasiasta sen verran, että itse on oikein vielä ymmärrä mikä niissä on niin hankalaa hyväksyä? Yritin googlettamalla saada asiaa selvemmäksi, mutta en löytänyt oikein yhtään hyvää perustetta sille miksen voisi käyttää frameja. Yleisin kommentti oli, ettei "niistä ole haittaa jos niitä käyttää tyylillä". Kuitenkaan tuorein XHTML1.1 specifikaatio ei niitä enää tue joten jotain "mätää" niissä varmaan täytyy olla, mutta mitä. Itse nettiäkin paljon käyttävänä en yleensä huomaa jollakin sivustolla ollessani, että onko siellä käytetty frameja vai ei. Luulisi sen nopeuttavan selailuakin kun selaimen tarvitsee ladata vain (yleensä) yksi frame-sivu kerrallaan eikä koko hässäkkää kaikkine herkkuineen. Mitä tulostukseen tulee niin sitä vartenhan CSS ja XHTML on ymmärtääkseni kehitetty, että voin antaa tulostimelle eri muotoiluasetukset ja näin ollen sivu tulostuu sellaisena kuin sen pitääkin. Tämä pitäisi kuitenkin tehdä tulostettavaksi tarkoitetulle dokumenttisivulle oli frameja tai ei.
************************************************
Huomasin, että tuohon edelle oli jo tullut uusi kommentti sillä aikaa kun kirjoitin omaani.
Värityksen suhteen voisi tehdä muutoksia vaalentamalla nykyistä tummaa sinistä. Lukaisin jo tuon ensimmäisen linkin sisällön eikä sielläkään oltu mielestäni annettu yhtään "oikeaa" perustetta kehyksien poistamiseksi. Hakukoneetkin voi ymmärtääkseni ohjata link rel -attribuutilla pääsivulle tai sitten lisätä java scriptin pätkä "alisivulle". Lisäksi kehyksillä saavutetaan niitä etuja mitkä muuten poistuisivat eli siteeraten ensimmäisen linkin sisältöä:
a) Elementtien säilyminen tietyllä paikalla
b) Helppo päivitettävyys
Kuitenkaan kun sivut joita teen eivät ole laajat ja navigointi on todella helppoa ja asia löytyy heti niin minusta kehysten käytölle ei ole mitään todella hyvää estettä. Koska tässä kuitenkin vasta opiskellaan kotisivujen tekoa niin voisi tutkia mitä tuo Templaten pohjalle tehty kotisivu sitten tarkoittanee. Ymmärsin sen olevan joten kuten eri asia kuin erillisten sivujen luominen. Luen vielä tuon toisen linkin...
Luin senkin ja siellä oli toistettu samat asiat kuin ensimmäisessä linkissä todeten myös se, että frameja voi käyttää jos se on perusteltua ja sen "osaa" tehdä. 800x600 resoluutio ei ole ongelma kuten hyvin itsekin kokeilemalla sen voit todeta. Ylä- ja alaframen skaalautuvuudesta olenkin kirjoittanut jo aiemmin.
Jos jollakin on tietoa miten sivut voisi samaan tyyliin toteuttaa ilman frameja näitä "templateja" käyttäen niin olisi mukava saada siitä pieni alkuopastus höystettynä muutamalla linkillä :) Olisihan se kiva saada XHTML1.1 sertifiointi, vaikka sen merkitys netin käyttäjille tutkimuksen mukaan oli häviävän pieni (kuten oikeaoppisen koodin yleensäkin), vaikka frameja vastustettiin viimeiseen asti :D Hyvänä esimerkkinä tämä koodaussivusto, joka ei läpäise http://validator.w3.org validaattoria. Kuten sanoin niin vasta tässä opetellaan ja CSS -kieltäkin tutkin ensimmäisen kerran vasta muutama päivä sitten.
Kun kerran olet vasta opiskelemassa sivustojen tekoa, niin suosittelisin opiskelemaan ajantasaisia tietoja (aina ei kannata aloittaa pohjalta oppiakseen asioita).
EterAnal kirjoitti:
en löytänyt oikein yhtään hyvää perustetta sille miksen voisi käyttää frameja
Suurin vika on se, että alasivuille linkittäminen menee rikki. Tykkään manata alamaan henkiä sivuntekijän vaivoiksi, jos joudun kaivamaan linkin HTML-sorsan joukosta esim. IRC:n pastettavaksi. Lisäksi, kuten jo huomasitkin, kehyksistä koituu kaikenlaista muuta vaivaa, jota joutuu purkkakorjaamaan javaskriptillä, jonka varaan ei mitään oleellista toiminnallisuutta pitäisi laskea. Ja navigaatio on minusta aika oleellista.
Ja vielä eräs seikka. Kävin tämän "janne-t" nimimerkin sivuilla vanhemmalla Operan kutosversiolla ja sivut eivät toimeet ollenkaan. Muita vanhemman version selaimia ei tällä hetkellä ole käytössä, mutta pointti on myös siinä, että yritän tehdä sivut niin, että ne toimisivat myös muutamaa kuukautta vanhemmilla selainversioilla. Nyt ei ole kysymys näytönohjaimista. Yleensäkään uskoisin, että ei kannata heti pyrkiä noudattamaan sitä uusinta tekniikkaa vaan valitsee sen kultaisen keskitien. Koska sivut toimivat myös koneessa, joka käyttää 800x600 resoluutiota niin olettaisin tässä koneessa pyörivän myös pikkuisen ikääntyneen selaimen :O Sivustoon http://www.aniway.fi/www_palvelu_kehykset.htm viitaten joudun käyttämään php/css/java-script kikkailuja jos aion toteuttaa jotkut framejen ominaisuudet ilman frameja. Uskoisin tämän supistavan jonkin verran yhteensopivuutta.
"Suurin vika on se, että alasivuille linkittäminen menee rikki. Tykkään manata alamaan henkiä sivuntekijän vaivoiksi, jos joudun
kaivamaan linkin HTML-sorsan joukosta esim. IRC:n pastettavaksi."
Ainakin Operasta on löytynyt jo kauan valinta "Kopioi osoite", joka siis suoraan kopioi alasivun osoitteen ;) Tämä ei kuitenkaan poista sitä framejen "suurinta" ongelmaa mikä näyttäisi siis olevan tämän suoran linkityksen mahdottomuus. Koska tässä tapauksessa kyseessä on pieni sivusto niin en pidä moista ominaisuutta tarpeellisena. Nopea navigointi korvaa tämän puutteen.
"Lisäksi, kuten jo huomasitkin, kehyksistä koituu kaikenlaista muuta vaivaa, jota joutuu purkkakorjaamaan javaskriptillä, jonka varaan ei mitään oleellista toiminnallisuutta pitäisi laskea. Ja navigaatio on minusta aika oleellista."
Olet oikeassa, että jos teen java-skriptin pätkällä tuon kahden sivun yhtäaikaisen avautumisen niin minun pitäisi myös lisätä alkuperäiseen avautuvaan sivuun mahdollisuus avata vasen sivu sitä kautta. On kyllä varsin epätodennäköistä, että javaskrip olisi poissa käytöstä sillä sen puuttuminen heikentää internetin käyttöä huomattavasta enemmän tuon eo. esimerkin verran.
EterAnal kirjoitti:
Ainakin Operasta on löytynyt jo kauan valinta "Kopioi osoite", joka siis suoraan kopioi alasivun osoitteen ;)
No joo, vähän huono esimerkki. Sovitaan, että ajattelin huonompien selaimien käyttäjiä ;)
EterAnal kirjoitti:
Nopea navigointi korvaa tämän puutteen.
Tuosta en ole ollenkaan samaa mieltä. On n kertaa helpompaa antaa suora URL, kuin selittää "mene osoitteeseen $url, ota navipalkista linkki x ja sitte toiselta puolelta linkki y".
EterAnal kirjoitti:
On kyllä varsin epätodennäköistä, että javaskrip olisi poissa käytöstä sillä sen puuttuminen heikentää internetin käyttöä huomattavasta enemmän tuon eo. esimerkin verran.
Itse surffaan säännöllisesti ilman Javaskriptiä, enkä usko ihan ainoa olevani. Silloin harvoin kun sillä on tehty jotain järkevää, sen voi Operassa helposti laittaa päälle (F12 FTW). En voi sanoa jääneeni kaipaamaan mitään. Odottelenkin innolla Operan ysiversiota, jossa voi laittaa sivukohtaisesti asetuksiin valmiiksi tuon.
3.
Sivun väriskaala tuo mieleeni sateisen, rakeisen ja muutoinkin kenkun, pimeän syyspäivän. Itse käyttäisin vaaleampaa skaalaa. Publicationsin vasemman linkkipalkin fontti on epäselvä (ainakin tällä työmaan iciwanhalla näytön korvikkeella).
Itsekin olen käyttänyt frameja aina, kun on pitänyt saada aikaiseksi helposti tehtyjä navigointipalkkeja, mutta olen pikkuhiljaa, viisaampien opastuksella, alkanut oivaltaa, että ilman frameja sivustosta saa "paremman". Kotikutoinen kalapäiväkirjani käyttää frameja ja jokaisen sivupäivityksen (F5) jälkeen sivusto hyppää index.php:lle. Jos tekisin sivuston järkevästi, niin käyttäisin enemmän tyylitiedostoja ja näin ollen onglema katoaisi.
Javaskriptin varaan en jättäisi edes henkseleitäni. Useammallakin sivustolla javaskriptiä on käytetty kaikenlaisen turhan tekemiseen, kuten esimerkiksi kahdeksansadan erilaisen pop-upin esittämiseen, jumalattomaan määrän mainoksia ja yleensäkin kaikenlaiseen turhaan, jonka voisi tehdä muutoinkin. Ja jos sivuston navigointi toimii ainoastaan javaskriptin varassa, niin monelta jää sivusto selaamatta.
Pistipäs sellainenkin asia silmääni, että kukaan ei maininnut Firefoxia, tuota mainiota selainta, joka näyttää sivun sivuna ja jättää IE:n ongelmat varjoonsa..
Huomentapäivää ja kiitos asiallisista kommenteista!
"Tuosta en ole ollenkaan samaa mieltä. On n kertaa helpompaa antaa suora URL, kuin selittää "mene osoitteeseen $url, ota navipalkista linkki x ja sitte toiselta puolelta linkki y"."
Tuo on kyllä totta ja varmaan frameissa eniten hiertääkin. Kuitenkin otetaan huomioon se tosiasia, että toteuttamillani sivuilla jokainen asia on korkeintaan kahden klikkauksen päässä niin onko tuo todella ongelma? Miksihän tähän ongelmaan ei ole kehitetty ratkaisua vaan on lähdetty poistamaan ongelmaa poistamalla framet. Kuitenkin kun kyseisellä tekniikalla saadaan vaivattomasti helposti navigoitavat ja siistit sivut (frametekniikka ei syyttä näytä olevan aloittelijoiden suosiossa).
Tukeutuen edelliseen väittämään edelleenkään en ole saanut yhtään ehdotusta/vinkkiä miten tämän toteuttamani sivuston voisi tehdä samalla lailla ilman frameja joten uskon sen olevan n-kertaa hankalampaa.
"Itse surffaan säännöllisesti ilman Javaskriptiä, enkä usko ihan ainoa olevani. Silloin harvoin kun sillä on tehty jotain järkevää, sen voi Operassa helposti laittaa päälle (F12 FTW). En voi sanoa jääneeni kaipaamaan mitään. Odottelenkin innolla Operan ysiversiota, jossa voi laittaa sivukohtaisesti asetuksiin valmiiksi tuon."
Miksei javaskriptiä ole poistettu jos se kuuluu samaan turhuusluokkaan framejen kanssa? Opera kyllä rokkaa :)
"Sivun väriskaala tuo mieleeni sateisen, rakeisen ja muutoinkin kenkun, pimeän syyspäivän. Itse käyttäisin vaaleampaa skaalaa. Publicationsin vasemman linkkipalkin fontti on epäselvä (ainakin tällä työmaan iciwanhalla näytön korvikkeella)."
Tuon väriskaalan otankin tässä seuraavaksi käsittelyyn. Itse pidän hemmetin hankalana väriteeman keksimistä sivuille. Pitäisikö värit uudistaa sitten kokonaan vai riittäisikö pelkkä tumman sinisen vaalentaminen :/ Linkkipalkki on hyvin keskeneräinen.
"Kotikutoinen kalapäiväkirjani käyttää frameja ja jokaisen sivupäivityksen (F5) jälkeen sivusto hyppää index.php:lle. "
Tämä on muistaakseni ominaista vanhemmissa IE:n versioissa. Liekkö sitten liittyy php:hen. En ole sillä vääntänyt koskaan mitään. Kokeileppas sinäkin joskus Operaa, minä puolestani voisin kokeilla sitä Firefoxia :)
EterAnal kirjoitti:
Tukeutuen edelliseen väittämään edelleenkään en ole saanut yhtään ehdotusta/vinkkiä miten tämän toteuttamani sivuston voisi tehdä samalla lailla ilman frameja joten uskon sen olevan n-kertaa hankalampaa.
Lähinnä se on pitkä ja hankala selittää, kun siihen liittyy kokonaan uuden ajattelutavan opettaminen. Minäkin tyydyn vain heittämään linkin artikkeliin: http://www.alistapart.com/articles/holygrail
Kun homman kerran oppii, ei se ole yhtään vaikeampaa kuin raamien kanssa pallottelukaan.
EterAnal kirjoitti:
Miksei javaskriptiä ole poistettu jos se kuuluu samaan turhuusluokkaan framejen kanssa?
Javaskriptille löytyy ihan oikeitakin sovelluksia veppisovellusten puolelta (vaikka nyt Google Maps), mitä ei voi ilman toteuttaa. Raamien toiminnallisuus sen sijaan on kierrettävissä ja toteutettavissa ilmankin.
EterAnal kirjoitti:
Pitäisikö värit uudistaa sitten kokonaan vai riittäisikö pelkkä tumman sinisen vaalentaminen ://
Sanon kun nään :)
Yleisohjeeksi antaisin, että asiapitoisen sivun värimaailma kannattaa pitää neutraalina ja vaaleana. Tuon alkuperäisen sivun väritys on mielestäni sivulle varsin sopiva.
Kiitos kommentista Blaze.
"Lähinnä se on pitkä ja hankala selittää, kun siihen liittyy kokonaan uuden ajattelutavan opettaminen. Minäkin tyydyn vain heittämään linkin artikkeliin:..."
Ja hyvän linkin taisit heittääkin. Mitä nyt sivua ja esimerkkejä vilkaisin niin uskon, että kun lataan sivuston offline-tilassa selailtavaksi ja tästä töitten jälkeen alan sitä yön pimeinä hetkinä kämpillä sisäistämään niin hyvä tulee. Tuollaista linkkiä olin kaivannutkin.
"Yleisohjeeksi antaisin, että asiapitoisen sivun värimaailma kannattaa pitää neutraalina ja vaaleana. Tuon alkuperäisen sivun väritys on mielestäni sivulle varsin sopiva."
Kokeillaampa uudistaa värejä. Tulee ihan mieleen se aika kun isä ensimmäisen värityskirjan osti. Ajattelin kuitenkin pitäytyä vain muutamassa värissä vähän, vaikka tämän sivuston tyyliin. Alanpas opettelemaan... Onkos kellään tietoa koska XHTML2.0 julkaistaan?
Ps. Itse opiskelen kovopuolen insinööriksi (200op kasassa), joten ymmärrät varmaan nyt miksi koodin vääntö on kiinnostanut vähemmän ;) Satutko tuntemaan Lauri Kahelinia Rovaniemeltä?
EterAnal kirjoitti:
Onkos kellään tietoa koska XHTML2.0 julkaistaan?
Parempi kysymys on, milloin Internet Explorer tukee sitä. Oma veikkaukseni on, että vähän sen jälkeen kun Duke Nukem Forever julkaistaan :/
EterAnal kirjoitti:
Satutko tuntemaan Lauri Kahelinia Rovaniemeltä?
Ei ole tuttu.
Kehyksillä rikot myös hakukonetuen. Google ei tietääkseni lähde ollenkaan seikkailemaan framemääritysten kautta. Toki Google voi löytää jonkin kehyksen, jos vaikka jostain on linkitetty siihen oikein, mutta tällöinkin hakukoneelta tulijalle ei kaikki kehykset lataannu. Tällöin käyttäjä yleensä pääsee yhdelle orvolle sivulle jossa ei ole mitään navigointia, katselee että "jahas, tämä oli kait tässä" ja lähtee muualle. Esimerkiksi jos käyttäjä tulee hakukoneelta vaikka sivulle: http://kokko.web.cern.ch/kokko/activities.html, ei siinä paljoa ole tehtävissä. Tietenkin nörtit voivat aavistella että olisikohan tässä käytetty kehyksiä, ja saattavat kokeilla josko index-sivulla kehykset ilmestyisivät, mutta siihen ei tietenkään voi luottaa.
"Kehyksillä rikot myös hakukonetuen."
Kuten tuolla edellä olen kirjoittanut niin ymmärtääkseni link rel -attribuutilla voin kertoa hakukoneelle mistä sivu alkaa. Löytyy tuonkin laittamasi sivun linkistä tähän tapaan: <link rel="start" type="text/html" href="index.html" title="Helsinki Institute of Physics, CMS Tracker Program"/>.
Olen tässä pari tuntia nyt lueskellut noita CSS-artikkeleita. Alkaa näyttämään siltä, että jos haluan tehdä <u>toimivat</u> sivut myös IE:tä silmällä pitäen joudun tekemään hurjan kasan bugikorjauksia ja näitä purkkakorjauksiahan juuri oli tarkoitus välttää vaihtamalla framet CSS-koodiin(http://www.positioniseverything.net/explorer.
Kun sivuston rakenne on järkevä niin sivut ovat käytettäviä vaikka ilman CSS:ää. Tietenkin kaikki kannattaa suunnitella niin että mahdollisimman monilla se toimisi mahdollisimman hyvin, mutta kaikkea on mahdotonta ottaa huomioon. Erittäin vanhojen selaimien käyttäjät kyllä tuntenevat selaimensa heikkoudet muutenkin, joten eivätköhän he ymmärrä jos sivusi eivät niillä näytä kovin hyviltä visuaalisesti.
Olen tässä lueskellut kohta koko päivän näitä CSS-artikkeleita ja poikkeuksetta CSS kuulostaa olevan todella epävakaa alusta sivujen tekoa ajatellen niiden todella epävarman käyttäytymisen takia. Lähes jokaisessa uudessakin selaimessa sivut näkyvät erillä tavalla, sisältävät ihmeellisiä bugeja tai sitten eivät näy ollenkaan puhumattakaan vanhemmista selaimista, joilla CSS-tuki on vieläkin vajanaisempi.
Viittaan tässä ylempänä esitettyyn linkkiin:
http://www.alistapart.com/articles/holygrail
Kirjoittajan pitäisi olla hyvin asiaan perehtynyt ja ammattilainen.
Kommenteista päätellen: http://www.alistapart.com/comments/holygrail/
Tehty sivu on hyvin epävakaa lähes kaikilla alustoilla. Esimerkiksi kummassakaan kokeilemassani selaimessa IE6 ja Opera 6 se ei toiminut toivotulla tavalla.
Tässä vielä linkki tehtyyn sivuun: http://www.alistapart.com/d/holygrail/example_3.
Eikö ole ihmeellistä, että vanhaa toimivaa tekniikkaa aletaan korjaamaan tekniikalla, joka ei toimi kunnolla missään selaimessa, ei vanhoissa, nykyisissä eikä tulevissakaan selaimissa (IE disabloi purkkakorjausmahdollisuuden tulevassa versiossa)?
lainaus:
"Lähes jokaisessa uudessakin selaimessa sivut näkyvät erillä tavalla, sisältävät ihmeellisiä bugeja tai sitten eivät näy ollenkaan puhumattakaan vanhemmista selaimista, joilla CSS-tuki on vieläkin vajanaisempi."
EterAnal, tässä kohtaa suosittelen sinua kokeilemaan tekstiselain lynx:iä.
Kyseessä siis selain joka esittää pelkästään tekstin ja jonkin verran asemointia, eli sivuntaittoa. Selain on pohjana useimmissa näkövammaisille tarkoitetuissa selaimissa jotka osaavat puhua sivuston sisällön käyttäjälle.
Lynxillä katsottaessa kaikki CSS-taitolla (käyttäen <div> tägiä) tehdyt sivustot näkyvät nätisti ja oikein. Kun taas niin rakastamillasi frameilla tehtynä sivustolla näkyy vain linkit eri frameissa oleviin sivuihin. Mitäpä luulet käyttävätkö esimerkiksi mainitsemani näkövammaiset mieluummin sivustoa, joka on helppo käyttää ja kaikki tulee esitetyksi ilman linkkien selaamista vai sellaista sivustoa jossa heti joutuu arvaamaan että mikähän linkki näistä johdattaisi minut sivulle jossa kerrotaan sivustosta ja josta joutuu palaamaan takaisin vain arvuutellakseen mikähän linkki veisi valikkoon?
Olet selkeästi yliopistomiehiä ja teet tieteellistä projektia varten sivustoja. Mitäpä luulet kuinka kauan tiedeyhteisö jaksaa etsiä tietoa sivustolta joka on käytettävyydeltään täysin ala-arvoinen.
Katsellessani uusia ja vanhoja sivuja. Tulee väkisinkin mieleen miksi on menty rikkomaan hyvä ja toimiva kun ei kerrassaan mitään ollut vanhassa vikana.
"EterAnal, tässä kohtaa suosittelen sinua kokeilemaan tekstiselain lynx:iä."
Tarkoitus olisikin tehdä mahdollisimman monelle käyttäjälle soveltuva sivusto, vaikka sivuja ei useinkaan pyritä optimoimaan pienryhmiä ajatellen. Lynx ei ikävä kyllä taida nousta kovinkaan korkealle käytettyjen selainten listalla ja uskon, että osa näkövammaisistakin käyttää ihan "tavallisia" selaimia kuten Operaa jossa on zoomaus mahdollisuus sisäänrakennettuna. Tiedän kertoa tämän jo senkin puolesta, että olen heikkonäköisten kanssa tekemisissä ja opetan heille tietotekniikkaa.
(Lisähuomautuksena vielä: Kai tiesit myös, että niinkin perusteelliset elementit kuten taulukot vaativat omat taginsa näitä sokeille tarkoitettuja selaimia varten toimiakseen oikein.)
"Olet selkeästi yliopistomiehiä ja teet tieteellistä projektia varten sivustoja. Mitäpä luulet kuinka kauan tiedeyhteisö jaksaa etsiä tietoa sivustolta joka on käytettävyydeltään täysin ala-arvoinen."
Kiitos kaunis, mutta ihan ammattikorkeamiehiä olen ja lainaten vielä jo ylhäällä esitettyjä erään professorin sanoja
"Mutta linkit on selkeasti esitelty, ja sivuilla
liikkuminen on näppärää. Näistä tulee oikein hyvat
webbisivut.",
käytettävyys noilla sivuilla on huippuluokkaa, yhteensopivuus samoin. Jos en halua lähteä seikkailemaan loputtomaan CSS-viidakkoon josta ei paluuta ole, jää vaihtoehdoksi sivuntaitto taulukoilla. Vielä kyseiseen aiheeseen liittyen, olen kahlannut läpi myös täällä kirjoitelleiden käyttäjien kotisivuja. Ei niistä ole oikein voinut inspiraatiota ammentaa. Ikävä kyllä.
Itseasiassa, noiden sivujen taiton saa hyvin css-taitoksi. Piruuttani tein tuota vastaavan leiskan css:ää käyttäen ja se pelitti kaikilla selaimilla joita kokeilin. Eikä minun taitoni käyttää css:ää ole edes kovin hyvät, eli kyllä nuo saa todellakin täydellisesti css-taitoksi. Tosin, noin koreita linkkejä en ainakaan itse saanut aikaan..
-Grey-
Pointtina tuon Lynxin esiinottamisen taustalla oli nimenomaan se, että mikäli css taitto on tehty oikein sivustot näkyvät myöskin selaimilla jotka eivät tue css:ää. Jos sivustot on tehty frameilla ne eivät pahimmassa tapauksessa edes näy selaimilla joissa ei ole frame tukea.
lainaus:
käytettävyys noilla sivuilla on huippuluokkaa
Tämä menee nyt pilkunviilauksen puolelle, mutta sehän on jo työtänikin. :) Onko yllä oleva lainaus pelkästään sinun subjektiivinen näkemyksesi vai oletko tehnyt käytettävyystestejä sivustollasi. Mikäli olet niitä tehnyt, olisin varsin kiinnostunut näkemään raportin kyseisistä testeistä.
P.S onnitteluni oikean tyyppisestä opiskelumuodosta. ;)
Moro,
Alkaa menemään jo ylitöiden puolelle, mutta ei se haittaa. Eipä sitä jaksa lähteä kämpillekkään puolalaisten kanssa höpöttelemään. Täällä työpaikalla on niin mukava istuskella :)
"Itseasiassa, noiden sivujen taiton saa hyvin css-taitoksi... ...Tosin, noin koreita linkkejä en ainakaan itse saanut aikaan.."
Voitko laittaa nettiin linkin niistä sivuista. Haluaisin testata niitä itsekin ja katsoa millaisen leiskan sait aikaiseksi? Itse pidän noita linkkejä vielä vähän epäonnistuneina :O
"Tämä menee nyt pilkunviilauksen puolelle, mutta sehän on jo työtänikin. :) Onko yllä oleva lainaus pelkästään sinun subjektiivinen näkemyksesi vai oletko tehnyt käytettävyystestejä sivustollasi. Mikäli olet niitä tehnyt, olisin varsin kiinnostunut näkemään raportin kyseisistä testeistä."
No jos pilkkua aletaan viilaamaan niin voisin väittää, että jopa niinkin yksinkertaiset elementit kuten taulukot vaativat omat attribuuttinsa toimiakseen kunnolla näissä sokeille tarkoitetuissa selaimissa (http://myy.helia.fi/~vanvu/xhtml/taulukot.html). Varsinaisia käytettävyystestejä en ole suorittanut, ne ovat suorittaneet muutama ei niin paljon web-ohjelmointia tuntevaa kaveriani, ja sitten tämä proffa tässä yllä, jotka kaikki ovat sanoneet samaa, sivut ovat todella helppo käyttää ja niissä on helppo navigoida. En tiedä sitten kuinka paljon noissa kommenteissa on puolueellisuutta mukana.
Toki mielläni teen sivut muulla kuin frameilla. Aikaahan minulla tässä on värkätä ja opiskelemaanhan tänne tultiin (työharjoittelu 3kk CERN), joten en pane ollenkaan pahitteeksi sitä, että oppisin näin "lomallakin" uusia asioita :) En vain millään viitsisi alkaa tappelemaan selaimien yhteensopivuusongelmien kanssa, koska se on hyvin tylsää touhua.
Kiitoksia! Kyllä insinöörejä aina tarvitaan. Terveisiä vain Sallaan jos sietä perältä on muitakin. Montako insinööriä tarvitaan vaihtamaan lamppu? Ei yhtään. Hän korjaa sen.
Terveisesi Sallaan tulivat perille ;) Pieni on maailma näköjänsä :)
Mutta itse aiheesta.
Itse edelleenkin jättäisin ne kehykset pois ja tuottaisin navigointilinkit jokaiselle alasivulle vaikka PHP:llä. Itsekin usein haukun selainten CSS-tukea, ja kieltämättä elämme nyt hieman harmittavassa siirtymäkaudessa. Mutta XHTML+CSS tuo silti jo nyt suuria etuja, esimerkiksi elastisen ulkoasun. Ja nimenomaan se tuo koko sivun rakenteen oikeaoppiseksi, esimerkiksi oman sivuni rakenne näkyy tekemälläni websivututkijalla hyvin jo otsikoista, kuten näkyy kaikista hyvällä XHTML:llä tehdyistä sivuista:
(rikkinäiset linkit poistettu)
Eli periaatteessahan tuo websivututkijakin on yksi selain, tosin enemmänkin se katsoo ja näyttää sivuja koneen silmin.
Tein myös aikani kuluksi vähän käytettävyystestejä kehystettyyn versioosi. Selasin sivujasi Lynxillä, ne toimivat, mutta navigointi oli erittäin vaikeaa, sivut olivat todella syvällä monien sivujen päässä, ja sivuston rakennetta oli mahdoton hahmottaa. Kännykällä myöskin yritin, mutta S60-sarjan puhelimeni sanoi vain tylysti ettei kehyksiä tueta.
Firefoxia käytettäessä suurella zoomauksella sivuista ei myöskään saanut enään mitään selvää, koska kehykset eivät venyneet zoomauksen jäljiltä. Itse asiassa heti ensimmäisen zoomauksen jälkeen vasemman framen tekstit menivät piiloon. Myöskin Firefoxissa tyylien poisottaminen kokonaan teki sivut käyttökelvottomiksi, koska ylä- ja alakehyksen tiedot katosivat kehyksen tilan näkymättömiin. Yläkehykseen sentään tuli vierityspalkit, mutta alapalkkiin ei. Opera oli tässä(kin) suhteessa parempi, se osasi suhteuttaa kehyksien koon zoomauksen määrään, eikä tietoa jäänyt kehyksien näkymättömiin. IE taas ei osannut zoomata sivua mitenkään.
Kun vielä otetaan huomioon (ainakin järkevän) hakukonetuen ja linkittämisen rikkomisen niin itse kyllä taipuisin ehdottomasti kehyksistä luopumiseen.
Eli ensin opettelisin sinuna PHP:tä sen verran että navigointialueen liittäminen jokaiseen sivuun toimisi hyvin, ja sitten itse tekisin sivut juurikin XHTML+CSS yhdistelmällä käyttäen divejä. Okei, erittäin vanhoilla selaimilla se näkyy sitten eri tavalla kuin uusilla, mutta näkyy sentään varmasti kaikki sisältö ja vieläpä varmasti käytettävästi. Tämä on minun suositukseni, tosin se tulee aika vahvasti marginaalikäyttäjän (nörtin) silmin.
EterAnal kirjoitti:
Voitko laittaa nettiin linkin niistä sivuista. Haluaisin testata niitä itsekin ja katsoa millaisen leiskan sait aikaiseksi?
Noh, voisin minä mailiisi ne heittää. Vielä ei ole mitään tilaa minne voisi sitä leiskaa pistää. Tosin, köh, varoitan että koodini voi olla aikas sotkuista. Vaan, saat kyllä sitä käyttää, mutta grafiikat kyllä vaihdat omiin. Niitä en anna muutakuin esimerkiksi ;-)
-Grey-
Moro,
"Itse edelleenkin jättäisin ne kehykset pois ja tuottaisin navigointilinkit jokaiselle alasivulle vaikka PHP:llä."
Hitsi kun nuo PHP-taidot ovat vähän ruosteessa. Toisinsanottuna niitä ei ole. En tiedä kerkiänkö/haluanko juuri nyt alkaa opettelemaan sitä kun muitakin projekteja tässä kuitenkin on menossa. Jos sitten yritän pärjätä minun "huonolla" XHTML:llä ja CSS:llä, joka kuitenkin on validia W3C:n mielestä :|
Voihan sen linkkipalkin sitten vaikka lisätä joka sivulle erikseen ellei sitten käytä columneja ja frameja css:llä tehtynä. Hieno kuitenkin kun olet jaksanut ajaa läpi noinkin monimuotoisen testiohjelman. *nostaa peukkua*
"...mutta grafiikat kyllä vaihdat omiin."
Meikähän ei kopsattua tavaraa sivuille laita!
EterAnal kirjoitti:
Hitsi kun nuo PHP-taidot ovat vähän ruosteessa. Toisinsanottuna niitä ei ole. En tiedä kerkiänkö/haluanko juuri nyt alkaa opettelemaan
Heh, en minäkään php:ta osaa niin että saisin mitään hienoa aikaan, mutta..
<?php include "ylä-navigointi-ym.pääte"; ?> <?php include "sisältö-ja-kaikki.pääte"; ?> <?php include "ala-copyright-ym.pääte"; ?>
Tuollaisella pitäisi sivut kyllä rakentua aika helposti. Eli on esim. index.php. Siinä on sisältönä juuri tuo pätkä. Sitten on vaikka yla.html, sisalto.html ja ala.html. Minkä lisäksi tekisin kansion vaikka nimeltä pages, joka sisältää ne tiedostot, mitkä tahtoo sisällyttää moiseen. Eli php-tiedosto koostaa näin simppelisti sisällön. Päivitys melkoisen helppoa ja muuta. Toki joku tekisi tuon eräällä toisella tavalla, mutta minulle nyt ehdotettiin tuota tapaa aikoinaan..
-Grey-
Juu juu, siitä selaimesta (tuolla jossain kauempana ylhäällä) sellaista, että en missään nimessä käytä IE:tä, ellei ole aivan pakko (kuten XtraProblemsin päivityksissä). Jotenkin tuo frame-päivitys-kikkakökkäre ongelma tuntuisi olevan nimenomaan frameista johtuva probleema, mutta enhän minä mikään guru ole.. hyvä jos edes kylähullu.
Tuota, sellainen jäi mietityttämään, että miksi juuri Xhtml, eikä pelkkä hättämölö? Entä onko tarkoitus saada sivuista mobiilitkin? Sen verran minäkin tiedän, että PHP:lla on helppoa tarkistaa, että onko kyseessä känsä (kännykkä) vai kompuutteripohjainen selain ja sitämyöten ohjata sopiville tyylitiedostoille, mutta siitä en mene takuuseen, että onnistuuko peehoopeellä tarkistaa tarkalleen, että mikä selain on kyseessä, vai niputtaako se mokoma Mozillan ja Firefoxin samaan syssyyn (tai liekö noilla eroa sitten näyttäytymismetodeissa?).
Jos haluaisi tehdä oikein, oikein hienot sivut ja varmasti kaikilla pelittävät, niin silloin olisi asiallista tehdä sitä Mikkisoftan viruslaturia varten oma CSS, ja muita, meidän ihmisten käyttämiä, selaimia varten ihan omansa. Kännyköillekin on muistaakseni mahdollista tehdä ihan omat tyylitiedostonsa.
Pitäisiköhän tähän samaan syssyyn todeta, että pahoittelen jatkuvia kirjoitusvirheitäni, sitä, kun on hieman yksinkertainen ja hidas, niin ei aina osaa ilmaista itseään selkeästi. Että sen poikia tällä kertaa.
HellCome: hyvin rakennettu XHTML-sivu kelpaa sekä mobiililaitteelle että pöytäköneelle. Niille voi tarjota eri CSS-tiedostot määrittämällä media-attribuutin LINK-tagissa. media="screen,projection" menee monitoreille ja videotykeille, media="handheld" menee mobiililaitteille ja media="print" tulostimelle. Muitakin löytyy: http://www.w3.org/TR/REC-CSS2/media.html#visual-media-group
Selainten "haistelu" PHP:lla on muutenkin sellaista toimii-90%-todennäköisyydellä -toimintaa, koska selainten user agent -arvoa pystyy muuttamaan (Firefoxille löytyy User Agent Switcher, Operassa on natiivi vaihto, oletuksena esiintyy IE6:na...)
IE6:lle voi antaa oman CSS-tiedostonsa conditional comment -tekniikalla:
<!--[if IE]>TÄMÄ NÄKYY VAIN IE:LLE<![endif]-->
EterAnal: myös SSI/SHTML -tekniikan käyttö PHP:n sijasta onnistuu. Sillä voi liittää tiedostoja muodossa:
<!--#include virtual="/sivunalku.html" --> Tässä voi olla sivun sisältö! <!--#include virtual="/sivunloppu.html" -->
Tiedostopääte siis .shtml - lisätietoja http://httpd.apache.org/docs/1.3/howto/ssi.html
Mitä CSS:ään tulee, on se paras tapa tehdä sivun ulkoasu. Ongelmia sen suhteen aiheuttaa lähinnä se, että IE6 vaatii standarditilaan pääsemiseksi hieman omia kikkailujaan. Toisaalta nuo sivut on tehty transitionaalilla, joten pitäisi tyytyä 90-luvun puolen CSS-tulkintaan. Tiettyä osaa CSS:stä selaimet osaavat tukea kaikki lähes täsmälleen samalla tavalla, joten tässä pätee kokemuksen laki: mitä enemmän tekee ja kokeilee, sitä enemmän oppii. Kun aikansa pyrkii siihen, että tekee kaikilla selaimilla toimivaa CSS:ää (ja kuitenkin yrittää tehdä "hienoja" sivuja), niin lopulta sieltä alkaa selvitä, mitä voi tehdä ja mitä ei voi tehdä. Usein pääsee siihen tulokseen, että saa sivun toimimaan Firefoxilla, Operalla ja muilla, mutta IE6 ei toimi jonkin kanssa. Tämän voi onneksi paikata aiemmin mainitsemallani conditional comment -tekniikalla (joka ei riko sivun standardienmukaisuutta, se kun on muille selaimille vain kommentti).
Lisäksi on sulaa hulluutta tehdä pikselintarkkaa lopputulosta jokaiselle selaimelle. Jos lopputulos vain näyttää hyvältä, eikä eroja selainten välillä huomaa kuin avaamalla selaimet rinnakkain tai kiinnittämällä asiaan erikseen huomiota, ei eroilla ole mitään väliä.
Ja tosiaan, ulkoasullisesti minullekin tuli tuosta mieleen ihan joku sivusto vuodelta 1997. Ylävalikon tekstit voisivat olla pienemmät, pienempi teksti näyttäisi siistimmältä. Samoin tuon "metallisini" -efektin voisi jättää pois (ilmeisesti käytössä on jokin burn-efekti tms.)
Oikeassa yläkulmassa oleva CMS Tracker Project on todella vaikealukuinen. Tekstin voisi varmaan huoletta nostaa ylemmäksi ja tasoittaa väriliukua (silmä kyllä erottaa pienenkin värieron). Lisäksi keventäisin tummaa sinistä vaaleammaksi ja säätäisin sitä lähemmäs tuota rauhallisen sinistä väriä. Alapalkin juttuja ei erota ja siinäkin on tavara liian lähellä reunaa. W3C-teksti voisi olla pienempi tai vastaavasti alapalkki isompi.
Käytettävyys: Miksi ihmeessä täytyy ensin yläpalkista painaa Publications, sitten latautuvalta sivulta valita Publications tai Thesis Works, ja tämän jälkeen latautuu vielä valikko vasemmalle sivustalle? Lisäksi vasemman laidan valikko jää avoimeksi laitaan kun aluetta vaihtaa, jolloin menee ikään kuin konteksti sisällön ja sijainnin suhteen rikki. Vähemmän klikkauksia olisi parempi. Publications ja Thesis Works voisivat olla molemmat omat linkkinsä ylävalikossa ja klikkaamalla näkisi sen viimeisimmän (vuoden 2005) sivun. Sitten voisi olla vain joka sivulla linkki, josta voisi vaihtaa vuotta. Tämä on vain yksi ratkaisu, muitakin vaihtoehtoja voi miettiä.
Minusta vanha sivu on käytettävämpi ja ulkoasultaan parempi, vaikka ei kovin merkittävästi. Voisi olla ihan paikallaan miettiä koko järjestys uudelleen sen sijaan, että tehdään uusi ulkoasu vanhan sivun muottiin. Uuden ulkoasun käyttöönotolle kun ei tule minkäänlaista merkitystä, jos se on rakenteeltaan vanhan lähes suora kopio.
Moro,
Tässä tulin käväisemään työpaikalla sähköpostit lukemassa jne.
"miksi juuri Xhtml, eikä pelkkä hättämölö? Entä onko tarkoitus saada sivuista mobiilitkin?"
Sivujen teko xhtml-standardiin on luullakseni aivan luonnollinen valinta. Onhan se uusin standardi ja siinä on pyritty ajattelemaan tosiaankin myös muita laitteita kuten Merri alempana kirjoittaa.
Tosin Merrin mainitsemat (media="xxxxxx")-muodot eivät vaikuta mitään sillä tietääkseni tällä hetkellä vain tietokoneiden selaimet ymmärtävät ne joten kuten.
Siihen en aio lähteä, että alan nuuskimaan mitä selain käyttäjällä kulloinkin sattuisi olemaan. Täysin turhaa hommaa "standardoidussa" maailmassa :) IE:lle voi jotain pikku fiksailuja tehdä jos jotain fataalia ilmenee tuolla Merrin mainitsemalla metodilla.
"Lisäksi vasemman laidan valikko jää avoimeksi laitaan "
Sivut on siltä osin kesken.
" Samoin tuon "metallisini" -efektin voisi jättää pois (ilmeisesti käytössä on jokin burn-efekti tms.)"
Mikä burn-efekti :O PSP:llä mie kuvituksen teen. Kutosversiolla...
Oukki doukki, tuossa olikin paljon asiaa. Taidan tehdä sivut kokonaan uusiksi. Saako sellaista tervetulo-sivua käyttää, josta käyttäjä ohjataan sitten sivusiirtymällä itse sivustolle vai onko senkin käyttö julistettu pannaan?
Olen nyt viikonlopun opiskellu php:tä. Tekaisin tuollaisen vieraskirjan:
http://kokko.web.cern.ch/kokko/vieraskirja/
Koodi siihen viestin kirjoitukseen tiedostoon on tuossa:
http://kokko.web.cern.ch/kokko/vieraskirja/
Koko hässäkkä:
http://kokko.web.cern.ch/kokko/vieraskirja/php.
Nyt olisikin muutama kysymys:
1. Miksei se toimi? :D
2. Kuten koodista selviää, muutan chmod-arvoksi 664, mutta siltikään tavara ei ilmesty viestit.txt-tiedostoon. Mistähän tämä mahtaa johtua? Ihan kuin skriptillä ei olisi kirjoitusoikeuksia tiedostoon, mutta kuitenkaan siitä ei tule mitään erroria. Toiminta on kuitenkin testattu omalla koneella.
3. Laitoin tarkistuksen kaikkiin kenttiin, että mitään kenttää ei voi jättää tyhjäksi. No luin aikaisemmin, että muuttujaa ei tarvitse esitellä toisin kuin c-kielessä. Noh,nyt kuitenkin ilmestyy varoitus:
Undefined variable: uviesti in d:\wwwroot\kokko\vieraskirja\laheta.php on line 37
kun käytän esittelemätöntä muuttujaa tulostettaessa mahdollista unohdit täyttää kentän tekstiä. Joku varmaan tekisi tuon paljon fiksummin, mutta hei se on mun eka php-väännös!
4. Sitten olisi kysymys koskien tiedostonkäsittelyä. Minulla oli ideana tehdä skripti, joka käy läpi kaikki *.htm -loppuiset tiedostot ja tarkistaa onko niissä erikoismerkkejä kuten ä ja ö ja jos on niin korvaa ne utf-8 standardin mukaisilla koodeilla auml; ja ouml; jne. Tämä sen takia, että sillä lailla olisi helppo muokata teksti copy-pasten jälkeen utf-8 -muotoon. Mulla siis pitää avata tiedosto kirjoitus-tilassa, tallentaa koko tiedoston sisältö taulukkoon. Sitten pitäisi tutkia jokainen merkki erikseen ja jos se täyttää tietyn ehdon niin se korvataan. Sitten tallennetaan muutettu tiedosto alkuperäisellä nimellä. Onkos tähän olemassa helppoa tapaa?
Kiitoksia avuliaisuudesta,
- Jari -
2. Error ehkä tulee, mutta koska lähetät location-headerin lopuksi niin selain siirtyy suoraan sinne eikä näytä niitä mahdollisia erroreita, olettaisin.
3. Liekö tuo varoitus vaiko notice? Jos varoitustaso on täydessä moodissa niin se ilmoittaa myös esittelemättömistä muuttujista.
Chmodin oikea arvo riippuu vähän tapauksesta (PHP:n oikeuksista), kokeile 777:aa.
ä ja ö EIVÄT ole UTF-8:aa! Ne on vain lisäyksiä HTML:ään (XML:ssä niitä ei tueta; XHTML taas on pitkälti XML:n tiukkojen sääntöjen mukaista HTML:ää). UTF-8 on jotain aivan muuta, se on keino enkoodata Unicodea (useimmiten) hieman kompaktimpaan tilaan. Pääominaisuutena tietenkin se, että Unicodessa nollatavua tulisi aika usein joka toiseksi merkiksi - UTF-8:lla koodatussa tekstissä näin ei ole.
ä-kirjain näyttää UTF-8:lla tältä: ä (jos muutat Näytä > Merkistökoodaus > UTF-8, niin näet tuon "oikein" ä-kirjaimena, mutta nämä muut ääkköset katoavat tai muuttuvat kysymysmerkeiksi).
PHP:sta löytyy utf8encode and utf8decode.
Moro,
"ä ja ö EIVÄT ole UTF-8:aa! Ne on vain lisäyksiä HTML:ään (XML:ssä niitä ei tueta; XHTML taas on pitkälti XML:n tiukkojen sääntöjen mukaista HTML:ää)."
Jahas, joka päivä sitä oppii jotain uutta. Kyllä nuo auml-merkinnät silti xhtml-validaattorin läpäisee. No milläs merkitökoodauksella nuo sivut olis paras tehdä? Siellä on kuitenkin vaikka minkälaista merkkiä kun on kyseessä henkilöiden nimiä hyvinkin eripuolilta maapalloa.
Tekaisin tuon ensimmäisen framekötöstyksen tilalle nyt sitten tuollaisen:
http://kokko.web.cern.ch/kokko/versio2/main.htm
Miltäs se nyt näyttää? Fiksailua tietty tulee sinne ja tänne, mutta mites nyt se tärkein eli käytettävyys ja selkeys? Sivut koostuvat nyt kolmesta rivistä. Näistä ylärivi ja alarivi pysyvät aina samoina ja ne liitetään php:llä varsinaiseen koodiin. Kumpi valikko on parempi? Yläpuolella oleva vai alapuolella oleva? Pyöristelen noista laatikoista sitten reunoja kun fiksailen niitä hienommiksi. Annanko tuon keskimmäisen rivin eli itse sisältörivin ulottua ihan vasempaan reunaan asti vai jätetäänkö siihen tuollainen reuna? Tuollaisia vihjeitä kaipaisin.
- Jari -
Tuo varsinainen "CMS Tracker Project"-logo on edelleen kovin suttuisen näköinen.
Valikko toimii yläpuolella hyvin (värit kuitenkin paljon tummemmiksi) ja vasempaan reunaan sopii tuo "tyhjä osa".
Älä jätä lopulliseen versioon koodin sisäisiä tyylimäärityksiä, vaan siirrä kaikki ulkoiseen CSS-tiedostoon, jolloin samat tyylit ovat helposti jokaisen sivun käytettävissä.
Moro,
Nyt värimaailma näyttää tältä:
http://kokko.web.cern.ch/kokko/versio2/php/home.
Muutenkin sivut alkavat olla aika lailla kohdallaan.
"Tuo varsinainen "CMS Tracker Project"-logo on edelleen kovin suttuisen näköinen."
Pitää tehdä siitä terävämpi ja häivyttää sitä sitten taustaan. En halua kuitenkaan, että se pomppaa silmille. Kaikki tyylimääritykset on nyt css-tiedostoissa ja header ja footer liitetään php:llä itse sivulle joten itse asialaatikon sisällön muokkaaminen on todella helppoa kun koko "asialaatikko.php" -tiedosto on täysin kirjoitettavissa uudelleen.
<div class="navigate" style="position: absolute; left: 10%; top: 0px; width: 100%; height: 100%; z-index:1;">
Noita style määrityksiä ei varmaan kuitenkaan voi sisällyttää css-koodiin vai voiko?
Nuo sivut käyttää nyt kahta tyylitiedostoa. Toinen on se joka sisältää periaatteessa kaikki tyylit ja toinen on sitten pelkästään IE:tä varten räätälöity.
- Jari -
Ihan vaan kannattaa toteuttaa sivut niin että esim. laatikoiden leveydet eivät ole absoluuttisia, vaan ne suhteutetaan selaimen kokoon. Esim. minulla on käytössä resoluutio 1024x786, mikä on varsin yleinen vieläkin(ainakin luulen niin :)), minkä takia sivua joutuu scrollaamaan sivusuunnassa. Logo voisi toisiaan olla hieman selvempi ja joihinkin kohtiin voisi laittaa esim. mustat borderit(Toisi vähän konstraktia :P), mutta muuten näyttää ihan hyvältä. :D
Nuo style-määreet ovat myöskin CSS:ää, ja paras tapa hoitaa nuo on varmaankin lisätä id:
<div class="navigate" id="joku">
#joku {
position: absolute;
left: 10%;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}Katsopa sivuasi Firefoxilla ja ihmettele, miksi se ikkunan leveydestä riippumatta menee satoja pikseleitä reunan yli. En nyt jaksa tarkemmin katsella, mutta eivät nuo ihmeelliset sivut olleet. Sanoisin käytettävyyttä ja ulkonäköä vain hieman keskinkertaista paremmaksi. Ei kannata yrittääkään saada kaikkea pikselilleen samaan kohti kaikilla selaimilla vaan mieluummin tehdä sivupohja, jonka toiminta ei ole puolesta em:stä kiinni.
Moro,
Jees eli sivunleveydestä sen verran, että optimoin sen aluksi vain IE:lle. Työstin eilen illalla sen myös muille selaimille sopivaksi. Käykääpä nyt ihmettelemässä niillä Firefoxeillanne ja Operoillanne osoitteessa:
http://kokko.web.cern.ch/kokko/versio2/php/home.
Toimii kuin junan vessa. Pitäisi näkyä juuri samalla lailla kuin IE:lläkin. Pitää kokeilla saanko laitettua nuo sivumääreet noilla id-jutuilla niin ei ole sitten nekään sotkemassa muuten niin täydellistä koodia :D
Niin ja "This Page Is Valid XHTML 1.0 Strict!" ;)
"Nuo style-määreet ovat myöskin CSS:ää, ja paras tapa hoitaa nuo on varmaankin lisätä id:
<div class="navigate" id="joku">"
Vieläkin helpompaa näytti olevan kun laitoin nuo kaikki määreet suoraan navigaten alle lisäämättä id-tagia.
Niin, et kertonut, pitikö nuo saada kaikille navigate-luokan elementeille vai vain yhdelle, joten oletin, että vain yhdelle.
Nyt näyttää jo hieman paremmalta. Ihmettelen vain tuota hukkatilaa vasemmalla ja sivun suhteellista leveyttä, josta tulee hukkatilaa oikeaankin reunaan etenkin leveällä ikkunalla.
Moro,
"Ihmettelen vain tuota hukkatilaa vasemmalla ja sivun suhteellista leveyttä,"
Lainaten kommenttia janne-t [05.06.2006 22:47:39]
"...ja vasempaan reunaan sopii tuo "tyhjä osa"."
Itsestänikin se näyttää hienommalta kuin jos tuo laatikko yltäisi ihan vasempaan reunaan asti. On siinä tosin se haittapuoli, että ikkunaa ei voi nyt kaventaa niin paljoa, mutta uskoisin, että ihan riittävästi copy-paste käyttäjää ajatellen. Voihan tuota vielä miettiä :)
Kuitenkin ajatellen laajakuvanäytön käyttäjiä tai isoja resoluutioita sitä leveyttä voi todellakin olla jopa liikaa (liian leveää palstaa ei pysty kunnolla lukemaan, koska silmä ei löydä enää seuraavaa aloittavaa riviä) ja silloin on hyvä edes jossain määrin rajoittaa sivun mahdollista leveyttä. Korjatkaa jos olen väärässä :/
EterAnal kirjoitti:
Kuitenkin ajatellen laajakuvanäytön käyttäjiä tai isoja resoluutioita sitä leveyttä voi todellakin olla jopa liikaa (liian leveää palstaa ei pysty kunnolla lukemaan, koska silmä ei löydä enää seuraavaa aloittavaa riviä) ja silloin on hyvä edes jossain määrin rajoittaa sivun mahdollista leveyttä. Korjatkaa jos olen väärässä :/
No kuka pälli pitää selainta leveämpänä kuin mitä haluaa lukea? Selaimen ei o pakko olla koko näytössä, daa.
Niin, eipä minullakaan täytä selain kuin neljänneksen ruudusta normaalisti. Aivan turhaan joutuu aina leventämään, kun törmää sivuihin, jotka eivät tykkää 800px leveydestä.
Ei pienessä reunaraossa mitään pahaa, mutta ennemmin laittaisin siihen sellaiset 32, enintään 50 pikseliä kuin tuollaiset 107 ennen borderia ja sitten vielä 50 siitä tekstin reunaan. Ja oikea reuna noista on pahempi. Yllä tuli asiaa soodalta: ihmiset osaavat itse säätää ikkunan leveyttä.
Minusta on paljon mukavampi lukea, jos on text-align: justify; tuon normaalin rightin tilalla.
Metabolix kirjoitti:
Niin, eipä minullakaan täytä selain kuin neljänneksen ruudusta normaalisti. Aivan turhaan joutuu aina leventämään, kun törmää sivuihin, jotka eivät tykkää 800px leveydestä.
Operan fit-to-width ("medium screen rendering") roks.
Mulla on tällanen laajakuvanäyttö, tykkään pitää termistä tuossa selaimen vieressä juuri sen takia, että kokonäytön levystä on ilkee lukee. Vakiolevysen termiksen kans tämä selain jää vähän alle 1024 pikselin, mikä paljastaa tosi paljo tyhmästi tehtyjä sivuja. Fit-to-width to the rescue!
Hienoa! Näyttää jo paljon paremmalta tämä versio kuin tuo ensimmäinen. Ulkoasua voisi kyllä vielä parantaa.
Taustaväri on minusta liian tumma ja ahdistava. Vaaleampi tausta tekisi sivuista ilmavammat eikä tarvitsisi jättää niin isoa määrää tyhjää tilaa kaikkialle. Ongelmallisempi juttu on, että paitsi että sivulla on melko suuri minimileveys (minun ruudustani vähintään puolet), ei Firefoxini osaa näyttää sivuttaissuuntaista vierityspalkkia. Opera sen sijaan selviää tehtävästä hyvin, mutta tuliketulla surffatessa on ikkuna kyllä pidettävä melko leveänä. Olisi mukava, jos tuo vasemman reunan tyhjä tila häviäisi johonkin leveyttä kutistettaessa, mutta kun en ole CSS-guru, en osaa sanoa, onko tuollainen edes mahdollista, kun ylälaidassa on grafiikkaa.
Navigaatio on ihan hyvän näköinen, mutta nuo pudotusvalikot eivät taida toimia IE 6:lla tai aiemmilla. 7 näyttää jo ihan hyvin nekin. Enempi sanottavaa onkin sitten navigaatiologiikasta: miksi osa linkeistä on ruudun alalaidassa ja osa ylälaidassa? Onhan se hienon näköistä, mutta en kyllä oikein ymmärtänyt, minkä säännön mukaan linkit jakautuvat. Ehkä en kuulu sivuston kohderyhmään? Vai onko kyseessä jokin ulkoasun vuoksi tehty testi?
Tuo ylälaidan logo on kyllä suttuinen. Et ole tainnut joutaa korjaamaan sitä? Liukuvärit voisi ottaa pois kokonaan ja muuttaa fonttiakin kenties vähän koruttomammaksi. (Joku pääteviivaton kenties?) Niin, muodikashan siitä silloin tulee, mutta näyttääpä sivuilla olevan pastellisävyjäkin.
Sitten vielä tuosta "ovimattosivusta", jollaisen käytöstä kyselit tuolla ylempänä:
Kyllä, arvasit oikein: ovimattosivut olivat muoti-ilmiö joitakin aikoja takaperin, mutta mitään varsinaista hyötyä niistä ei ole, eikä niitä niinollen tulisi käyttää. Ne eivät sisällä hyödyllistä tietoa eivätkä myöskään linkkejä hyödylliseen tietoon tai pahimmassa tapauksessa yhtään mitään linkkejä. Käyttäjää heitellään eteenpäin jonkunlaisella javascript- tai metatagiuudelleenohjauksella, joka toimii 90%:lla käyttäjistä. Loput 10% eivät pääse mihinkään ja lähtevät turhautuneina pois. Onhan perin totta, että ainoa luotettava uudelleenohjaus on palvelinpuolen lähettämä eväste, eikä siinä ole mahdollista viivettä säätää. Yleensä ovimattosivuilla on kaiken muun hyvän lisäksi isokokoinen kuva- tai videotiedosto, tai flash-animaatio, joka sekin toimii vain noin 90%:lla selailijoista. Ei sellaista jaksa kukaan ladata kuitenkaan, vaikka laajakaistakin olisi. Asiaa vaan selailijalle eteen, niin se pysyy tyytyväisenä. Nettisivu ei ole televisio.
Moro,
"No kuka pälli pitää selainta leveämpänä kuin mitä haluaa lukea? Selaimen ei o pakko olla koko näytössä, daa."
Täällä internetin ihmemaassa on myös paljon sellaisia käyttäjiä, jotka suffaavat aina koko ruudulla (kuten minä) tai sitten käyttäjiä, jotka eivät edes tiedä, että selaimen kokoa voi säätää. En laske halua laskea paljoakaan sivustolla kävijän osaamisen varaan vaan pyrin tekemään sivut niin, että niitä pystyy käyttämään mitään osaamatonkaan henkilö.
Itse mietin tuota LINKS-valikon linkkien avaamista samalla ja tulin siihen tulokseen, että ne pitää aukaista uudelle selainikkunalle. Muuten moni pistää koko selaimen kiinni kun on vain sulkemassa yhtä uutta ikkunaa. Se jos mikä ärsyttää ihmistä :)
"Minusta on paljon mukavampi lukea, jos on text-align: justify; tuon normaalin rightin tilalla."
Meinaat, että teksti tasattaisiin kumpaankin laitaan? Tämä taas lisää entisestään sen tärkeyttä, että palstat pysyvät riittävän kapeina, koska mitään "maamerkkejä", josta oikealla rivillä pysymistä voisi seurata, ei enää ole. Tosin tuo text-align komento mitä tarkoitat tasaa alemman linkkivalikon oikeaan reunaan. Sillä ei itseasiassa ole mitään tekemistä tekstin kanssa :)
"Hienoa! Näyttää jo paljon paremmalta tämä versio kuin tuo ensimmäinen."
Kiitoksia, edistystä on siis tapahtunut :)
"Taustaväri on minusta liian tumma ja ahdistava."
Meinaat, että vieläkin on tausta liian tumma? Ei hemmetti kun kävin Tieteen Kuvalehden sivuilla niin niillä oli musta tausta. Proffa, jolle sivuja teen, ainakin oli mielissään uudesta värityksestä.
"... ei Firefoxini osaa näyttää sivuttaissuuntaista vierityspalkkia."
Kiitoksia, tuo oli tärkeä huomio. Pitää korjailla se. En ollut itse hoksannut moista kun tässä säätelen kolmen eri selaimen keskellä.
(Korjasin sen nyt, säädin sen lisäksi siten, että laitimmainen linkki pomppaa etummaisen alapuolelle, joten navigaatio pelittää vielä kavennetussa moodissakin. Tosin tämä toimii nyt aluksi vain hyvillä selaimilla, koska IE ei ymmärrä min-width komentoa.)
Pitää kokeilla tehdä nuo niin, että vasen reuna näytetään prosentteina vapaasta tilasta joten se supistuisi pois sivua kavennettaessa. Joudun silloin suunnittelemaan vähän uusiksi tuon vasemman yläkulman logon tapauksen, koska en halua tehdä enempää tyhjää tilaa ylös.
"...pudotusvalikot eivät taida toimia IE 6:lla tai aiemmilla."
Toimivat ne ainakin kutosella. Pitäisivät toimia myös vitosella IE:n erillisen CSS-korjaussheetin vuoksi.
"miksi osa linkeistä on ruudun alalaidassa ja osa ylälaidassa?"
Jos ne haluaa laittaa noin vaakatasoon niin sitten on pakko tehdä tuollainen ratkaisu. Ei niitä muuten saa mahdutettua samalle sivulle. Jos taas laittaisin ne pystytasoon niin siitä seuraisi omat ongelmansa. Eikös kaikilla sivuilla ole vähän enemmän linkkejä siellä sun täällä? Ajattelin sijoitella "vähemmän tärkeät" linkit (linkit joita vierailija ei heti kaipaa) alalaitaan kuten palaute, W3C-linkit jne. Kuitenkin ne ovat sieltä helposti paikallistettavissa. Aloitussivu jolle käyttäjä tulee tulee olemaan niin matala, että myös alapuolen linkit näkyvät.
"Tuo ylälaidan logo on..."
Pitää kattoa mitä sille tekee. Tekaisin siitä taas uuden version :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.
