TIIVISTELMÄ

Projektin tausta ja tavoite Ryhmätyönä toteutettu karttasovellus uusia opiskelijoita varten. Hyödynnettiin Google Maps -rajapintaa sekä HTML-, CSS- ja JavaScript-koodia.

Minun roolini Päävastuu visuaalisesta ilmeestä, käyttöliittymäsuunnittelusta ja Maps-rajapinnan toteutuksesta; lopputuloksena pehmeä, leikkisä ja raikas ilme.

Places-näkymä Sijaintien haku ja suodatus kategorioilla tai hakukentällä. Popover-ikkuna lisätietoja ja kartalle siirtymistä varten.

Karttanäkymä Interaktiivinen kartta suodatuksella. Paikkojen klikkaaminen avaa lisätietoikkunan, josta voi navigoida kohteeseen.

Lopputulos Toiminnallinen ja visuaalisesti miellyttävä prototyyppi, joka täytti kaikki asetetut vaatimukset.

Projektin aloitus

Kurssimme tavoitteena oli toteuttaa ryhmätyönä pieni sovellus, joka auttaisi uusia opiskelijoita löytämään relevantteja paikkoja Oulusta. Projektin keskeisenä vaatimuksena oli Google Maps -rajapinnan hyödyntäminen. Kurssiaikataulun ja suoraviivaisten vaatimuksien vuoksi päädyimme toteuttamaan sivuston ilman raskaita frameworkeja, käyttäen modernia HTML-, CSS- ja JavaScript-koodia.

Oma rooli

Minulla oli päävastuu sivuston visuaalisesta ilmeestä, käyttöliittymäsuunnittelusta ja Maps-rajapinnan käyttöönotosta. Visuaalisessa suunnittelussa tavoittelin pehmeää, leikkisää ja helposti lähestyttävää ilmettä. Lopputuloksena syntyi selkeä, esteettinen ja raikas kokonaisuus.

Keskeiset toiminnallisuudet

1. Places-näkymä

Käyttäjät voivat hakea ja suodattaa sijainteja hakukentällä tai kategoriapainikkeilla (esim. Attractions, Restaurants, Campuses). Sijainnit näkyvät listana näkymässä. View-painike avaa popover-ikkunan, joka tarjoaa lisätietoa kohteesta ja mahdollistaa siirtymisen suoraan karttanäkymään.

2. Karttanäkymä

Kartta kokoaa yhteen opiskelijalle olennaiset sijainnit. Oikean alakulman My location -painikkeella voi paikantaa oman sijainnin. Samasta kulmasta löytyvällä Show filters -painikkeella karttaa voi suodattaa tarpeen mukaan, ja karttamerkkejä klikkaamalla avautuvat kohteen tarkemmat tiedot näytön vasempaan reunaan. Avautuneen sivunäkymän Navigate to -painikkeella käyttäjä voi myös siirtyä varsinaiselle Google Maps -sivustolle ja aloittaa navigoinnin kohteeseen välittömästi.

Mietteet

Sivustosta tuli toiminnallinen, selkeä ja visuaalisesti miellyttävä kokonaisuus. Kaikki projektille asetetut vaatimukset täyttyivät, ja sovellus toimii erinomaisena prototyyppinä sekä vahvana pohjana mahdolliselle jatkokehitykselle.