Assignment (UX/UI/Frontend)

Tehtävänanto

Jalostaa oheisesta Intranet-mallisivusta HTML5-versio käyttäen erillistä CSS-tyylitiedostoa. Käytä layoutin taittoon Bootstrap -kirjastoa. Ensimmäisen osuuden tavoitteena on nähdä ohjelmoijan taidot CSS Frameworkin ja Flexboxin hyödyntämisessä, sekä selkeän HTML & CSS tuottamisessa.
Hyödyntää ikonikirjastoa. Kuvassa olevat ikonit ovat Font Awesome -ikonifonttikirjastosta. Voit käyttää työssä myös jotakin muuta ikonikirjastoa, eikä ikonien tarvitse olla juuri esimerkissä löytyviä. Esimerkissä on käytetty versiota 4, mutta voit käyttää uusintakin.
Käyttää ulkoista tietolähdettä JavaScriptillä. Vasemmassa palstassa näkyvä navigaatio muuttuu usein; tavoitteena on selvittää ohjelmoijan kyky hyödyntää ulkoista dataa webbisivulla, eli tässä tapauksessa sen avulla navigaation rakentamiseen. Luo kuvan mukainen navigaatio ulkoiseen tiedostoon, ja näytä se sivustolla valitsemallasi tavalla.
Käyttää vähintään yhtä Web Componenttia jonkin sivulla toistuvan HTML-rakenteen kapselointiin custom elementiksi.

Ratkaisu

Työ/käyttöympäristö: IDE: Visual Studio Code (+ Live Server http://127.0.0.1/) , Selain: Chrome

Työprosessin kuvaus:

En ole ennen tehnyt sivustoa alusta asti Bootstrap kehitysympäristöllä (olen ennen modifoinut jo valmiita Bootstrap-sivustoja) joten ensin opiskelua mitä tarvitaan sivuston luomiseen. Tämän jälkeen tein simppelin flexbox sivun muutamalla columnilla joten näen ja ymmärrän miten Bootstrap toiminnan.
Tämän jälkeen kokosin haluttua mallikuvaa mukaillen sivupohjan pelkistetyn gridin jotta sain kaikki sivuston elementit oikeille paikoilleen. Tässä itselleni apuna laitoin tiettyihin pääelementteihin (<div class="container">, <div class="row"> sekä <div class="col-sm">) väliaikaiset inline tyylit (border: 1px solid black) jolla hahmotin että missä minkäkin elementin pitää olla ja onko elementin oikeilla paikoillaan. Seuraavana lisäsin sivupohjaan header ja footer elementit.
Seuraavana työvaiheena oli sivun vasemmassa ja oikeassa reunassa olevat navigaatioden lisääminen javacriptilla suoraan sivupohjan oikeaan elementtiin (<script> ...code ...</script>). Navigaatioissa oleva data tehtiin JSON -muotoon ja tämä muuttujassa oleva JSON data loopattiin sivulle .map() funktion avulla. Näin saatiin tulostettua sivulle oikeanlainen navigaatioiden sisältö.
Sivun tekstisisältöjen lisäys eli otsikot, murupolku, artikkelin teksti sekä kuva, headerin ja footerin tekstit.
Tyylien lisääminen oli seuraava työvaihe. Oman tyylitiedoston luominen johon omia tyyliluokkia halutuilla väriarvoilla eri elementeille, tekstien ja taustojen värit, borderit/paddingit, hoverit yms. jotta sain mahdollisimman lähelle haluttua sivuston mallikuvaa.
Font Awesome ei ollut minulle ennalta tuttu joten siihen tutustuminen. Olen käyttänyt Reactin MUI kirjastoa joka on periaatteellisesti samanlainen ikoni-kirjasto joten siinä mielessä tämä oli tuttua. Tyylitiedoston linkki sivun Headiin ja etsimään samanlaisia ikonia joita oli esimerkkisivussa ja niiden lisääminen headerin oikeassa reunassa olevaan osioon, Oikeat ikonit Turvallisuusohjeet 2020 -otsikon eteen sekä artikkelin kirjoittajan blokkiin.
Oikeiden ikonien lisääminen oikeassa reunassa olevaan navigaatioon oli seuraava työvaihe. Lisäsin JSON -dataan uuden key/value -parin johon lisäsin halutun ikonin haluttuun navigation kohtaan (esim. fa: "fa-desktop") ja tulostin sen .map() funktioon (<i class="fa ${item.fa}"></i>).
Web Componentit olivat minulle suht uusi asia eli en ollut niitä itse tehnyt. Tehtävänantona oli tehdä toistuvan HTML-rakenteen custom elementti. Tutustumisen ja opiskelun kautta tein kaksi peruskomponenttiä jotka toistuvat sivupohjassa eli headerissa oleva firman nimi Abako (<abako-home></abako-home>) sekä footerissä oleva Abakon yhteystiedot (<abako-connect-info></abako-connect-info>).
Viimeisenä isompana tehtävä oli saada vasemmanreunan navigaation tiedot tulemaan ulkoisesta tietolähteestä eli päätin että tämä ulkoinen tietolähde on erillinen json -tiedosto. Tässä oli monenlaista ongelmaan pitkin tätä projektia kun yritin aina välillä palata tämän osion ratkaisuun. Ongelmat johtuivat pääasiassa siitä että kun avaa selaimella suoraan index.html -tiedostoa niin javascript -tiedostojen tuomisen yhteydessä tulee monenlaista virheilmoituksia esimerkiksi CORS politiikkaan liittyen, eli ei voi avata js-tiedostoja. Tässä ratkaisuna on että json/js tiedostot on ajettava joko lokaalilla tai remote serverillä. Visual Studio Codessa on Live Server joka luo lokaalin serverin (http://127.0.0.1/) jonka kautta nämä CORS -ongelmat poistuivat ja sain importattua vasemman navigaation datan suoraan erillisestä json -tiedostosta (/json/leftNavigation.json) javascript tiedostoon (/js/navigation.js) jonka kautta navigaatio luodaan index.html -sivulle.
Lopuksi siivosin vielä kaikista tiedostoista käyttämättömät koodirivit millä ei ole enää käyttöä sekä poistin inline-tyylit html-tiedostosta ja siirsin ne haettavaksi tyylitiedostosta.

totaro/abako

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages