{"id":1421,"date":"2024-04-09T11:25:06","date_gmt":"2024-04-09T11:25:06","guid":{"rendered":"https:\/\/howtogeek.blog\/no\/?p=1421"},"modified":"2024-04-09T11:25:06","modified_gmt":"2024-04-09T11:25:06","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-no","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/no\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-no\/","title":{"rendered":"Hvordan konvertere h\u00e5ndtegnede nettstedsoppsett til HTML-kode ved hjelp av Sketch2Code av Microsoft"},"content":{"rendered":"

Har du noen gang lurt p\u00e5 hvor kult det ville v\u00e6re \u00e5 bare tegne noe p\u00e5 et papir og la det komme til live i den virkelige verden? Vel, det er bare noe Microsoft har oppn\u00e5dd med den AI-drevne Skletch2Code-nettappen som kan konvertere h\u00e5ndskrevne tegninger fra en tavle til HTML-nettsteder med et klikk p\u00e5 en knapp.<\/p>\n

Sketch2Code kan konvertere ethvert h\u00e5ndtegnet oppsett av et nettsted til HTML p\u00e5 f\u00e5 sekunder. Verkt\u00f8yet bruker Microsofts Computer Vision AI-tjeneste for \u00e5 oppdage HTML-objekter i en tegning, og bruker deretter tekstgjenkjenning for \u00e5 trekke ut den h\u00e5ndskrevne teksten i tegningen for \u00e5 kombinere og bygge HTML-snutter av alle designelementene i bildet.<\/p>\n

Dette gj\u00f8r det vanvittig raskt for webdesignere og utviklere \u00e5 bygge HTML-prototyper av et nettsted i mange forskjellige stiler i l\u00f8pet av sekunder. Hvis du er interessert i \u00e5 vite hvordan dette fungerer i backend, s\u00f8rg for \u00e5 lese de tekniske detaljene om Sketch2Code p\u00e5 Microsofts nettsted.<\/p>\n

Nedenfor er en rask veiledning for \u00e5 vise deg hvor enkelt det er \u00e5 bruke Sketch2Code til \u00e5 konvertere tegninger for nettstedlayout til ekte HTML-sider.<\/p>\n

F\u00f8rst tegner du et oppsett av nettstedet ditt p\u00e5 en tavle eller et hvitt ark. Ta deretter et bilde av det og lagre det p\u00e5 datamaskinen. Klikk deretter p\u00e5 knappen nedenfor for \u00e5 \u00e5pne Sketch2Code-nettappen i nettleseren din.<\/p>\n

<\/figure>\n

N\u00e5r du har \u00e5pnet nettstedet, klikker du p\u00e5 Last opp design-<\/strong> knappen og velger bildet av nettstedets layout som du tegnet p\u00e5 en tavle eller et hvitt ark.<\/p>\n

Velg og last opp ditt h\u00e5ndtegnede nettstedoppsett<\/figcaption><\/figure>\n

Etter \u00e5 ha lastet opp det h\u00e5ndtegnede nettstedsdesignet, len deg tilbake og se p\u00e5 at Sketch2Code bruker AI automatisk genererer en HTML-side basert p\u00e5 oppsettet i bildet du lastet opp.<\/p>\n

N\u00e5r prosessen er fullf\u00f8rt, vil du bli vist en forh\u00e5ndsvisning av den nygenererte HTML-siden sammen med muligheten til \u00e5 laste ned hele koden. Klikk p\u00e5 knappen Last ned HTML-koden<\/strong> for \u00e5 f\u00e5. html-fil av ditt h\u00e5ndtegnede nettstedoppsett slik at du kan teste og forh\u00e5ndsvise det lokalt i nettleseren din.<\/p>\n

Klikk p\u00e5 knappen “Last ned HTML-koden din”.<\/figcaption><\/figure>\n

Det er det. Vi h\u00e5per Sketch2Code sparer deg for tid med \u00e5 lage prototyping av en nettsidelayout.<\/p>\n","protected":false},"excerpt":{"rendered":"

Har du noen gang lurt p\u00e5 hvor kult det ville v\u00e6re \u00e5 bare tegne noe p\u00e5 et papir og la det komme til live i den virkelige verden? Vel, det er bare noe Microsoft har oppn\u00e5dd med den AI-drevne Skletch2Code-nettappen som kan konvertere h\u00e5ndskrevne tegninger fra en tavle til HTML-nettsteder med et klikk p\u00e5 en […]<\/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":[126,173],"class_list":["post-1421","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts\/1421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/comments?post=1421"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts\/1421\/revisions"}],"predecessor-version":[{"id":1422,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/posts\/1421\/revisions\/1422"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/media?parent=1421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/categories?post=1421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/no\/wp-json\/wp\/v2\/tags?post=1421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}