Opetussuunnitelmat

Objective

Purpose and objectives:
You are able to design and implement advanced modern web user interfaces and user interface elements considering various end user terminals. You are able to document the assignment according to the framework given in the course. (e.g. design, resourcing, prototype, technical implementation, optimization, testing).

EUR-ACE Competences:
Knowledge and Understanding
Engineering Practice

Content

- Composition and layout of a website
- Typography, images, forms
- Responsive user interface with and without application frameworks
- CSS pre-processors
- Implementation of vector based illustrations supported by web browsers
- Transitions and animations on Web-page

Oppimateriaali ja suositeltava kirjallisuus

Materials in the e-learning environment.

Teaching methods

- lectures
- independent study
- distance learning
- webinars
- small group learning
- exercises
- learning tasks
- seminars

Exam schedules

The possible date and method of the exam will be announced in the course opening.

Vaihtoehtoiset suoritustavat

The admission procedures are described in the degree rule and the study guide. The teacher of the course will give you more information on possible specific course practices.

Student workload

One credit (1 Cr) corresponds to an average of 27 hours of work.

- independent study and contact lectures 54 h
- weekly exercises 54 h
- final assignment 27 h
Total 135 h

Evaluation scale

0-5

Arviointikriteerit, tyydyttävä (1-2)

Sufficient 1: The student knows the design and implementation of a modern responsive user interface for a website and knows the laws and technologies related to it; however, the results are insufficient. The documentation of the course assignment is brief and contains errors.

Satisfactory 2: The student understands the design and implementation of a modern responsive user interface for a website as well as the laws and technologies related to design. The documentation of the student’s course assignment is restricted.

Arviointikriteerit, hyvä (3-4)

Good 3: The student is able to design and implement a modern responsive user interface for a website considering various end user terminals and knows the laws and technologies related to design. The student has documented their course assignment according to requirements.

Very good 4: The student masters the design and implementation of a modern stylish and responsive user interface for a website concerning various end terminals as well as the laws and technologies related to design. The documentation of the student’s course assignment is meticulous.

Assessment criteria, excellent (5)

Excellent: The student has an extensive command of design and implementation (layout, colors, fonts, images) of a modern stylish and responsive interface for a website concerning various end terminals and a deep mastery of laws and technologies related to design. The documentation of student’s course assignment is comprehensive and meticulous (See Learning Outcomes).

Assessment criteria, approved/failed

Fail 0: The student does not meet the minimum criteria set for the course

Qualifications

Basics of User Interfaces and Usability design and implementation,
Web Technologies

Tavoitteet

Tarkoitus ja osaamistavoitteet:
Osaat suunnitella ja toteuttaa edistyneempiä nykyaikaisia Web-käyttöliittymiä ja käyttöliittymäelementtejä eri päätelaitteet huomioiden. Osaat dokumentoida harjoitustyön opintojaksolla annettujen kehikon mukaisesti (mm. suunnittelu, resursointi, prototyyppi, tekninen toteutus, optimointi, testaus).

EUR-ACE-osaamiset:
Tieto ja ymmärrys
Tekniikan soveltaminen käytäntöön

Sisältö

- Web-sivuston sommittelu ja layout
- Typografia, kuviot, lomakkeet
- Responsiivinen käyttöliittymä ilman valmiita sovelluskehyksiä, sekä niitä hyödyntäen
- CSS esi-prosessorit
- Kuvioiden toteuttaminen selaimen tukemalla vektorigrafiikkaformaatilla
- Siirtymät ja animaatiot Web-sivulla

Aika ja paikka

Verkko

Oppimateriaali ja suositeltava kirjallisuus

Opintojakson Moodle-työtila ja siellä esitetyt verkkomateriaalit

Opetusmenetelmät

Ohjaus-/tehtäväkontaktit
Teorian perusteet itse opiskeltuna ennen kontakteja
Viikkoharjoitukset
Lopputyö

Vaihtoehtoiset suoritustavat

Itsenäinen työskentely

Opiskelijan ajankäyttö ja kuormitus

Materiaalien opiskelu 54h (2op)
Viikkoharjoitukset 54h (2op)
Lopputyö 27h (1op)
Yhteensä 135h

Arviointiasteikko

0-5

Arviointikriteerit, tyydyttävä (1-2)

Välttävä 1: Opiskelija tietää nykyaikaisen mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä tietää suunnitteluun liittyvät lainalaisuudet ja tekniikat, mutta tuloksissa puutteita. Harjoitustyön dokumentointi on suppea ja siinä on virheitä.

