JWT 2015 - Johdatus www-tekniikoihin
© Aulikki Hyrskykari, Antti Sand, 2015 - Kopiointi ilman lupaa kielletty.

Opiskelijoilta kertyvää materiaalia

Kurssilla on tehty harjoitustyönä kurssin aihepiiriin liittyviä pieniä tutoriaaleja. Julkaisen niistä parhaita täällä opiskelijan luvalla.

Huomio: Nämä ovat hyviä töitä, mutta kannattaa kuitenkin muistaa, että ne ovat verkkosivujen teon alkeita opiskelevien tekemiä. Siten niihin tulee suhtautua lempeällä silmällä ja niissä käytettyjä toteutusratkaisuja on viisasta katsoa kriittisellä silmällä - niinkuin tietysti kaikkeen verkosta löytyvään materiaaliin.

Lisäksi on hyvä olla tietoinen, että töissä edellytettiin jonkinlaista lomaketta. Vähintään palautelomaketta, mikäli lomakkeen käyttö ei muuten luontevasti saanut mukaan työhönsä. Siksi on luonnollista, että palautelomakkeet tuntuvat usein vähän päälleliimatuilta. Syy ei ole tekijöiden, vaan harjoitustyön tehtävänannon.

1. Referaatteja

Keräilen tänne viikkoharjoituksena tehtyjä referaatteja merkittävistä artikkeleista. Näistä saa nopeasti käsityksen siitä missä artikkelissa on kyse. Se helpottaa tekemään päätöksen, haluaako ymmärtää asian paremmin, ja lukea alkuperäisenkin artikkelin.

John Allsopp: A Dao Of Weg Design

A Dao of Web Design on klassinen, aikoinaan mullistava webbisuunnittelun artikkeli. Sen perusperiaatteet pitävät edelleen paikkansa, joten artikkeli kuuluu jokaisen itseään kunniottavan www-sivujen suunnittelijan yleistietouteen.

Alla kolmen kurssilaisen näkemys artikkelin sanomasta.

Referaatti 1

Daosimi on filosofia, siinä missä buddhismikin, joka käsittelee kaikkia elämän osa-alueita ja keskittyy niiden yhteiseen harmoniaan.

Web-suunnittelussa on pitkään eletty siinä olettamuksessa, että webin sisällön kontrolloimisen näennäinen vaikeus on huono asia, vika muuten hyvässä mediassa. Tämä on Daoismin mukaan väärä näkökulma -- kontrollista ei ole puute, se vain pitää suorittaa eri tavalla.

Perinteisen paperimedian perinteitä noudattaen suunnittelijat ovat pitkään tuskailleet miten he saisivat sivunsa näyttämään samalta kaikilla käyttäjillä kaikilla laitteilla, kun jo pelkästään Macintoshin ja Windowsin resoluutiotarkkuusero on merkittävä (Macintosh = 72dpi, Windows = 96dpi.) Daon tarkoituksena on opettaa, että mikäli keskityt sopeutuvuuteen & skaalautuvuuteen, ei järjestelmien välisillä eroilla ole mitään väliä.

Suoran HTML-kovakoodauksen sijaan on parempi hoitaa suurin osa "ylimääräisestä" muotoilusta CSS:llä, mutta ei kuitenkaan rakentaa koko sivua pelkästään CSS:n varaan (perustoiminnallisuudet tulisi olla olemassa jo HTML:ssä.) Tämä mahdollistaa sivujen selaamisen myös sellaisilla selaimilla jotka eivät välttämättä tue kaikkea CSS:n ominaisuuksia, tai esim. mobiiliselaimilla, joiden kautta selatessa ei ole välttämätöntä saada mitään muuta kuin sivun varsinainen sisältöteksti näkyviin. Tämä lisää sivun joustavuutta jo todella paljon.

Sivuston toimivuus tulisi olla keskeinen tavoite sivujen kehityksessä, sen sijaan että suunnittelija keskittyy omaan mielikuvaansa siitä miltä sivun tulisi näyttää. Sivun toimivuus tulee rakentaa ensin, sen jälkeen sivua voi koristella sen verran mitä se onnistuu rikkomatta mitään ominaisuutta.

Siinä missä monet suunnittelijat keskittyvät rajaamaan web-sivunsa sisältöä fontein ja marginaalein asettaen niille tietyt pikseli- tai pistekokorajoitukset, Daon mukaan on parempi antaa valinnan vapaus sisällön koosta lukijalle. Absoluuttisten kokorajoitusten sijaan on parempi käyttää prosentuaalisia säädöksiä, esim. että ensimmäinen otsikkotaso on 30% suurempi kuin varsinainen leipäteksti, alaotsikko voi olla 25% isompi, jne. Tämä jättää selainikkunan koon säätämisen lukijan vastuulle ja täten mahdollistaa mieluisan lukukokemuksen, kun sivun sisältö skaalautuu ikkunan koon mukaan.

Myös värejä tulee käyttää varoen -- värejä voi käyttää selkeyttämään sivun toimintoja, mutta toiminnot eivät saa nojata täysin pelkästään väreihin, koska jokainen ihminen näkee värit hiukan eri tavalla kuin muut, yleisistä värisokeuksista (esim. puna-vihersokeus) puhumattakaan.

Referaatti 2

Websivustot edelleen seuraavat esi-isäänsä eli printattua paperia, kuten esim. televisio seuraa radiota, ensimmäisissä musiikkivideoissa bändi vain soitti kappalettaan videolla. Samaa formaattia käytetään siis myös jälkeläisessä. Kun uusi ilmentymä lainaa jotain edeltäjältään, on osa siitä järkevää, mutta paljon lainattua on turhaa ja vain asettaa rajoitteita uudelle jälkeläiselle. Ajan kuluessa näistä järjettömistä jäänteistä päästään eroon. Vaikka web onkin kehittynyt eteenpäin, on sillä silti vahvoja sidoksia edeltäjäänsä, tällainen konservatismi on yleistä, mutta on aika päästä eteenpäin. Tämä ei tarkoita, että kaikesta peritystä tulisi hankkiutua eroon, mutta tulisi ymmärtää mitä peritystä voidaan todella hyväksikäyttää webissä ja mikä on turhaa.

On yleinen uskomus että suunnittelijat ovat ”hallitsijoita” ja haluavat ylikirjoittaa käyttäjien toiveet ja heidän valinnat, joita he ovat tehneet siitä miten haluaisivat jotain kokea. Tämä todennäköisesti on peruja printatusta paperista, missä suunnittelija on jumala. Suunnittelijoiden tulisi uudelleen miettiä rooliaan ja hylätä hallitsijan asema ja etsiä uutta suhdetta sivustoon.

Miksi tällä sitten on merkitystä? Kyvyttömyys kontrolloida sivua ei ole rajoitus, pikemminkin vahvuus uudessa ilmentymässä. Esimerkiksi jos käyttäjä sattuu olemaan heikkonäköinen yksilö, hänellä saattaa olla vaikeuksia lukea fonttikokoa, jonka suunnittelija on sivulle valinnut. Meidän tulisi vaalia sitä faktaa, että webillä ei ole näitä rajotteita ja meidän tulisi suunnitella joustavuuden mukaan.

Mukautuvuus on saavutettavuutta. Eli sivujen tulisi olla sopeutuvia eri selaimille, resoluutioilla, alustoilla jne. Eli sivuja, jotka mukautuvat lukijan tarpeisiin, joiden näkö ei ole täydellinen ja haluaa lukea sivua erittäin isolla fonttikoolla. Tämä saattaa kuulostaa mahdottomalta, suunnitella universaalia sivua. Tällä hetkellä se on lähinnä tavoite eri syistä. Se ei tarkoita ettemmekö voisi toteuttaa jotain päämäärää kohti.

