Como gerar HMTL e CSS

Prof. Eduardo Ariel

Unindo dois universos em uma interface.

Um dos principais desafios para muitos designers e criativos que trabalham com mídia interativa, está em transformar protótipo em código. Assim, com o intuito de facilitar separarmos algumas ferramentas que poderão fazer isso.

Supernova

Figura: Página inicial da nova versão do Supernova - https://www.supernova.io

Abaixo segue uma palestra sobre o aplicativo, onde é possível compreender suas principais funções.

https://youtu.be/c4L_lBSEGTA

Vídeo - Palestra sobre o programa Supernova

O programa possui uma versão antiga, ainda em funcionamento, dedicada mais para mobile.

Figura: Página inicial da versão antiga do Supernova - https://legacy.supernova.io

Inspect by Invision

O Invision possui um aplicativo para criação e integração de código. Vale dar uma conferida, tendo em vista o sucesso da sua versão de prototipagem.

Figura: Homepage da ferramenta Inspect - https://www.invisionapp.com/feature/inspect/.

Uizard

Já imaginou uma ferramenta de prototipagem em que você desenha no papel e ela converte para elementos de tela. Seria ótimo se existisse?

Parece que os desenvolvedores da Uizard leram os nossos pensamentos. Fizeram um aplicativo que faz exatamente isso. Ademais, exporta o código da solução gerada.

Obs.: Dica enviada pelo Prof. Fabiano Ramos.

Figura: Site da ferramenta Uizard - https://uizard.io

Hadron

O programa Hadron utiliza o recurso de integração síncrona com programadores, mas permite que o designer elabore sua interface de forma independente. Ele gera um código automático, usando recursos What You See Is What You Get (WYSIWYG). Assim, tudo que é desenhado na tela terá um código correspondente, ainda que você não tenha escrito. Em suma, o software gera para o usuário toda programação necessária para o produto funcionar.

Figura: Site do aplicativo - https://hadron.app