{"id":1471,"date":"2024-04-09T11:25:09","date_gmt":"2024-04-09T11:25:09","guid":{"rendered":"https:\/\/howtogeek.blog\/cs\/?p=1471"},"modified":"2024-04-09T11:25:09","modified_gmt":"2024-04-09T11:25:09","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-cs","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/cs\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-cs\/","title":{"rendered":"Jak p\u0159ev\u00e9st ru\u010dn\u011b kreslen\u00e1 rozvr\u017een\u00ed webov\u00fdch str\u00e1nek do HTML k\u00f3du pomoc\u00ed Sketch2Code od spole\u010dnosti Microsoft"},"content":{"rendered":"

P\u0159em\u00fd\u0161leli jste n\u011bkdy nad t\u00edm, jak skv\u011bl\u00e9 by bylo nakreslit n\u011bco na pap\u00edr a nechat to o\u017e\u00edt v re\u00e1ln\u00e9m sv\u011bt\u011b? No, to je pr\u00e1v\u011b n\u011bco, \u010deho Microsoft dos\u00e1hl s webovou aplikac\u00ed Skletch2Code poh\u00e1n\u011bnou um\u011blou inteligenc\u00ed, kter\u00e1 dok\u00e1\u017ee p\u0159ev\u00e9st ru\u010dn\u011b psan\u00e9 kresby z tabule na webov\u00e9 str\u00e1nky HTML jedin\u00fdm kliknut\u00edm.<\/p>\n

Sketch2Code dok\u00e1\u017ee p\u0159ev\u00e9st jak\u00e9koli ru\u010dn\u011b nakreslen\u00e9 rozvr\u017een\u00ed webov\u00e9 str\u00e1nky do HTML b\u011bhem pouh\u00fdch sekund. Tento n\u00e1stroj vyu\u017e\u00edv\u00e1 slu\u017ebu Computer Vision AI spole\u010dnosti Microsoft k detekci objekt\u016f HTML ve v\u00fdkresu a pot\u00e9 pomoc\u00ed rozpozn\u00e1v\u00e1n\u00ed textu extrahuje ru\u010dn\u011b psan\u00fd text ve v\u00fdkresu a kombinuje a vytv\u00e1\u0159\u00ed \u00faryvky HTML v\u0161ech prvk\u016f n\u00e1vrhu v obr\u00e1zku.<\/p>\n

D\u00edky tomu je pro webdesign\u00e9ry a v\u00fdvoj\u00e1\u0159e neuv\u011b\u0159iteln\u011b rychl\u00e9 vytv\u00e1\u0159et HTML prototypy webov\u00fdch str\u00e1nek v mnoha r\u016fzn\u00fdch stylech b\u011bhem n\u011bkolika sekund. Pokud v\u00e1s zaj\u00edm\u00e1, jak to funguje v backendu, ur\u010dit\u011b si p\u0159e\u010dt\u011bte technick\u00e9 podrobnosti o Sketch2Code na webu Microsoftu.<\/p>\n

N\u00ed\u017ee je stru\u010dn\u00fd n\u00e1vod, kter\u00fd v\u00e1m uk\u00e1\u017ee, jak jednoduch\u00e9 je pou\u017e\u00edt Sketch2Code k p\u0159evodu n\u00e1kres\u016f rozlo\u017een\u00ed webov\u00fdch str\u00e1nek do skute\u010dn\u00fdch HTML str\u00e1nek.<\/p>\n

Nejprve nakreslete rozvr\u017een\u00ed sv\u00e9ho webu na tabuli nebo b\u00edl\u00fd list. Pot\u00e9 jej vyfo\u0165te a ulo\u017ete do po\u010d\u00edta\u010de. Pot\u00e9 kliknut\u00edm na tla\u010d\u00edtko n\u00ed\u017ee otev\u0159ete webovou aplikaci Sketch2Code ve sv\u00e9m prohl\u00ed\u017ee\u010di.<\/p>\n

<\/figure>\n

Jakmile m\u00e1te web otev\u0159en\u00fd, klikn\u011bte na tla\u010d\u00edtko Nahr\u00e1t design<\/strong> a vyberte obr\u00e1zek rozlo\u017een\u00ed webu, kter\u00fd jste nakreslili na tabuli nebo b\u00edl\u00fd list.<\/p>\n

Vyberte a nahrajte sv\u016fj ru\u010dn\u011b kreslen\u00fd vzhled webu<\/figcaption><\/figure>\n

Po nahr\u00e1n\u00ed ru\u010dn\u011b nakreslen\u00e9ho n\u00e1vrhu webu se pohodln\u011b usa\u010fte a sledujte, jak Sketch2Code pou\u017e\u00edv\u00e1 AI automaticky generuj\u00edc\u00ed str\u00e1nku HTML na z\u00e1klad\u011b rozlo\u017een\u00ed v obr\u00e1zku, kter\u00fd jste nahr\u00e1li.<\/p>\n

Po dokon\u010den\u00ed procesu se v\u00e1m zobraz\u00ed n\u00e1hled \u010derstv\u011b vygenerovan\u00e9 str\u00e1nky HTML spolu s mo\u017enost\u00ed st\u00e1hnout si cel\u00fd k\u00f3d. Kliknut\u00edm na tla\u010d\u00edtko St\u00e1hnout sv\u016fj HTML k\u00f3d<\/strong> z\u00edsk\u00e1te soubor. html souboru va\u0161eho ru\u010dn\u011b nakreslen\u00e9ho rozvr\u017een\u00ed webu, abyste jej mohli otestovat a prohl\u00e9dnout si jej lok\u00e1ln\u011b ve webov\u00e9m prohl\u00ed\u017ee\u010di.<\/p>\n

Klikn\u011bte na tla\u010d\u00edtko \u201eSt\u00e1hnout sv\u016fj HTML k\u00f3d\u201c.<\/figcaption><\/figure>\n

A je to. Douf\u00e1me, \u017ee v\u00e1m Sketch2Code u\u0161et\u0159\u00ed \u010das p\u0159i vytv\u00e1\u0159en\u00ed prototypu rozvr\u017een\u00ed webov\u00e9 str\u00e1nky.<\/p>\n","protected":false},"excerpt":{"rendered":"

P\u0159em\u00fd\u0161leli jste n\u011bkdy nad t\u00edm, jak skv\u011bl\u00e9 by bylo nakreslit n\u011bco na pap\u00edr a nechat to o\u017e\u00edt v re\u00e1ln\u00e9m sv\u011bt\u011b? No, to je pr\u00e1v\u011b n\u011bco, \u010deho Microsoft dos\u00e1hl s webovou aplikac\u00ed Skletch2Code poh\u00e1n\u011bnou um\u011blou inteligenc\u00ed, kter\u00e1 dok\u00e1\u017ee p\u0159ev\u00e9st ru\u010dn\u011b psan\u00e9 kresby z tabule na webov\u00e9 str\u00e1nky HTML jedin\u00fdm kliknut\u00edm. Sketch2Code dok\u00e1\u017ee p\u0159ev\u00e9st jak\u00e9koli ru\u010dn\u011b nakreslen\u00e9 […]<\/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-1471","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts\/1471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/comments?post=1471"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts\/1471\/revisions"}],"predecessor-version":[{"id":1472,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/posts\/1471\/revisions\/1472"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/media?parent=1471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/categories?post=1471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/cs\/wp-json\/wp\/v2\/tags?post=1471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}