{"id":2384,"date":"2020-12-01T13:34:14","date_gmt":"2020-12-01T11:34:14","guid":{"rendered":"https:\/\/blogit.lab.fi\/labfocus\/?p=2384"},"modified":"2020-12-01T13:34:14","modified_gmt":"2020-12-01T11:34:14","slug":"toiminnallisen-internetsivuston-luominen","status":"publish","type":"post","link":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/","title":{"rendered":"Toiminnallisen internetsivuston luominen"},"content":{"rendered":"\n<p>Osana <a href=\"https:\/\/lab.fi\/fi\/projekti\/biosykli\" target=\"_blank\" rel=\"noreferrer noopener\"><em>BIOSYKLI \u2013 P\u00e4ij\u00e4t-H\u00e4meen biokiertotalous<\/em><\/a> -projektia kuvataan maakunnan kiertotalouskokonaisuus. Kokonaisuudentoiminnallisten internetsivujen ohjelmointi alkoi kes\u00e4ll\u00e4 2020 opiskelijaty\u00f6n\u00e4. Ohjelmointi tapahtui valmiin ulkoasumallin pohjalta k\u00e4ytt\u00e4en <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">ReactJS JavaScript &#8211; <\/a>kirjastoa sek\u00e4 joitakin valmiita komponentteja, kuten <a href=\"https:\/\/react.i18next.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>react-i18next<\/em><\/a>\u2019i\u00e4, jonka avulla toteutettiin internetsivuston kirjoituksen kielen vaihtaminen suomen ja englannin v\u00e4lill\u00e4. Suurin osa toiminnallisuudesta on kuitenkin ohjelmoitu ilman valmiita komponentteja k\u00e4ytt\u00e4en <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>ReactJS<\/em><\/a>:n luokkakomponentteja.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ty\u00f6n eteneminen&nbsp;<\/h2>\n\n\n\n<p>JavaScript -kirjaston valitsemisen j\u00e4lkeen alkoi toteutuksen suunnittelu: mink\u00e4lainen komponenttirakenne projektiin olisi j\u00e4rkevin tehd\u00e4, ja miten ulkoasu saadaan vastaamaan graafikon ty\u00f6st\u00e4m\u00e4\u00e4 ulkoasumallia responsiivisesti eli sopimaan eri kokoisille n\u00e4yt\u00f6ille aina tietokoneesta \u00e4lypuhelimeen. Sivustolle oli tarkoituksena tehd\u00e4 etusivun lis\u00e4ksi jokaiselle kohteelle omat infosivut sek\u00e4 yleiset \u201dyhteystiedot\u201d ja \u201dlis\u00e4tietoa\u201d -sivut.&nbsp; Ty\u00f6 l\u00e4hti liikkeelle etusivun rakentamisesta. Etusivun ulkoasu luotiin ulkoasumallin mukaiseksi v\u00e4rien, fonttien sek\u00e4 elementtien asettelun osalta. Vasta t\u00e4m\u00e4n j\u00e4lkeen alkoi toiminnallisuuden ohjelmointi.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png\" alt=\"A picture containing graphical user interface\n\nDescription automatically generated\" class=\"wp-image-2385\" srcset=\"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png 1024w, https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5-300x150.png 300w, https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5-768x384.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Kuva 1. Kuvakaappaus sivuston etusivun luonnoksesta (taustalla) ja valmiista tuotteesta (edess\u00e4). (Kuva: Oona Rouhiainen)<\/figcaption><\/figure>\n\n\n\n<p>Suurin ty\u00f6 sivuston toiminnallisuuden kannalta oli etusivulla olevan kartan toimintojen ohjelmoinnissa. Kartta luotiin sek\u00e4 liikuteltavaksi ett\u00e4 zoomattavaksi, samaan tyyliin kuin kartat yleens\u00e4kin internetsivustoilla ovat (Kuva 1). Karttakuvan piti alun perin olla kuva, mutta se vaihdettiin kesken ty\u00f6skentelyn videoksi. Videon p\u00e4\u00e4lle luotiin useita elementtej\u00e4 kartan eri kohteista, joita klikkaamalla k\u00e4ytt\u00e4j\u00e4 p\u00e4\u00e4see tutustumaan tarkemmin kohteiden tietoihin. Etusivun valmistumisen j\u00e4lkeen jokaiselle siin\u00e4 esiintyv\u00e4lle kohteelle luotiin oma komponentti. Komponentit rakennettiin saman kaavan mukaan: ulkoasu ensin ja sen j\u00e4lkeen toiminnallisuus (Kuva 2).&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-6.png\" alt=\"Graphical user interface, website\n\nDescription automatically generated\" class=\"wp-image-2386\" srcset=\"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-6.png 1024w, https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-6-300x170.png 300w, https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-6-768x436.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Kuva 2. Kuvakaappaus kohdeverkkosivun luonnoksesta (Kuva: Oona Rouhiainen)<\/figcaption><\/figure>\n\n\n\n<p>Sivujen responsiivisuuden luominen l\u00e4hti kunnolla k\u00e4yntiin vasta, kun ulkoasu oli saatu kuntoon. Ulkoasuun jouduttiin responsiivisuuden vuoksi tekem\u00e4\u00e4n joitakin muutoksia, esimerkiksi pienimpien n\u00e4ytt\u00f6jen kohdalla kartan kohdekuvakkeet poistuivat ja niiden tilalle tuotiin viisi kuvaketta, jotka viev\u00e4t kohdesivulleen. Ty\u00f6n versionhallinnassa k\u00e4ytettiin <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Git<\/a>:i\u00e4. Versionhallinnan avulla voitiin pit\u00e4\u00e4 ty\u00f6st\u00e4 varmuuskopiot sek\u00e4 nykyisest\u00e4 ett\u00e4 sen aiemmista versioista.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ty\u00f6n opit&nbsp;<\/h2>\n\n\n\n<p>Ty\u00f6skentelyn avulla ReactJS tulee tutuksi ja etenkin uudelleenk\u00e4ytett\u00e4vien komponenttien luonti alkaa sujumaan jouhevammin. Uudelleenk\u00e4ytett\u00e4vien komponenttien luonnin osaaminen on t\u00e4rke\u00e4\u00e4, jottei ohjelmoijan tarvitse kirjoittaa samoja koodirivej\u00e4 useampaan kertaan. ReactJS:\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4m\u00e4 onnistuu helposti. Responsiivisen sivuston luominen aiheuttaa haasteita etenkin edell\u00e4 kuvaillun kaltaisen projektin kanssa. Etusivun kartan yksil\u00f6llisen toimintatavan vuoksi sen kanssa ei ollut mahdollista k\u00e4ytt\u00e4\u00e4 valmiita komponentteja. Monipuolisuutensa vuoksi projekti oli erinomainen opiskelijalle erilaisten internetsivustojen luomiseen tarvittavien taitojen oppimiseen sek\u00e4 opitun taidon vahvistamiseen.&nbsp;<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#b3edfb\"><strong>Kirjoittajat<\/strong><br><br><strong>Katri Putkonen <\/strong>on ohjelmoinnista kiinnostunut mediatekniikan insin\u00f6\u00f6riopiskelija LAB-ammattikorkeakoulussa.\u00a0<br><br><strong>Oona Rouhiainen <\/strong>toimi opiskelijan ohjaajana ja ty\u00f6skentelee informaatiomuotoilijana LAB-ammattikorkeakoulun TKI-projekteissa.\u00a0\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Linkit<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Linkki 1. LAB. 2020. BIOSYKLI-P\u00e4ij\u00e4t-H\u00e4meen biokiertotalous. [Viitattu 06.11.2020]. Saatavissa: <a href=\"https:\/\/lab.fi\/fi\/projekti\/biosykli\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/lab.fi\/fi\/projekti\/biosykli<\/a>&nbsp;<\/p>\n\n\n\n<p>Linkki 2. React. 2020. React \u2013 A JavaScript library for building user interfaces. [Viitattu 6.11.2020]. Saatavissa:&nbsp; <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/reactjs.org\/<\/a>&nbsp;<\/p>\n\n\n\n<p>Linkki 3. React-i18next. 2020. Introduction &#8211; react-i18next documentation. [Viitattu 6.11.2020]. Saatavissa: <a href=\"https:\/\/react.i18next.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/react.i18next.com\/<\/a>&nbsp;<\/p>\n\n\n\n<p>Linkki 4. Git. 2020. Git \u2013fast-version-control. [Viitattu 23.11.2020]. Saatavissa: <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/git-scm.com\/<\/a>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Osana BIOSYKLI \u2013 P\u00e4ij\u00e4t-H\u00e4meen biokiertotalous -projektia kuvataan maakunnan kiertotalouskokonaisuus. Kokonaisuudentoiminnallisten internetsivujen ohjelmointi alkoi kes\u00e4ll\u00e4 2020 opiskelijaty\u00f6n\u00e4. Ohjelmointi tapahtui valmiin ulkoasumallin pohjalta k\u00e4ytt\u00e4en ReactJS JavaScript &#8211; kirjastoa sek\u00e4 joitakin valmiita komponentteja, kuten react-i18next\u2019i\u00e4, jonka avulla toteutettiin internetsivuston kirjoituksen kielen vaihtaminen suomen ja englannin v\u00e4lill\u00e4. Suurin osa toiminnallisuudesta on kuitenkin ohjelmoitu ilman valmiita komponentteja k\u00e4ytt\u00e4en ReactJS:n luokkakomponentteja.&nbsp; [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":2385,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,43],"tags":[29,671,1563,1561],"class_list":{"0":"post-2384","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-circular-economy_fi","8":"category-yleinen-fi","9":"tag-artikkeli-e1","10":"tag-biosykli","11":"tag-ohjelmointi","12":"tag-opiskelijatyo","13":"czr-hentry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Toiminnallisen internetsivuston luominen - LAB Focus<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Toiminnallisen internetsivuston luominen - LAB Focus\" \/>\n<meta property=\"og:description\" content=\"Osana BIOSYKLI \u2013 P\u00e4ij\u00e4t-H\u00e4meen biokiertotalous -projektia kuvataan maakunnan kiertotalouskokonaisuus. Kokonaisuudentoiminnallisten internetsivujen ohjelmointi alkoi kes\u00e4ll\u00e4 2020 opiskelijaty\u00f6n\u00e4. Ohjelmointi tapahtui valmiin ulkoasumallin pohjalta k\u00e4ytt\u00e4en ReactJS JavaScript &#8211; kirjastoa sek\u00e4 joitakin valmiita komponentteja, kuten react-i18next\u2019i\u00e4, jonka avulla toteutettiin internetsivuston kirjoituksen kielen vaihtaminen suomen ja englannin v\u00e4lill\u00e4. Suurin osa toiminnallisuudesta on kuitenkin ohjelmoitu ilman valmiita komponentteja k\u00e4ytt\u00e4en ReactJS:n luokkakomponentteja.&nbsp; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/\" \/>\n<meta property=\"og:site_name\" content=\"LAB Focus\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-01T11:34:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"akivir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LABfinland\" \/>\n<meta name=\"twitter:site\" content=\"@LABfinland\" \/>\n<meta name=\"twitter:label1\" content=\"Kirjoittanut\" \/>\n\t<meta name=\"twitter:data1\" content=\"akivir\" \/>\n\t<meta name=\"twitter:label2\" content=\"Arvioitu lukuaika\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuuttia\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/\"},\"author\":{\"name\":\"akivir\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#\\\/schema\\\/person\\\/ae72d5381475757dda2321cdf93675c3\"},\"headline\":\"Toiminnallisen internetsivuston luominen\",\"datePublished\":\"2020-12-01T11:34:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/\"},\"wordCount\":499,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2020\\\/12\\\/image-5.png\",\"keywords\":[\"Artikkeli E1\",\"BIOSYKLI\",\"ohjelmointi\",\"opiskelijaty\u00f6\"],\"articleSection\":[\"Circular Economy\"],\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/\",\"url\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/\",\"name\":\"Toiminnallisen internetsivuston luominen - LAB Focus\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2020\\\/12\\\/image-5.png\",\"datePublished\":\"2020-12-01T11:34:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#breadcrumb\"},\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2020\\\/12\\\/image-5.png\",\"contentUrl\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2020\\\/12\\\/image-5.png\",\"width\":1024,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/toiminnallisen-internetsivuston-luominen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Toiminnallisen internetsivuston luominen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#website\",\"url\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/\",\"name\":\"LAB Focus\",\"description\":\"Focus Area blog | LAB University of Applied Sciences\",\"publisher\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#organization\",\"name\":\"LAB Focus\",\"url\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2020\\\/04\\\/cropped-cropped-tunnus_blogi-01.png\",\"contentUrl\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/wp-content\\\/uploads\\\/sites\\\/8\\\/2020\\\/04\\\/cropped-cropped-tunnus_blogi-01.png\",\"width\":1342,\"height\":288,\"caption\":\"LAB Focus\"},\"image\":{\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/LABfinland\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/#\\\/schema\\\/person\\\/ae72d5381475757dda2321cdf93675c3\",\"name\":\"akivir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f1723ab3a77803eeac70b31affe3ec8f5f4db77779053fca565725aaee8a3bee?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f1723ab3a77803eeac70b31affe3ec8f5f4db77779053fca565725aaee8a3bee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f1723ab3a77803eeac70b31affe3ec8f5f4db77779053fca565725aaee8a3bee?s=96&d=mm&r=g\",\"caption\":\"akivir\"},\"url\":\"https:\\\/\\\/blogit.lab.fi\\\/labfocus\\\/author\\\/akivir\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Toiminnallisen internetsivuston luominen - LAB Focus","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/","og_locale":"fi_FI","og_type":"article","og_title":"Toiminnallisen internetsivuston luominen - LAB Focus","og_description":"Osana BIOSYKLI \u2013 P\u00e4ij\u00e4t-H\u00e4meen biokiertotalous -projektia kuvataan maakunnan kiertotalouskokonaisuus. Kokonaisuudentoiminnallisten internetsivujen ohjelmointi alkoi kes\u00e4ll\u00e4 2020 opiskelijaty\u00f6n\u00e4. Ohjelmointi tapahtui valmiin ulkoasumallin pohjalta k\u00e4ytt\u00e4en ReactJS JavaScript &#8211; kirjastoa sek\u00e4 joitakin valmiita komponentteja, kuten react-i18next\u2019i\u00e4, jonka avulla toteutettiin internetsivuston kirjoituksen kielen vaihtaminen suomen ja englannin v\u00e4lill\u00e4. Suurin osa toiminnallisuudesta on kuitenkin ohjelmoitu ilman valmiita komponentteja k\u00e4ytt\u00e4en ReactJS:n luokkakomponentteja.&nbsp; [&hellip;]","og_url":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/","og_site_name":"LAB Focus","article_published_time":"2020-12-01T11:34:14+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png","type":"image\/png"}],"author":"akivir","twitter_card":"summary_large_image","twitter_creator":"@LABfinland","twitter_site":"@LABfinland","twitter_misc":{"Kirjoittanut":"akivir","Arvioitu lukuaika":"2 minuuttia"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#article","isPartOf":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/"},"author":{"name":"akivir","@id":"https:\/\/blogit.lab.fi\/labfocus\/#\/schema\/person\/ae72d5381475757dda2321cdf93675c3"},"headline":"Toiminnallisen internetsivuston luominen","datePublished":"2020-12-01T11:34:14+00:00","mainEntityOfPage":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/"},"wordCount":499,"commentCount":0,"publisher":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/#organization"},"image":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#primaryimage"},"thumbnailUrl":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png","keywords":["Artikkeli E1","BIOSYKLI","ohjelmointi","opiskelijaty\u00f6"],"articleSection":["Circular Economy"],"inLanguage":"fi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/","url":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/","name":"Toiminnallisen internetsivuston luominen - LAB Focus","isPartOf":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#primaryimage"},"image":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#primaryimage"},"thumbnailUrl":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png","datePublished":"2020-12-01T11:34:14+00:00","breadcrumb":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#breadcrumb"},"inLanguage":"fi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/"]}]},{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#primaryimage","url":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png","contentUrl":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/12\/image-5.png","width":1024,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/blogit.lab.fi\/labfocus\/toiminnallisen-internetsivuston-luominen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogit.lab.fi\/labfocus\/"},{"@type":"ListItem","position":2,"name":"Toiminnallisen internetsivuston luominen"}]},{"@type":"WebSite","@id":"https:\/\/blogit.lab.fi\/labfocus\/#website","url":"https:\/\/blogit.lab.fi\/labfocus\/","name":"LAB Focus","description":"Focus Area blog | LAB University of Applied Sciences","publisher":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogit.lab.fi\/labfocus\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fi"},{"@type":"Organization","@id":"https:\/\/blogit.lab.fi\/labfocus\/#organization","name":"LAB Focus","url":"https:\/\/blogit.lab.fi\/labfocus\/","logo":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/blogit.lab.fi\/labfocus\/#\/schema\/logo\/image\/","url":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/04\/cropped-cropped-tunnus_blogi-01.png","contentUrl":"https:\/\/blogit.lab.fi\/labfocus\/wp-content\/uploads\/sites\/8\/2020\/04\/cropped-cropped-tunnus_blogi-01.png","width":1342,"height":288,"caption":"LAB Focus"},"image":{"@id":"https:\/\/blogit.lab.fi\/labfocus\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/LABfinland"]},{"@type":"Person","@id":"https:\/\/blogit.lab.fi\/labfocus\/#\/schema\/person\/ae72d5381475757dda2321cdf93675c3","name":"akivir","image":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/secure.gravatar.com\/avatar\/f1723ab3a77803eeac70b31affe3ec8f5f4db77779053fca565725aaee8a3bee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f1723ab3a77803eeac70b31affe3ec8f5f4db77779053fca565725aaee8a3bee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f1723ab3a77803eeac70b31affe3ec8f5f4db77779053fca565725aaee8a3bee?s=96&d=mm&r=g","caption":"akivir"},"url":"https:\/\/blogit.lab.fi\/labfocus\/author\/akivir\/"}]}},"_links":{"self":[{"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/posts\/2384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/comments?post=2384"}],"version-history":[{"count":1,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/posts\/2384\/revisions"}],"predecessor-version":[{"id":2387,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/posts\/2384\/revisions\/2387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/media\/2385"}],"wp:attachment":[{"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/media?parent=2384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/categories?post=2384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogit.lab.fi\/labfocus\/wp-json\/wp\/v2\/tags?post=2384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}