Tyydyttävä 2: Opiskelija ymmärtää nykyaikaisen mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä ymmärtää suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi on tehty suppeasti.

Arviointikriteerit, hyvä (3-4)

Hyvä 3: Opiskelija osaa nykyaikaisen mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä osaa suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi on tehty vaatimusten mukaisesti

Kiitettävä 4: Opiskelija hallitsee nykyaikaisen tyylikkään ja mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä hallitsee suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi on tehty huolellisesti.

Arviointikriteerit, kiitettävä (5)

Erinomainen: Opiskelija hallitsee kattavasti nykyaikaisen tyylikkään (mm. layout, värit, kirjasimet, kuvat) ja mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä hallitsee syvällisesti suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi (kts. oppimistulokset) on tehty kattavasti ja huolella.

Arviointikriteeri, hyväksytty/hylätty

Hylätty 0: Ei hallitse aihealuetta

Esitietovaatimukset

Käyttöliittymien ja käytettävyyden suunnittelun ja toteutuksen perusteet sekä Web-tekniikoiden perusteet.

Objective

Purpose and objectives:
You are able to design and implement advanced modern web user interfaces and user interface elements considering various end user terminals. You are able to document the assignment according to the framework given in the course. (e.g. design, resourcing, prototype, technical implementation, optimization, testing).

EUR-ACE Competences:
Knowledge and Understanding
Engineering Practice

Content

- Composition and layout of a website
- Typography, images, forms
- Responsive user interface with and without application frameworks
- CSS pre-processors
- Implementation of vector based illustrations supported by web browsers
- Transitions and animations on Web-page

Location and time

Online

Oppimateriaali ja suositeltava kirjallisuus

Course webpages and web material

Teaching methods

Contact lessons
Basics of theory as self study before contacts
Weekly exercises
Final assignment

Vaihtoehtoiset suoritustavat

Self studying

Student workload

Studying the material 54h (2cr)
Weekly exercises 54h (2cr)
Final assignment 27h (1cr)
In total of 135h

Further information

Grading is based on the final assignment and the report.

Evaluation scale

0-5

Arviointikriteerit, tyydyttävä (1-2)

Sufficient 1: The student knows the design and implementation of a modern responsive user interface for a website and knows the laws and technologies related to it; however, the results are insufficient. The documentation of the course assignment is brief and contains errors.

Satisfactory 2: The student understands the design and implementation of a modern responsive user interface for a website as well as the laws and technologies related to design. The documentation of the student’s course assignment is restricted.

Arviointikriteerit, hyvä (3-4)

Good 3: The student is able to design and implement a modern responsive user interface for a website considering various end user terminals and knows the laws and technologies related to design. The student has documented their course assignment according to requirements.

Very good 4: The student masters the design and implementation of a modern stylish and responsive user interface for a website concerning various end terminals as well as the laws and technologies related to design. The documentation of the student’s course assignment is meticulous.

Assessment criteria, excellent (5)

Excellent: The student has an extensive command of design and implementation (layout, colors, fonts, images) of a modern stylish and responsive interface for a website concerning various end terminals and a deep mastery of laws and technologies related to design. The documentation of student’s course assignment is comprehensive and meticulous (See Learning Outcomes).

Assessment criteria, approved/failed

Fail 0: The student does not meet the minimum criteria set for the course

Qualifications

Basics of User Interfaces and Usability design and implementation,
Web Technologies

Tavoitteet

Tarkoitus ja osaamistavoitteet:
Osaat suunnitella ja toteuttaa edistyneempiä nykyaikaisia Web-käyttöliittymiä ja käyttöliittymäelementtejä eri päätelaitteet huomioiden. Osaat dokumentoida harjoitustyön opintojaksolla annettujen kehikon mukaisesti (mm. suunnittelu, resursointi, prototyyppi, tekninen toteutus, optimointi, testaus).

EUR-ACE-osaamiset:
Tieto ja ymmärrys
Tekniikan soveltaminen käytäntöön

Sisältö

- Web-sivuston sommittelu ja layout
- Typografia, kuviot, lomakkeet
- Responsiivinen käyttöliittymä ilman valmiita sovelluskehyksiä, sekä niitä hyödyntäen
- CSS esi-prosessorit
- Kuvioiden toteuttaminen selaimen tukemalla vektorigrafiikkaformaatilla
- Siirtymät ja animaatiot Web-sivulla