Eli mitä voimme tehdä tämän edistämiseksi? Ensiksi tulisi miettiä sitä, mitä sivut tekevät, eikä miltä ne näyttävät. Designin tulisi tulla sen pohjalta, mitä palveluita sivusto käyttäjälleen tarjoaa. Tämän kulmakivi on sisällön ja ulkoasun erottelu. Stylesheettien tulisi ehdottaa sivun ulkoasua, ei kontrolloida sitä ja sheetin ei tulisi välittää tietoa, näin varmistat että sivusi toimii eri selaimilla nyt ja tulevaisuudessa. Käytännössä on muutamia asioita, joita ei tulisi tehdä stylesheettejä suunniteltaessa, kuten ei tulisi käyttää absoluuttisia yksikköjä, kuten pixeleitä.

Fonteista tulisi suosia järjestelmien vakio fontteja, vaikka tuki selaimissa kasvaakin jatkuvasti. Tulevaisuudessa käyttäjät pystyvät määrittämään fontin, millä sivuja haluavat lukea. Ei pitäisi asettaa mitään minimifonttikokoa, vaan käyttäjän tulisi itse saada määrittää juuri heille sopiva fonttikoko, näin sivu on hyvin saavutettavissa. Otsikoihin voi silti suositella suurempia fonttikokoja. Stylesheetit mahdollistavat esimerkiksi otsikoiden koon määrittämisen suhteessa suuremmaksi normaalitekstistä.

Layouteissa tulisi toimia samalla tavalla, kuten fonteissakin. Eli ei absoluuttisia arvoja, vaan tulee käyttää suhteitta. Näin sivut sopeutuvat eri kokoisille ja eri tarkkuuksisille laitteille.

Referaatti 3

Webbi on mediana perinyt painetuista julkaisuista ominaisuuksia, muotokielen sekä yleisiä käytäntöjä. Eräs tällainen on ajatus, että webbisivun suunnittelijan tulee kontrolloida myös sitä, kuinka sivun lukija haluaa nähdä sivut. Webbisivujen suunnittelijat kokevat kykenemättömyyden kontrolloida webbisivuja sen rajoitteeksi, mutta John on alkanut nähdä juuri sen tuon median vahvuutena. Esimerkkinä hän mainitsee kuinka painetuissa julkaisuissa tekstin koko on valittu julkaisuvaiheessa ja se ei ole lukijan helposti muutettavissa. Lukijalla saattaa kuitenkin olla huono näkökyky tai tarve lukea pienessä tilassa esim. junassa. Tällöin lukija voisi haluta muuttaa tekstin kokoa vastaamaan omia tarpeitaan. Juuri webbisivujen mukautuvuus tekee ne hyvin käyttökelpoisiksi.

Tee webbisivut käyttökelpoisiksi huolimatta siitä mitä selainta käytetään, mitä laitetta tai näyttöä käyttäjä käyttää. Tämä tarkoittaa, että sivujen tulee olla luettavat huolimatta näytön koosta, resoluutiosta tai värien määrästä. Sivujen tulee olla käyttökelpoiset myös tulosteena, kuunneltuina lukijaohjelmalla tai käyttäen brailleselainta.

Miten voimme suunnitella näin mukautuvat ja käyttökelpoiset sivut?

  1. Ensimmäiseksi ajattele sivujesi tehtävää, älä ulkonäköä. Palveluja jotka sivujesi on tarkoitus tuottaa käyttäjille. Anna sivujesi muodon paremminkin seurata toiminallisuutta kuin, että yrität tehdä tietyn näköistä ja laittaa sen toimimaan.
  2. Älä käytä HTML merkintää sivun ulkoasun määrittämiseen. Käytä tähän erillisiä tyylisivuja.
  3. Käytä CSS -tyylisivuja oikein ehdottamaan sivun ulkoasua, ei kontrolloimaan sitä, silloin sivusi toimivat hienosti missä tahansa selaimessa myös tulevaisuudessa. Käytännössä voit tehdä näin esimerkiksi ehdottamalla tyylisivuilla mahdollisimman monia fontteja. Älä myöskään määritä fontin kokoa kiinteinä numeroina. Mukautuvampi tapa on määrittää eri elementeissä käytettyjen fonttien koko suhteessa toisiinsa prosentteina. Esimerkiksi pääotsikko 30% isompana kuin leipäteksti. Tai samoin sivun asettelussa voit määrittää sivun marginaalit prosentteina tai muina suhdelukuina käyttämättä kiinteitä lukuja.
  4. Varo nojautumasta yksin värikoodien käyttämiseen välittämään tiettyä tarkoitusta. Monet meistä ovat värisoikeita.

