• Ariel

Como gerar HMTL e CSS

Atualizado: Out 29


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.

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

3cdf02_d9a7e81fafbb4f8f87dc7c742279d12b~
Screenshot 2020-04-26 16.57.40.png