Luo PDF

 IT ja viestintäteknologia

206 Verkkosivujen tuottaminen

verkkosivujen tuottaminen lauri eskola suomen liikemiesten kauppaopisto-2
Kuva: Skills Finland / Markku Heikkilä

Lajivastaavat

  Miikka Merikanto
  Suomen Liikemiesten Kauppaopisto
  miikka.merikanto(at)businesscollege.fi
  puh. 044 775 6438

 

 

 

 

206 verkkosivujen tuottaminen pekka vaisanen

  Pekka Väisänen
  Suomen Liikemiesten Kauppaopisto
  pekka.vaisanen(at)businesscollege.fi
  puh. 044 7756467

 

 

Finalistit

 206 Verkkosivujen-tuottaminen Julius Aho netti

Julius Aho
Vaasan
ammattiopisto

206 Verkkosivujen-tuottaminen Matias Turunen netti

Matias Turunen
Saimaan ammatti-
opisto Sampo

206 Verkkosivujen-tuottaminen teemu pohjalainen netti

Teemu
Pohjalainen

Porvoon
ammattiopisto

206 verkkosivujen tuottaminen Matias Hyry netti

Matias Hyry
Oulun seudun
ammattiopisto

 206 Verkkosivujen tuottaminen Melker Narikka netti

Melker Narikka
Suomen Liike-
miesten Kauppa-
opisto

206 Verkkosivujen tuottaminen Pasi Matalamäki netti

Pasi Matalamäki
Satakunnan
koulutuskunta-
yhtymä

206 Verkkosivujen Tuottaminen Sami Patanen netti

Sami Patanen
Keudan 
ammattiopisto

206 verkkosivujen tuottaminen Kynsilehto Aleksi netti

Aleksi Kynsilehto
Oulun seudun
ammattiopisto

Vieraskilpailijat

 206 verkkosivujen suunnittelu Arturs Krapans netti

Arturs Krapans
State Education
Developement
Agency, Latvia

 206 verkkosivujen suunnittelu silver mahar netti

Silver Mähar
Foundation
Innove, Viro

Morgane Borowczyk / Région Nord-Pas de Calais / Ranska

Yleiskuvaus kilpailulajista

Verkkosivujen tuottaminen on monipuolinen laji, jossa kilpailijoilta vaaditaan taiteellista luovuutta sekä kykyä toteuttaa käytettävyydeltään miellyttäviä ja teknisesti toimivia verkkosivustoja. Kilpailijan on tunnettava hyvin verkkosivujentuottamisprosessin eri vaiheet.

Kilpailun luonne

Kilpailu on yksilölaji.

Osaamisvaatimukset

Kilpailijan on pystyttävä luomaan tarkka käsitys asiakkaasta, sivuston tietosisällöstä ja palveluista, käyttäjäkohderyhmästä sekä keskeisestä toiminta-ajatuksesta.

Kilpailijan on osattava tuottaa sivuston rakennekaavio, perus- ja / tai etusivun käyttöliittymän layout-suunnitelma, määritettävä sivuston luomisessa käytettävät teknologiat (ohjelmointikielet, ohjelmistot jne.).

Kilpailija koostaa verkkosivuston eri teknologioita ja ohjelmia käyttäen. Kilpailija testaa sivuston eri selaimilla W3C-validaattorilla. Kilpailija julkaisee sivuston palvelimelle sekä esittelee sivustoa asiakkaalle. Kilpailijan tulee hallita palvelinpuolen ja tietokannan asioita.

Kilpailija tekee sivuston ylläpidossa vaadittavan dokumentaation sekä opastaa asiakasta sivuston käyttöönotossa ja käytössä. Kilpailijan tulee omata tiimityöskentelyssä tarvittavia vuorovaikutustaitoja sekä ilmentää kilpailutilanteessa omalla tavallaan yrittäjyyttä. Hänen tulee huomioida työskentelyssään omaan työhyvinvointiin liittyvät ergonomiset seikat.

Edellä mainittujen asioiden lisäksi kilpailijan tulee osata

  • suunnitella visuaalisesti näyttäviä verkkosivustoja tyylitiedostoja hyväksikäyttäen
  • toteuttaa standardin mukaisia selaimen kautta päivitettäviä verkkosivuja
  • käyttää kuvankäsittelyohjelmia monipuolisesti
  • toteuttaa monipuolisesti animaatioita
  • projektinhallintataidot
  • huomioida erilaisten päätelaitteiden osalta sivuston näkyminen
  • ratkoa monenlaisia ongelmia
  • ottaa huomioon sivuston esteettömyys ja käytettävyys
  • yhdistää tekemänsä sivusto sosiaalisen median ohjelmistoihin

Finaalitehtävät

Finaalin kilpailutehtävät ja käytettävissä oleva kilpailuaika