Webin luonne mediana on olla joustava ja myös meidän tulee päästää irti tarpeesta kontrolloida ja tulla joustavammiksi.

Takaisin ylös

2. Harjoitustöitä: 2012

Vuonna 2012 harjoitustyön tehtävänanto oli löysemmin määritelty, mutta poimin sieltäkin muutamia töitä, joista on voi olla hyötyä sivujen toteuttamista opettelevalle.

Takaisin ylös

3. Harjoitustöitä: 2013

Piirtäminen canvasiin
Aihe tuli ihan omasta harrastuneisuudesta. Olen nimittäin viime aikoina tehnyt enemmän ja enemmän projekteja HTML5:sta ja canvasta käyttäen. Näissä tosin olen käyttänyt Crafty- ja EaselJS-kirjastoja hyväksi, mutta mielestäni ihan perus piirto-ominaisuudet olisivat mielenkiintoinen opetusaihe.

Toivon että sivusto antaa edes pientä viitettä käyttäjälle siitä, miten tätä mullistavaa tekniikkaa voidaan käyttää ja ehkä motivoi häntä opiskelemaan lisää aiheesta.

Joonas Reinikka
Lähteet:
JavaScript kirjastoja, JQuery ja QTip2
tutsplus.com: Bring Your Forms Up to Date With CSS3 and HTML5 Validation
Canvas-elementti.
Päädyin valitsemaan CANVAS-elementin aiheeksi, koska en ollut oikeastaan kuullutkaan aiemmin koko elementin olemassaolosta. Päädyin siihen sattumalta selatessani joko kurssimateriaalia tai siellä mainittuja verkko-osoitteita.

Toivon, että pintapuolinen tutustuminen valottaa satunnaiselle lukijalle elementin käyttötarkoitusta ja antaa mahdollisuuden miettiä erilaisia sovelluksia elementin käytölle. Selainpuolella toteutettavat dynaamiset sivut ovat nopeasti korvanneet palvelimella suoritettavia toimintoja, ja canvas-elementin käyttö tulee varmaankin yleistymään, kun selaimien tuki sille paranee. Itselläni ei tosin ollut elementin tuen suhteen minkäänlaisia ongelmia, mutta vaivattomuushan on Apple-ihmisille jo muutoinkin tuttua….

Sami Saarela

Käytetyt lähteet:
W3Schools.com: http://www.w3schools.com/html/html5_canvas.asp
Dive into HTML5: http://diveintohtml5.info/canvas.html
Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial
Taustakuva: psdgraphics.com
Canvas-elementin käyttäminen
Päädyin aiheeseen selaillessani kurssisisältöä. Halusin itse selvittää canvas-elementin käytöstä lisää, sillä se kuulosti mielenkiintoiselta. Lisäksi halusin myös opetella jonkun uuden asian, enkä vain toistaa jotain kurssin asiaa ja tykästyin kurssilla JavaScriptin käyttöön, joten halusin opetella sitäkin lisää.

Toivon, että mahdollinen sivuston käyttäjä saisi sivuston opetusmateriaalista käsityksen siitä, miten canvas-elementtiä voi hyödyntää ja herättäisi mielenkiinnon etsiä asiasta lisää tietoa ja opetella sen käyttöä perusteista ihan edistyneimpiin toimintoihin saakka.

Enna Raerinne

