Online Tuotantoprosessi2007
Upcoming SlideShare
Loading in...5
×
 

Online Tuotantoprosessi2007

on

  • 1,440 views

 

Statistics

Views

Total Views
1,440
Views on SlideShare
1,434
Embed Views
6

Actions

Likes
1
Downloads
7
Comments
0

3 Embeds 6

http://www.linkedin.com 3
https://www.linkedin.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Online Tuotantoprosessi2007 Online Tuotantoprosessi2007 Presentation Transcript

  • Mobiili- ja verkkoviestinnän tuotannon haasteet Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com
  • Miten web (www) toimii
    • Web perustuu tietoverkkoon, jossa on insinöörien sopimat säännöt, protokollat, tietojen välittämiseen hajautetusti tietokoneiden välillä
    • Web-selain on fyysikon fyysikolle kehittämä tietokoneohjelma, jolla piti alunperin välittää informaatiota fyysikoiden välillä.
    • Informaatio näytetään “sivu”-käsiteen avulla.
    • Sivu on tekstiä ja linkkejä muihin tiedostoihin (esim kuva-tiedotoihin)
    • Sivulle voi sijoittaa linkin Flash ym tiedostoon, joka taasen näyttää kaiken halutun informaation rikkaammassa muodossa
    • (x)html on hyvin yksinkertainen“ohjelmointikieli”, jota tarvitaan sivun koostamiseksi.
    • Sivut sijaitsevat web-palvelintietokoneella, josta selaimet käyvät hakemassa kopiota paikallisesti tietokoneen ruudulla näytettäväksi
    • Web täytti syksyllä 2006 15 vuotta.
  • Digitaalisen tuotannon erityispiirteitä
    • Julkaisu- ja toteutusteknologian nuoruus
    • Standardien jatkuva muutos
    • Teknologialäheisyys
    • Suunnittelijalla usein tuotantovastuu loppuun saakka
    • Julkaisunopeus
    • Leviämisnopeus ja globaalisuus
    • Käytettävyyden korostuminen
    • Softasuunnittelun sääntöjen mukailu
    • Huomattavan paljon uudelleensuunnittelua ja päivittämistä
    • Esteettömyys
    • Käyttöympäristön ei-arvattavuus (ruudun koko, resoluutio, fontit, selainversio)
    • Jakelu ei ole valvottavissa
    • Rajoitteet taitossa (HTML, cms)
    • Rajoitteet kuvan laadussa (gif, jpeg, png)
    • Vierailijalla ei ole ymmärrystä sivuston koosta, 2-ulotteisuus
    • Vuorovaikutus kävijän kanssa, pullin mittaminen
    • Opastamisen tärkeys
  • Mobiilitoteutuksesta
    • Mobiilissa sisällönvälityksen kustannukset
    • Mobiilissa kustannuseriä lyhytsanomanumeroista
    • SMSM/MMS/Java/XHTML -ratkaisujen eristyneisyys
    • Päätelaitteiden kirjo
    • Kuluttajasuoja
  • Tyypillisen web-projektin vaiheet
    • Vaihe 1: Projektin määrittely
    • Vaihe 2: Sisällön ja rakenteen kehittäminen
    • Vaihe 3: Visuaalinen suunnittelu
    • Vaihe 4: Tuotanto & laadunvarmistus
    • Vaihe 5: Julkaisu & seuranta
    • Iteratiivinen prosessi
    • Vaiheet päällekkäisiä
  • Vaihe 1 - Projektin määrittely
  • VAIHE 1 - Projektin määrittely
    • Tietojen kerääminen
    • Asiakasselvitys ja vaatimukset
      • yleistä tietoa, tuotteet & palvelut
      • toimialan analyysi (jos mahdollista)
      • kohdeyleisö ja tavoiteltu toiminta
      • toivottu yleisvaikutelma
    • Sisältövaatimukset
    • Teknologiamahdollisuudet ja rajoitukset
    • www-palvelin jonne lopputulos sijoitetaan
    • markkinointi- & ylläpitoaktiviteetit
  • Keskusteluiden, selvitysten ja tutustumisen analyysin jälkeen pitäisi olla ymmärrys seuraavista asioista
    • Sivuston tavoitteet – Mitkä ovat yleiset päämäärät? Mitkä ovat bisnestavoitteet? Mitä muita tavoitteita saavutetaan? Mieti seuraavia asioita: käytettävyys, sävy, havainnointi ja viesti.
    • Yleisön ymmärtäminen – Mikä on oletetun kävijäkunnan demografia ja sen käyttäjäprofiilit? Käyttäjäprofiili ottaa demografiset ominaisuudet ja antaa esimerkkikävijälle oikean nimen ja persoonan. Kävijöiden tekniset valmiudet?
    • Aikaisempi materiaali. Jotta tiedät mitä on tehty aikaisemmin ja mitä ei kannata uudestaan tehdä.
    • Sävy – minkälaista sävyä (tone-of-voice) asiakas haluaa? Mihin hän haluaa kävijän kiinnittävän huomionsa (havainnointi)? Sofitikoitu? Sliipattu? Hauska? Uskottava? Turvallinen? Edullinen? Tee selvä tulkinta tästä, koska luova toimeksianto pohjautuu siihen.
    • Laajuus – mitkä ovat projektin rajat kaikista mahdollista näkökulmista (budjetti, aikataulu, luova ratkaisu, tekniset tarpeet ja koko ylipäätään)? Budjettia ei tehdä ilman tätä tietoa!
    • Teknologia – mitä innovatiivisia tekniikoita asiakas odottaa käytettävän? Back-end/front-end? Tee teknisten tarpeiden määrittely. Tunnukset palvelimille.
    • Ylläpito – mikä on asiakkaan näkemys sivuston tulevista päivityksistä? Muotoile jokin perusajatus, kuinka usein ja missä määrin sivustoa päivitetään. Ylläpitoselvitys antaa lisätietoa.
    • Yhteydenpito – Ketkä ovat mukana projektissa?
  • Luovan tehtävänannon teko
    • Projektin tiivistelmä (mitä, kenelle, miksi)
    • Havainnointi/sävy/ohjeistus (toivottu)
    • Viestintästrategia (asiakas)
    • Kilpailutilanne (asiakas)
    • Haluttu viesti yhdellä lauseella
    • Sisäiseen käyttöön
  • Projektisuunnittelu
    • Listaa tavoitteet ja päämäärät sekä yksityiskohdat, rajaukset ja oletukset.
    • Sivujen määrä ja tuotannon koko?
      • Maksaako asiakas kuvat tai muun materiaalin?
      • Toimittaako asiakas kaiken sisältömateriaalin? Lisäkustannuslomake asiakkaan pyytämiin muutoksiin.
      • Flash vai html -sivusto
    • Budjetin laadinta
      • 10-20% puskuri yllättäviin menoihin tai ulkopuolisiin kustannuksiin.
    • Aikataulujen teko
    • Mitä toimitetaan ja kenelle?
    • Projektitiimin kokoaminen
    • Projektin testialueen toteuttaminen palvelintietokoneelle
    • (Käytettävyyden testauksen suunnittelu)
    • Projektin käynnistämien
  • Tuotannon projektointi
    • Sivuston laajuus
    • Sisältöelementtien määrä ja muoto, erityisesti animaatiot,multimedia, ohkjelmoitavat asiat, lomakkeet ja niiden käsittely
    • Kuka tekee grafiikan optimoinnin?
    • Kuka koostaa sivuston?
    • Kuka kirjoittaa tekstit?
    • Onko sivukartta ajantasalla (tai sisältösuunnitelma, käsikirjoitus)?
    • Kuka julkaisee sivuston (tiedostojen siirto palvelimelle)?
    • Kuka hyväksyy lopputuotoksen?
    • Jokainen muutos - erityisesti taittoon liittyvät muutokset - tässä vaiheessa aiheuttaa aikatualun venymisen ja budjetin kasvun.
  • Asiakkaan hallinnasta
    • Jos asiakas allekirjoitti paperin, laita se talteen. Tulosta hyväksynnän sisältävä maili.
    • Pyydä mailitse vahvistus (tai lähetä pyynnöt) suulliseen hyväksyntään.
    • Pidä odotukset realistisina
    • Kommunikoi. Jatkuvasti. Kerro missä mennään. Mitä tapahtuu seuraavaksi?
    • Testipalvelin
    • Monitoimittajaprojekti
  • Millainen on hyvä maksava asiakas www-projektissa?
    • Hyvä asiakas
      • - tavoitteisiin suuntautunut
      • - keskittyy kokonaiskuvaan
      • - vastaan asiakaskyselyyn tarkasti ja selkeästi
      • - ymmärtää verkkoympäristöä ja kehitysprosessia
      • - antaa lopullinen hyväksynnän ja kuittauksen
      • - on yhtä mieltä aiktaulusta ja budjetista (ja lopputuloksesta)
      • - vastaa maileihin ja puhelimeen
      • - on lähestymistavalta tiimikeskeinen
      • - toimittaa sisällön (lähes) ajallaan
      • - on osa ratkaisua eikä osa ongelmaa
    • Huono asiakas
      • - asenne on “nopeasti-sivut-pystyyn”
      • - vaatimukset aikataulun suhteen ovat epärealistiset
      • - ei tiedä, mitä sisällön pitäisi olla, mutta haluaa sen näyttävän “coolia”
      • - pyytää tekemään nopeasti “ensimmäisen version”, koska varsinainen versio tehdään sitten sen jälkeen
      • - ei pysty antamaan lopullista hyväksymistä eikä saata projektipäällikköä yhteyteen päätöksentekijöiden kanssa
      • - asiakasselvitykseen ei löydy aikaa, viittaa aina jo tehtyihin dokumenteihin ja lupaa toimittaa ne tiimille
      • - pieni budjetti, deadline nopeasti
      • - ei kommunikoi, ei pysty tekemään päätöksiä, ei vastaa maileihin tai puheluihin
      • - muuttaa mieltään jatkuvasti
      • - haluaa hoitaa itse luovan puolen “säästääkseen rahaa”
  • Roolit ja resurssit
    • Visuaalinen- / käyttöliittymäsuunnittelija
    • Sisältö- / informaatiosuunnittelija, copy writer
    • Käyttöliittymäohjelmoija / koostaja / site builder
    • Animaattori
    • Tuotanto-AD
    • Flash-ohjelmoija
    • Tekninen ohjelmoija
    • ...
  • Tuotantotyökalut
    • Layout-suunnitteluun ja grafiikan tuottamiseen (gif, jpeg, png)
      • Adobe Photoshop
    • Sivujen koostamiseen (HTML)
      • Macromedia Dreamweaver
      • Notepad, BBEdit
    • Sivujen koostamiseen (Rich Media)
      • Macromedia Flash
    • Yksittäiset animaatiot
      • Adobe ImageReady (gif-animaatiot)
      • Macromedia Flash (flash-animaatiot)
    • Video- ja audiosisällöt
      • Finalcut Pro, Adobe Premier
      • etc
    • Tiedostojen siirtoon (FTP, SCP...)
      • Fetch, Dreamweaver, BBEdit etc
    • Testaukseen (kovalevyltä ja palvelimelta)
      • Mikä tahansa selainohjelma sekä Mac- ja PC-ympäristössä (Safari, Firefox, Internet Explorer, Opera, Netscape ja näiden useita versioita)
  • Vaihe 2 - Sivuston rakenteen kehittäminen
  • Suunnittelu etenee isosta pieneen, kaaoksesta yksityiskohtiin
      • A. Sisältönäkymä (mitä kaikkea tähän palveluun/kampanjaan tehdään)
      • B. Sivustonäkymä (miten ylläoleva jaetaan järkeväksi kokonaisuudeksi)
      • C. Sivunäkymä (miten yksittäiset sivuelementit sijoitetaan eri sivuille)
  • A. Sisältösuunnitelma
    • Sisältösuunnitelma = sisällön runko . Ilman tätä ei päästa eteenpäin projektissa.
    • Sisältösuunnitelmassa ei ole valmista sisältöä (joskin jossain vaiheessa sekin pitää tuottaa) vaan karkea hahmotelma mitä kaikkea sivustolle tullaan sijoittamaan (sekä alustavsti ryhmiteltynä).
    • Älä tuhlaa aikaa otsikohin ja nimeämisiin, se tehdään seuraavassa vaiheessa.
    • Tee suunnitelma sisällön toimittamisesta.
  • Sisältö on aina myöhässä
    • Sisältö on aina myöhässä. 99% projekteista.
    • Tee suunnitelma sisällön toimittamisesta määräpäivineen.
    • Kiireeellisyys on etu.
    • Mitä pikemmin sisältö tulee sen parempi informaatiosuunnitelun ja visuaalisen suunnittelun kannalta.
    • Tee puskuri projektisuunnitelmaan myöhästyvän sisällön varalle
    • Iloitse jos sisältö tulee ajallaan.
  • Huomioitavia yksityiskohtia projektin hallintaan
    • Sisällön “sisäänsyöttö” pitää suunnitella ja aikatauluttaa ja vastuuttaa.
      • Erityinen haaste on sisällönhallintajärjestelmän (Content Management System) päälle toimitettavat projektit.
    • Laita sisältösuunnitelmaan myös ns. toissijainen sisältö
      • META-, TITLE-, lomake- ja virheilmoitustekstit tuotettavaksi sekä tarvittavat valokluvat, piirrokset, taulukot, videot, kartat ym.
      • Tee luettolostasi niin yksityiskohtainen kuin on tarpeen (kuka, milloin).
      • Pidä samalla silmällä projekti laajuutta.
      • Arvioi sisältösuunitelmaa ja tuotoksia joka viikko.
  • B. Sivustonäkymä (site view)
    • Sivustokartta on kuvallinen esitys sivuston rakenteesta, jäsentelystä, kulusta sekä sisällön ja tietojen ryhmittelystä.
    • Miksi sivustokartta (Structure Map)?
      • Kartta viestii, määrittelee ja selvitää rakenteen.
      • Se on esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin yksityiskohtiin asti.
  • Sivukartan teosta
    • Valmiista sivustokartasta tulisi ilmetä selkeästi kaikki (HTML) sivut kunkin sivuston osuuden sisällä.
      • Jokainen sivu saa laatikkonsa.
      • Suurin osa tärkeistä linkeistä ja myös esitetty.
      • Sivustokartta ei ole tekninen yhteenveto eikä se ole täysin toiminnallinen näkymä sivustoon
    • Sivustokartta on perusta navigation suunnittelulle.
    • Sivustokartta on tuotannon tärkeimpiä työkaluja .
      • Sivustokartan pitäminen ajantasalla on tärkeää, jotta siihen voidaan luotettavasti tukeutua kuvituksen, tekstin ja koostaminen tekeminen aikana.
    • Kuka tekee sivustokartan?
      • Informaatiosuunnittelija. Asiakas. Joskus projektipäällikkö.
    • Asiakas hyväksyy sivustokartan. Kaikki muutokset siihen maksavat ja muokkavat toimitusaikataulua.
  •  
  • Sivukartta esitys koko projekista, laajasta näkökulmasta aina moniin pienempiin yksityiskohtiin asti I Level O Level II Level III Level IV Level Main page Extra pages “ TOC, Contact, Help...” Documents “ articles, content pages” D D D D D D D V V ENTRY EXIT Links Door Databases V D Menu Document
  • C. Sivunäkymä (page view)
    • Rautalankamallit (wireframes, storyboards) ovat sivuston kuvalliset käsikirjoitukset.
      • Rautalankamallit ovat käyttöliittymäsuunnittelua
      • Rautalankamalleissa on tietty tiedon hierarkia, mutta ne eivät sanale tarkasti, miten ja missä jotakin pitäisi esitellä.
    • Taittoluonnoksia, jotka keskittyvät kaikkeen muuhun kuin sivun visuaaliseen esitykseen
      • Niissä kuvataan navigointi, tekstin sijoittelu, graafinen jaottelu, olennaisimmat otsikot ja monet muut elementit joita sivulla tullaan tarvitsemaan.
      • Sisältävät raa’an information, jota sivulle halutaan esiintyvän
      • Voivat olla hyvinkin tarkkoja sisältäen jo lopullinen sisällön (tekstit, linkkinimet etc)
    • Luonnokset tehdään tärkemmistä sivuista
  •  
  • Vaihe 3 - Visuaalinen suunnitttelu
  • VAIHE 3 - Visuaalinen suunnittelu
    • Verkkosuunnittelun erottaa perinteisen graafisen suunnittelun lopputuotteista yksi selkeä tekijä: sivusto ei ole kolmiuloitteinen, sitä ei voi pitää käsissään, sitä ei voi käännella.
      • Koneen ääreen asettuva kävijä ei tiedä sivuston kokoa.
      • Eksyminen sivustolle on sääntö kuin poikkeus.
      • Käyttäjälle suunnittelu vaatii sekä käytännöllistä että innovatiivista ajattelua
    • Käyttöympäristö ei ole suunnittelijan kontrollissa
      • Päätelaitteen resoluutio
      • Käytetty selainohjelma
      • Kirjasintyypit, värit
      • Selainlaajennukset - erityisesti flash
    • Käyttäjäkeskinen tavoite joka www-projektin lopputuloksessa on käytön helppous. Jopa markkinointiväen mielestä.
  • Visuaalisen suunnittelun yhdistäminen informaatiosuunnitteluun
    • Visuaalinen design huomioi informaatiosuunnittelun, (1) jalostaa sitä, (2) ideoi esitystavalle mieleenpainuvan ja (3) käytettävän muodon antaen (4) lopullisen graafisen käyttöliittymän .
    • Täydellinen maailma: informaatiosuunnittelu tehdään ensin, sisältö toimitetaan valmiiksi ja sitten alkaa luomisprosessi.
    • Tosimaailma on harvoin näin lineaarinen. Asiakas haluaa nopeasti nähdä jotain tuttua.
      • Rakenntta ja ulkoasua tehdään melkein aina samanaikaisesti.
      • Mutta varsinaista taittoa ei kannata tehdä loppuun ennen kuin sisältö- ja informaatiosuunnitttelu on 99,9% valmis.
  • Kokeile. Mieti. Lainaa. Iteroi.
    • Kuten harvoin graafisessa suunnittelussa – www-sivuston ulkoasu ei synny kertarykäisyllä.
    • Salli iteraatiot, mutta aseta määräajat.
    • Kerro se myös asiakkaalle.
    • Aikataulusta:
      • nopeimmat miettivät 4-5 leiskaa päivässä, mutta keskimäärin visualisti pystyy tekemään yhden ehdotuksen 2-3 päivässä
      • projektipäällikön tulee huolehtia, ettei visualisti käytä tuntikausia parannellen ja hioen asiakkaan tapaamista varten ennen informaatiosuunnittelun valmistumista.
  • Huomioita taitosta
    • Älä ahda informaatiota sivulle, anna taitolle tilaa hengittä
    • Visuaalinen hierarkia
    • Vältä 3-uloitteisuutta. 2,5D riittää.
    • Näytön koko 1024x768 vai 800x600 – 955x600 vai 760x420 pikseliä
    • Venyvä layout
    • Keskimääräinen katseluetäisyys on 50cm
    • Ruudulta on edelleen raskas lukea – lyhyet ja kompaktit kappaleet
    • 6-7 sanaa riviä kohden
    • Käyttäjät osaavat vierittää sivua alaspäin, eivät oikealle
    • Käyttäjät klikkaavat kaikkea mitä voi kuvitella klikattavan etsiessään linkkejä eteenpäin
  • Ruuturesoluution ollessa 1024 x 768 pikseliä, on turva-alue 952 x 528 pikseliä
  •  
  • Vaihe 4 - Tuotanto & laadunvarmistus
  • VAIHE 4 - Tuotanto & laadunvalvonta
    • Tuotannon tavoitteet ovat yksinkertaiset: tehdään sivusto, joka näyttää samanlaiselta ja toimii samalla tavoin kaikille käyttäjille.
    • Arvioi projektin tila ennen tuotantoa.
      • Ollaanko budjetissa ja aikataulussa?
      • Onko sisältö valmis? Tekstit sisältösuunnitelman mukaisesti kirjoitettu ja oikoluettu? Videot kuvattu ja käsitelty sopivana formaattiin? Ääniefektit tehty?
      • Onko testiympäristä teknisesti kunnossa?
    • Verkon dynamo on HTML (XHTML+ CSS).
      • Varmista että tuotantotiimissä on ihmisiä, jotka osaavat toteuttaa mitä on suunniteltu.
    • Lopulliset päätökset:
      • Toiminallisuudet ja ominaisuudet
      • Visuaaliset yksityiskohdat ja taitto
      • Erotetaanko sisältö esitystavasta
      • Optimoitavat selaimet
      • Tiedostorakenne
      • Nimeäminen (otsikot sisällössä, tiedostojen nimet ja hakemistot)
      • Palvelintiedot
  • Laajuus: odotukset vs. realiteetit.
    • Ollaanko sivustokartan kokoisessa tilanteessa ?
      • vai onko projekti levinnyt käsiin?
      • Onnistuuko graafinen tuotanto aikataulussa?
      • Kuinka paljon pitääkin tuottaa uutta sisältöä?
      • Ovatko graafiset mallipohjat valmiit ?
      • Dynaamisten osien liittäminen staattiseen front-endiin?
    • Tiedostorakenne on yllättävän tärkeä yksityiskohta
      • Sivuston kasvun hallitseminen
      • Ylläpitäminen
      • Suorat osoitteet alahakemistoihin
      • Ovatko kuvat hakemistossa juuritasolla vai jokaisen osion kuvat omassa kansioissaan?
      • Onko asiakkaalla toiveita esim käyttää vanhaa tiedostorakennetta?
  • Tiedostorakenteesta päättäminen Kuinka paljon kasvua on odotettavissa 2-3 vuoden sisällä? Kuinka sivusto kasvaa – aiheen, ajankohdan ym mukaan? Vanhentunneen sisällön arkistointi alihakemistoihin. Tyylioppaaseen tiedot tiedostorakenteesta Välittääkö asiakas??? Ei todennäköisesti
  • Tuotanto - graafiikat
    • Kuvien optimointi Photoshopissa on ehdottoman tärkeää jotta päästää hyvään, laadukkaaseen lopputulokseen.
    • Viipaloinnissa erotaan graafisesta mallipohjasta (leiskasta) useammaksi kuvatiedostoksi Photoshopissa
      • Viipaleet yhdistetäään koostamisen yhteydessä takaisin sivuksi tai Flash-esitykseksi.
    • HTML-mallipohjat , joita kierrätetään tuotannossa.
      • Näihin laitetaan valmiiksi kaikki globaalit standardit (navigointi, taitto (TABLE tai DIV), ALT- ja META-tekstit, dokumentin sisäinen kommentointi.
      • Tyylitiedostot (CSS) mikäli käytetään tehdään tässä yhteydessä
    • Testaa mallipohja.
  • Tuotanto - koostaminen
    • Koostaminen tapahtuu joko HTML:n tai Flashin (animointi/ohjelmointi) avulla.
    • Sivujen täyttäminen (tai CMS:n testaus)
    • Kevyt skriptaus yleensä javaskriptin avulla
    • Ohjelmoitavatkin sivut (.asp, .php etc) vaativat yleensä yhden tai useamman HTML-dokumentit johon skriptaus toteutetaan.
    • Lisää muut mediat osaksi sivua
    • Vahdi tiedostojen kokoa. Yli 100 ktavun html-sivut ovat todennäköisesti liian raskaat.
    • Nyrkkisääntönä: yksi html-sivupohja valmistuu noin päivässä kun aloitetaan tyhjältä pöydältä.
    • Käsinkoodaus vai editori?
    • Versionhallinta
  • Laadunvarmistus
    • Sivusto on valmis. Laadunvarmistuksen aika.
    • Tuotantoa ei koskaan saa päästää läpi ennen laadunvarmistusta
      • Rikkinäiset linkit. Placeholder-tekstit ja –kuvat.
      • Toiminnallisuuksen bugit.
      • Väärin sijoitettu sisältö.
    • Sivuston testausympäristön tulee olla tarkalleen sama kuin lopullinen tuotantoympäristö
    • Löydöksien priorisointi ja korjaaminen.
    • HUOM: pilkun siirtäminen printtimainoksessa on hetken homma. Nettisivulla se vaatii uutta koostamista, joka on pidempi kuin hetki (yleensä).
    • Mieti projektoidessa olisiko parempi tehdä vaiheittain ja testata palasina?
  • Taiton toteutustekniikat
    • Taulukko - taitto toteutetaan HTML:n taulukkorakenteen avulla <TABLE>
    • Layerit (kerrokset) - taitto tyylitiedostojen avulla <DIV>
    • Kehykset - samassa sivunäkymässä useita HTML-tiedostoja <FRAMESET>
    • Flash - taitto yhtenä (tai useampana) sovellustiedostona (.swf)
  • Graafisten mallipohjien teko
    • Graafinen mallipohja on hyväksytty ulkoasu.
    • Käytetään optimointiin ja (HTML)-tuotantoon
    • Huomaa että esitetty ehdotus poikkeaa yleensä aavistuksen siitä mitä lopullinen toteutus on – CSS-taitto ei ole sama kuin PhotoShop-taitto. Kerro siitä asiakkaalle.
    • Tee lopulliset graafiset elementit, jotka tukevat aikaisemmin sovittuja toiminallisuuksia.
    • > navigation on/off/over -tilat
    • > painonapit on/off/over-tilat
    • > placeholder tai alternative-kuva flashille tai videolle
  • Graafiset mallipohjat ovat tuotannon raaka-ainetta
    • Mallipohja on master-dokumentti joka optimoidaan ja viipaloidaan prosessin seuraavassa vaiheessa.
      • Säilytä PhotoShop-versio kerroksineen.
      • Jokaiselle sivupohjalle ei välttämättä tarvita omaa graafista mallipohjaa (tosin asiakas usein haluaa sellaisen nähdä  )
      • Jos pohjia on paljon, tee taulukko johon listaa pohjan tiedostonimen ja sivut, joihin sivustossa pohjaa käytetään.
    • Graafiset mallipohjatiedostot siirretään tuotantoon kerrostettuina PhotoShop- (Fireworks-) tiedostoina. Nimeä kerrokset. Mukaan printti avuksi (rautalankamallit eivät ole tarkka taittosuunnitelma, ainostaan esitys mitä tietoa sivulla tulee olemaan).
    • Tarkista että tuotannosta löytyvät halutut ja tarvittavat kirjasinleikkauset.
    • Pienissä projekteissa suunnittelija toimii samalla tuotanto-graafikona/animaattorina.
  • Tyyliopas
    • Graafisen mallipohjan jälkeen kirjoitetaan tyyliopas tuotannon suunnittelijoille ja ylläpitäjille.
    • Jokainen sivu sivustossa on erilainen mutta niillä on yhtenäisiä elementtejä.
    • Johdonmukaisuuden säilyttäminen on ensisijianen tavoite.
    • Määrittele tyylioppaassa:
      • sivujen palstojen leveydet
      • mouseover-tilat
      • linkkien värit
      • muut värimääritykset
      • fontit
      • otsikko ja leipätekstikoot
      • kuvakoot
      • animaatioiden toteutus
  • Tyyliopas #2
    • Täydennä tyyliopas julkaisun jälkeen ylläpitoa varten. Lisää mahdollisesti ohjeet kuvituksen käytöstä ja kuvitustyylistä muutamalla lauseella.
    • Tee asiakkasta varten visuaalinen esitys valituista tyyleistä.
    • CSS tyylitiedostot
    • Interaktioiden ohjeistus (painikkeet, nuolet, lomakkeet etc)
    • Käytetyt standardit toistuville elementeille
    • Käsittele designin erityiskohdat
  • Pikatestejä projektin hallintaan
    • Pikatesti: käyttäjät eivät lue, he silmäilevät. Siirrä tuoli taaksepäin, siristele silmiäsi. Pystytkö samaan selville, mistä pitäisi klikata?
    • Pikatesti: nappaa käytävältä kolleega, anna hänelle tehtävksi löytää linkki johonkin asiaan sivustolla layoutistasi ja aikaa 10 sekuntia. Onnistuuko hän?
    • Oletko tarkistanut designin 800x600 pikselin resoluutiolla (just in case)?
    • Oletko tarkistanut ehdotuksen sekä PC:llä että Macillä?
    • Oletko tarkistanut aiheuttaako fonttikoon muutos desgnin hajomisen?
    • Oletko tarkistuttanut ehdotetun designin tuotanto-puolella? On se toteuttamiskelpoinen? Onko se viipaloitavissa?
  • Testaus
    • Visuaalinen suunnittelu ei kaipaa selityksiä. Mutta entä testaus?
    • Aivan liian usein testaus on edelleen se välttämätön paha joka tehdään n. sadasta eri syystä.
    • Oletukset tulee testata. Toimii paperilla mutta entä käytännössä?
    • Suositus : tee protosivusto. Se voi olla rautalankamallisen laajennus tai sisältää ehdotettua visuaalista ilmettä.
    • Leiska on tehty Photoshopissa viimeisen päälle. Yleensä koodattuna välistykset, fontit, marginaalit eivät ole 100% samat.
      • Selitä tämä projektin alussa tilaajalle.
      • Näytä myös miten kirjasinkoon muuttaminen vaikuttaa leiskaan.
  • www-proto
    • Proton avulla voi kehitellä visuaalista suunnitelmaa, viilata informaatiosuunnittelua, huomaat sisällön puutteet (liikaa, liian vähän, puuttuu kokonaan, on väärän muotoista) ja testata uudelleen ja uudelleen.
    • Testausta vaativia:
      • monimutkaiset kehysrakenteet (frames)
      • toiminnalliset mouseover-valikot (javascript)
      • sijoittelu- ja kokospesifit pop-up ikkunat
      • tyylipojat ja selainspesifit kohtelut
      • yksinkertaiset ostoskoritoiminnot
      • kaikki mikä vaatii kevyttä skriptausta
    • Testaus: Internet Explorer, Safari, Firefox, Opera, Netscape -selaimilla
    • Toiminnallisuuksen oletusten testaaminen visuaalisen suunnittelun aikana antaa mahdollisuuden korjata ongelmat ennen kuin design on valmis.
    • Testauksen avulla tuotannon ihmiset sitoutetaan edessä olevaan tehtävään.
  • Vaihe 5 - Julkaisu & seuranta
  • VAIHE 5: Julkistus & seuranta
    • Tuotantoympäristön pystytys tai palvelintilan hankinta
    • Tiedostonsiirtoyhteys www-palvelimelle (FTP, SCP)
      • Kuka?
      • Milloin?
      • Testaus vielä kerran, jotta sivut ja kuvat näkyvät, linkit ja animaatiot ja lomakkeet toimivat
      • Siirrä “etusivu” viimeisenä kun muu sivusto on happotestattu (index.html, default.asp ym tiedosto)
    • Trafiikin mittaus (esim Google Analytics)
    • Mitä jäi seuraavaan vaiheeseen
    • Hakukoneoptimointi, SEO
    • Sivuston markkinointi
  • Verkkoaineiston tuotanto Antti Leino Director / Planner MRM Worldwide [email_address] lowreality.blogspot.com