keskiviikko 10. marraskuuta 2010

Opintojakson harjoitustyö: Omat nettisivut

Aloin tekemään harjoitustyönä verkkokauppaa, joka myy kosmetiikkaa yksityisasiakkaille.
En ottanut työstettäväkseni edellisen vuoden LTS-yritystä, koska toinen ryhmäni jäsen tekee siitä sivuston, enkä myöskään nykyistä vaatetukku Three Oy:tä, koska sille olen jo kertaalleen tehnyt nettisivut.
Valitsin siis kosmetiikkaa myyvän verkkokaupan, koska se on osittain työn ja osittain harrastuksen kautta minulle tuttu.

Ihan aluksi tein pari sivua teksteineen, mm. etusivun, tuoteluettelon kuvineen ja tilaamisohjeet.

Seuraavaksi aloin muokata sivupohjan koodia mieleiseni sävyiseksi ja myyvemmän näköiseksi. Alla kuvakaappaus lopputuloksesta.

Linkki sivuille: http://jennir898.nettisivu.org/











Seuraavalla kerralla (tänään) työstin sivut loppuun. Lisäilin uutisen, kyselyn, Youtube-videon ja kalenterin.










keskiviikko 6. lokakuuta 2010

Nettisivut.org - nettisivujen tekeminen

Harjoiteltiin nettisivujen tekemistä ja julkaisemista nettisivut.org-sivustolla. Sivusto tarjoaa todella yksinkertaisen ja melko kattavan mahdollisuuden tehdä näyttäviä verkkosivuja.



Yllä kuva aikaansaannoksestani. Teimme sisältöä navigaatiopalkkiin, lisäsimme uutisen ja kyselyn, sekä kokeilimme kuvan lataamista palveluun. Kun sivuston peruskäyttö on hallussa, päästään tekemään www-sivuja omalle harjoitusyritykselle.

tiistai 5. lokakuuta 2010

Kymmenen pahinta mokaa web-sivujen suunnittelussa

Seuraava tiivistelmä on koottu Jakob Nielsenin artikkelista "Top 10 Mistakes in Web Design"

1. Hakukoneen ongelmat
Hakukone on hyvä jokaisella websivulla, sillä kaikki käyttäjät eivät välttämättä löydä hakemaansa tietoa muuten. Sen tulisi olla yksinkertainen kirjoituskenttä ja haku-painike selkeällä paikalla.
Hakukoneen tulisi myös olla "älykäs" eli tulkita haettavaa sanaa yhteisten kirjaimien ja tavujen perusteella ja ohittaa käyttäjän tekemät kirjoitusvirheet, taivutukset jne. ja antaa niiden tilalle "parhaat osumat" ja "ehdotukset" hakutuloksessa.

2. PDF-tiedostojen upottaminen www-sivuille
PDF-tiedostojen etu on helppo printattavuus, jolloin niitä kannattaa käyttää manuaaleissa ja oppaissa, jotka on tarkoitettu tulostettavaksi. Muuten PDF sivut ovat hitaita ladata, hankalia lukea ja liikkua ja rikkovat www-sivujen selattavuuden.

3.Linkkivärillä on väliä!
Käyttäjän kannalta on helpompaa pysyä kärryillä siitä, millä sivuilla on käyty ja mitkä linkit ovat vielä avaamatta, kun linkkien värit on määritelty erilaisiksi. Avaamattomien linkkien tulisi olla yhtenäisen värisiä, mutta avatuille linkeille tulisi olla oma värinsä.

4. Vaikealukuinen tekstisisältö
Web-sivujen sisältö on tarkoitettu ensisijaisesti nopeaan lukemiseen ja tiedon etsimiseen, yleiskuvan saamiseen. Vältä suuria "tekstimuureja" seuraavin vinkein:
- käytä väliotsikoita
- muista luettelointi
- korosta tärkeimmät avainsanat
- jaa teksti lyhyisiin kappaleisiin
- Tärkein tieto alkuun (käänteinen pyramidi)
- teksi yksinkertaista