Tärkein lähde:
HTML5 Canvas Basic Tutorial
Mukautuva verkkosuunnittelu (responsiivinen suunnittelu)
Toivon sivun antavan käyttäjälle nopeasti käsityksen responsiivisesta suunnittelusta ja vastaukset aiheesta kysymyksiin mitä, miksi ja miten. Syvääluotaavin opas aiheesta se ei ole, koska se on suunnattu tekijänsä tapaisille ihmisille, jotka eivät tunne juuri ollenkaan responsiivista suunnittelua entuudestaan.

Markus Koskela

Lähteet:
studiopress.com/design/website-respond-mobile-devices.htm
howtocreate.co.uk/tutorials/css/mediatypes
webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
w3.org/TR/CSS2/media.html
html5kirja.fi/2012/08/02/responsiivinen-suunnittelu/
stackoverflow.com/q/7043336
vimeo.com/30425248
sis.uta.fi/~jwt/13/luennot/luento10.pdf (pdf)
Mukautuva verkkosuunnittelu (responsiivinen suunnittelu)
Olen työstänyt nettisivuja aikaisemminkin, mutta responsiivinen suunnittelu ei ollut vielä niin tuttu aihe. Halusin valita tämän aiheen sen takia, että oppisin itsekin aiheesta enemmän ja tulisi todellakin ajan kanssa perehdyttyä aiheeseen. Mietin myös, että sivusto voisi toimia jonkinlaisena ”muistikorttina” itselleni, kun työstän responsiivisia nettisivuja tulevaisuudessa. Sivusto on toisaalta sen verran suppea että kaikkia asioita en ehtinyt siihen pohtimaan.

Toivon, että sivusto antaisi hiukan osviittaa responsiiviseen suunnitteluun tai lyhyesti kiteyttäisi, mitä se pitää sisällään. En näkisi sitä varsinaisena oppimateriaalina vaan lyhyenä briiffinä asiasta kiinnostuneille.

Saila Kurtti

Lähteet:
Talent Base - Sisällönhallinta ja responsiivinen web design
Responsive Web Design by Ethan Marcotte
Responsive Web Design: What It Is and How To Use It
Mukautuva verkkosuunnittelu (responsiivinen suunnittelu)
Sivuston tarkoituksena on antaa kävijälle pieni tutustumiskierros responsiivisuuteen. Toivon mukaan kävijä innostuu ja tutkii aihetta hieman syvällisemmin.

Eeli Jaakkola

Lähteet:
Ethan Marcotte: Responsive Web Design
Ethan Marcotte: Fluid Grids
Evästeet
Aioin ensin tehdä harjoitustyön eri aiheesta, mutta sivustoa suunnitellessani huomasin, että haluamaani toiminnallisuuteen tarvitaan evästettä. Koska minun piti selvittää, miten saisin tehtyä sivustolleni evästeen, ajattelin, että voisin saman tien hyödyntää oppimaani myös sivuston sisällössä. Uusi aihe oli myös mielenkiintoisempi ja ehkä myös itselleni helppotajuisempi kuin se aihe, mitä olin aluksi ajatellut.

Toivon sivuston olevan helppotajuinen ja antavan selkeän kuvan siitä, mitä evästeet ovat ja miten ne toimivat. Ohjeiden avulla pystyy toivottavasti aloittamaan evästeiden käytön opettelun ja innostuu hankkimaan tietoa lisää. Sivuston tarkoitus on myös osoittaa, ettei evästeiden käyttö sivustolla ole ylitsepääsemättömän hankalaa, toisin kuin itse luulin ennen kuin olin tutustunut aiheeseen.

Tuuli Kähköinen

Lähteet:
Wikipedia: HTTP cookie, Eväste
W3School: JavaSript Cookies
Hand of Sean -kirjasin
Mediakyselyt - Media Queries
Mediakyselyihin aiheena päädyin opittuani ne kohtalaisen varhaisessa vaiheessa kurssia, ja todettuani niiden osaamistason olevan yleisesti melko alhainen. Harjoitustyöni avulla toivoisin useampien ihmisten opettelevan mediakyselyiden käytön.

Elias Ylänen