Internetsivustojen tarkistus ja arviointi suoritetaan uusimmalla mahdollisella Chrome-selaimella, jos ei kilpailutehtävässä muutoin mainita.

Aikataulu

 

Tehtävä

Päivä

Kello

Kilpailuaika

A

Asiakkaan tuotteesta /   palvelusta luodaan oma Web-design

ti 8.4.2014

8:30 – 10:30

2 tuntia

B

Windows 8 –ohjelmointi

ti 8.4.2014

11:00 – 12:00

1 tunti

C

Responsiivisen Internet-sivun   toteuttaminen web-graafikon konseptin pohjalta

ti 8.4.2014

13:00 – 16:00

3 tuntia

D

Internetsivuston määritteleminen,
suunnitteleminen ja myyminen asiakkaan vaatimuksien mukaan

ke 9.4.2014

8:30 – 10:30

2 tuntia

E

Käytettävyys ja esteettömyys

ke 9.4.2014

11:00 – 12:00

1 tunti

F

Internetsivuston ja   CMS-järjestelmän toteuttaminen

ke 9.4.2014

13:00 – 16:00

3 tuntia

G

Tiedon käsittely ja   esittäminen JSON-rajapinnan avulla

to 10.4.2014

8:30 – 11:30

3 tuntia

Kilpailutehtävät

Finaalitehtävät ovat modulaarisia. Kilpailun jokainen moduuli on oma, erillinen kokonaisuus.

Tehtävä A – Asiakkaan tuotteesta / palvelusta luodaan oma web-design (ti 8.4.2014 klo 8:30 – 10:30)

HTML-developer on tehnyt HTML5-muodossa olevan sivun asiakkaan tuotteesta / palvelusta. Sivulle on määritelty kohderyhmä. Tehtävänäsi on käyttää luovuutta ja kehittää HTML5-tiedostoa muuttamatta oma, visuaalisesti näyttävä web-design CSS3-tyylimäärittelyjen, Javascript-koodin ja kuvamuokkausten avulla.

HTML5-tiedosto sisältää valmiiksi wrapper-elementit sekä linkit CSS-, Javascript- ja kuvatiedostoihin. Kaikki HTML5-sivun sisältö näytetään käyttäjälle joko suoraan tai interaktiivisesti (esimerkiksi hover-efektin avulla).

Tehtävä B – Windows 8 -ohjelmointi (ti 8.4.2014 klo 11:00 – 12:00)

Yrityksellä on olemassa oleva internetsivusto. Liiketoiminnallisista syistä yritys haluaa luoda Windows 8 –sovelluksen valmiin sivuston pohjalta. Sinun tehtävänäsi on muokata sivustoa niin, että sivusto toimii Windows 8 –sovelluksena. Lisäksi sinun tulee lisätä sovellukseen käyttöjärjestelmän valmiita komponentteja. Tehtävän suoritukseen tarvitaan osaamista seuraavista tekniikoista: HTML5, CSS3 ja Javascript.

Microsoft tarjoaa finalisteille tehtävään liittyvän koulutuksen ja oppimateriaalit.

Tehtävä C – Responsiivisen internetsivun toteuttaminen web-graafikon konseptin pohjalta (ti 8.4.2014 klo 13:00 – 16:00)

Web-graafikko on luonut konseptin internetsivulle. Design muuttaa automaattisesti sivun elementtien kokoa käyttäjän laitteen ja selaimen koosta riippuen. Sinun tehtäväsi on luoda konseptin tekninen toteutus HTML5, CSS3 ja Javascript -tekniikoilla niin, että se vastaa mahdollisimman hyvin web-graafikon suunnitelmia.

Tehtävän materiaaleista löydät 480 pikselin ja 1280 pikselin resoluutioille luodut graafiset suunnitelmat. Internetsivun elementtien asettelun muutoksen breakpoint on 768 pikseliä.

Tehtävä D – Internetsivuston määritteleminen, suunnitteleminen ja myyminen asiakkaan vaatimuksien mukaan (ke 9.4.2014 klo 8:30 – 10:30)

Asiakkaalla on liiketoiminnallinen tarve kehittää internetsivusto ja siihen liittyviä toiminnallisuuksia, jotka vaativat relaatiotietokannan.

Sinun tehtävänäsi on tuottaa sivuston rakennekaavio, layout-suunnitelma (sketsi / wireframe / pixel perfect layout), määriteltävä sivuston luomisessa käytettävät teknologiat ja laatia tietokannasta ER-kaavio. Lisäksi sinun tulee valmistautua esittämään asiakkaalle suunnitelmasi ja myydä asiakkaalle sinun palvelusi.

Tehtävä E – Käytettävyys ja esteettömyys (ke 9.4.2014 klo 11:00 – 12:00)

Tehtävänäsi on muokata olemassa oleva internetsivusto käytettävyydeltään ja esteettömyydeltään paremmaksi.