5. Liian pieni fonttikoko
Jätä käyttäjälle mahdollisuus muuttaa fonttikokoa ja määrittele muutenkin fonttikoko suhteellisesti, älä pikseleiden mukaan.
Liian pieni fontti on vaikeaselkoista, etenkin ikääntyneemmille käyttäjille.

6.Huonot otsikot = huonot hakutulokset
Hakukoneet hakevat ja näyttävät hakuosumat sivujen otsikoiden mukaan. Niiden tulee olla informatiiviset ja lyhyet. Selaimet tallentavat useimmiten kirjanmerkit/suosikit tällä otsikko-tagiin (<title>) määritellyllä nimikkeellä.

7.Mainoksilta näyttävät mainokset
Käyttäjät lukevat helposti mainoksia www-sivuja selaillessaan, mutta tottuneemmat käyttäjät myös yhtä helposti sivuuttavat mainokset niitä lukematta. Mainonnassa kannattaa ottaa huomioon seuraavat kolme asiaa:
Mainos ei saa olla suorakulmion muotoinen eikä sitä tulisi sijoittaa yleisimmille banneri-paikoille. Mainos ei saa olla animoitu, kaikki vilkkuva pois. Pop-up mainokset ovat kaikista tehottomimpia, ne käyttäjä sulkee lukematta ja selaimpien uusimmat versiot pystyvät myös estämään suurimman osan näistä mainoksista.

8.Epäyhtenäisyys www-sivuilla
WWW-sivujen tulisi olla käytettävyydeltään ja ulkonäöltään yhtenäisiä verrattuna muihin. Yhtenäisyys tuo käyttäjälle turvallisuutta.

9.Uusien ikkunoiden avautuminen
Linkeistä aukeavat uudet ikkunat häiritsevät käyttäjää. Ne ns. "ottavat käyttäjän koneen haltuunsa".
Pienellä näytöllä toimittaessa käyttäjä ei välten ole ehtinyt edes huomaamaan, että linkistä aukesi uusi ikkuna, jolloin käyttäjä hämmentyy, kun yrittäessään palata edelliselle sivulle Paluu-nappi onkin pois käytöstä.

10.Asiakas ei saa vastauksia
Asiakkaan tulisi saada tarvitsemansa tieto helposti. Asiakkaalla ei aina ola aikaa tutustua koko sivuun. Esimerkiksi tuotteen hintatietoja ja muita tärkeitä tietoja ei saisi piilottaa loputtomien mainosten ja sloganeiden alle.



Lähde: http://www.useit.com/alertbox/9605.html

keskiviikko 29. syyskuuta 2010

Tutustuminen verkkosivujen luontiin eri välineillä

Tutustuimme opettajan ohjeistuksella www-sivujen luomiseen erilaisilla työvälineillä. Käsittelimme Muistion, Officen ja katsoimme internetin ohjelmistokirjastoista ilmaisohjelmia, jotka on luotu www-sivujen tekoon ja julkaisuun. Oppitunnilla tehty työ kuvasti hyvin, kuinka yksinkertaista www-sivujen luonti voi oikeasti olla.
Alla muutamia kuvakaappauksia muistiinpanoistani.



Oikealla muistioon kirjoitettu html-koodi ja vasemmalla koodin tuotos IE-selaimessa.

 

Esimerkki ohjelmakirjastosta (Tucows) ja ilmaisohjelmasta (Kompozer)

What You See Is What You Get

 Powerpointilla tallennettu html-sivu ei onnistunut kovin hyvin. Muotoillut tekstit eivät näkyneet oikein html-muodossa. Wordin kohdalla kuvat ja muodot eivät pysyneet oikeilla paikoillaan, mutta teksti muotoiluineen kääntyi loistavasti html-muotoon.

Pikaohje Power Point

Tein yksinkertaisen pikaohjeen Power Point 2007:ään siirtymisestä. Ohje on suppea ja tarkoitettu käyttäjille, jotka ovat käyttäneet paljonkin aiempia versioita ohjelmasta. Pyrin pitämään ohjeen nopealukuisena ja selkeänä ja tuomaan esille suurimmat "kosmeettisen" muutokset.

tiistai 14. syyskuuta 2010

Tein pikaohjeita

Tein pikaohjeet Powerpointilla Firefoxin selainikkunasta ja Officen Excelistä