Lähteet:
HTML5GOODIES: Introduction to CSS Media Queries
CSS-TRICKS: CSS Media Queries & Using Available Space
MDN: CSS media queries
Kaunis koodi
Minulla oli runsaasti kokemusta kotisivujen suunnittelusta jo ennen kurssia.Harjoitustyön henkilökohtaisena tavoitteena halusin aloittaa harjoittelemaan jotakin sellaista, mitä en ole vielä koskaan aiemmin kokeillut. Sain lisäksi huomattavasti lisämotivaatiota tiedosta, että työtäni voitaisiin oikeasti käyttää jossakin tulevaisuudessa - esimerkiksi oppimateriaalina.

Neljä tärkeää asiaa hyvää koodia kirjoitettaessa: responsiivinen suunnittelu´, koodin toimivuus eri selaimissa, Koodin luettavuus ja Esteettömät kotisivut.

Hanna Enqvist

Lähteet:
Vastauksia koodi - aiheisiin kysymyksiin: http://stackoverflow.com/
Useita CSS3-oppeja: http://www.w3schools.com/
HTML5 eroja HTML4:ään: http://www.w3.org/TR/html5-diff/
Wikipediasta vastauksia ja perustietoja lähes kaikkiin aiheisiin http://en.wikipedia.org/wiki/Main_Page
Yleista responsive web design -aiheesta: http://en.wikipedia.org/wiki/Responsive_web_design
Resoluutioista: http://techcrunch.com/2012/04/11/moveover-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/, http://www.binvisions.com/articles/tablet-smartphoneresolutions-screen-size-list/, http://www.onbile.com/info/mobile-screen-sizes/
Responsiivisen suunnittelun ongelmista http://www.webdesignshock.com/responsive-design-problems/
gotreehouse-videotutoriaalit playlistina: http://www.youtube.com/watch?v=8pNNAMrj3zA&list=SP002E5D5A673D760Eh
CSS3 animoinnin käyttötutoriaali: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Horisontaalinen jQuery-pohjainen tooltip-menu tutoriaali: http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials
jQuery custom content scroller: http://manos.malihu.gr/jquery-custom-content-scroller/
Parallax: http://net.tutsplus.com/
Lisätietoja Parallax-efektin toteuttamisesta http://ianlunn.co.uk/articles/javascript-parallaxeffects-a-deeper-look/
Geolocation
Selasin w3schoolsia ja muita www-tutoriaali sivustoja ja löysin geolocationin. Aihe vaikutti kiinnostavalta, hyödylliseltä, eikä sitä oltu käsitelty kurssilla. Toivoisin, että sivuston lukija oppisi käyttämään Geolocation API:n perusominaisuuksia.

Janne Helminen

Pääsasiallinen lähde:
W3School: http://www.w3schools.com/html/html5_geolocation.asp
Tasakorkuiset palstat
Päädyin aiheeseen oikeastaan aika käytännön syistä. Alunperin ajattelin perehtyä JavaScriptiin vähän paremmin, mutta sivun toteutuksessa huomasin että ihan sivun perus layoutinkin tekemisessä oli vielä harjoiteltavaa. Löysin sitten hyvän tutoriaalin näiden tasakorkuisten palstojen tekemiseen, ja päätin ottaa siitä aiheen harjoitustyöhön

Toivottavasti sivun käyttäjä myös oppii tekemään näitä tasakorkuisia palstoja sivuston avulla. Alkuperäisessä tutoriaalissa oli kaikki aika seikkaperäisesti selvitetty, ja koodimmentitin sisällyttää suomennokseeni kaiken olennaisen.

Juho Helsky

Lähteenä käytetty voimakkaasti artikkelia:
James Taylor: Equal Height Columns with Cross-Browser CSS
Valokuvagalleria
Harrastan valokuvausta ja olen tällä hetkellä tekemässä itselleni valokuvausaiheista blogisivustoa. Tämän vuoksi erilaisten kuvagallerioiden tekeminen ja niiden vertailu tuntui luontevalta ja mielenkiintoiselta aihepiiriltä.