Tehtävä F – Internetsivuston ja CMS-järjestelmän toteuttaminen (ke 9.4.2014 klo 13:00 – 16:00)

Sinun tehtävänäsi on luoda asiakkaan kanssa sovitun määrittelyn mukainen internetsivusto, joka sisältää CMS-sisällönhallintajärjestelmän, jolla asiakas voi päivittää ja ylläpitää sivuston sisältöä.

Tässä tehtävässä voit toteuttaa internetsivuston ja CMS-järjestelmän sisällönhallintajärjestelmien avulla tai ohjelmoida CMS-järjestelmän itse.

Finalisteille tarjotaan tehtävään liittyvä ilmainen Drupal-koulutus, jonka järjestää Suomen Drupal-yhdistys.

Tehtävä G – Tiedon käsittely ja esittäminen JSON-rajapinnan avulla (to 10.4.2014 klo 8:30 – 11:30)

Asiakkaan julkaisujärjestelmään on luotu valmis JSON-rajapinta. Sinun tehtävänäsi on luoda JSON-rajapinnasta tietoa hakeva Internet-sivusto.

Arvioinnin rakenne

Kunkin moduulin kilpailutehtävät arvioidaan mahdollisimman pian tehtävien palautusajan umpeuduttua. Jokaisen kilpailupäivän lopulla kilpailijoille kerrotaan finaalin pistetilanteesta. Arviointitulosten vastalauseaika on päivittäin 1 h tulosten julkaisun jälkeen.

Kilpailussa käytettävät materiaalit, laitteet, työvaiheet ja lajialue

Lajin finaalit järjestetään täysin ilman paperia. Kilpailijat saavat kunkin moduulin toimeksiannon ja arviointitaulukon Word-asiakirjana ennen kilpailutehtävän suorituksen aloittamista. Kilpailutehtävissä kilpailijoiden ei tarvitse tulostaa paperille mitään.

Kilpailijoiden käytössä on Windows 7 –käyttöjärjestelmällä varustettu työasema, jossa on 2 TFT-näyttöä ja johon on asennettu seuraavat ohjelmat:

  • Adobe Design & Web Premium CS6
  • Microsoft Office 2010
  • Uusimmat versiot Chromesta, Forefoxista ja IE:stä
  • Sublime text 2
  • NoteTab Light
  • Notepad++
  • Geany
  • Eclipse
  • NetBeans
  • WinSCP
  • FileZilla

Edellisen listan ohjelmista ei saa tuoda ja asentaa muita versioita. Kilpailijat voivat edellä mainittujen ohjelmien lisäksi käyttää ennen kilpailutapahtumaa kilpailutyöasemaansa asentamiaan ohjelmia, joihin heillä tai heidän edustamallaan oppilaitoksella on lisenssi tai jotka ovat shareware- tai freeware-ohjelmistoja.

Kilpailijoiden työasemille on valmiiksi ladattu seuraavat kirjastot, frameworkit ja sisällönhallintajärjestelmät, jotka ovat vapaasti kilpailijoiden käytettävissä:

  • HTML5 Shiv
  • HTML 5 Boilerplate
  • jQuery
  • Bootstrap 3.0
  • Foundation
  • Drupal
  • WordPress
  • Joomla

Kilpailutehtävät tehdään suoraan Apache-verkkopalvelimelle (PHP, MySQL, phpMyAdmin), joka näkyy kilpailijan työasemassa erillisenä verkkoasemana. Kilpailutehtävän päätyttyä palvelimelta otetaan ns. snapshot-tilannekuva palvelimelta, jolloin lopullinen arvioitava työ palautuu automaattisesti.

Kilpailun järjestäjät varaavat itselleen oikeuden tehdä muutoksia kilpailun järjestelyihin sekä koneisiin, laitteisiin ja ohjelmiin. Muutokset päivitetään välittömästi www.taitaja2014.fi -sivuille.

Kilpailujen aikataulu

Finaali järjestetään 8.-10.4.2014. Ilmoittautuminen (akkreditointi) tapahtuu 7.4.2014 kello 9:00–12:30, jolloin on mahdollista tutustua lajialueeseen. Testaukseen ja omien ohjelmien asennukseen varattu aika ilmoitetaan myöhemmin.

Lounasajat kilpailupäivinä 1 ja 2 ovat lajillamme kello 11:00 – 12:00. Viimeisen kilpailupäivän lounas on kello 13:00 – 14:00.

Kilpailija tuo itse kilpailupaikalle

Kilpailijan ei välttämättä tarvitse tuoda kilpailupaikalle mitään, mutta kilpailija voi halutessaan tuoda oman näppäimistön, hiiren ja kuulokkeet kilpailupaikalle.

Yhteistyössä

MSFT logo nettiin

drupal fi-logo-nettiin

logo-lores

businesscollege

Teknologia teollisuus verkkoon 140px

pkky verkkoon

Keskuspuiston ammattiopisto verkkoon