Työvaiheet

WWW-sivuston toteutuksen työvaiheet luettelona aakkosjärjestyksessä, tehty alun perin yritysmielessä tuotteistuksen osana, eikä mahdollisesti sisällä aivan kaikkia mahdollisia yksityiskohtia. Monet linkit ovat pop-up -ikkunoita, jotka johtavat tälle samalle sivulle, mutta avautuvat joillakin selaimilla oletusarvoisesti toiseen ikkunaan. Etsi painamalla Ctrl + F.

© Ulrika Juselius (1999) 2004.

1. animaatioiden teko
2. artistic textin kirjoitus ja muokkaus kuvankäsittely- tai vektorigrafiikkaohjelmassa
• kirjoitus, fontti, pistekoko, efektit, värit, vaihtoehtojen kokeilu jne.
3. elementtien asettelu

Muita erikoismerkkejä
☺	☺	•	•
☻	☻	■	■
♪	♪	€	€
♫	♫	20°C	°
☼	☼	©	©
†	†	(k)m²	²
∞	∞	H₂O	₂
♣	♣	♦	♦
♠	♠	♥	♥
≠	≠	◊	◊
—	—	→	→

4. erikoismerkkien koodien tarkistaminen ja näkyvyys eri selaimilla
• tavallisimmat erikoismerkit ja kreikkalainen merkistö löytyvät sivuilta Entiteetit HTML:ssä, ks. myös Kyrillinen merkistö näppäimistöllä
• kirjainmerkkien koodeja saa myös kopioimalla merkin sivueditoriin tai BabelPad- ja BabelMap-merkkieditoreilla, mutta kuvamerkeille ei juurikaan ole koodeja eivätkä ne välttämättä näy kaikilla selaimilla
• ei saa kirjoittaa (k)m2 tai H2O - niistä tulee mieleen jokin jamesbondmainen salaisen palvelun agentti
• alaindeksin saa aikaan koodilla ₂, esimerkiksi H₂O, ja yläindeksin koodilla ², esimerkiksi km², jotka toimivat oikein kaikilla testiselaimilla ilman ylimääräisiä säätöjä
• ala- ja yläindeksien arvot 1/4 - 9 löytyvät mm. BabelMap-merkkieditorilla, mutta aivan kaikki eivät näy ainakaan IE:llä
• molemmat indeksit saa aikaan myös tageilla ² ja ₂ ja määrittämällä niille pienemmän pistekoon että ne eivät vaikuttaisi rivinväliin, pistekoon muutos toimii vain IE:llä ja Gecko-selaimilla, Operalla rivinväli kasvaa molemmilla indekseillä
• oikealla olevat erikoismerkit näkyvät kaikilla muilla Windows-testiselaimilla, paitsi euron merkki kolmas ylhäältä oikealla, joka näkyy Safarilla oikein vasta versiolla 5.0, mutta aikaisemmilla versioilla tekstin peruslinjan alapuolella olevana kaksoispisteenä, entiteetti € (€) ja heksadesimaali € (€) näkyvät Safarin aikaisemmilla versioilla pilkkuna
• ©-merkin voi korvata merkeillä (c)
5. kehysten määritys
• jos sivusto on pieni, sopii monikehyksinenkin, jos laaja, niin yhdellä sivulla toimiva yksikehyksinen
6. kehysten suunnittelu ja teko
• kehykset ovat koko työn visuaalisen ilmeen ja värimaailman lähtökohta, johon kaikki myöhemmät ratkaisut nojaavat, käyttöliittymä, jonka tarkoituksena on navigoinnin helpottaminen
• oltava pitkäikäinen ja vuodenajoista riippumaton, ei saa kilpailla vahvuudessa sivujen kanssa
• ks. myös suunnittelu, visiointi ja Ideasta Internetiin
• sivuston alkusivun tai framesetin nimi on index.htm tai index.html, iframen koodi löytyy HTML-sivun lopusta lähdekoodista
• monikehyksisessä sivustossa index.htm(l) ei ole varsinainen sivu, jonne sijoitettaisi tekstiä ja kuvaa, vaan paikka, jossa määritellään kehysten määrä, koko ja sijainti ja nimet, joiden mukaan sivustonsisäiset linkit ohjautuvat oikeille paikoilleen
• yhdellä sivulla tapahtuvalla sivustolla vakioelementit simuloivat kehyksiä, kaikki navigointi on sijoitettava jokaiselle sivulle
7. koodin kirjoitus
• Notepad, WordPad, EditPad Lite, NoteTab Light tms.
8. koodin muotoilu
• selkeästi ryhmitellen ja suhteellisen tiiviisti, ettei tyhjä tila turhaan kasvattaisi tiedoston kokoa ja jokaisen tyylin yhteyteen piilotusmerkkien sisään selvitys siitä mihin se kuuluu, että sivujen myöhempi ylläpito helpottuisi
• piilotusmerkit: HTML <!-- tekstiä -->, CSS /* tekstiä */, JavaScript // tekstiä
9. koodin valinta
• perusrakenne HTML, JavaScriptiä mm. pop-up -ikkunoissa, vaihtuvissa kuvissa, kuvagallerioissa tms., tyyliohjeet CSS
10. koodistandardin valinta
• länsimaiset iso-8859-1 tai windows-1252
• jos koko sivu on kyrillistä, sen voi kirjoittaa joko tekstinkäsittelyohjelmassa ja kopioida sieltä Notepadiin tai suoraan Notepadissa kun kieleksi on valittu venäjä, valitaan tallennusmuodoksi kaikki tiedostot, kirjoitetaan tiedostotunnisteeksi .htm(l) ja valitaan koodaukseksi UTF-8, joka lisätään myös metatekstiin lopullisen sivun alkuun (charset= UTF-8), näin kyrillinen näyttää kyrilliseltä myös sivun lähdekoodissa
• esimerkiksi EditPad Litessä on laaja valikoima koodistandardeja
• ks. myös Character encoding (Wikipedia) ja Kyrillinen merkistö näppäimistöllä
11. korvaavien valokuvien käyttö oikeiden kuvien puuttuessa kokeiluja varten tilapäisesti sivuille sijoitettuina
• suunnittelun ydin ei toteudu näin, vaan teettää vähintään kaksinkertaisen työn, ks. myös kuvien sijoitus sivuille
• puuttuvan tekstin voi korvata suunnitteluvaiheessa Adoben Lorem ipsumilla - tällöin on kuitenkin syytä pystyä arvioimaan ennakolta tekstin laajuus ja muoto -, mutta jokaisessa valokuvassa on eri värit, suunnat, liikkeet, jännitteet ja painopisteet, joista riippuu sen sijoitus sivulla, eikä laajalevikkisessä WWW-esityksessä myöskään ole hyvä käyttää runsaasti valmiita clipart-kuvia, vaan kaiken olisi parempi olla omaa tuotantoa
12. kuvan peruskäsittely
• koko, rajaus, puhdistus, kontrastin, terävyyden ja sävyjen korjailu
13. kuvankäsittely
• koko, rajaus, puhdistus, kontrastin, terävyyden ja sävyjen korjailu, kuvien yhdisteleminen, osien poisto, muuntelu, efektit jne.
14. kuvankäsittelyohjelman ominaisuuksilla kehitelty kuva
• esimerkiksi taustakuvioita
15. kuvien resoluution valinta
• työtiedostoissa kuvien resoluution on oltava aina vähintään 150 dpi, piirroksilla tai teksteillä vieläkin suurempi, 300 dpi tai jopa 600 dpi
• sivulle sijoitettu lopullinen verkkokelpoinen kuvatiedosto on aina 72 dpi
• resoluutio voi olla myös suurempi, jos kysymyksessä on vain tallennettavaksi tarkoitettu kuva linkkinä sivulle sijoitetun lisäksi
16. kuvien sijoitus sivulle
• sivujen asettelussa apuna kultainen leikkaus, mikäli mahdollista
• erilaiset massat pitävät toisensa tasapainossa, jolla tarkoitetaan erilaisten muotojen, kokojen, valojen, varjojen ja värien tasapainoa
• visuaalisena hahmona jokaisessa kuvassa on oma suunta, liike, valo ja jännitteet, jotka ratkaisevat kuvan paikan sivulla
• sivusto on visuaalinen kokonaisuus, joka lähtee liikkeelle visuaalisesta materiaalista ja em. syistä tarvitsee onnistuakseen nimenomaan oikeat kuvat, ks. myös korvaavien kuvien käyttö
17. kuvien skannaus
• useampi vaihtoehtoinen kuva kokeiluja varten
18. kuvien tiedostomuodon valinta
• transparentille *.gif tai *.png, muille *.jpg
• *.jpg-muodossa huomioidaan pakkaussuhteen vaikutus kuvan laatuun
19. kuvien valinta
20. käsikirjoituksen teko
• kuvat, tekstit, rakenne, sivujen määrä, sivustonsisäinen linkitys yms.
21. linkkien haku
22. linkkien teko
• sivustonsisäiset ja ulkoiset linkit
• hiiren kursorin ollessa linkkikuvan päällä tulee näkyviin alt-teksti, joka kertoo, minne linkki johtaa, title-teksti lisätään myös sellaisiin tekstilinkkeihin, jotka eivät yksiselitteisesti kerro linkin sisältöä
23. linkkien toiminnan tarkistaminen
• olemassaolevat sivustonsisäiset ja ulkoiset linkit
24. linkkivärien valinta
• kaikki värit kauttaaltaan läpi työn voi valita jostakin joka sivulla toistuvasta elementistä
25. materiaalin kokoaminen
• kaikki materiaali koossa ennen työn aloittamista: tekstit, kuvat, laskenta- *.pdf- ym. linkitettävät tiedostot, saatavuus, tekijänoikeudet
26. menun teko
• valikot, alavalikot, ala-alavalikot, rakenne, jäsentely, värit, linkit, sijoitus
27. muutokset ja korjaukset
28. näytön resoluution valinta
• nykyisin kannattaa tähdätä resoluutioon 1024 x 768, mutta on varmistettava, että sivut mahtuvat myös resoluutiolle 800 x 600
• sivuston voisi tehdä myös zoomattavaksi kahdelle eri resoluutiolle, mutta se ei enää juuri kannata, koska sivuja voi zoomata uusimmilla selainversioilla
• 1-kehyksisessä yhdellä sivulla tapahtuvassa sivustossa yksi koko riittää kun mitat ovat prosentteina
29. oikoluku, kielenhuolto, merkintätavat, semantiikka, sidoksisuus yms.
30. omien valokuvien käyttö pysyvästi sivuille sijoitettuina
31. *.pdf-tiedosto(je)n teko
• = Portable Document Format
• laitteisto- ja ohjelmistoriippumaton tallennusmuoto muista ohjelmista, *.pdf-muotoon tallennetaan linkitettäväksi esimerkiksi tekstinkäsittely-, laskenta-, piirros-, esitysgrafiikka-, taitto- ja kuvankäsittelyohjelmilla tehtyjä tiedostoja
• tekstinkäsittely-, laskenta-, piirros-, esitysgrafiikka-,ja kuvankäsittelyohjelmilla tehtyjä tiedostoja voi linkittää myös omissa tiedostomuodoissaan
32. pop-up -ikkunoiden teko
• kolme erilaista JavaScriptiä löytyy mm. tämän sivun koodista
• eri kokoisille ikkunoille eri koodi
• jokaiseen pop-up -ikkunaan on merkittävä niiden sijainti, koska hakuohjelmat saattavat löytää ne itsenäisinä sivuina, jolloin on oltava linkki sinne, minne ne kuuluvat
33. sivuista tiedottaminen ja osoitteen ilmoittaminen
• kohderyhmät, yhteistyötahot, linkkisivustot, media ja mahdolliset muut asiaankuuluvat tahot heti sivuston valmistuttua
• on ilmoitettava koko protokollaosoite, mikä sekaannuksen välttämiseksi on välttämätöntä varsinkin silloin, jos osoitteeseen ei kuulu www-osaa: jos www-osan kirjoittaa myös sellaiseen osoitteeseen, johon se ei kuulu, sivua ei voi näyttää, koska sellaista osoitetta ei ole
34. sivujen dokumentointi
• listataan jokainen html-tiedosto, kunkin sisältämät kuvatiedostot, sivustonsisäiset linkit ja pop-up -ikkunat ja aakkostetaan sekä html-tiedostonimen että otsikon mukaan
• listataan ulkoiset linkit, tehdään niistä erillinen html-tiedosto toiminnan myöhempää testaamistarvetta varten ja merkitään jokaisen kohdalle, miltä sivuilta ne löytyvät
• myös työvaiheiden luettelointi ja niiden sisällön yksilöinti (tämä sivu)
• sivujen hierarkiasta ja linkityksistä kannattaa tehdä rakennekaavio, tyyliohjetiedosto ja koodit kannattaa myös tulostaa varmuuden vuoksi
35. sivujen ilmoittaminen hakuohjelmille
• ensisijaisesti Google ja Yahoo
• lukuisat muut hakuohjelmat käyttävät Yahoon hakutoimintoja
36. sivujen käyttöohjeen ja/tai tietojen kirjaaminen
• navigointi, käyttöoikeudet, tekijänoikeudet, netiketti, julkistamis- ja päivityspäivämäärät, päivitykset
37. sivujen siirto palvelinkoneelle
38. sivujen sisällön kirjoittaminen
• jos sivusto on laaja, kannattaa tehdä erillinen sisällysluettelo eli sivukartta
39. sivujen testaaminen eri resoluutioilla
• sivusto on välttämätöntä testata vähintään kahdella eri resoluutiolla vaikka vain samallakin koneella
40. sivujen testaaminen eri selaimilla
• jos koodi kirjoitetaan jollakin teksturilla, on jokin selain asettelun tarkistamisen välttämätön väline joka työvaiheessa
• sivuja kannattaa testata ensisijaisesti Internet Explorer 6.0+:lla, joka on yleisimmin käytetty selain, ja myös Firefoxilla ja Operalla
41. sivujen testaaminen toisilla koneilla
• eri tavoin säädetyillä näytöillä lopputulos on erilainen
• on mahdotonta tehdä sivustoa, joka olisi tasan samanlainen kaikilla mahdollisilla näytöillä
42. sivujen testauttaminen käyttäjillä
• voisi pyytää joitakin tuttavia testaamaan sivujen toimintaa ja käytettävyyttä
43. sivujen tulostaminen oikolukua ja -katselua varten
44. sivutilan hankkiminen
• laajakaistan hintaan kuuluen, ns. ilmaiset palvelimet tai oma verkkotunnus
45. skriptien haku verkosta
• verkosta löytyy helposti muokattavia ilmaisia JavaScript-koodeja lukemattomiin eri tarkoituksiin, päiväyksiä, lumisadetta, menuja, kuvagallerioita jne.
46. suunnittelu
• sisältö, rakenne, kokonaisuus, yhtenäisyys, logiikka, tasapaino, tilanjako, ryhmittely, liike, suunta, jännite, valot, varjot, värit, suhteet, eri mahdollisuuksien kokeilu, originaalit, tekijänoikeudet jne., ks. myös visiointi
• ei koristelua koristelun vuoksi, ei efektiä efektin vuoksi, ei muotoa muodon vuoksi, ei koodia koodin vuoksi, symmetria syntyy säännöstä, epäsymmetria liikkeestä ja konstrasteista, muoto sisällöstä
• monikehyksisen sivuston minkä tahansa sivun minkä tahansa kohdan on sovittava yhteen kehyksien kanssa ja oltava tunnistettavissa samaan kokonaisuuteen kuuluviksi
• sivuston tulee erottua joukosta, lukemattomista muista sivustoista, ks. myös kehysten suunnittelu
• suunnitelma ei ole valmis sitten kun se on tehty, vaan se elää pitkin matkaa koko prosessin ajan, ei kannata toteuttaa jäykästi alkuperäistä ideaansa, jos se alkaa matkan varrella muuttua
• KISS-metodi = Keep It Simple, Stupid
47. taulukoiden teko
• koko työ taulukkotaittona, mutta sivuille saattaa olla tarpeen lisätä myös sisäkkäisiä taulukoita
• muut taulukot, jotka sisältävät numeroita ja/tai tekstiä
48. taustakuvien ja -kuvioiden teko
• ei kirjavaa ja sekavaa, mikä haittaisi lukemista ja veisi huomion kuvilta, vaan hillittyä ja rauhallista
49. tekstin kääntäminen muille kielille ja/tai muista kielistä
50. tekstin luominen, toimitustyö
51. tekstin sijoitus sivulle
• leikepöydän kautta kopioiden tai suoraan koodin joukkoon kirjoittamalla
• myös kaiken aakkostaminen, mikä vain on mahdollista, mm. linkkilistat, sisällysluettelot ja muut hakemistot
52. tekstin skannaus
53. tekstinkäsittely, puhtaaksikirjoitus
54. tiedonhaku verkosta ja/tai kirjallisuudesta
• valikointi, referointi, stilisointi, siteeraus, tietojen paikkansapitävyyden todennäköisyyden arviointi, lähdemaininnat, tutkimus- ja toimitustyö
55. tiedostojen tallennus
• raskaimmat työtiedostot voivat painaa vähintään 40 - 50 Mt
56. tiedostojen varmuuskopiointi
• useita kopioita eri työvaiheissa CD:lle tai vähintään muistitikulle
• koko sivuston siirto CD:lle työtiedostoineen
57. tiedostomuotomuunnokset
• tallennettaessa korkearesoluutioisen työtiedoston resoluutio muutetaan 72 dpi:ksi
• ks. myös kuvien tiedostomuodon valinta ja *.pdf-tiedostojen teko
58. tyyliohjeiden teko
• CSS-tyyliohjeita ja JavaScript-toimintoja ei sijoiteta joka sivulle erikseen, vaan tallennetaan *.css- ja *.js-tiedostoiksi, jolloin ne ovat yhdessä paikassa muokattavissa
• IE:lle ja tarpeen mukaan myös Gecko-selaimille ja Operalle rinnakkaiset tyyliohjeet siinä vaiheessa kun sivusto on valmis yhdelle selaimelle
59. ulkoasun hienosäätöä
60. ulkoisten linkkien etsiminen ja täydentäminen
• valikointi, tietojen paikkansapitävyyden todennäköisyyden arviointi
61. ulkoisten linkkien toiminnan tarkistaminen
62. vakioelementtien suunnittelu, teko ja yhteensopivuuden testaaminen suunnitteluvaiheen eri versioilla
• navigointi, viivat, palkit, symbolit, taustakuvat, anfangit, loppumerkit yms.
63. viimeistely
64. visiointi, ideointi
• työn tärkein vaihe
• sisältö, kohderyhmä, käsikirjoitus, kokonaisuus, mielikuva, imago, ominaislaatu, houkuttelevuus, värit, mennyt, tuleva, nykyisyys, eksaktit tiedot, vain päässä tapahtuva intuitiivinen ja ohjailematon prosessointi, alitajuinen tajunnanvirta
• ks. myös suunnittelu
65. yhteydet muihin palveluihin
• arkistot, kirjastot, virastot, yksityishenkilöt, yritykset, seurakunnat yms.
66. yhteydet työn teettäjään