Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=7ca4c79a-cfaf-4c29-924d-15c4c53994c7

FRIKADAS: Sketch2Code convierte tus bocetos a mano en interfaces HTML válidas y funcionales

El proceso de diseño de interfaces de usuario suele empezar con el dibujo de bocetos para tratar de encajar todas las piezas de la interfaz. Estos bocetos se pueden llevar a cabo con algún software especializado (es la mejor manera) pero también es cierto que, en muchas ocasiones, acabamos haciéndolos en un folio o incluso en una servilleta de papel, según en donde nos surja la inspiración. De ese boceto inicial a tener una interfaz HTML + CSS que represente lo que hemos dibujado, normalmente hay un proceso más o menos largo que implica convertir el diseño inicial a HTML, colocar todos los controles, hacerlo "responsive" y dotarlo de una funcionalidad mínima como por ejemplo validaciones, sobre todo si son formularios.

Desde luego, sería mucho más cómodo poder trabajar todos los involucrados (diseñadores, desarrolladores e incluso clientes) en un diseño inicial, afinar el diseño en un papel y obtener los cambios en HTML + CSS + JavaScript el navegador en tiempo real, listos para ser utilizados. Esto es precisamente lo que pretende conseguir el proyecto del laboratorio de Inteligencia Artificial de Microsoft Research con su proyecto Sketch2Code.

Esta herramienta Web permite proporcionar un diseño previo hecho a mano en un papel y convertirlo en una interfaz Web válida y funcional:

Esta animación muestra el funcionamiento resumido de Sketch2Code

El proceso es el siguiente:

  • Digitalizas la imagen y la subes al sitio web de la herramienta.
  • Un modelo de Inteligencia Artificial entrenado para la tarea analiza visualmente el dibujo y trata de identificar los diferentes controles HTML que hay en el boceto.
  • Otro modelo especializado en reconocimiento de escritura, lee los textos de los controles, incluyendo etiquetas, cuadros de texto, etc...
  • Un algoritmo de maquetación genera una rejilla apropiada para encajar todos los controles en una disposición lo más parecida al boceto.
  • A partir de la información generada en los pasos anteriores se genera código HTML para obtener la página final.

Esquema del proceso seguido para generar la UI a partir del boceto

Para realizar su trabajo, el producto utiliza varios componentes estándar de Microsoft (el servicio de visión artificial de Azure, funciones de Azure, sitios web de Azure y almacenamiento Blob de Azure) combinados con un algoritmo de visión artificial personalizado para la tarea en cuestión.

Se trata de un experimento interesante que muestra toda la potencia de la inteligencia artificial y los procesos en la nube para crear aplicaciones que hace tan solo unos años serían inviables para una sola persona o un equipo pequeño. Y además puede resultarte muy útil.

Desde la página del proyecto Sketch2Code puedes utilizarlo y también puedes acceder al código fuente completo en GitHub en el que encontrarás no solo el código y la solución de Visual Studio, sino también explicaciones sobre la arquitectura, el proceso seguido, etc. por lo que puede ser muy interesante también para aprender.

campusMVP campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP
Archivado en: Herramientas

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.