Sketch2Code: convierte el dibujo de una página web en código HTML

Sketch2Code: convierte el dibujo de una página web en código HTML

Sketch2Code es un curioso proyecto de Microsoft que trata de demostrarnos, una vez más, el potencial de la inteligencia artificial.

Lo cierto es que esta herramienta experimental va más allá de ser una curiosidad y su uso práctico es innegable.

Su misión es convertir cualquier dibujo de una página web realizado a mano en su correspondiente código HTML.


Evidentemente podemos descargar y utilizar este código HTML generado por Sketch2Code.

El código HTML que descargamos nos permite pasar de maquetar una página a desarrollarla en apenas segundos.

Por supuesto, será necesario revisar este código y realizar las oportunas correcciones y añadidos, aún así nos ahorrará bastante tiempo.

Este tipo de iniciativas nos sirven para comprender que la inteligencia artificial está cada vez más presente en todos los sectores.

También que su uso o aplicación puede ayudarnos a ser más productivos y ahorrar horas de trabajo.

¿Cómo utilizar Sketch2Code para convertir un boceto en HTML?

El uso de Sketch2Code es realmente sencillo, en la página del proyecto tenéis varios ejemplos que os recomiendo probar para comprenderlo mejor.


Básicamente estos son los pasos a seguir:

  • Dibuja a mano el diseño de tu página, la escaneas y la cargas en esta página.
  • Ahora esperas un momento, es el momento en que comienza a trabajar la inteligencia artificial para generar el código HTML.
  • Finalmente, solo te queda descargar el archivo HTML generado y revisar su código.

Tres simples pasos para convertir el boceto de una página web en un archivo HTML. Es genial.

Así es el flujo de trabajo de este proyecto de Microsoft

Para los interesados en conocer mejor como funciona este innovador proyecto, lo que no vemos, os explico su flujo de trabajo:

  1. Un modelo de visión personalizado y entrenado para reconocer objetos en patrones dibujados a mano se ocupa de detectar los elementos del diseño.
  2. Cada uno de los elementos detectados son pasados a través de un servicio de reconocimiento de texto para extraer el contenido escrito de forma manual.
  3. Ahora se pasa a la comprensión de la estructura. Un algoritmo es alimentado con la información de los objetos detectados y su ubicación, a partir de esta información genera una estructura subyacente.
  4. Por último, se genera un código HTML válido a partir del diseño y los elementos detectados.

Probar el generador de HTML a partir del dibujo de una página

Seguro que ya estás deseando probar lo que puede hacer Sketch2Code, visita la página del proyecto y compruébalo por ti mismo.

Mi conclusión final ya la esbocé al principio, la inteligencia artificial cada vez nos será más útil para realizar tareas de forma más cómoda y rápida.

Artículo relacionado | AutoDraw: nueva aplicación web de Google para dibujar perfectamente con ayuda de Inteligencia Artificial

Bloguero apasionado por las aplicaciones web, software, apps móviles, SEO, IA, redes sociales y tecnología en general.

Entradas relacionadas

ScreenshotBoost

ScreenshotBoost: editar capturas de pantalla con fondos dinámicos y animaciones

Las capturas de pantalla son una herramienta fundamental para compartir información visual en el mundo digital. Sin embargo, a veces pueden resultar un poco aburridas o poco…

Photo505

Photo505: un clásico para editar fotos que sigue vigente

Photo505 es un sitio web veterano en la red que, a pesar del paso del tiempo, sigue siendo una herramienta realmente útil para trabajar con imágenes y…

GorillaPDF

GorillaPDF: herramientas online para convertir a y desde PDF

Los archivos PDF son una herramienta indispensable para compartir y almacenar información. Sin embargo, a menudo nos encontramos con la necesidad de convertirlos a otros formatos o…

MuMu Player

MuMu Player: emulador gratuito de Android para Juegos en PC

¿Alguna vez has deseado jugar tus juegos móviles favoritos en una pantalla más grande y con mayor sensibilidad? MuMu Player es la solución perfecta. Este emulador de Android gratuito…

RASVEC

RASVEC: convierte tus imágenes a SVG de forma fácil y gratuita

Los gráficos vectoriales escalables (SVG) son cada vez más populares por su flexibilidad y calidad. Sin embargo, crearlos desde cero puede ser un proceso complejo que requiere…

Comprimir imágenes sin perder calidad

Comprimir imágenes sin perder calidad: Bulk Image Compressor

Si buscas una forma rápida y sencilla de comprimir imágenes por lotes sin perder calidad, Bulk Image Compressor puede ser la solución perfecta. Esta herramienta web, gratuita…