Aika ja paikka

Verkko

Oppimateriaali ja suositeltava kirjallisuus

Opintojakson web-sivut, web-materiaali

Opetusmenetelmät

Käytännön harjoitukset ja kurssin lopputyön tekeminen. Virtuaaliopetus.

Opiskelijan ajankäyttö ja kuormitus

Luennot 24 h, harjoitukset 35 h, harjoitustyö 34 h, itsenäinen työskentely 15 h. Yhteensä 108 tuntia.

Arviointiasteikko

0-5

Arviointikriteerit, tyydyttävä (1-2)

Välttävä 1: Opiskelija tietää nykyaikaisen mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä tietää suunnitteluun liittyvät lainalaisuudet ja tekniikat, mutta tuloksissa puutteita. Harjoitustyön dokumentointi on suppea ja siinä on virheitä.

Tyydyttävä 2: Opiskelija ymmärtää nykyaikaisen mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä ymmärtää suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi on tehty suppeasti.

Arviointikriteerit, hyvä (3-4)

Hyvä 3: Opiskelija osaa nykyaikaisen mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä osaa suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi on tehty vaatimusten mukaisesti

Kiitettävä 4: Opiskelija hallitsee nykyaikaisen tyylikkään ja mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä hallitsee suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi on tehty huolellisesti.

Arviointikriteerit, kiitettävä (5)

Erinomainen: Opiskelija hallitsee kattavasti nykyaikaisen tyylikkään (mm. layout, värit, kirjasimet, kuvat) ja mukautuvan Web-sivuston käyttöliittymän suunnittelun ja toteutuksen eri päätelaitteet huomioiden sekä hallitsee syvällisesti suunnitteluun liittyvät lainalaisuudet ja tekniikat. Opiskelijan harjoitustyön dokumentointi (kts. oppimistulokset) on tehty kattavasti ja huolella.

Arviointikriteeri, hyväksytty/hylätty

Hylätty 0: Ei hallitse aihealuetta

Esitietovaatimukset

Käyttöliittymien ja käytettävyyden suunnittelun ja toteutuksen perusteet sekä Web-tekniikoiden perusteet.

Objective

Purpose and objectives:
You are able to design and implement advanced modern web user interfaces and user interface elements considering various end user terminals. You are able to document the assignment according to the framework given in the course. (e.g. design, resourcing, prototype, technical implementation, optimization, testing).

EUR-ACE Competences:
Knowledge and Understanding
Engineering Practice

Content

- Composition and layout of a website
- Typography, images, forms
- Responsive user interface with and without application frameworks
- CSS pre-processors
- Implementation of vector based illustrations supported by web browsers
- Transitions and animations on Web-page

Location and time

IT Dynamo. D300 or remote

Oppimateriaali ja suositeltava kirjallisuus

Course webpages and web material

Teaching methods

Lectures, practical exercises and course assignment. Exercises and the course assignment can be completed as virtual studies.

Student workload

Exercises 68 h and course assignment 40 h. Total 108 hours.

Evaluation scale

0-5

Arviointikriteerit, tyydyttävä (1-2)

Sufficient 1: The student knows the design and implementation of a modern responsive user interface for a website and knows the laws and technologies related to it; however, the results are insufficient. The documentation of the course assignment is brief and contains errors.

Satisfactory 2: The student understands the design and implementation of a modern responsive user interface for a website as well as the laws and technologies related to design. The documentation of the student’s course assignment is restricted.

Arviointikriteerit, hyvä (3-4)

Good 3: The student is able to design and implement a modern responsive user interface for a website considering various end user terminals and knows the laws and technologies related to design. The student has documented their course assignment according to requirements.

Very good 4: The student masters the design and implementation of a modern stylish and responsive user interface for a website concerning various end terminals as well as the laws and technologies related to design. The documentation of the student’s course assignment is meticulous.

Assessment criteria, excellent (5)

Excellent: The student has an extensive command of design and implementation (layout, colors, fonts, images) of a modern stylish and responsive interface for a website concerning various end terminals and a deep mastery of laws and technologies related to design. The documentation of student’s course assignment is comprehensive and meticulous (See Learning Outcomes).

Assessment criteria, approved/failed

Fail 0: The student does not meet the minimum criteria set for the course

Qualifications

Basics of User Interfaces and Usability design and implementation,
Web Technologies