Toivon, että sivusto auttaisi aloittelijaa valitsemaan, millaisen kuvagallerian hän tekisi sivuilleen. Siksivuston tarkoituksena on myös näyttää, miten asioita voi tehdä hyvin erilailla.

Minna Hokkanen

Lähteet:
W3Schoolsin kuvagalleriaohjetta: http://www.w3schools.com/css/css_image_gallery.asp
Lightbox 2: http://lokeshdhakar.com/projects/lightbox2/
Pyöristetyt kulmat
Halusin tehdä vuorovaikutteisen sivuston, joten päätin valita CSS:n liittyvän aiheen. Valitsin aiheeksi border-radius omainaisuuden, koska ajattelin että voisin tehdä siitä vuorovaikutteisen kokeiluosion, joka antaisi riittävästi haastetta. Lisäksi voisin käyttää border-radiusta koko sivuston teemana.

Toivon ensinnäkin, että käyttäjä oppii miten elementin kulmia voidaan pyöristää CSS:n avulla. Lisäksi toivon, että oppii kuinka border-radius -ominaisuudella voidaan vaikuttaa sivuston visuaaliseen ilmeeseen.

Heikki Hämälistö

Lähteet:
Ei suoria lainauksia, paitsi spamcheck-funktio: http://www.w3schools.com/php/php_secure_mail.asp.
Leijuva navigointipalkki
Ajatuksen aiheesta sain JWT-kurssin kotisivulla olevasta sivupalkista. Löysin samankaltaista navigointipalkkia varten tehdyt ohjeet, joita käytin pohjana omaan työhöni.

Tämän kaltainen navigointipalkki on kätevä ja sen opettelemisesta on hyötyä kaikille. Sen tekeminen ja ymmärtäminen on sopivan haastavaa www-sivujen tekemisen perustaidot hallitsevalle.

Sampo Kokko

Lähteet: How to create a fixed navigation bar for your website (alkuperäinen opas), A clock creted with a timing event (kello) ja Ultimate CSS Gradient Generator (liukuvärigenetaattori)

jQueryn avulla toteutettuja toiminnallisuuksia kuville.
Päädyin kyseisen aiheen valintaan, koska olen kiinnostunut WWW-sivujen toteuttamisesta ja halusin etenkin oppia JavaScriptin ja jQueryn käyttöä paremmin. Lisäksi valokuvaus on lähellä sydäntäni, joten kuvat olivat käytön kohteena minulle luonnollinen valinta.

Toivon, että ”oppaastani” on hyötyä sellaiselle henkilölle, joka opettelee jQueryn ja JavaScriptin käyttöä ja haluaa esimerkiksi tehdä omille sivuilleen kuvagallerian tai elementin, jossa vaihtuu useita kuvia.

Marko Rantala

Lähteet:
http://webdesignerwall.com/tutorials/css3-media-queries
http://jonraasch.com/blog/a-simple-jquery-slideshow
http://www.slidesjs.com/
http://jonraasch.com/blog/a-simple-jquery-slideshow
http://www.w3schools.com/js/js_form_validation.asp
Web-sivujen suunnittelu.
Valitsin aiheen siitä syystä, etten oikein keksinyt mitään mielenkiintoista teknistä aihetta, josta luoda sivut. Esimerkkisivuilla oli jo käsitelty laajasti erilaisia tekniikoita, joten päätin tehdä enemmän tekstipohjaisen esityksen.

Toivon sivuston tarjoavan mahdolliselle lukijalle perustietoa erilaisista käyttäjäryhmistä ja heidän tarpeistaan. Monet seikat saattavat kuulostaa itsestään selviltä, mutta silti jostain syystä netti pursuaa huonosti laadittuja kaupallisiakin sivustoja.

Sten Reinikainen

Lähteet:
Vieritykseen tarkoitettu skripti
W3School, jonka oppaita hyödynsin laajasti
Kurssisivut, joista poimin suurimman osan sivuston teknisestä toteutuksesta
Sähköpostin lähettämisestä
Stackoverflowsta sekalaisia neuvoja

Takaisin ylös