Työkalupakki

Otavan Opiston Av-wiki

Tässä webnikkarin työkalupakki, josta löytyy tärkeimmät työkalut. Linkkejä on sekä Wikin sisälle, että ulos muualle nettiin. Kaksi tärkeää linkkiä jokaiselle webnikkarille on tuossa alla.

• Web designer heaven
• Populair

Webleiska

Webleiskan suunnittelussa auttaa φ, jonka arvo on 1,62. Mikäli sivun leveys on 800 pikseliä ja se jaetaan kahteen palstaan niin näin 800/1.62 = 494, jolloin toinen solu on 800-494 = 306. Tosin hommaa voi yksinkertaistaa jakamalla leiskan kolmeen osaan sekä vaaka- että pystysuunnassa. Yläpalkki on silloin yksi kolmannes sivusta ja yläpalkin voi jakaa vielä kolmeen osaan, jolloin navigaation koko on 1/3 yläpalkista. Katso esim. Varkauden kaupungin sivuja (www.varkaus.fi), jossa tuo periaate toteutuu hyvin. Myös Osuuspankki on onnistunut hyvin: https://www.op.fi/op

• Grid systems in Web Design

Pointtina on lähinnä se, että sivusto olisi kultaisen leikkauksen mukainen tai ainakin sen suuntainen. Kun sivustolla on asettelu valmiina on värien vuoro.

• 50 Totally Free Lessons in Graphic Design Theory

Värit

Värien osalta kannattaa käyttää ainakin vastavärejä ja vielä parempi on kolmisointu. Homma hoituu Color Sheme Designerin sivuilla. Toinen sivusto, joka on ammattilasille on Color Jack Itse värein osalta saat tietoa värien ykkösssivustolta eli ColourLovers http://www.colourlovers.com/ Tietoa mm kolmi- ja nelivrisoinnuista helposti Colorjackin sivuilta.

• 50 Best Free Tools To Create Perfect Color Combinations
• Color Theory for Designers, Part 1: The Meaning of Color
• Erilaisia sävyjä

Kuviot

Joskus kuvio toimii sivun taustalla, joskus taas ei. Katso video kuinka homma hoituu Photoshopissa. Tässä pari sivustoa, josta löytyy paljon kuvioita:

• 1000s of Free Photoshop Pixel Patterns for Download
• Pattern8
• Brusheezy

Siveltimet

Sivltimet on kuvioiden ohella yksi mukava oikotie. Kaikkea ei trvits osata piirtää, koska valmiina löytyy kaikenlaista ja sen jälkeen tarvitsee ainaostaan valita sopiva sivellin ja kerran sipaista niin kuvio on siinä. Tästä aihees löydät runsaasti tieto sivulta Siveltimet

Typografia

Monet sanovat, että webdesgn on 95 % pelkkää typografiaa eli kirjasimilla on välilä. Varma valinta webiin on Verdana, koska se suunniteltiin esitettäväksi näytöllä. Fontin suunnitteli Matthew Carter, joka myös suunnitteli Tahoman. Verdana ja Tahoma ovat hyvin samanlaisia - erona on lähinnä, se että Tahoma ei niin pyöreä kuin Verdana ja Tahoma on hieman tiiviimpi. Web vaatimukset kirjasimille ovat 1)suuri kirjainten väli, 2)suuri X-korkeus ja 3)suuret reijät.

• 10-examples-of-beautiful-css-typography-and-how-they-did-it/

• 50 Useful Design Tools For Beautiful Web Typography

• 15 exanples of good typography

Leiskan leikkaus

Leiskan leikkaus tarkoittaa sitä, että valmis leiska leikataan palasiksi ja samalla sille tehdään taitto joka taulukolla tai css:llä. Tästä aiheesta löytyy tietoa sivulta [Leiskan leikkaus].

Sen jälkeen pitää HTML laittaa kuntoon ja siihen löytyy ohjeet kohdasta HTML:n runko. Sen jälkeen on edessä Koodin siistiminen. Ja tässä yhteydessä suosittelen vielä lisäksi sivua HTML-kurssi ja sivua HTML editorit.

Koodin viimeistely eli CSS

Sivustolle annetaan loppusilaus CSS:llä. Siitä aiheesta vilkaise sivua Koodin viimeistely.

• 10 Best CSS Practices to Improve Your Code

Firefoxin lisäosat

Firefoxin lisäosat eli adons on korvaamaton apu websuunnittelijalle. Niistä löydät lisää tietoa sivulta Firefox, kohdasta webnikkarin työkalupakki.

PHP

PHP on välttämätön lisä. Siitäkin tietoja täällä wikissä sivulla PHP.

Käytettävyys

• 10 Usability Tips for Web Designers

Ennen kuin julkaiset

Tarkista nämä asiat ennen kuin julkaiset www-sivustosi:

• Favicon on tyylikäs lisä sivustollesi.

• Title ja metatieto tarvitaan hakukoneoptimointia varten.

• Toimivuus eri selaimilla, ainakin Safari, Firefox, Opera ja Internet Explorer. Tässä vielä loistavia linkkejä sivustoille, jossa voit tarkistaa toimivuuden: http://browsershots.org/ ja http://litmusapp.com/

• Oikoluku. Kirjoitusvirheet karsittava pois kaikesta eli kaikki tarkistettava.

• Linkit tarkistettava. Tuossa sivusto joka auttaa: http://validator.w3.org/checklink.

• Toiminnallisuus. Pyydä toista henkilöä käyttämään sivuasi esim etsimään tietoa. Hämmästyt, kun muut käyttävät sivustoa eri tavoin kuin sinä. Hommassa isona apuna on Silverback http://silverbackapp.com/

• Sivu toimii, vaikka Javascript tiputettaisiin pois.

• Sivun validointi eli sivujen tarkistus.

• RSS-syöte myös osoiterivlle. Koodi näin: <link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

• Sivujen analysointi. Kävijöistä tarvitaan tietoa ja sitä tietoa saa kun asentaa jonkun seuraavista: Google Analytics, Clicky, Kissmetrics, Mint tai StatCounter.

• Sitemap. Tämä lähinnä hakukoneita varten ja online sen saat tehtyä tuolla: http://www.xml-sitemaps.com/.

• Page Not Found (404). Nämkin virheilmoitukset kannattaa tyylitellä. Katso mitä esim HC Crusadersin sivuilla tapahtuu, kun sivua ei löydy: http://www.hccrusaders.net/moikka.htm

• Optimoi sivusi, jotta ne toimisivat rivakasti. Kas tuossa linkki: http://www.websiteoptimization.com/services/analyze/

• Muista varmuuskopio sivusta.

• Muista oma tyyli printille eli css:llä tehdään.