{"id":1478,"date":"2024-04-09T11:25:29","date_gmt":"2024-04-09T11:25:29","guid":{"rendered":"https:\/\/howtogeek.blog\/pt\/?p=1478"},"modified":"2024-04-09T11:25:29","modified_gmt":"2024-04-09T11:25:29","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-pt","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/pt\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-pt\/","title":{"rendered":"Como converter layouts de sites desenhados \u00e0 m\u00e3o em c\u00f3digo HTML usando Sketch2Code da Microsoft"},"content":{"rendered":"

J\u00e1 imaginou como seria legal simplesmente desenhar algo em um papel e deix\u00e1-lo ganhar vida no mundo real? Bem, isso \u00e9 apenas algo que a Microsoft conseguiu com o aplicativo da web Skletch2Code com tecnologia de IA, que pode converter desenhos escritos \u00e0 m\u00e3o de um quadro branco em sites HTML com o clique de um bot\u00e3o.<\/p>\n

Sketch2Code pode converter qualquer layout desenhado \u00e0 m\u00e3o de um site em HTML em poucos segundos. A ferramenta usa o servi\u00e7o Computer Vision AI da Microsoft para detectar objetos HTML em um desenho e, em seguida, usa o reconhecimento de texto para extrair o texto manuscrito no desenho para combinar e construir trechos HTML de todos os elementos de design na imagem.<\/p>\n

Isso torna extremamente r\u00e1pido para web designers e desenvolvedores construir prot\u00f3tipos HTML de um site em muitos estilos diferentes em quest\u00e3o de segundos. Se voc\u00ea estiver interessado em saber como isso funciona no backend, leia os detalhes t\u00e9cnicos sobre Sketch2Code no site da Microsoft.<\/p>\n

Abaixo est\u00e1 um tutorial r\u00e1pido para mostrar como \u00e9 simples usar Sketch2Code para converter desenhos de layout de sites em p\u00e1ginas HTML reais.<\/p>\n

Primeiro, desenhe um layout do seu site em um quadro branco ou folha branca. Em seguida, tire uma foto e salve-a em seu computador. Depois disso, clique no bot\u00e3o abaixo para abrir o aplicativo web Sketch2Code em seu navegador.<\/p>\n

<\/figure>\n

Depois de abrir o site, clique no bot\u00e3o Carregar design<\/strong> e selecione a imagem do layout do site que voc\u00ea desenhou em um quadro branco ou folha branca.<\/p>\n

Selecione e carregue o layout do seu site desenhado \u00e0 m\u00e3o<\/figcaption><\/figure>\n

Depois de enviar o design do site desenhado \u00e0 m\u00e3o, relaxe e observe o Sketch2Code usar a IA para gerar automaticamente uma p\u00e1gina HTML com base no layout da imagem que voc\u00ea carregou.<\/p>\n

Assim que o processo for conclu\u00eddo, voc\u00ea ver\u00e1 uma pr\u00e9via da p\u00e1gina HTML rec\u00e9m-gerada junto com a op\u00e7\u00e3o de baixar o c\u00f3digo completo. Clique no bot\u00e3o Baixe seu c\u00f3digo HTML<\/strong> para obter o. html do layout do seu site desenhado \u00e0 m\u00e3o para que voc\u00ea possa test\u00e1-lo e visualiz\u00e1-lo localmente no seu navegador.<\/p>\n

Clique no bot\u00e3o \u201cBaixar seu c\u00f3digo HTML\u201d<\/figcaption><\/figure>\n

\u00c9 isso. Esperamos que Sketch2Code economize seu tempo na prototipagem de um layout de p\u00e1gina da web.<\/p>\n","protected":false},"excerpt":{"rendered":"

J\u00e1 imaginou como seria legal simplesmente desenhar algo em um papel e deix\u00e1-lo ganhar vida no mundo real? Bem, isso \u00e9 apenas algo que a Microsoft conseguiu com o aplicativo da web Skletch2Code com tecnologia de IA, que pode converter desenhos escritos \u00e0 m\u00e3o de um quadro branco em sites HTML com o clique de […]<\/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-1478","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts\/1478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/comments?post=1478"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts\/1478\/revisions"}],"predecessor-version":[{"id":1479,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/posts\/1478\/revisions\/1479"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/media?parent=1478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/categories?post=1478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/pt\/wp-json\/wp\/v2\/tags?post=1478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}