{"id":1521,"date":"2024-04-09T11:25:20","date_gmt":"2024-04-09T11:25:20","guid":{"rendered":"https:\/\/howtogeek.blog\/da\/?p=1521"},"modified":"2024-04-09T11:25:20","modified_gmt":"2024-04-09T11:25:20","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-da","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/da\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-da\/","title":{"rendered":"S\u00e5dan konverteres h\u00e5ndtegnede webstedslayouts til HTML-kode ved hj\u00e6lp af Sketch2Code af Microsoft"},"content":{"rendered":"

Har du nogensinde spekuleret p\u00e5, hvor fedt det ville v\u00e6re bare at tegne noget p\u00e5 et papir og lade det komme til live i den virkelige verden? N\u00e5, det er bare noget, Microsoft har opn\u00e5et med den AI-drevne Skletch2Code-webapp, som kan konvertere h\u00e5ndskrevne tegninger fra et whiteboard til HTML-websteder med et klik p\u00e5 en knap.<\/p>\n

Sketch2Code kan konvertere ethvert h\u00e5ndtegnet layout af en hjemmeside til HTML p\u00e5 f\u00e5 sekunder. V\u00e6rkt\u00f8jet bruger Microsofts Computer Vision AI-tjeneste til at detektere HTML-objekter i en tegning og bruger derefter tekstgenkendelse til at udtr\u00e6kke den h\u00e5ndskrevne tekst i tegningen for at kombinere og bygge HTML-uddrag af alle designelementerne i billedet.<\/p>\n

Dette g\u00f8r det sindssygt hurtigt for webdesignere og udviklere at bygge HTML-prototyper af en hjemmeside i mange forskellige stilarter i l\u00f8bet af f\u00e5 sekunder. Hvis du er interesseret i at vide, hvordan dette fungerer i backend, skal du s\u00f8rge for at l\u00e6se de tekniske detaljer om Sketch2Code p\u00e5 Microsofts hjemmeside.<\/p>\n

Nedenfor er en hurtig tutorial, der viser dig, hvor nemt det er at bruge Sketch2Code til at konvertere hjemmesidelayouttegninger til rigtige HTML-sider.<\/p>\n

F\u00f8rst skal du tegne et layout af din hjemmeside p\u00e5 en tavle eller et hvidt ark. Tag derefter et billede af det og gem det p\u00e5 din computer. Klik derefter p\u00e5 knappen nedenfor for at \u00e5bne Sketch2Code-webappen i din browser.<\/p>\n

<\/figure>\n

N\u00e5r du har \u00e5bnet hjemmesiden, skal du klikke p\u00e5 knappen Upload design<\/strong> og v\u00e6lge billedet af hjemmesidens layout, som du har tegnet p\u00e5 et whiteboard eller et hvidt ark.<\/p>\n

V\u00e6lg og upload dit h\u00e5ndtegnede hjemmesidelayout<\/figcaption><\/figure>\n

Efter at have uploadet det h\u00e5ndtegnede webstedsdesign, l\u00e6n dig tilbage og se Sketch2Code bruge AI automatisk generere en HTML-side baseret p\u00e5 layoutet i det billede, du uploadede.<\/p>\n

N\u00e5r processen er afsluttet, vil du blive vist en forh\u00e5ndsvisning fra den nygenererede HTML-side sammen med muligheden for at downloade den fulde kode. Klik p\u00e5 knappen Download din HTML-kode<\/strong> for at f\u00e5. html-fil af dit h\u00e5ndtegnede webstedslayout, s\u00e5 du kan teste og forh\u00e5ndsvise det lokalt i din webbrowser.<\/p>\n

Klik p\u00e5 knappen “Download din HTML-kode”.<\/figcaption><\/figure>\n

Det er det. Vi h\u00e5ber, at Sketch2Code sparer dig tid med at lave prototyper til et websidelayout.<\/p>\n","protected":false},"excerpt":{"rendered":"

Har du nogensinde spekuleret p\u00e5, hvor fedt det ville v\u00e6re bare at tegne noget p\u00e5 et papir og lade det komme til live i den virkelige verden? N\u00e5, det er bare noget, Microsoft har opn\u00e5et med den AI-drevne Skletch2Code-webapp, som kan konvertere h\u00e5ndskrevne tegninger fra et whiteboard til HTML-websteder med et klik p\u00e5 en knap. […]<\/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-1521","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/1521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/comments?post=1521"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/1521\/revisions"}],"predecessor-version":[{"id":1522,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/posts\/1521\/revisions\/1522"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/media?parent=1521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/categories?post=1521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/da\/wp-json\/wp\/v2\/tags?post=1521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}