|
Sivuston tiedot Sivusto on tehty 20 tunnin WWW-sivuston suunnittelu ja toteutus  
Kopioi tästä linkkikuva sivullesi.
Tällä sivulla tekstin alku on säilytetty pienin muutoksin melko ennallaan, mutta kaksi muuta pääotsikkoa on lisätty myöhemmin. Linkkejä tarkistetaan säännöllisesti ja muita sivuja päivitetään tarvittaessa. Sivustoa saa käyttää vapaasti yksityiseen itseopiskeluun tai opetuskäyttöön vain online tai tulosteina, siteerata ja referoida lähde mainiten ja linkittää omilta sivuiltaan. Sivustoa tai sen osia ei saa tallentaa omalle koneelle, ei kopioida kuvia ja tekstejä toisiin yhteyksiin, ei linkittää oman sivustonsa sisään eikä liittää sen yhteyteen mainoksia, eli linkin targetin on oltava _blank tai _top. Mahdollisista poikkeustapauksista on aina neuvoteltava tekijän kanssa. Ks. Muutama sana tekijänoikeuksista ja Netiketti. © Ulrika Juselius (1999) 2004. Sisältö ja tavoitteet Tavoitteena on valmistaa kurssin aikana kurssipaikalla ja osittain kotona oma WWW-sivusto, laajuudeltaan alkusivu ja Painopiste on nimenomaan ulkoasun suunnittelussa niin, että opiskelija saisi perustiedot sivuston suunnittelusta ja toteutuksesta ja valmiudet ongelmanratkaisuun ja itseopiskelun jatkamiseen. Sivusto toteutetaan kirjoittamalla HTML-koodi Notepadilla, EditPad Litella tai muulla teksturilla ilman editoria ja samalla tutustutaan myös CSS-tyyliohjeiden käyttöön ja tekoon Internet Explorer -selaimen vaatimusten mukaan. Miksi kirjoittamalla kun editorejakin on olemassa? Ei tarvitse hankkia kallista ohjelmaa, koska se on mahdollista ilmankin. Sitä paitsi työstä tulee silloin varmemmin yksilöllistä, kun siellä eivät näy vahingossakaan minkään ohjelman tunnistettavissa olevat elementit ja oletusarvot. Editorit - erityisesti tekstinkäsittelyohjelmat - myös tuottavat tyypillisesti paljon turhaa koodia ja tekijätietoja, joilla ei ole mitään toiminnallista merkitystä. Joka sivulla samat tiedot aina uudestaan vain kasvattavat turhaan tiedostojen kokoa. Ensimmäiset editorit 1990-luvun puolivälissä näyttivätkin vain koodin, vaikka toimivat valikkojen kautta. Kun tottuu tuottamaan koodin kirjoittamalla, voi lopulta vain kummastella, mihin editoria on koskaan kaivannutkaan. Nämäkin sivut on alun perin tehty ilman editoria Notepadilla ja jatkettu myöhemmin EditPab Litella. Sitä paitsi: jos verkossa liikkuessaan näkee mielenkiintoisen sivun ja haluaisi tietää miten se on tehty, pystyy sivun koodista päättelemään sen ja oppii siten helposti uusia menettelytapoja. Myös verkossa löytyvät koodiohjeet annetaan kirjoitetun koodin eikä editorin näkökulmasta. Lähtökohtana tulisi olla kaikki materiaali valmiina - tekstit ja kuvat - jotta työ pääsisi sujuvasti vauhtiin. Tekstin korvikkeeksi sopii alkuvaiheessa myös Lorem Ipsum. HTML-tuntemus on suotavaa, ja mielellään se, että opiskelija olisi jo hiukan kokeillut WWW-sivujen tekemistä. Opiskelijalla voi myös olla jo tekeillä tai peräti verkossa sellainen, jonka ulkoasun hän haluaisi uusia, mutta materiaali sopii myös aloittelijoille. Opetusmetodina on yksilöllinen ohjaus aina tarpeen mukaan. Ohjaaja on paikalla opastamassa ja vastaamassa kysymyksiin ja opiskelu on itseohjautuvaa, itsenäistä työskentelyä. Samalla käsitellään kunkin opiskelijan tarvitsemassa laajuudessa mm. skannausta, kuvankäsittelyä, typografiaa, fontteja, värioppia ja kielenhuoltoa. Lähestymistapa on totutusta poikkeava - yleensä sivunteko-oppaat tuntuvat pysähtyvän pelkän koodin ja kurssit editorin käytön tasolle, mutta tässä lähtökohtana on visuaalis-psykologis-semioottinen suunnittelun näkökulma, sivuston luettavuus, silmäiltävyys ja käytettävyys.  Lähdekoodin näkee hiiren oikealla näppäimellä avautuvan pikavalikon kautta.
Sivuilla on myös jonkin verran kirjavuutta ja siksi myös kovin monia erilaisia tyyliohjeita, joita ei normaalitilanteessa olisi sinne sijoitettu, mutta ovat tässä mukana esimerkin vuoksi ja koska eri selaimille samat arvot merkitsevät eri asioita. Oppimateriaalina toimii tämä sivusto koodeineen ja linkkeineen. Koodista voi etsiä haluamansa kohdan valitsemallaan hakusanalla painamalla Ctrl + F. Olen pyrkinyt vastaamaan kysymyksiin, joihin itse halusin vastauksia oman opetteluni alkuvaiheessa. Nämä sivut saattavat sisältää jotakin, joka jo on tuttua tai tuntuu tarpeettomalta tai teoreettiselta, mutta teoriahan syntyy käytännöstä ja edelleen päinvastoin. Sitä paitsi esimerkiksi värien ja typografian teoriat ovat olleet samat maailman sivu, yksilölliset maut ja mieltymykset vain vaihtuvat. Sivuilla saattaa myös löytyä samoja asioita useammassakin yhteydessä, mutta sieltä saattaa myös puuttua jotakin, jonka joku kokee hyvinkin tärkeäksi. Kurssin keston ajan lisäyksiä ja muutoksia voi tehdä tarpeen mukaan, ja näin opiskelijat voivat samalla itse osallistua myös oppimateriaalin muotoutumiseen. Tietoiskuna sivusto sopii myös sivuja teettävälle asiakkaalle, jonka on hyvä tietää mikä voi olla mahdollista, mitä voi olla odotettavissa ja mitä kaikkea on hyvä ottaa huomioon. 'Face Lifts' Sivusto on tehty syksyllä 2004 Internet Explorer 5.0 - 6.0:lle ja julkistettu 18.2.2005, jolloin sivumäärä tulosteina oli 49 ja lisäksi 7 pop-up Alkuperäinen RGB-idea sai väistyä, kun uusittu ulkoasu - tavoitteena graafisempi ilme - julkistettiin 14.10.2005. Samalla myös sisältöä tarkistettiin, jolloin sen sivumäärä nousi tulosteina 64:ään. Lisäksi olivat uuden 'tyylittömän' suunnittelusivun 17 sivua ja 10 pop-up Sivuille Ideasta Internetiin, Väri on valoa ja tälle sivulle on 17.11.2005 lisätty valintaikkuna-, infoikkuna- ja valikkoesimerkkejä ja 18.7.2006 Väri on valoa -sivulle tekstiä ja taulukot sähkömagneettisesta säteilystä ja värisyvyydestä. Päivitysten 4.10.2006, 30.12.2006 ja 1.10.2008 yhteydessä on siellä täällä tehty pieniä hienosäätöjä: lisätty, muutettu, poistettu, siirretty tai täydennetty sanoja, lauseita, kappaleita ja tekstilaatikoita. Oikean solun kello on lisätty 11.5.2007. Jos kellolla on joskus tilapäisiä yhteysongelmia, se näkyy sivujen avautumisen hitautena ja virheilmoituksena tilarivillä. Kello ei kuitenkaan yleensä ole kateissa kovin pitkiä aikoja kerrallaan. Sivusto toimi yhä edelleen kehyksissä, koska sivuja oli vähän ja kaikki pääsivut mahtuivat navigointinappeihin. 1.10.2008 Operan ja Gecko-selainten CSS Operaa ja Gecko-selaimia varten on osoitteenmuutoksen 1.10.2008 yhteydessä tehty omat tyyliohjetiedostot, joissa silmiinpistävimmät kauneusvirheet on korjattu, joten niilläkin selaimilla sivusto toimii nyt paremmin. Koska alkuvaiheessa on tärkeätä oppia perustoiminnot yleisimmin käytetylle yhdelle selaimelle, joka vieläkin on Internet Explorer, ei tämä ominaisuus ole ollut kovin tarpeellinen. Operalla suurin osa tyyleistä toimi suunnilleen Internet Explorerin tapaan, mutta Operaa varten joutui tekemään myös muutamia omia tyylejä ja omat luettelomerkkikuvat. 15.6.2009 yhteen kehykseen Keväällä 2009 sivusto on muutettu yhdessä kehyksessä toimivaksi ja julkistettu 15.6.2009. Sininen väri on pop-uppien Sivun alkuun Sivujen pääotsikot olivat jonkin aikaa mietintämyssyssä ja koekatselussa, kunnes lopulta päädyin vaihteeksi ja ainakin toistaiseksi kokeilemaan aivan tavallista Impactia tekstinä, mutta hiukan harvennettuna. Kaikki koodit ja tekstit on tarkistettu, tehty hienosäätöjä ja pieniä päivityksiä, täydennyksiä ja/tai poistoja joka sivulla, joitakin uusia tyylejä yksittäisille esimerkkitilanteille asettelun hallinnan helpottamiseksi muilla selaimilla ja lisätty neljä kuvaa Ideasta Internetiin ja Väri on valoa -sivuille. Myös yksi Väri on valoa -sivulla vasta havaittu lapsus on oikaistu ja muutama epäselvyys selkeytetty, mutta mitään suurempia lisäyksiä ei juuri nyt ole tehty. Sivumäärä tulosteina on kuitenkin kasvanut sitten viime laskennan, ja lisäksi yhden sivun asettelu yli kaksinkertaisti niiden määrän, joten niitä olisi nyt Internet Explorerin kautta tulostettuna pop-up 3.2.2010 mennessä Edellisen jälkeen on CSS-sivulle mm. vaihdettu yksi kuva ja lisätty kaksi, päivitetty Typografia-sivulla mm. Fonttien valinta eli turvalliset fontit ajan tasalle ja muitakin tekstejä, tehty pieniä hienosäätöjä, esimerkkien muutoksia, lisäyksiä ja täydennyksiä siellä täällä joka sivulla ja tarkistettu linkit. Sekä isoja html-sivuja että pop-uppeja sivustossa on 10 kpl eli yhteensä 20 kpl, lisäksi ovat CSS-sivun iframe-esimerkin kaksi pientä sivua, joista toinen tyhjä, *.pdf-tiedosto Kyrillinen merkistö näppäimistöllä ja Excel-tiedosto sivujen määrästä tulosteina. Testaaminen ja testiselaimet Näiden sivujen muotoilut toimivat tarkoitetulla tavalla oikein vain Internet Explorerilla ja muilla Trident-pohjaisilla selaimilla ja toiseksi parhaiten Operalla. Mm. pop-uppien Sivun alkuun -napit eivät toimi Operalla. Transparenssit toimivat jo kaikilla testiselaimilla, paitsi että Työvaiheet-sivun transparenssi näyttää aiheuttavan sen, että taustakuva ei IE:llä ja Maxthonilla tahdo liikkua mukana, mutta kylläkin muilla selaimilla. Googlen Chromella sivusto toimii ehdottomasti kaikkein huonoimmin. Päivitys 15.6.2009 yhteen kehykseen aiheutti ongelman CSS-sivun pyöristettyjen kulmien kahdelle esimerkille, jotka toimivat huonosti tällä sivustolla IE:llä ja Maxthonilla. Syynä saattaa olla yhteensopivuusongelma tämän sivuston tavanomaista useampien JavaScriptien ja tyyliohjeiden kanssa juuri Trident-pohjaisilla selaimilla, koska pop-up Testiselaimet Testiselaimina ovat olleet Internet Explorer 7.0.5730.13 ja 8.0.6001.18702, Firefox 2.0.0.20 ja 3.6, Netscape 9.0.0.6, Flock 1.0.9, Chrome 1.0.154.48 ja 4.0.249.78, SeaMonkey 1.1.14 ja 1.1.17, Safari 4.0 Beta ja 4.0.4.531.21.10, Opera 9.64 ja 10.51 ja Maxthon 2.5.11. Netscape on vuonna 1994 julkaistu ensimmäinen graafinen selain, jonka sovelluskehitys ja tuki lopetettiin keväällä 2008. Silloin Netscape ilmoitti seuraajakseen Flockin ja suositteli myös Firefoxia. Myös Flock-selaimen tuki päättyi 26.4.2011 ja Flock Team suositteli tilalle Chromea tai Firefoxia. Joillakin Netscape ja Flock saattavat kuitenkin vielä olla käytössä, minkä vuoksi nekin ovat yhä edelleen testiselainten joukossa. Safarilla €-merkki näkyy oikein vasta versiosta 5.0 alkaen. Maxthon on asennettu ja testattu vasta 18.3.2010 ja Avant 11.6.2010. Niillä on sama layout engine kuin Internet Explorerilla, joten ne näyttävät myös vierityspalkkien värit ja siirtymäefektit, mutta avaavat pop-up -ikkunat ja ulkoiset linkit oletusarvoisesti uuteen välilehteen. Näiden sivujen tekemisen ja päivityksen jälkeen julkaistiin Internet Explorer 8 Beta 1, jolla tämä versioille 5.5 - 7.0 tehty sivusto ei aluksi näkynyt oikein, mutta selaimella voi myös emuloida versiota 7. Beta 2 toimi jo paremmin ja lopullinen versio 8.0.6001.18702 aivan normaalisti. 30.8. 2011 julkaistiin Opera 11.51, jonka JavaScript-yhteensopivuus on aikaisempia versioita selvästi heikompi. Se ei näytä enää ainakaan Sothinkin JavaScript-menun alavalikoita ollenkaan, tulkitsee koko menun olevan taulukossa ja hakee siihen tyylit sivun tyyliohjeesta, ja virhekonsoli ilmoittaa virheeksi merkintöjä, joita sivuilla ei edes ole. Ainakin alun perin testattu versio 9.64 ja myös 10.10 toimivat oikein. Muutos on saattanut tulla jo versiosta 10.50 alkaen, jolloin Opera Software ASA otti käyttöön uuden JavaScript engine Carakanin. Tämä sivusto kuitenkin toimii uusimmallakin Operalla yhä edelleen kaikilta osiltaan entiseen tapaan, vaikka virhekonsoli tulkitseekin kaikki transparenssit virheiksi. 3.4. 2012 on asennettu Lunascape 6.6.0, jossa on valittavissa Trident-, Gecko- ja WebKit -enginet, joka ainakin IE:nä toimii yhtä hyvin kuin IE ja johon on saatavissa runsaasti skinejä. Käynnit näillä sivuilla  Viimeinen laskurilukema 15.6.2009.
Käynnit näillä sivuilla ovat lisääntyneet tasaista tahtia tilastolaskurin lisäämisestä 10.3.2005 lähtien. Koska laskurin sisältäviä sivuja on kaikilla sivustoilla jo noin 130 kpl ja lisääkin ehkä tulossa, olen 30.11.2007 jälkeen lakannut päivittämästä kävijätilastosivua. Useiden laskuripulmien takia luvutkaan eivät enää ole täsmällisiä, mutta kuitenkin hyvin vakiintuneesti suuntaa antavia. Kävijälaskuri jäi näkyviin, mutta koska se rekisteröi vain uniikkikävijät, olivat sen luvut todellisia käyntimääriä pienempiä. Päivityksen 15.6.2009 yhteydessä kävijälaskuri oli kuitenkin jätettävä pois, koska kaikki kävijät eivät välttämättä enää käy alkusivulla, eikä luku tulisi olemaan likimainkaan todellinen. Tilastolaskurit ovat yhä edelleen käytössä, mutta eivät näy käyttäjille. Linkit muilta sivuilta Lumonetti- ja dnainternet-osoitteet jäivät lopultakin pois käytöstä, uusi osoite on ollut http://www.phpoint.fi/ulrikaj/www/ 1.10.2008 alkaen, joten suuri osa alla olevilla sivuilla olevista linkeistä on lakannut toimimasta, ellei niitä ole päivitetty. Jotkin alla olevista linkeistä Sivuston käyttäjinä ovat yksityishenkilöiden ohella monien ammattikorkeakoulujen, yliopistojen ja muiden oppilaitosten opiskelijat.
|