{"id":1517,"date":"2024-04-09T11:25:43","date_gmt":"2024-04-09T11:25:43","guid":{"rendered":"https:\/\/howtogeek.blog\/es\/?p=1517"},"modified":"2024-04-09T11:25:43","modified_gmt":"2024-04-09T11:25:43","slug":"how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-es","status":"publish","type":"post","link":"https:\/\/howtogeek.blog\/es\/how-to-convert-hand-drawn-website-layouts-into-html-code-using-sketch2code-by-microsoft-es\/","title":{"rendered":"C\u00f3mo convertir dise\u00f1os de sitios web dibujados a mano en c\u00f3digo HTML usando Sketch2Code de Microsoft"},"content":{"rendered":"<p>\u00bfAlguna vez te has preguntado qu\u00e9 tan genial ser\u00eda simplemente dibujar algo en un papel y dejar que cobre vida en el mundo real? Bueno, eso es algo que Microsoft ha logrado con la aplicaci\u00f3n web Skletch2Code, impulsada por IA, que puede convertir dibujos escritos a mano desde una pizarra a sitios web HTML con solo hacer clic en un bot\u00f3n.<\/p>\n<p>Sketch2Code puede convertir cualquier dise\u00f1o de un sitio web dibujado a mano en HTML en cuesti\u00f3n de segundos. La herramienta utiliza el servicio Computer Vision AI de Microsoft para detectar objetos HTML en un dibujo y luego utiliza el reconocimiento de texto para extraer el texto escrito a mano en el dibujo para combinar y crear fragmentos HTML de todos los elementos de dise\u00f1o de la imagen.<\/p>\n<p>Esto hace que sea incre\u00edblemente r\u00e1pido para los dise\u00f1adores y desarrolladores web crear prototipos HTML de un sitio web en muchos estilos diferentes en cuesti\u00f3n de segundos. Si est\u00e1 interesado en saber c\u00f3mo funciona esto en el backend, aseg\u00farese de leer los detalles t\u00e9cnicos sobre Sketch2Code en el sitio web de Microsoft.<\/p>\n<p>A continuaci\u00f3n se muestra un tutorial r\u00e1pido para mostrarle lo sencillo que es utilizar Sketch2Code para convertir dibujos de dise\u00f1o de sitios web en p\u00e1ginas HTML reales.<\/p>\n<p>En primer lugar, dibuje el dise\u00f1o de su sitio web en una pizarra o una hoja blanca. Luego, toma una fotograf\u00eda y gu\u00e1rdala en tu computadora. Despu\u00e9s de eso, haga clic en el bot\u00f3n a continuaci\u00f3n para abrir la aplicaci\u00f3n web Sketch2Code en su navegador.<\/p>\n<figure class=\"wp-block-image\"><\/figure>\n<p>Una vez que tenga el sitio web abierto, haga clic en el bot\u00f3n <strong>Cargar dise\u00f1o<\/strong> y seleccione la imagen del dise\u00f1o del sitio web que dibuj\u00f3 en una pizarra o una hoja blanca.<\/p>\n<figure class=\"wp-block-image\"><figcaption>Seleccione y cargue el dise\u00f1o de su sitio web dibujado a mano<\/figcaption><\/figure>\n<p>Despu\u00e9s de cargar el dise\u00f1o del sitio web dibujado a mano, si\u00e9ntese y observe c\u00f3mo Sketch2Code usa la IA para generar autom\u00e1ticamente una p\u00e1gina HTML basada en el dise\u00f1o de la imagen que carg\u00f3.<\/p>\n<p>Una vez finalizado el proceso, se le mostrar\u00e1 una vista previa de la p\u00e1gina HTML reci\u00e9n generada junto con la opci\u00f3n de descargar el c\u00f3digo completo. Haga clic en el bot\u00f3n <strong>Descargue su c\u00f3digo HTML<\/strong> para obtener el. html del dise\u00f1o de su sitio web dibujado a mano para que pueda probarlo y obtener una vista previa localmente en su navegador web.<\/p>\n<figure class=\"wp-block-image\"><figcaption>Haga clic en el bot\u00f3n \u201cDescarga tu c\u00f3digo HTML\u201d<\/figcaption><\/figure>\n<p>Eso es todo. Esperamos que Sketch2Code le ahorre tiempo al crear un prototipo de dise\u00f1o de p\u00e1gina web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfAlguna vez te has preguntado qu\u00e9 tan genial ser\u00eda simplemente dibujar algo en un papel y dejar que cobre vida en el mundo real? Bueno, eso es algo que Microsoft ha logrado con la aplicaci\u00f3n web Skletch2Code, impulsada por IA, que puede convertir dibujos escritos a mano desde una pizarra a sitios web HTML con [&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-1517","post","type-post","status-publish","format-standard","hentry","category-how-to","tag-microsoft","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/1517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/comments?post=1517"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/1517\/revisions"}],"predecessor-version":[{"id":1518,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/1517\/revisions\/1518"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/media?parent=1517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/categories?post=1517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/tags?post=1517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}