design de interfaces de
aplicações e serviços
para designers que realmente querem trabalhar com o design de interfaces
COMPONENTES
DESIGN SYSTEMS
o design de interfaces atual é todo baseado no design de componentes modulares que podem ser articulados nas aplicações para criar sua interface.
um componente pode ser apenas um elemento simples, como um botão, mas pode ser também um painel complexo que agregue diversos outros componentes dentro dele.
uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.
a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.
COMPONENTES
DESIGN SYSTEMS
o design de interfaces atual é todo baseado no design de componentes modulares que podem ser articulados nas aplicações para criar sua interface.
um componente pode ser apenas um elemento simples, como um botão, mas pode ser também um painel complexo que agregue diversos outros componentes dentro dele.
uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.
a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.
de forma muito resumida, podemos dizer que o design de interfaces hoje é feito do design de pequenos elementos, que vão se aglutinando para compor uma interface complexa, ou seja, um movimento projetual que inicia pelo elemento pontual e segue até o todo, garantindo consistência e coerência ao conjunto.
design de interfaces de
aplicações e serviços
para designers que realmente querem trabalhar com o design de interfaces
design de interfaces de
aplicações e serviços
para designers que realmente querem trabalhar com o design de interfaces
COMPONENTES
DESIGN SYSTEMS
o design de interfaces atual é todo baseado no design de componentes modulares que podem ser articulados nas aplicações para criar sua interface.
um componente pode ser apenas um elemento simples, como um botão, mas pode ser também um painel complexo que agregue diversos outros componentes dentro dele.
uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.
a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.
de forma muito resumida, podemos dizer que o design de interfaces hoje é feito do design de pequenos elementos, que vão se aglutinando para compor uma interface complexa, ou seja, um movimento projetual que inicia pelo elemento pontual e segue até o todo, garantindo consistência e coerência ao conjunto.
avanços e retrocessos na prática
do design de interfaces
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
DREAMWEAVER
FIREWORKS
misto de ferramenta gráfica vetorial e bitmap, capaz de recortar as composições visuais e construir um documento HTML, incluindo interações de mouseover e links para outros documentos.
editor visual de documentos HTML capaz de incluir e manipular os elementos básicos de layout (tabelas, formulários, textos, etc.) e gerar seu código em tempo real.
utilizado por designers e programadores para trabalharem juntos em projetos para a web.
COMPONENTES
DESIGN SYSTEMS
o design de interfaces atual é todo baseado no design de componentes modulares que podem ser articulados nas aplicações para criar sua interface.
um componente pode ser apenas um elemento simples, como um botão, mas pode ser também um painel complexo que agregue diversos outros componentes dentro dele.
uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.
a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.
de forma muito resumida, podemos dizer que o design de interfaces hoje é feito do design de pequenos elementos, que vão se aglutinando para compor uma interface complexa, ou seja, um movimento projetual que inicia pelo elemento pontual e segue até o todo, garantindo consistência e coerência ao conjunto.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
DREAMWEAVER
FIREWORKS
misto de ferramenta gráfica vetorial e bitmap, capaz de recortar as composições visuais e construir um documento HTML, incluindo interações de mouseover e links para outros documentos.
editor visual de documentos HTML capaz de incluir e manipular os elementos básicos de layout (tabelas, formulários, textos, etc.) e gerar seu código em tempo real.
utilizado por designers e programadores para trabalharem juntos em projetos para a web.
DESIGN SYSTEMS
uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.
a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.
de forma muito resumida, podemos dizer que o design de interfaces hoje é feito do design de pequenos elementos, que vão se aglutinando para compor uma interface complexa, ou seja, um movimento projetual que inicia pelo elemento pontual e segue até o todo, garantindo consistência e coerência ao conjunto.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
DREAMWEAVER
FIREWORKS
misto de ferramenta gráfica vetorial e bitmap, capaz de recortar as composições visuais e construir um documento HTML, incluindo interações de mouseover e links para outros documentos.
editor visual de documentos HTML capaz de incluir e manipular os elementos básicos de layout (tabelas, formulários, textos, etc.) e gerar seu código em tempo real.
utilizado por designers e programadores para trabalharem juntos em projetos para a web.
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
DREAMWEAVER
FIREWORKS
misto de ferramenta gráfica vetorial e bitmap, capaz de recortar as composições visuais e construir um documento HTML, incluindo interações de mouseover e links para outros documentos.
editor visual de documentos HTML capaz de incluir e manipular os elementos básicos de layout (tabelas, formulários, textos, etc.) e gerar seu código em tempo real.
utilizado por designers e programadores para trabalharem juntos em projetos para a web.
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.
continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.
continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.
continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
o design de interface não se resume ao trabalho de planejamento gráfico
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.
continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
o design de interface não se resume ao trabalho de planejamento gráfico
avanços e retrocessos na prática
do design de interfaces
2000
MACROMEDIA
2005
ADOBE
todos os produtos acabaram, cedo ou tarde, descontinuados.
interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.
2011
BOOTSTRAP
convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.
o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.
com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
2013
SKETCH + ZEPPELIN
websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.
desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.
tudo que era desenhado, precisava ser reconstruído com código.
FIGMA
criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.
a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.
o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.
2016
2017
REACT
a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.
ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.
a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)
todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
2022
CODUX
o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.
com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.
mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.
continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
o design de interface não se resume ao trabalho de planejamento gráfico
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
DISPONIBILIZAÇÃO
com a aplicação concluída, ela precisará ser disponibilizada ao público. Para isso, é necessário colocá-la em um servidor web.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
DISPONIBILIZAÇÃO
REACT
WEBSERVER
com a aplicação concluída, ela precisará ser disponibilizada ao público. Para isso, é necessário colocá-la em um servidor web.
SISTEMA DE VERSIONAMENTO
GITHUB
GITLAB
VERCEL
AWS
RENDER
NETLIFY
SURGE
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
DISPONIBILIZAÇÃO
REACT
WEBSERVER
com a aplicação concluída, ela precisará ser disponibilizada ao público. Para isso, é necessário colocá-la em um servidor web.
SISTEMA DE VERSIONAMENTO
GITHUB
GITLAB
VERCEL
AWS
RENDER
NETLIFY
SURGE
geramente se utiliza uma hospedagem que suba o código de produção automaticamente de um dos sistemas de versionamento utilizados.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
DISPONIBILIZAÇÃO
REACT
WEBSERVER
com a aplicação concluída, ela precisará ser disponibilizada ao público. Para isso, é necessário colocá-la em um servidor web.
SISTEMA DE VERSIONAMENTO
GITHUB
GITLAB
VERCEL
AWS
RENDER
NETLIFY
SURGE
geramente se utiliza uma hospedagem que suba o código de produção automaticamente de um dos sistemas de versionamento utilizados.
e o que exatamente
é o React?
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
DISPONIBILIZAÇÃO
REACT
WEBSERVER
com a aplicação concluída, ela precisará ser disponibilizada ao público. Para isso, é necessário colocá-la em um servidor web.
SISTEMA DE VERSIONAMENTO
GITHUB
GITLAB
VERCEL
AWS
RENDER
NETLIFY
SURGE
geramente se utiliza uma hospedagem que suba o código de produção automaticamente de um dos sistemas de versionamento utilizados.
e o que exatamente
é o React?
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
e o que exatamente
é o React?
esse javascript não está
um pouco diferente?
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
NPM
gerenciador de pacotes do node.
é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.
também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.
NEXT
VITE
WEBPACK
complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.
GIT
ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.
o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.
GITHUB
GITLAB
sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.
NODE + NPM
NEXT / VITE / WEBPACK / PARCEL / ETC.
GIT
GITHUB / GITLAB
REACT
React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.
Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.
REACT
SISTEMA DE VERSIONAMENTO
GITHUB
GITLAB
e o que exatamente
é o React?
esse javascript não está
um pouco diferente?
SIM!
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
REACT
SISTEMA DE VERSIONAMENTO
GITHUB
GITLAB
e o que exatamente
é o React?
esse javascript não está
um pouco diferente?
SIM!
MÓDULOS
os módulos permitem que funções em um documento javascript possam ser exportadas para serem utilizadas em outros documentos, através de um import.
JSX
a biblioteca JSX permite que as funções retornem ou recebam tags HTML sem a necessidade de estarem dentro de uma string.
isto facilita a construção do código html.
TYPESCRIPT
typescript é uma forma de javascript que permite a definição de tipos para as variáveis.
o framework permite que se utilize código typescript no lugar do javascript.
avanços e retrocessos na prática
do design de interfaces
MACROMEDIA
ADOBE
CODUX
ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
mas o que são
essas coisas?
NODE
interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.
é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.
node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).
e o que exatamente
é o React?
esse javascript não está
um pouco diferente?
SIM!
MÓDULOS
os módulos permitem que funções em um documento javascript possam ser exportadas para serem utilizadas em outros documentos, através de um import.
JSX
a biblioteca JSX permite que as funções retornem ou recebam tags HTML sem a necessidade de estarem dentro de uma string.
isto facilita a construção do código html.
TYPESCRIPT
typescript é uma forma de javascript que permite a definição de tipos para as variáveis.
o framework permite que se utilize código typescript no lugar do javascript.