Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 18 Horas 

 49 Min 

 11 Seg 

   Tempo restante da oferta: 18 49 11 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js  [ Machine Learning ](https://www.treinaweb.com.br/blog/categoria/machine-learning) 

# Desenvolva uma Inteligência Artificial que reconhece cores diretamente no navegador com TensorFlow.js

 Aprenda a trabalhar com Machine Learning diretamente no navegador usando o TensorFlow.js

 [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Inteligência-Artificial-Selecionando-Cores.png)  

Olá Web Developer! Hoje vou te mostrar como criar uma inteligência artificial que reconhece cores, e isso você pode usar como base para criar várias outras coisas. Vamos criar diretamente no navegador usando o TensorFlow.js, biblioteca para trabalhar com Machine Learning desenvolvida pelo Google. Ao final deste post você poderá testar o resultado aqui no corpo do post mesmo, selecionando uma cor e o seu computador dizendo qual o nome dela.

Se você ainda não está familiarizado com Machine Learning, recomendo que você leia primeiro o post onde mostro [O que é e como funciona Machine Learning?](https://www.treinaweb.com.br/blog/o-que-e-e-como-funciona-machine-learning/ "O que é e como funciona Machine Learning?"). Nele eu introduzo o que é Machine Learning e também mostro de forma simplificada como funciona o algoritmo KNN.

## Coleta de Dados

Para que o computador aprenda o nome das cores, precisamos ensiná-lo, assim como fazemos com um bebê. Então vamos em busca de algumas cores. O nome dessa etapa se chama `Coleta de Dados`.

Essa etapa você pode fazer do jeito que quiser, pois o que importa é ter uma boa quantidade de dados para ensinar o computador. Portanto, é melhor encontrar um lugar em que você possa conseguir muitos dados da forma mais automática possível. Aproveite a sua criatividade caso não encontre um banco de dados pronto. Também não importa o formato em que você vai deixar esses dados no momento.

Eu escolhi criar um objeto com o seguinte formato:

```javascript
const cores = [
	{
		"nome": "Vermelho",
		"valores": [
			[255,160,122],
			[250,128,114],
			[233,150,122]
		]
	},
	{
		"nome": "Verde",
		"valores": [
			[124,252,0],
			[127,255,0],
			[50,205,50]
		]
	}
	{
		"nome": "Azul",
		"valores": [
			[240,248,255],
			[230,230,250],
			[176,224,230]
		]
	}
	...
]

```

É um simples Array, onde cada objeto possui um campo `nome` que vai indicar o nome da cor e um Array `valores` que vai conter vários códigos daquela cor no formato `RGB`.

É claro que não vamos ficar escrevendo isso manualmente. Então vamos buscar um lugar para pegar essas cores. Eu encontrei no Google o site [Rapid Tables](https://www.rapidtables.com/web/color/red-color.html "Rapid Tables") com várias tabelas, incluindo códigos de cores.

![](https://dkrn4sk0rn31v.cloudfront.net/2020/02/21120406/Tabela-de-Cores-Vermelho.png)

Veja que a quarta coluna da tabela tem exatamente o que eu quero, os códigos no formato `RGB`. Se abrirmos o console do navegador poderemos executar um código para pegar essas cores. Eu executei o seguinte código:

```javascript
// pega todos os elementos da 4ª coluna
var colunas = document.querySelectorAll('tr td:nth-child(4)');
var cores = Array.from(colunas).map(coluna =>
	let cor = coluna.innerText; // pega o texto do elemento
	cor = cor.replace(/[rgb()]/gi, ''); // deixa apenas os números e vírgulas
	cor = cor.split(','); // separa cada número pela vírgula, retornando um Array de strings
	cor = cor.map(numero => parseInt(numero, 10)); // converte cada string em número
	return cor;
);
console.log(JSON.stringify(cores)); // imprime o Array como um texto

```

![](https://dkrn4sk0rn31v.cloudfront.net/2020/02/21141917/Tabela-de-Cores-Vermelho-Extra%C3%A7%C3%A3o-de-Dados-por-JavaScript.png)

Gosto de usar `var` ao executar um código no console porque `let` e `const` não podem ser redeclarados, então se eu quisesse reexecutar esse código eu teria que remover a declaração ou mudar o nome das variáveis.

Isso já vai me retornar um Array com cores no formato `RGB` do jeito que eu quero. Agora é só copiar do console, colar no código, e fazer o mesmo para verde, azul, etc. Eu fiz com várias cores, mas para simplificar a explicação vou fazer de conta que fiz apenas para vermelho, verde e azul.

[  ![Webpack - Empacotando aplicações](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/webpack.svg)   Curso Webpack - Empacotando aplicações Conhecer o curso ](https://www.treinaweb.com.br/curso/webpack-empacotando-aplicacoes)

## Pré-processamento de Dados

Assim que tivermos uma boa quantidade de dados, chegamos na fase de `Pré-Processamento`. Aqui nós arrumamos os nossos dados antes de ensinarmos a nossa máquina, então o modo como vamos arrumar vai depender de como nossos dados estão, qual o nosso objetivo, como vamos ensinar a máquina, qual biblioteca vamos utilizar, quais os tipos de dados que temos, etc.

É uma das etapas mais importantes e trabalhosas, havendo casos em que mais de 50% de tempo e ferramentas de um projeto são gastos nela. Um exemplo é tentar automatizar a remoção de dados que possam estar errados. No nosso caso, estamos analisando cores no formato `RGB`, em que cada valor varia de 0 a 255. Então se encontrássemos uma cor com algum valor -3 ou 450, poderíamos removê-la, pois é uma cor que não existe e atrapalharia o aprendizado da máquina.

Então vamos começar essa etapa e iniciar o pré-processamento de nossos dados. O que fazemos ao ensinar as cores para uma criança? Primeiro mostramos a cor e depois já damos a resposta, falando o nome da cor. E é isso que vamos fazer para o computador também.

A diferença é que ao invés de mostrar a imagem de uma cor, vamos passar o código `RGB` como `[255,160,122]`, e ao invés de falar `Vermelho`, vamos indicar um número também, pois computadores trabalham melhor com números.

No nosso exemplo, estamos levando em conta que estou ensinando para o computador sobre vermelho, verde e azul, três cores nessa ordem. Então vou indicar ao computador que vermelho se chama `[1,0,0]`, verde se chama `[0,1,0]` e azul `[0,0,1]`.

Quando perguntarmos por uma nova cor, o computador dirá algo como: `[0.93, 0.53, 0.15]`. Isso significaria que ele tem 93% de certeza de que é o primeiro elemento, 53% de que é o segundo e 15% de que é o terceiro. Como a porcentagem maior é do primeiro elemento, que estamos combinando que vai ser vermelho, ele vai dizer que a cor é vermelha.

Para o código das cores, que é o que vamos ensinar, vou criar um Array e chamar de `entradas`, e o nome das cores vou chamar de `respostas`.

Então vamos ler nossos dados e jogá-los todos nos Arrays `entradas` e `respostas`.

```javascript
const entradas = [],
    respostas = [];

cores.forEach((cor, indice) => {
	// criamos o código da cor
    const codigoCor = [0,0,0];
    codigoCor[indice] = 1;
    cor.valores.forEach(corRGB => {
		// jogamos no array cada codigo de cor
        entradas.push(corRGB);
		// e indicamos no outro array qual é a cor
        respostas.push(codigoCor);
    });
})

```

Teremos algo assim:

![](https://dkrn4sk0rn31v.cloudfront.net/2020/02/21151813/Tabela-de-Cores-Vermelho-Pr%C3%A9-Processamento-de-Dados-por-JavaScript.png)

Lembrando que estou mostrando menos dados para ficar mais simples de explicar.

Futuramente, para saber se estamos com algo realmente inteligente, precisaremos testar. Então nesse momento devemos separar uma parte dos nossos dados para usar para testes. Aqui no [JavaScript](https://www.treinaweb.com.br/blog/como-comecar-com-javascript/ "JavaScript") podemos usar o método `.splice()` para cortar uma parte do Array e jogar em um Array novo.

```javascript
// apenas um exemplo de como poderíamos fazer
const entradasTeste = entradas.splice(5),
	  respostasTeste = saidas.splice(5);
// como os nossos dados estão organizados,
// seria melhor embaralhar primeiro,
// senão corremos o risco de ensinar
// o computador o que é vermelho e verde
// e depois testar com azul.

```

Pegue pelo menos uns 20% dos dados para teste.

Até essa etapa você poderia fazer de várias maneiras com qualquer ferramenta ou linguagem de programação. A partir de agora vamos começar a utilizar a biblioteca [TensorFlow.js](https://www.tensorflow.org/js "TensorFlow.js").

## Treinamento

Para iniciar a fase de treinamento, vamos adicionar o `TensorFlow.js` ao nosso código.

```html

```

A primeira coisa a fazer é pegar nossos dados de entrada e resposta e tranformar em uma estrutura que o TensorFlow utiliza. Vou chamar de `dadosTreino` e `dadosResposta`.

```javascript
const dadosTreino = tf.tensor2d(entradas, [entradas.length, 3]);
const dadosResposta = tf.tensor2d(respostas, [respostas.length, 3]);

```

No primeiro nós passamos o Array `entradas` e depois como segundo parâmetro nós passamos um Array que indica o formato dos dados. O primeiro número indica a quantidade de dados, e o segundo, quantos elementos cada dado possui. Como nossas cores estão em um formato como `[255,160,122]`, indicamos o 3.

No segundo, `dadosResposta`, fizemos o mesmo. Na dimensão dos dados também passamos 3, pois aqui no exemplo estamos passando valores como `[1,0,0]`. Mas se você tivesse, por exemplo, 5 tipos de cores, seu formato estaria como `[1,0,0,0,0]`, então ao invés de 3 você passaria 5.

Agora vamos preparar o nosso modelo. Um modelo pode ser a representação matemática de um processamento do mundo real. Complicado? Não se preocupe, como esse é um post apenas para demonstrar de forma simples como funciona o Machine Learning, não vamos nos aprofundar tanto (na verdade até aqui eu já pulei centenas de coisas hahaha). Entenda apenas que modelo é o resultado do processo de treinamento.

```javascript
// criação do modelo
const modelo = tf.sequential();
// criação de uma camada de entrada
modelo.add(tf.layers.dense({
  inputShape: 3,
  units: 10,
  activation: 'sigmoid'
}))
// criação de uma camada de saída
modelo.add(
    tf.layers.dense({
      inputShape: 10,
      units: 3,
      activation: "softmax"
    })
  );
// compilação do modelo
modelo.compile({
	loss: "categoricalCrossentropy",
    optimizer: tf.train.adam()
})

```

O significado de cada parâmetro vai escapar do escopo do post, então vou deixar para explicar em um outro. Mas você pode ter uma ideia do que eles estão fazendo acessando o [TensorFlow Playground](https://playground.tensorflow.org/ "TensorFlow Playground"), onde você terá uma ideia visual do que o TensorFlow faz.

Agora que nosso modelo está pronto, precisamos treiná-lo com os nossos dados. Para isso usamos o método `fit()`. Primeiro passamos os dados e depois as respostas. O parâmetro `epochs` significa épocas. Em cada época todos os dados são processados. Então é como se estivéssemos dizendo para ele processar 20 vezes. Quanto mais épocas, mais demorado o treinamento, porém, mais eficiente vai ficar a sua Inteligência Artificial.

```javascript
async function treinarDados(){
	for(let i = 0; i < 15; i++){
  	    await modelo.fit(dadosTreino, dadosResposta, {epochs: 20});
    }
}

```

E vamos criar uma função que vai chamar esse treinamento.

```javascript
async function iniciar(){
	await treinarDados();
}

```

## Aplicação

Agora devíamos testar o nosso modelo. Mas para testar precisamos utilizar o modelo, então já vou mostrar como fazer isso para depois já termos tudo pronto para nossos testes.

Para utilizar o modelo executamos o método `predict()`, passando uma nova cor. A estrutura deve seguir a que utilizamos para criar os dados de entrada.

```javascript
//vamos criar uma função "prever"
//que vai receber uma cor no formato RGB
// ex: [35, 15, 153]
async function prever(corRGB){
	// convertemos a cor para o formato
	// que o tensorflow utiliza
	const cor = tf.tensor2d([corRGB], [1, 3])
	// executamos o predict()
	const predicao = modelo.predict(cor);
	// teremos um resultado como
	// [0.95, 0.15, .45], indicando
	// a probabilidade de ser
	// cada uma das cores.
	// Vamos pegar o índice do maior
	const dados = await predicao.data();
	const maiorValor = Math.max(...dados);
	const indice = dados.indexOf(maiorValor);
	// com o índice podemos pegar o nome da cor
	return cores[indice].nome;
}

```

Podemos utilizar esta função para saber o nome de uma cor que ainda não passamos ao computador, como:

```javascript
prever([15, 32, 153])
	.then(cor => console.log(`A cor é ${cor}`))

```

[  ![R - Introdução ao Machine Learning](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/r.svg)   Curso R - Introdução ao Machine Learning Conhecer o curso ](https://www.treinaweb.com.br/curso/r-introducao-ao-machine-learning)

## Testes

Como saber se o treinamento foi bom? Testando!

Nós separamos alguns dados para testes. Então agora basta usar a nossa função de prever, passando os dados de teste e ver o que ele responde. Como também temos as respostas dos dados de teste, basta compararmos. Assim podemos ter uma noção da porcentagem de acertos.

```javascript
async function testar(){
	// vamos transformar as respostas dos testes
	// que estão no formato [1, 0, 0] para
	// o nome das cores
	const respostas = respostasTeste.map(cor => {
		const maiorValor = Math.max(...cor);
		const indice = dados.indexOf(maiorValor);
		// com o índice podemos pegar o nome da cor
		return cores[indice].nome;
	});

	// Agora vamos executar nossa função "prever()"
	// para cada um dos dados de teste.
	const testes = await Promise.all(
		entradasTeste.map(prever)
	)
	// agora vamos comparar os testes
	// com as respostas
	let acertos = 0;
	testes.forEach((testeResposta, index) => {
		if(testeResposta === respostas[index]){
		   acertos++;
		}
	});
	// com o número de acertos podemos calcular a
	// porcentagem de acertos
	return (acertos/testes.length) * 100;
}

```

Essa foi uma demonstração simples. Na prática os testes vão muito além de simplesmente comparar e calcular a porcentagem de acertos, e o modo de avaliação varia de acordo com o objetivo da sua inteligência artificial. Por exemplo: tudo bem deixar a máquina errar 10% das recomendações de filmes para usuário de serviços como Netflix, mas provavelmente 10% de erro é muito para um carro autônomo, pois isso poderia tirar milhares de vidas.

## Salvando Modelos

Treinamos o nosso modelo, e você deve ter visto como pode demorar. Não faria sentido ficar treinando um modelo a cada momento que quisermos utilizá-lo. Isso seria o equivalente a você ter que aprender o alfabeto toda vez que quiser ler algo. Então, ao obter um modelo que os testes apresentem uma boa porcentagem de acertos, podemos salvar o modelo para utilizá-lo em outras aplicações.

Podemos salvar um modelo mesmo trabalhando no navegador.

```javascript
async function salvarModelo(){
	await modelo.save('localstorage://meu-modelo-cores');
}

```

`localstorage` indica onde vamos salvar. Podemos utilizar também `indexeddb`. Isso salvará o modelo no armazenamento do navegador do usuário. Também é possível usar o valor `downloads`, que vai iniciar um download de um arquivo com o modelo.

Após `//` temos o nome que queremos dar ao nosso modelo para salvar. Assim podemos salvar vários modelos.

Como estamos trabalhando com JavaScript, tudo o que escrevemos até agora também pode ser executado no `Node.js`. Se você quiser salvar o seu modelo, `localstorage`, `indexeddb` e `downloads` são valores aceitos apenas no navegador. No Node.js você pode utilizar o valor `file`. Assim ele vai salvar o modelo na sua máquina.

```javascript
// salvando no Node.js
async function salvarModelo(){
	await modelo.save('file:///nome/caminho/meu-modelo-cores');
}

```

## Carregando Modelos Pré-Treinados

Do mesmo jeito que podemos salvar o modelo que treinamos, também podemos carregar um modelo já treinado. Isso significa que não vamos precisar ter todo aquele trabalho que tivemos até aqui para pegar dados, fazer o pré-processamento, criação do modelo, treinamento, testes, etc.

No navegador fazemos da seguinte maneira:

```javascript
async function carregarModelo(){
	const modelo = await tf.loadLayersModel('localstorage://meu-modelo-cores');
}

```

E como já sabemos, podemos trocar o `localstorage` pelo `indexeddb`, dependendo onde salvamos.

Se o `JSON` gerado pelo modelo treinado estiver em um servidor, você pode carregá-lo assim:

```javascript
async function carregarModelo(){
	const modelo = await tf.loadLayersModel('https://meu-site.com.br/meu-modelo-cores.json');
}

```

E se você estiver no Node.js e quiser carregar um modelo que está salvo na sua máquina, pode fazer assim:

```javascript
async function carregarModelo(){
	const modelo = await tf.loadLayersModel('file://nome/caminho/meu-modelo-cores.json');
}

```

Já que tudo isso está substituindo nosso código de treinamento, podemos fazer um novo arquivo que vai utilizar um modelo já existente:

```javascript
let modelo;

async function carregarModelo(){
	return await tf.loadLayersModel('localstorage://meu-modelo-cores');
}

async function iniciar(){
	modelo = await carregarModelo;
}

async function prever(corRGB){
	const cor = tf.tensor2d([corRGB], [1, 3]);
	const predicao = modelo.predict(cor);
	const dados = await predicao.data();
	const maiorValor = Math.max(...dados);
	const indice = dados.indexOf(maiorValor);
	// ainda precisamos de um modo para converter
	// o numero do indice para o nome da cor
	return cores[indice].nome;
}

```

Veja que carregando um modelo pré-treinado podemos começar a utilizar o modelo imediatamente.

O `TensorFlow` nos disponibiliza vários modelos para utilizarmos que já foram treinados com milhões de dados. Você pode dar uma olhada na página de [Modelos](https://www.tensorflow.org/js/models "Modelos"), onde temos modelos para detectar objetos em imagens, classificar objetos presentes em uma imagem, poses de uma pessoa, etc.

Para utilizar, por exemplo, o `MobileNet`, adicione o modelo:

```html

```

```javascript
// carregamos o modelo
mobilenet.load().then(modelo => {
	// Classifica uma imagem
	// passando-a para o método "classify"
	modelo.classify(imagem).then(predicoes => {
    	console.log(predicoes);
	});
	// neste exemplo, "imagem" pode ser
	// um elemento HTML 
});

```

Porém, não é porque estamos carregando um modelo pré-treinado que teremos uma aplicação mais rápida. Muitos modelos podem pesar vários MegaBytes. O nosso exemplo carrega rápido por ser mais simples e possuir poucos dados.

Algo muito legal também é a possibilidade de fazer um modelo pré-treinado aprender mais.

Você pode, por exemplo, pegar um modelo de reconhecimento facial e adicionar fotos suas para ele aprender a reconhecer bem quem é você e diferenciá-lo das outras pessoas. Utilizar um modelo pré-treinado como ponto de partida para outra tarefa é chamado de `Transfer Learning` (Transferência de Aprendizado). Vamos abordar sobre ele em um outro post.

## Nosso Classificador de Cores

Utilizando tudo que foi mostrado acima criei uma pequena interface onde você pode escolher uma cor e ver o que ele dá de resposta.

Como o treino está sendo feito em tempo de execução, cada vez que você atualizar esta página o modelo será treinado de uma maneira diferente. Em alguns momentos ele pode dar resultados mais precisos e em outros ele pode dar resultados menos precisos. Isso também é causado pelo treinamento utilizar poucos dados.

E como foi dito no post que apresentei no início deste artigo sobre como funciona o `Machine Learning`, veja que não precisamos programar nenhuma lógica, não escrevemos `if` para determinar uma decisão. A lógica é criada pelo próprio computador durante seu processo de aprendizado, e a cada treinamento ele cria algo diferente. Nós “apenas” cuidamos dos dados que serão utilizados para ensinar o computador, definimos alguns parâmetros que o computador deve seguir para aprender e depois testamos. Assim podemos criar sistemas que a programação seria muito complexa para criarmos, como é o caso de reconhecimento facial ou carros autônomos.

[  ![Desenvolvedor Front-end Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg)   Formação Desenvolvedor Front-end Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-senior)

- [ #machine learning ](https://www.treinaweb.com.br/blog/tag/machine-learning)
- [ #inteligência artificial ](https://www.treinaweb.com.br/blog/tag/inteligencia-artificial)
- [ #ciência de dados ](https://www.treinaweb.com.br/blog/tag/ciencia-de-dados)
- [ #tensorflow ](https://www.treinaweb.com.br/blog/tag/tensorflow)
- [ #deep learning ](https://www.treinaweb.com.br/blog/tag/deep-learning)
- [ #classificação ](https://www.treinaweb.com.br/blog/tag/classificacao)
- [ #redes neurais ](https://www.treinaweb.com.br/blog/tag/redes-neurais)
- [ #Exemplo de Tensorflow ](https://www.treinaweb.com.br/blog/tag/exemplo-de-tensorflow)

Autor

 ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm)

## Akira Hanashiro

 Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. 

 [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     9 anos atrás

    ##  [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) 

     Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/12/capa-metas-2025-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     2 anos atrás

    ##  [ Como traçar metas eficientes para 2025 ](https://www.treinaweb.com.br/blog/como-tracar-metas-eficientes-para-2025) 

     Prepare-se para 2025! Veja como traçar metas de carreira eficientes em TI para alcançar seus objetivos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/14130753/01-400x280.png)  [ Machine Learning ](https://www.treinaweb.com.br/blog/categoria/machine-learning) 

     8 anos atrás

    ##  [ O que é e como funciona Machine Learning? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-funciona-machine-learning) 

     Conheça o que é e como funciona Machine Learning, uma das grandes tendências do mundo da tecnologia.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/06183243/capa-cargos-TI-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     8 anos atrás

    ##  [ Você sabe a diferença entre um engenheiro e um arquiteto de software? ](https://www.treinaweb.com.br/blog/voce-sabe-a-diferenca-entre-um-engenheiro-e-um-arquiteto-de-software) 

     Confira neste artigo as diferenças de alguns cargos da área de TI.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/09185014/adzuna-marylene-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     9 anos atrás

    ##  [ Vagas mais procuradas em TI no Brasil ](https://www.treinaweb.com.br/blog/vagas-mais-procuradas-em-ti-no-brasil) 

     Os profissionais de Tecnologia da Informação estão no topo da lista dos mais requisitados pelas empresas. Veja as vagas de TI mais procuradas aqui no Brasil.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-instalar-o-csharp-e-nosso-primeiro-exemplo-400x280.png)  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 

     5 anos atrás

    ##  [ Como instalar o C# e nosso primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-csharp-e-nosso-primeiro-exemplo) 

     Neste artigo veremos como instalar o C# nos sistemas Windows, Linux e MacOS e também veremos como escrever nosso primeiro programa.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/MUDANCA-CARREIRA-TI-1-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     6 anos atrás

    ##  [ Por que investir em uma carreira de tecnologia? ](https://www.treinaweb.com.br/blog/por-que-investir-em-uma-carreira-de-tecnologia) 

     Para você que está pensando investir em uma carreira de tecnologia, porém ainda tem algumas dúvidas, vale a pena dar uma conferida neste artigo!

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-instalar-o-csharp-e-nosso-primeiro-exemplo-400x280.png)  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 

     4 anos atrás

    ##  [ Guia da linguagem C# ](https://www.treinaweb.com.br/blog/guia-da-linguagem-csharp) 

     Nesse guia de C# você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação C#. Acesse agora mesmo!

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07093212/PYTHON-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     7 anos atrás

    ##  [ Afinal, por que devo aprender Python para 2020? ](https://www.treinaweb.com.br/blog/afinal-por-que-devo-aprender-python-para-2020) 

     Veja neste artigo os motivos para aprender Python neste ano de 2020.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/linguagens-paradigmas-400x280.jpg)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     10 anos atrás

    ##  [ Linguagens e paradigmas de programação ](https://www.treinaweb.com.br/blog/linguagens-e-paradigmas-de-programacao) 

     Saiba um pouco mais sobre as linguagens de programação e seus principais paradigmas.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/07093212/PYTHON-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     7 anos atrás

    ##  [ O que é Python? ](https://www.treinaweb.com.br/blog/o-que-e-python) 

     Veja neste artigo o que é Python e suas principais características.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/POWER-SKILLS-400x280.png)  [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 

     4 anos atrás

    ##  [ Power skills: principais habilidades que você deve desenvolver ](https://www.treinaweb.com.br/blog/power-skills-principais-habilidades-que-voce-deve-desenvolver) 

     Além da importância no mercado, este termo adquiriu mais habilidades e um novo nome: power skills, que é o que abordaremos neste artigo.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **18h 49min 11s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58