{"id":1532,"date":"2024-04-09T11:25:55","date_gmt":"2024-04-09T11:25:55","guid":{"rendered":"https:\/\/howtogeek.blog\/fi\/?p=1532"},"modified":"2024-04-09T11:25:55","modified_gmt":"2024-04-09T11:25:55","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-fi","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/fi\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-fi\/","title":{"rendered":"K\u00e4sin piirrettyjen verkkosivustojen asettelujen muuntaminen HTML-koodiksi Microsoftin Sketch2Coden avulla"},"content":{"rendered":"<p>Oletko koskaan miettinyt, kuinka siisti\u00e4 olisi vain piirt\u00e4\u00e4 jotain paperille ja antaa sen her\u00e4t\u00e4 henkiin todellisessa maailmassa? No, Microsoft on saavuttanut sen teko\u00e4lyll\u00e4 toimivalla Skletch2Code-verkkosovelluksella, joka voi muuntaa k\u00e4sin kirjoitetut piirrokset taululta HTML-sivustoiksi yhdell\u00e4 napin painalluksella.<\/p>\n<p>Sketch2Code voi muuntaa mink\u00e4 tahansa verkkosivuston k\u00e4sin piirretyn asettelun HTML-muotoon muutamassa sekunnissa. Ty\u00f6kalu k\u00e4ytt\u00e4\u00e4 Microsoftin Computer Vision AI -palvelua HTML-objektien havaitsemiseen piirustuksessa ja sitten k\u00e4ytt\u00e4\u00e4 tekstintunnistusta piirustuksen k\u00e4sinkirjoitetun tekstin yhdist\u00e4miseen ja rakentamiseen HTML-katkelmien avulla kaikista kuvan suunnitteluelementeist\u00e4.<\/p>\n<p>T\u00e4m\u00e4n ansiosta web-suunnittelijat ja -kehitt\u00e4j\u00e4t voivat rakentaa verkkosivuston HTML-prototyyppej\u00e4 useissa eri tyyleiss\u00e4 muutamassa sekunnissa j\u00e4rjett\u00f6m\u00e4n nopeasti. Jos olet kiinnostunut tiet\u00e4m\u00e4\u00e4n, kuinka t\u00e4m\u00e4 toimii taustaj\u00e4rjestelm\u00e4ss\u00e4, muista lukea Sketch2Coden tekniset tiedot Microsoftin verkkosivustolta.<\/p>\n<p>Alla on nopea opetusohjelma, joka n\u00e4ytt\u00e4\u00e4, kuinka helppoa on k\u00e4ytt\u00e4\u00e4 Sketch2Codea verkkosivustojen asettelupiirrosten muuntamiseen oikeiksi HTML-sivuiksi.<\/p>\n<p>Piirr\u00e4 ensin verkkosivustosi asettelu taululle tai valkoiselle arkille. Ota sitten kuva siit\u00e4 ja tallenna se tietokoneellesi. Napsauta sen j\u00e4lkeen alla olevaa painiketta avataksesi Sketch2Code-verkkosovelluksen selaimessasi.<\/p>\n<figure class=\"wp-block-image\"><\/figure>\n<p>Kun olet avannut verkkosivuston, napsauta <strong>Upload Design<\/strong> -painiketta ja valitse kuva verkkosivuston asettelusta, jonka piirsit taululle tai valkoiselle arkille.<\/p>\n<figure class=\"wp-block-image\"><figcaption>Valitse ja lataa k\u00e4sin piirretty verkkosivustosi asettelu<\/figcaption><\/figure>\n<p>Kun olet ladannut k\u00e4sin piirretyn verkkosivustosuunnittelun, istu alas ja katso, kuinka Sketch2Code luo teko\u00e4lyn automaattisesti HTML-sivun lataamasi kuvan asettelun perusteella.<\/p>\n<p>Kun prosessi on valmis, sinulle n\u00e4ytet\u00e4\u00e4n esikatselu tuoreelta HTML-sivulta sek\u00e4 mahdollisuus ladata koko koodi. Napsauta <strong>Lataa HTML-koodisi<\/strong> -painiketta saadaksesi sen. html-tiedosto k\u00e4sin piirretyst\u00e4 verkkosivustosi asettelusta, jotta voit testata ja esikatsella sit\u00e4 paikallisesti verkkoselaimessasi.<\/p>\n<figure class=\"wp-block-image\"><figcaption>Napsauta &#8220;Lataa HTML-koodisi&#8221; -painiketta<\/figcaption><\/figure>\n<p>Se siit\u00e4. Toivomme, ett\u00e4 Sketch2Code s\u00e4\u00e4st\u00e4\u00e4 aikaa verkkosivun asettelun prototyyppien luomisessa.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oletko koskaan miettinyt, kuinka siisti\u00e4 olisi vain piirt\u00e4\u00e4 jotain paperille ja antaa sen her\u00e4t\u00e4 henkiin todellisessa maailmassa? No, Microsoft on saavuttanut sen teko\u00e4lyll\u00e4 toimivalla Skletch2Code-verkkosovelluksella, joka voi muuntaa k\u00e4sin kirjoitetut piirrokset taululta HTML-sivustoiksi yhdell\u00e4 napin painalluksella. Sketch2Code voi muuntaa mink\u00e4 tahansa verkkosivuston k\u00e4sin piirretyn asettelun HTML-muotoon muutamassa sekunnissa. Ty\u00f6kalu k\u00e4ytt\u00e4\u00e4 Microsoftin Computer Vision AI -palvelua [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[130,176],"class_list":["post-1532","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/posts\/1532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/comments?post=1532"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/posts\/1532\/revisions"}],"predecessor-version":[{"id":1533,"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/posts\/1532\/revisions\/1533"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/media?parent=1532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/categories?post=1532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/fi\/wp-json\/wp\/v2\/tags?post=1532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}