DEV Community: Douglas Toledo

DeepSeek R1 vs o3-mini for Developers: Which is the Best?

Douglas Toledo — Fri, 07 Feb 2025 16:11:46 +0000

Hello, everyone!

Recently, OpenAI launched its new model, the o3-mini. With so many options emerging, the big question for every developer is: Which model should I use?

To answer this question, I spent the last few hours testing the o3-mini and the DeepSeek R1 on common tasks that we developers perform daily. These tasks are:

Building a program from scratch;
Adding a feature to existing code;
Refactoring code and generating tests.

In this article, I will share my recommendations and insights. My goal is for all of us to become better developers by leveraging AI to our advantage.

Performance, Price, and Context Window

Before diving into practical tests, it is essential to understand the specifications of each model, as they are crucial in determining which one aligns best with your project's needs.

1. Performance

o3-mini and DeepSeek R1 lead in the SWE Bench (a test that evaluates the ability to solve GitHub issues), with scores above 49.
Claude 3.5 Sonnet initially showed good scores, but as the tests below revealed, it demonstrated significant limitations in executing complex tasks.

2. Cost per Million Tokens

DeepSeek R1: input: $0.55 and output: $2.19 (more economical),
o3-mini: input: $1.10 and output: $4.40.
Claude 3.5 Sonnet: input: $3.00 and output: $15.00.

3. Context Window

o3-mini and Claude 3.5: Up to 200k tokens (better for larger and more complex requests).
DeepSeek R1: Up to 128k tokens.

Practical Test 1: Building a Project from Scratch

Task: Create an interface to chat with local LLMs via Ollama, with chat functionalities, conversation history, and model selection.

Results:

Model	Files Generated	Functional Features	Observations
o3-mini using Cursor	3 (HTML, CSS, and JS separated)	All	Code organized, but UI and styling very basic
DeepSeek R1 on the Web	1 (HTML, CSS, and JS condensed)	Chat and Model Selection	No Conversation History, UI and styling were better
DeepSeek R1 using Cursor	0	-	Failed to create multiple files, many manual adjustments
Claude 3.5 using Cursor	0	-	Completely failed

Winner: o3-mini, for its consistency and ability to generate complex projects in a single request.

Practical Test 2: Adding a Feature to Existing Code

Task: Integrate a user interface (UI) into an existing CLI to interact with AI agents.

Results:

o3-mini using Cursor:
- Generated new files and added the feature after more than 20 iterations.
- Had greater difficulty understanding UI state management, requiring prompt adjustments and manual fixes after the generated result.
DeepSeek R1 using Cursor:
- Generated new files and added the feature in just 9 iterations, with cleaner and more organized code than o3-mini.
- Needed guidance to adjust some integrations, but was faster than o3-mini in understanding the requirements.

Winner: DeepSeek R1, although o3-mini is more "autonomous," it struggled significantly in understanding key functionalities for integration. In contrast, while DeepSeek R1 required more "supervision," it better understood the needs and delivered the new feature quickly.

Practical Test 3: Refactoring Code and Generating Tests

Task: Refactor functions in a React/TypeScript web application and add unit tests.

Results:

o3-mini using Cursor:
- Refactored the code, followed best practices, and generated functional tests (with minor adjustments needed).
DeepSeek R1 using Cursor:
- Introduced critical bugs by removing essential functions.
- Generated valid tests but failed in refactoring.

Winner: o3-mini, for its precision and lower risk of breaking existing code.

Final Recommendations

For New Projects: Use o3-mini in Cursor. Its ability to generate structured code in a single pass is unmatched.
For Complex Features: Combine o3-mini (for architecture) with DeepSeek R1 (for specific snippets).
For Tight Budgets: DeepSeek R1 is the most economical choice but requires more attention and supervision during development.

What About Claude 3.5?

With a cost 7x higher and inferior performance already in the first practical test, Claude 3.5 is not a viable option for daily development. I recommend focusing on o3-mini and DeepSeek R1, which offer a better balance between cost and performance.

How to Use Both Models Together

Planning Phase: Use o3-mini to outline the overall project structure. Its ability to handle large context windows allows for comprehensive planning.
Optimization and Final Adjustments: After structuring the project, use DeepSeek R1 with continuous "supervision" to fine-tune specific functions, improve code efficiency, and reduce costs in specific tasks.

Final Considerations

The integration of AI models like o3-mini and DeepSeek R1 into the development workflow can completely transform the way we create and maintain projects.

While o3-mini stands out for its consistency and ability to handle complex tasks, DeepSeek R1 offers an economical solution for fine-tuning and specific tasks.

So, which model will you test first? 👨‍💻

Did you like it? Share your experiences in the comments! 🚀

DeepSeek R1 vs o3-mini para Desenvolvedores: Qual é o melhor?

Douglas Toledo — Fri, 07 Feb 2025 16:07:16 +0000

Olá, pessoal!

Recentemente a OpenAI lançou o seu novo modelo, o o3-mini. Com tantas opções surgindo, a grande pergunta de todo desenvolvedor é: Qual modelo devo usar?

Para responder a essa dúvida, passei as últimas horas testando
o o3-mini e o DeepSeek R1 em tarefas comuns que nós, desenvolvedores, realizamos diariamente. São elas:

Construir um programa do Zero;
Adicionar um recurso a um código existente;
Refatorar código e gerar testes.

Neste artigo, vou compartilhar minhas recomendações e insights. Meu objetivo é que todos nós possamos nos tornar melhores desenvolvedores, utilizando a IA a nosso favor.

Performance, Preço e Janela de Contexto

Antes de mergulhar nos testes práticos, é fundamental entender as especificações de cada modelo, elas são cruciais para determinar qual se alinha melhor às necessidades do seu projeto.

1. Desempenho

o3-mini e DeepSeek R1 lideram no SWE Bench (teste que avalia a capacidade de resolver issues do GitHub), com pontuações acima de 49.
Claude 3.5 Sonnet inicialmente mostrou boas pontuações, mas conforme os testes abaixo, demonstrou limitações significativas na execução de tarefas complexas.

2. Custo por Milhão de Tokens

DeepSeek R1: input: $ 0,55 e output: $ 2,19 (mais econômico),
o3-mini: input: $ 1,10 e output: $ 4,40.
Claude 3.5 Sonnet: input: $ 3,00 e output: $ 15,00.

3. Janela de Contexto

o3-mini e Claude 3.5: Até 200k tokens (melhor para requisições maiores e mais complexas).
DeepSeek R1: Até 128k tokens.

Teste Prático 1: Construir um Projeto do Zero

Tarefa: Criar uma interface para conversar com LLM locais via Ollama, com funcionalidades de chat, histórico de conversas e seleção de modelos.

Resultados:

Modelo	Arquivos Gerados	Funcionalidades Funcionais	Observações
o3-mini usando Cursor	3 (HTML, CSS e JS separados)	Todas	Código organizado, mas UI e estilização muito básicos
DeepSeek R1 na Web	1 (HTML, CSS e JS condensados)	Chat e Escolha de modelos	Sem Histórico de conversas, a UI e estilização estavam melhores
DeepSeek R1 usando Cursor	0	-	Falhou ao criar múltiplos arquivos, muitos ajustes manuais
Claude 3.5 usando Cursor	0	-	Falhou completamente

Vencedor: o3-mini, pela consistência e capacidade de gerar projetos complexos em uma única requisição.

Teste Prático 2: Adicionar um Recurso a um Código Existente

Tarefa: Integrar uma interface de usuário (UI) a uma CLI existente para interagir com agentes de IA.

Resultados:

o3-mini usando Cursor:
- Gerou os novos arquivos e adicionou o recurso após mais de 20 iterações.
- Teve maiores dificuldades para entender o gerenciamento de estados da UI, precisando de ajustes nos prompts e correções manuais após o resultado gerado.
DeepSeek R1 usando Cursor:
- Gerou os novos arquivos e adicionou o recurso em apenas 9 iterações, com código mais limpo e organizado do que o o3-mini.
- Precisou de orientação para ajustar algumas integrações, mas foi mais rápido do que o o3-mini para entender as necessidades.

Vencedor: DeepSeek R1, embora o o3-mini seja mais "autônomo", ele apresentou grandes dificuldades em entender as funcionalidades chave para realizar a integração. Em contraste, embora o DeepSeek R1 tenha exigido mais "supervisão", ele compreendeu melhor as necessidades e entregou o novo recurso rapidamente.

Teste Prático 3: Refatorar Código e Gerar Testes

Tarefa: Refatorar funções em uma aplicação web feito com React/TypeScript e adicionar testes unitários.

Resultados:

o3-mini usando Cursor:
- Refatorou o código, seguiu boas práticas e gerou testes funcionais (com pequenos ajustes necessários).
DeepSeek R1 usando Cursor:
- Introduziu bugs críticos ao remover funções essenciais.
- Gerou testes válidos, mas falhou na refatoração.

Vencedor: o3-mini, pela precisão e menor risco de quebrar o código existente.

Recomendações Finais

Para Projetos Novos: Use o3-mini no Cursor. Sua capacidade de gerar código estruturado em uma única passagem é imbatível.
Para Features Complexas: Combine o3-mini (para arquitetura) com DeepSeek R1 (para snippets específicos).
Para Orçamentos Apertados: DeepSeek R1 é a escolha mais econômica, mas exige mais atenção e supervisão durante o desenvolvimento.

E o Claude 3.5?

Com um custo 7x maior e desempenho inferior já no primeiro teste prático, o Claude 3.5 não se mostra uma opção viável para desenvolvimento diário. Recomendo focar no o3-mini e no DeepSeek R1, que oferecem um equilíbrio melhor entre custo e desempenho.

Como Usar os Dois Modelos Juntos

Fase de Planejamento: Utilize o3-mini para esboçar a estrutura geral do projeto. Sua capacidade de lidar com grandes janelas de contexto permite planejar de forma abrangente.
Otimização e Ajustes Finais: Após estruturar o projeto, utilize DeepSeek R1 com "supervisão" contínua para afinar funções específicas, melhorar a eficiência do código e reduzir custos em tarefas pontuais.

Considerações Finais

A integração de modelos de IA como o3-mini e DeepSeek R1 no fluxo de trabalho de desenvolvimento pode transformar completamente a maneira como criamos e mantemos projetos.

Enquanto o o3-mini se destaca pela consistência e capacidade de lidar com tarefas complexas, o DeepSeek R1 oferece uma solução econômica para ajustes finos e tarefas específicas.

E aí, qual modelo você vai testar primeiro? 👨‍💻
Gostou? Compartilhe suas experiências nos comentários! 🚀

n8n: The Automation Revolution in the Business World - 6 Examples

Douglas Toledo — Fri, 07 Feb 2025 00:32:05 +0000

The Automation Landscape

According to a McKinsey study, by 2030 about 70% of activities for which people are paid could be automated using technologies. In a world where operational efficiency is crucial, automation has moved from being a differential to becoming a competitive necessity.

Depending on the activity, an AI-implemented chatbot can outperform a team, converting more sales than the best human salesperson, for example. This is just one example of the transformative potential of intelligent automation in the business environment.

What is n8n?

n8n (pronounced "n-eight-n") is a fair-code workflow automation platform that allows you to connect different systems and automate complex processes through an intuitive visual interface. Unlike other tools on the market, n8n offers:

Self-hosting capability
More than 200 native integrations
Node-based visual interface
Flexibility for customizations via code (JavaScript/Python)
More affordable prices compared to competitors

Advantages of Self-hosting

Total control over sensitive data
Lower latency in operations
Reduced costs at scale
Compliance with data regulations

6 Practical Applications of n8n

1. Intelligent Chatbots

According to Servion Global Solutions, by 2025, 95% of customer interactions will be mediated by AI. n8n allows the creation of sophisticated chatbots that:

Integrate natively with major messaging platforms
Process natural language
Maintain conversation context
Scale automatically

Detailed Flow:

Webhook receives user's message
System checks the source and type of message
Processes keywords and context
Executes specific business logic
Returns personalized response

2. AI Agents

With the integration of the LangChain framework, n8n agents offer:

Advanced natural language processing
Contextual memory for more natural conversations
Integration with multiple AI models (OpenAI, Google, Meta)
Customizable knowledge base

Advantages over Traditional Chatbots:

Superior contextual understanding
More natural and accurate responses
Continuous learning capability
Higher resolution rate on first contact

3. Web Scraping
In a market where data is the new oil, automated web scraping offers:

Continuous price monitoring
Competitive analysis
Lead collection
Automatic catalog updating

Implementation Process:

Data source definition
Selector configuration
Collection scheduling
Processing and cleaning
Structured storage

4. Workload Units Optimization in Bubble

It is possible to create automations and integrations in n8n that help improve operational efficiency in platforms like Bubble. Some examples:

Efficiently process data before sending it to Bubble
Automate data updates and process execution outside of Bubble, reducing the need for WUs in Bubble

These strategies can help achieve greater stability, reduce operational costs, and improve overall performance, but the exact reduction in WUs will depend on how you configure and optimize your automations. Case studies show reductions of up to 95% in resource consumption:

From 10 WU to 0.5 WU in complex processing
Greater stability during demand peaks
Reduced operational costs
Better overall performance

5. Database Integration

n8n supports virtually all major databases:

SQL: PostgreSQL, MySQL, SQL Server
NoSQL: MongoDB, CouchDB
Cloud Services: AWS, Google Cloud
Low-code: Airtable, NocoDB

6. Facilitating External Integrations

Significant reduction in development time:

From weeks to hours in complex integrations
Elimination of boilerplate code
Simplified maintenance
Greater reliability

Business Impact

According to a Deloitte study, companies that implement intelligent automation report:

40% reduction in operational costs
35% increase in productivity
60% improvement in customer satisfaction
200% average ROI in 12 months

The Future of Automation

The trend is that automations will become increasingly sophisticated and accessible. n8n positions itself as a fundamental tool in this transformation, offering:

Democratization of automation
Reduction of technical complexity
Business scalability
Integration with emerging technologies

Final Considerations

n8n is not just an automation tool, but a catalyst for digital transformation. In a world where operational efficiency is crucial, automating processes is no longer optional. Companies that adopt these technologies today will be better positioned for the challenges of tomorrow.

The combination of ease of use, flexibility, and processing power makes n8n a strategic choice for companies of all sizes looking to modernize their operations and remain competitive in today's market.

n8n: A Revolução das Automações no Mundo Empresarial - 6 exemplos

Douglas Toledo — Fri, 07 Feb 2025 00:28:28 +0000

O Cenário das Automações

De acordo com um estudo da McKinsey, até 2030 cerca de 70% das atividades pelas quais as pessoas são pagas poderão ser automatizadas usando tecnologias. Em um mundo onde a eficiência operacional é crucial, as automações deixaram de ser um diferencial para se tornar uma necessidade competitiva.

Dependendo da atividade, um chatbot implementado com IA pode superar o desempenho de uma equipe, convertendo mais vendas que o melhor vendedor humano por exemplo. Este é apenas um exemplo do potencial transformador das automações inteligentes no ambiente empresarial.

O que é o n8n?

O n8n (pronuncia-se "n-eight-n") é uma plataforma de automação de fluxo de trabalho fair-code que permite conectar diferentes sistemas e automatizar processos complexos através de uma interface visual intuitiva. Diferente de outras ferramentas no mercado, o n8n oferece:

Possibilidade de self-hosting (hospedagem própria)
Mais de 200 integrações nativas
Interface visual baseada em nodes
Flexibilidade para customizações via código (JavaScript/Python)
Preços mais acessíveis comparados a concorrentes

Vantagens do Self-hosting

Controle total sobre dados sensíveis
Menor latência em operações
Custos reduzidos em grande escala
Conformidade com regulamentações de dados

6 Exemplos de Aplicações Práticas do n8n

1. Chatbots Inteligentes

Segundo a Servion Global Solutions, até 2025, 95% das interações com clientes serão mediadas por IA. O n8n permite criar chatbots sofisticados que:

Integram-se nativamente com principais plataformas de mensagem
Processam linguagem natural
Mantêm contexto das conversas
Escalam automaticamente

Fluxo Detalhado:

Webhook recebe mensagem do usuário
Sistema verifica origem e tipo de mensagem
Processa palavras-chave e contexto
Executa lógica de negócio específica
Retorna resposta personalizada

2. Agentes com IA

Com a integração do framework LangChain, os agentes n8n oferecem:

Processamento de linguagem natural avançado
Memória contextual para conversas mais naturais
Integração com múltiplos modelos de IA (OpenAI, Google, Meta)
Base de conhecimento customizável

Diferenciais vs Chatbots Tradicionais:

Compreensão contextual superior
Respostas mais naturais e precisas
Capacidade de aprendizado contínuo
Maior taxa de resolução no primeiro contato

3. Web Scraping

Em um mercado onde dados são o novo petróleo, o web scraping automatizado oferece:

Monitoramento contínuo de preços
Análise de concorrência
Coleta de leads
Atualização automática de catálogos

Processo de Implementação:

Definição de fonte de dados
Configuração de seletores
Agendamento de coletas
Processamento e limpeza
Armazenamento estruturado

4. Otimização de Workload Units no Bubble

É possível criar automações e integrações no n8n que ajudam a melhorar a eficiência operacional em plataformas como o Bubble. Alguns exemplos:

Processar dados de maneira mais eficiente antes de enviá-los para o Bubble.
Automatizar a atualização de dados e a execução de processos fora do Bubble, reduzindo a necessidade de utilização de WUs no Bubble.

Essas estratégias podem ajudar a alcançar uma maior estabilidade, reduzir custos operacionais e melhorar a performance geral, mas a redução exata de WUs dependerá de como você configura e otimiza suas automações. Estudos de caso mostram reduções de até 95% no consumo de recursos:

De 10 WU para 0,5 WU em processamentos complexos
Maior estabilidade em picos de demanda
Custos operacionais reduzidos
Melhor performance geral

5. Integração com Bancos de Dados

O n8n suporta praticamente todos os principais bancos de dados:

SQL: PostgreSQL, MySQL, SQL Server
NoSQL: MongoDB, CouchDB
Serviços em nuvem: AWS, Google Cloud
Low-code: Airtable, NocoDB

6. Facilitação de Integrações Externas

Redução significativa no tempo de desenvolvimento:

De semanas para horas em integrações complexas
Eliminação de código boilerplate
Manutenção simplificada
Maior confiabilidade

Impacto nos Negócios

De acordo com um estudo da Deloitte, empresas que implementam automações inteligentes reportam:

Redução de 40% em custos operacionais
Aumento de 35% na produtividade
Melhoria de 60% na satisfação do cliente
ROI médio de 200% em 12 meses

O Futuro das Automações

A tendência é que as automações se tornem cada vez mais sofisticadas e acessíveis. O n8n se posiciona como uma ferramenta fundamental nessa transformação, oferecendo:

Democratização da automação
Redução da complexidade técnica
Escalabilidade empresarial
Integração com tecnologias emergentes

Considerações Finais

O n8n não é apenas uma ferramenta de automação, mas um catalisador de transformação digital. Em um mundo onde a eficiência operacional é crucial, automatizar processos deixou de ser opcional. As empresas que adotarem essas tecnologias hoje estarão melhor posicionadas para os desafios do amanhã.

A combinação de facilidade de uso, flexibilidade e poder de processamento faz do n8n uma escolha estratégica para empresas de todos os tamanhos que buscam modernizar suas operações e manter-se competitivas no mercado atual.

Integrating DeepSeek into n8n: Low-Cost AI Automations

Douglas Toledo — Sun, 02 Feb 2025 05:37:14 +0000

Upgrade your automations with AI without spending much, integrate DeepSeek with n8n in your solution!

What is n8n?

n8n is a low-code/no-code automation platform that lets you connect apps, services, and APIs in a visual way. With it, you can create complex workflows without coding, integrating tools like WhatsApp, Google Sheets, and AI models. It's like a digital LEGO® for automations, offering flexibility and scalability.

Meet DeepSeek

DeepSeek is an open-source AI model that stands out for offering performance comparable to GPT-4 and Claude 3.5 Sonnet, but at significantly lower costs.

DeepSeek Models:

DeepSeek V3 (Chat):
- Focus: Simple tasks like chatbots and virtual assistants.
- Performance: Quick responses, ideal for agile interactions.
DeepSeek R1 (Reasoning):
- Focus: Complex tasks requiring advanced reasoning.
- Performance: More elaborate responses but with longer response times (up to 50 seconds).

Price Comparison

To better understand the cost-benefit of DeepSeek...

Comparison table (per million tokens):

Model	Input Tokens	Output Tokens
DeepSeek V3 (Chat)	$0.01	$0.28
DeepSeek R1 (Reasoning)	$0.14	$2.19
OpenAI GPT-4	$2.50	$10.00
Claude 3.5 Sonnet	$3.00	$15.00

The above values are approximate and based on information available until February 1, 2025.

How to Integrate DeepSeek with n8n?

First, you'll need to have n8n installed; follow the official documentation for installation.

Integration Steps:

Install the n8n-nodes-deepseek Node:
- In n8n, go to Settings > Community Nodes > Install a community node.
- In npm Package Name, type "n8n-nodes-deepseek", select the checkbox "I understand the risks of installing unverified code from a public source" and click the "Install" button.

Create the Credentials:
- Create an account on the DeepSeek website and go to the dashboard of your account.
- Add a balance (minimum of US$ 2) and generate your API Key.
- Keep your API Key in a safe place.
Configure the Credentials:
- Create a workflow by clicking "New Workflow" on the Overview tab;

Click on "Add first step" in the center of the workflow and add a Trigger manually to start the flow;

Click the "+" to add a service to the flow and type "deepseek" in the search and click on the node we installed;

Click on "Create chat completion" to open the configuration screen;

In Select Credential input, click the arrow to open the menu and click + Create a new credential;

Paste your API Key and click the "Save" button;

Configure the desired model (V3 or R1) in "Model" and set the messages in "Prompt":
- System Message: type: "You are a helpful assistant";
- Click "Add Message";
- User Message: type: "Who are you?".

Test the call:
- Click the "Test step" button, it will process and respond to the test request.

Note: The V3 will provide a quick return, the R1 is ideal for detailed responses, but the processing time may not be suitable for real-time applications.

You did it, congratulations!
- Was it difficult? Leave a comment below.

When to Use Each Model?

DeepSeek V3:
- Ideal for: Chatbots, quick responses, and real-time interactions.
- Advantages: Low cost and high speed.
DeepSeek R1:
- Ideal for: Tasks requiring complex reasoning and detailed responses.
- Advantages: In-depth analysis, though with longer response times.

Conclusion

Integrating DeepSeek with n8n is an effective and economical way to implement AI in your automations. With significantly lower costs compared to other models, you can expand your projects without breaking the bank.

Useful Resources

Integrando o DeepSeek no n8n: Automações com IA de Baixo Custo

Douglas Toledo — Sun, 02 Feb 2025 05:23:31 +0000

Dê um upgrade nas suas automações com IA sem gastar muito, integre o DeepSeek ao n8n na sua solução!

O que é o n8n?

O n8n é uma plataforma de automação low-code/no-code que permite você conectar aplicativos, serviços e APIs de uma forma visual. Com ele, você cria fluxos de trabalho complexos sem programar, integrando ferramentas como WhatsApp, Google Sheets e modelos de IA. É como um "LEGO® digital" para automações, oferecendo flexibilidade e escalabilidade.

Conheça o DeepSeek

O DeepSeek é um modelo de AI open-source que se destaca por oferecer desempenho comparável ao GPT-4, o1 e Claude 3.5 Sonnet, mas com custos significativamente menores.

Modelos do DeepSeek:

DeepSeek V3 (Chat):
- Foco: Tarefas simples como chatbots e assistentes virtuais.
- Desempenho: Respostas rápidas, ideal para interações ágeis.
DeepSeek R1 (Reasoning):
- Foco: Tarefas complexas que exigem raciocínio avançado.
- Desempenho: Respostas mais elaboradas, porém com tempo de resposta maior (até 50 segundos).

Comparativo de Preços com OpenAI e Claude 3.5 Sonnet

Para entender melhor o custo-benefício do DeepSeek...

Tabela de Comparação de Preços (por milhão de tokens):

Modelo	Tokens de Entrada	Tokens de Saída
DeepSeek V3 (Chat)	US$ 0,01	US$ 0,28
DeepSeek R1 (Reasoning)	US$ 0,14	US$ 2,19
OpenAI GPT-4	US$ 2,50	US$ 10,00
Claude 3.5 Sonnet	US$ 3,00	US$ 15,00

Os valores acima são aproximados e baseados em informações disponíveis até 01 de fevereiro de 2025.

Como Integrar o DeepSeek ao n8n?

Primeiramente você vai precisar ter instalado o n8n, siga a documentação oficial para realizar a instalação.

Passo a passo da integração:

Instale o Node n8n-nodes-deepseek:
- No n8n, acesse Settings > Community Nodes > Install a community node.
- Em npm Package Name digite "n8n-nodes-deepseek", selecione o checkbox I understand the risks of installing unverified code from a public source e clique no botão Install.

Crie as Credenciais:
- Crie uma conta no site do DeepSeek e vá no dashboard da sua conta.
- Adicione um saldo (mínimo de US$ 2) e gere sua API Key.
- Guarde a sua API Key em um local seguro.
Configurar as Credenciais:
- Crie um workflow clicando em New Workflow na aba Overview;

Clique em Add first step no centro do workflow e adicione um Trigger manually para iniciar o fluxo;

Clique no + para adicionar um serviço ao fluxo e digite "deepseek" na pesquisa e clique no node que instalamos;

Clique em Create chat completion para abrir a tela de configuração;

Em Select Credential, clique na seta para abrir o menu e clique em + Create a new credential;

Cole a sua API Key e clique no botão Save;

Configure o modelo desejado (V3 ou R1) em Model e defina as mensagens no Prompt:
- System Message: digite: "Você é um assistente prestativo";
- Clique em Add Message;
- User Message: digite: "Quem é você?".

Teste a chamada:
- Clique no botão Test step, ele irá processar e responder a requisição de teste.

Observações: O V3 fornecerá retorno rápido, o R1 é ideal para respostas detalhadas, mas o tempo de processamento pode não ser adequado para aplicações em tempo real.

Você conseguiu, parabéns!
- Foi difícil? Comenta aqui nos comentários.

Quando Usar Cada Modelo?

DeepSeek V3:
- Ideal para: Chatbots, respostas rápidas e interações em tempo real.
- Vantagens: Baixo custo e alta velocidade.
DeepSeek R1:
- Ideal para: Tarefas que exigem raciocínio complexo e respostas detalhadas.
- Vantagens: Análises aprofundadas, embora com tempo de resposta maior.

Conclusão

Integrar o DeepSeek ao n8n é uma maneira eficaz e econômica de implementar IA nas suas automações. Com custos significativamente menores que outros modelos, você pode expandir seus projetos sem sacrificar o orçamento.

Recursos Úteis

How to Use DeepSeek R1 for Free in Visual Studio Code with Cline or Roo Code

Douglas Toledo — Fri, 24 Jan 2025 19:45:29 +0000

If you're looking for an AI that excels in reasoning and is also free because it's open source, the newly launched DeepSeek R1 is a great choice. It competes with and outperforms models like GPT-4, o1-mini, Claude 3.5, among others. I tested it and have nothing but praise!

If you want to run it directly in your Visual Studio Code as a code agent similar to GitHub Copilot, without spending a dime, come along as I show you how to do this using tools like LM Studio, Ollama, and Jan.

Why is DeepSeek R1 so talked about these days?

It's free and open source: Unlike many models that charge a fortune, you can use it without paying anything. It's even available for chat at https://chat.deepseek.com.
Performance: It competes with and outperforms other models in tasks involving logic, mathematics, and even code generation (which is my favorite part).
Multiple versions: To run it locally (LLM), there are models ranging from 1.5B to 70B parameters, so you can choose what works best on your PC depending on your hardware.
Easy to integrate: You can connect it to VSCode using extensions like Cline or Roo Code.
No costs: If you run it locally, you don't pay for tokens or APIs. A graphics card is recommended, as running it solely on the CPU is slower.

Important Tips Before You Start

Save resources: If your PC isn't very powerful, stick with the smaller models (1.5B or 7B parameters) or quantized versions.
RAM Calculator: Use LLM Calc to find out the minimum RAM you'll need.
Privacy: Running it locally means your data stays on your PC and doesn't go to external servers.
No costs: Running it locally is free, but if you want to use the DeepSeek API, you'll need to pay for tokens. The good news is that their price is much lower than competitors.

Which Model to Choose? It Depends on Your PC!

DeepSeek R1 has several versions, and the choice depends on your hardware:

1.5B Parameters:
- RAM required: ~4 GB.
- GPU: Integrated (like NVIDIA GTX 1050) or a modern CPU.
- What for?: Simple tasks and modest PCs.
7B Parameters:
- RAM required: ~8-10 GB.
- GPU: Dedicated (like NVIDIA GTX 1660 or better).
- What for?: Intermediate tasks and PCs with better hardware.
70B Parameters:
- RAM required: ~40 GB.
- GPU: High-end (like NVIDIA RTX 3090 or higher).
- What for?: Complex tasks and super powerful PCs.

How to Run DeepSeek R1 Locally

1. Using LM Studio

Download and install LM Studio: Just go to the LM Studio website and download the version for your system.
Download the DeepSeek R1 model: In LM Studio, go to the Discover tab, search for "DeepSeek R1," and select the version most compatible with your system. If you're using a MacBook with Apple processors, keep the MLX option selected next to the search bar (these versions are optimized for Apple hardware). For Windows or Linux, choose the GGUF option.
Load the model: After downloading, go to Local Models, select DeepSeek R1, and click Load.
Start the local server: In the Developer tab, enable Start Server. It will start running the model at http://localhost:1234.
Proceed to step 4 Integrating with VSCode!

2. Using Ollama

Install Ollama: Download it from the Ollama website and install it.
Download the model: In the terminal, run*:

   ollama pull deepseek-r1

*This is the main model; if you want smaller models, go to https://ollama.com/library/deepseek-r1 and see which command to run in the terminal.

Start the server: In the terminal, execute:

   ollama serve

The command will start running the model at http://localhost:11434.

Proceed to step 4 Integrating with VSCode!

3. Using Jan

Download and install Jan: Choose the version for your system on the Jan website.
Download the model: I couldn't find DeepSeek R1 directly in Jan. So, I went to the Hugging Face website and manually searched for "unsloth gguf deepseek r1." I found the desired version, clicked the "Use this model" button, and selected Jan as the option. The model automatically opened in Jan, and I then downloaded it.
Load the model: After downloading, select the model and click Load.
Start the server: Jan automatically starts the server, usually at http://localhost:1337.
Proceed to step 4 Integrating with VSCode!

4. Integrating with VSCode

Install the extension: In VSCode, open the Extensions tab and install Cline or Roo Code.

Configure the extension for Jan or LM Studio: The configuration for both Cline and Roo Code is practically identical. Follow the steps below:
- Click on the extension and access "Settings".
- In API Provider, select "LM Studio".
- In the Base URL field, enter the URL configured in Jan or LM Studio.
- The Model ID field will be automatically filled if you only have one model available. Otherwise, manually select the DeepSeek model you downloaded.
- Finish by clicking "Done".

Configure the extension for Ollama:
- Click on the extension and access "Settings".
- In API Provider, select "Ollama".
- In the Base URL field, enter the URL configured in Ollama.
- The Model ID field will be automatically filled if you only have one model available. Otherwise, manually select the DeepSeek model you downloaded.
- Finish by clicking "Done".
Integration complete, now just enjoy the functionalities of Cline or Roo Code.

Conclusion

DeepSeek R1 is a lifesaver for those who want a powerful AI without spending anything. With LM Studio, Ollama, or Jan, you can run it locally and integrate it directly into Visual Studio Code. Choose the model that fits your PC and start using it today!

Como Usar o DeepSeek R1 de Graça no Visual Studio Code com Cline ou Roo Code

Douglas Toledo — Fri, 24 Jan 2025 19:42:00 +0000

Se você está procurando uma IA que seja boa de raciocínio e ainda por cima de graça, pois é open source, o recém lançado DeepSeek R1 é uma ótima pedida. Ele compete e ganha de modelos como o GPT-4, o1-mini, Claude 3.5, ente outros. Eu testei e só tenho elogios!

Se você quer rodar ele direto no seu Visual Studio Code, como um code agent similar ao GitHub Copilot, sem gastar nada, vem que eu te mostro como fazer isso usando ferramentas como LM Studio, Ollama e Jan.

Por que o DeepSeek R1 está tão falado nos últimos dias?

É de graça e open source: Diferente de muitos modelos que cobram uma fortuna, você pode usar ele sem pagar nada. Inclusive ele está disponível para chat em https://chat.deepseek.com.
Desempenho: Ele compete e ganha de outros modelos em tarefas de lógica, matemática e até geração de código (que é a minha parte preferida).
Várias versões: Para rodá-lo localmente (LLM) há modelos de 1.5B a 70B parâmetros, então você escolhe o que roda melhor no seu PC dependendo do hardware.
Fácil de integrar: É possível conectá-lo ao VSCode com extensões como Cline ou Roo Code.
Sem custos: Se você rodar localmente, você não paga por tokens ou APIs. Uma placa de vídeo é recomendada, pois rodando só pelo processador é mais lento.

Dicas Importantes antes de começar

Economize recursos: Se seu PC não é tão forte, fique com os modelos menores (1.5B ou 7B parâmetros) ou quantizados.
Calculadora de RAM: Use o LLM Calc pra saber o mínimo de memória RAM você precisará.
Privacidade: Rodando localmente, seus dados ficam só no seu PC, sem ir pra servidores externos.
Sem custos: Rodar localmente é de graça, mas se você quiser usar a API da DeepSeek, vai precisar pelo uso de tokens, a boa notícia é que o preço deles está muuuuito abaixo dos concorrentes.

Qual Modelo Escolher? Depende do Seu PC!

O DeepSeek R1 tem várias versões, e a escolha depende do seu hardware:

1.5B Parâmetros:
- RAM necessária: ~4 GB.
- GPU: Integrada (tipo NVIDIA GTX 1050) ou uma CPU moderna.
- Pra quê?: Tarefas simples e PCs mais modestos.
7B Parâmetros:
- RAM necessária: ~8-10 GB.
- GPU: Dedicada (tipo NVIDIA GTX 1660 ou melhor).
- Pra quê?: Tarefas intermediárias e PCs com um hardware melhor.
70B Parâmetros:
- RAM necessária: ~40 GB.
- GPU: High-end (tipo NVIDIA RTX 3090 ou superior).
- Pra quê?: Tarefas complexas e PCs super potentes.

Como Rodar o DeepSeek R1 Localmente

1. Usando o LM Studio

Baixe e instale o LM Studio: É só entrar no site do LM Studio e baixar a versão pro seu sistema.
Baixe o modelo DeepSeek R1: No LM Studio, acesse a aba Discover, pesquise por "DeepSeek R1" e selecione a versão mais compatível com seu sistema. Se estiver usando um MacBook com processadores Apple, mantenha a opção MLX selecionada ao lado da barra de pesquisa (essas versões são otimizadas para o hardware da Apple). Para Windows ou Linux, escolha a opção GGUF.
Carregue o modelo: Depois de baixar, vá em Local Models, selecione o DeepSeek R1 e clique em Load.
Inicie o servidor local: Na aba Developer, habilite Start Server. Ele vai começar a rodar o modelo no http://localhost:1234.
Siga para a etapa 4 Integrando com o VSCode!

2. Usando o Ollama

Instale o Ollama: Baixe no site do Ollama e instale.
Baixe o modelo: No terminal, rode*:

   ollama pull deepseek-r1

*Esse é o modelo principal, se quiser modelos menores, vá em https://ollama.com/library/deepseek-r1 e veja qual comando executar no terminal.

Inicie o servidor: No terminal, execute:

   ollama serve

O comando vai começar a roda o modelo em http://localhost:11434.

Siga para a etapa 4 Integrando com o VSCode!

3. Usando o Jan

Baixe e instale o Jan: Escolha a versão para o seu sistema no site do Jan.
Baixe o modelo: Não consegui encontrar o DeepSeek R1 diretamente no Jan. Por isso, acessei o site do Hugging Face e pesquisei manualmente por "unsloth gguf deepseek r1". Encontrei a versão desejada, cliquei no botão "Use this model" e selecionei o Jan como opção. O modelo foi aberto automaticamente no Jan, e então realizei o download.
Carregue o modelo: Depois de baixar, selecione o modelo e clique em Load.
Inicie o servidor: O Jan já inicia o servidor automaticamente, geralmente em http://localhost:1337.
Siga para a etapa 4 Integrando com o VSCode!

4. Integrando com o VSCode

Instale a extensão: No VSCode abra a aba de Extensões e instale o Cline ou Roo Code.

Configure a extensão para Jan ou LM Studio: Tanto a configuração do Cline quanto do Roo Code são praticamente idênticas. Siga os passos abaixo:
- Clique na extensão e acesse "Settings".
- Em API Provider, selecione "LM Studio".
- No campo Base URL, insira a URL configurada no Jan ou no LM Studio.
- O campo Model ID será preenchido automaticamente se você tiver apenas um modelo disponível. Caso contrário, selecione manualmente o modelo DeepSeek que você baixou.
- Finalize clicando em "Done".

Configure a extensão para Ollama:
- Clique na extensão e acesse "Settings".
- Em API Provider, selecione "Ollama".
- No campo Base URL, insira a URL configurada no Ollama.
- O campo Model ID será preenchido automaticamente se você tiver apenas um modelo disponível. Caso contrário, selecione manualmente o modelo DeepSeek que você baixou.
- Finalize clicando em "Done".
Integração concluída, agora é só desfrutar das funcionalidade do Cline ou do Roo Code.

Conclusão

O DeepSeek R1 é uma mão na roda pra quem quer uma IA poderosa sem gastar nada. Com LM Studio, Ollama ou Jan, você pode rodar ele localmente e integrar direto no Visual Studio Code. Escolha o modelo que cabe no seu PC e comece a usar hoje mesmo!

Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets

Douglas Toledo — Wed, 22 Nov 2023 02:51:03 +0000

First of all --

I'll assume that you already have a Vite React App created in a GitHub repository. In this article, I will use my portfolio as an example.

Step 1 --

Set the correct base in vite.config.js file:

Example: In my vite.config.js, I added my GitHub repository name (that is, "portfolio") as the base.

Step 2 --

Create an .env file in your project root and add your secrets using the "VITE_" prefix:

Example: If you need a secret "OPEN_AI_KEY", you should add the secret to the .env file as "VITE_OPEN_AI_KEY".

Step 3 --

Add the secret to your code using "import.meta.env.":

Example: If I need to add my "VITE_OPEN_AI_KEY" to my code, I'll add "import.meta.env.VITE_OPEN_AI_KEY" as in the example below:

Step 4 --

Create a GitHub Actions Secret:

Access your GitHub project repository;
Click "Settings" >
Select "Actions" on "Secrets and variables" dropdown >
Click "New repository secret".

Type the secret name >
Type the secret value itself >
Click "Add Secret".

In my case, the secret name is "VITE_OPEN_AI_KEY" and the value is "My OpenAI Key Value":

Step 5 --

Setup GitHub Pages:

Access your GitHub project repository;
Click "Settings" >
Click "Pages" on menu >
Select GitHub Actions on Build and Deployment Source.

Step 6 --

Create your deploy.yml file on GitHub:

⚠️ This file is important because it will trigger GitHub Actions to use GitHub Secrets, build, and deploy your project on GitHub Pages every time you commit a change to your repository.

Access your GitHub project repository;
Click "Pages" on menu >
Click "create your own" link.

A page to create your own workflow will open. On this page...

Name the new workflow as "deploy.yml".
Remove all generic workflow content;

Before proceeding, ensure your GitHub workflow is empty and named "deploy.yml":

Open the "Deploying a Static Site" Vite Guide on https://vitejs.dev/guide/static-deploy and look for GitHub Pages session.

Copy the workflow.

Paste it on GitHub where we are creating our own workflow.

Add all your secrets above "jobs" on the workflow, using the following template as a reference:

#Allow repo secrets
env:
  VITE_SECRET_1: ${{ secrets.VITE_SECRET_1 }}
  VITE_SECRET_3: ${{ secrets.VITE_SECRET_3 }}
  VITE_SECRET_3: ${{ secrets.VITE_SECRET_3 }}

In my portfolio, I only have the "VITE_OPEN_AI_API_KEY" secret, so I added the following code to my workflow:

#Allow repo secrets
env:
  VITE_OPEN_AI_API_KEY: ${{ secrets.VITE_OPEN_AI_API_KEY }}

The result is shown in the image below;
Click on "Commit changes"

If you wish, you can modify the "Commit message", otherwise, leave it as it is;
Click "Commit changes".

Your workflow was successfully created!

Step 7 --

Commit a change:

As soon as you commit a change, GitHub Actions will automatically identify, build, and deploy your project with your secrets in your GitHub Pages.

You can verify all deployments on the "Actions" tab in your GitHub repository:

🎉 Congratulations! --

✉️ Feel free to contact me in case of questions!

'BEM' do CSS - Boas Práticas

Douglas Toledo — Fri, 12 Feb 2021 17:37:35 +0000

O que é BEM?

É uma metodologia de escrita de classes no CSS que ajuda na criação de componentes reutilizáveis e boas práticas no desenvolvimento front-end.

É fácil!

Apenas uma convenção de nomes.

É modular!

Código independente e reutilizável.

É flexível!

Use da maneira que preferir.

É internacional!

Entenda rapidamente o CSS do mundo todo.

'B' vem de Bloco (block)

'E' vem de Elemento (element)

'M' vem de Modificador (modifier)

Blocos > São entidades autônomas que são significativas por si só. Exemplos: Menu, Rodapé, Cabeçalho, Newsletter, etc.

Elementos > São partes de um bloco (elementos filhos, netos, etc), Exemplos: Items de um Menu, texto Copyright de um Rodapé, Logo de um Cabeçalho, Formulário de um Newsletter, etc.

Modificadores > Uma variante de um bloco ou elemento padrão. Exemplos: um Botão Verde (padrão é branco), um Item de Menu com Link Desabilitado (o padrão é habilitado), etc.

Nomeando classes conforme o 'BEM’:

Para os blocos não há diferenças dos nomes que hoje você já escolhe no CSS (exemplo: "bloco"), ou seja:

Se temos uma divisória para a newsletter podemos nomeá-la como "newsletter";
Se temos um menu de navegação, podemos nomeá-lo como "menu" e assim por diante.

Para o(s) elemento(s) de um bloco usamos por convenção 'BEM' o nome do bloco seguido de 2 underlines e o nome do elemento (exemplo: "bloco__elemento"), ou seja:

Se temos um bloco de menu com vários elementos que são links de navegação, podemos nomeá-los como "menu__links";
Se temos um bloco de sessão newsletter com um elemento formulário de cadastro, podemos nomeá-lo como "newsletter__formulario" e assim por diante.

Para o(s) modificador(es) de um elemento usamos por convenção 'BEM' o nome do elemento seguido de 2 hífens e o nome do modificador (exemplo: "bloco__elemento--modificador"), ou seja:

Se temos um botão de formulário que já possui uma formatação padrão, mas queremos que ele seja verde, podemos nomeá-lo como "formulario__bttn--red";
Se temos um menu de links, mas um deles está desabilitado, podemos nomeá-lo como "menu__links--disabled" e assim por diante.

‘BEM’ na prática:

Observe a página abaixo:

Para os blocos (em verde), elementos (em azul) e modificadores (em vermelho) os nomes práticos seriam:

Parabéns!!!

Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!

Quer aprender mais?

Te convido a ver a Live sobre 'BEM - Boas Práticas em CSS' que fiz lá no meu canal da Twitch. O link da live é esse: https://www.twitch.tv/videos/906196998?t=0h2m48s

Segue também a apresentação que foi preparada.
Um grande abraço!

Tags HTML que você precisa conhecer e Dicas do VS Code.

Douglas Toledo — Mon, 25 Jan 2021 13:01:03 +0000

Agora que você já viu [...]

as principais tags e;
tabelas e;
formulários em HTML.

[...] chegou a hora daquelas tags pouco conhecidas, mas que você precisa conhecer!

Tag <details>

Quando usada com a tag <summary> faz com que um conteúdo escondido seja exibido ao clicar no elemento summary. Se clicar novamente, o conteúdo é escondido. E o melhor, sem precisar de JavaScript!

Podemos criar drop-menu com essa funcionalidade. Olha só que legal!

<details>
        <summary>Menu</summary>
        <a href="https://google.com/" target="_blank">Google</a><br>
        <a href="https://bing.com/" target="_blank">Bing</a><br>
        <a href="https://duckduckgo.com/" target="_blank">DuckDuckGo</a>
    </details>

O resultado é um Menu que ao clicarmos exibe 3 links (Google, Bing e DuckDuckGo):

Se tivermos um conteúdo logo abaixo, ele será "empurrado" ou "puxado" quando clicarmos no Menu, veja um exemplo:

Tag <source> com a tag <audio>

Você sabia que cada navegador tem preferência por um determinado tipo de audio? O navegador Safari da maça por exemplo, adora o audio ogg!

Então vamos dar aos navegadores o que eles querem para evitar que seu conteúdo não fique disponível para o usuário, segue um exemplo:

<audio controls>
     <source src="./sound.mp3" type="audio/mpeg">
     <source src="./sound.ogg" type="audio/ogg">
     Seu navegador não suporta a tag de audio.
</audio>

O resultado é:

O navegador irá mostrar a mensagem "Seu navegador não suporta a tag de audio." caso não consiga carregar nenhuma opção de arquivo de áudio.

Tag <source> com a tag <video>

Semelhante ao audio:

<video controls>
        <source src="./video.mp4" type="video/mp4">
        <source src="./video.mov" type="video/mov">
        Seu navegador não suporta a tag de vídeo.
</video>

O resultado é um player de vídeo:

O navegador irá mostrar a mensagem "Seu navegador não suporta a tag de vídeo." caso não consiga carregar nenhuma opção de arquivo de vídeo.

Encontrei uma explicação mais detalhada sobre os formatos de audio e vídeos compatíveis nos navegadores, recomendo a leitura: MDN Web Docs - Formatos de mídia suportados por elementos HTML de áudio e vídeo

Tag <picture>

Você sabia que é possível deixar suas imagens mais responsivas* só com HTML e sem usar CSS? Usamos a tag picture da seguinte maneira:

<picture>
        <source media="(min-width: 512px)" srcset="./512.jpg">
        <source media="(min-width: 256px)" srcset="./256.jpg">
        <img src="./150.jpg" alt="">
</picture>

*carregar uma imagem de menor resolução para telas menores e carregar uma imagem com resolução maior para telas maiores.

Explicando:

se a tela é maior que 512px, o HTML irá carregar "512.jpg";
se a tela é entre 256px e 512px, o HTML irá carregar "256.jpg";
se a tela é menor que 256px, será carregado "150.jpg".
a ordem é muito importante, sempre do maior tamanho de tela ao menor, caso contrário, não irá funcionar muito bem.

O resultado é:

Tag <dl>

Existem as listas ordenadas <ol> e as listas não ordenadas <ul>. Mas você sabia que existe uma lista de descrições <dl>? Geralmente essa lista é usada em glossários. Vamos ao exemplo de código:

<h2>Filmes do Harry Potter:</h2>

    <dl>
        <dt>Harry Potter e a Pedra Filosofal (2001)</dt>
        <dd>Descrição do 1º filme.</dd>

        <dt>Harry Potter e a Câmara Secreta (2002)</dt>
        <dd>Descrição do 2º filme.</dd>

        <dt>Harry Potter e o Prisioneiro de Azkaban (2004)</dt>
        <dd>Descrição do 3º filme.</dd>

        <dt>Harry Potter e o Cálice de Fogo (2005)</dt>
        <dd>Descrição do 4º filme.</dd>

        <dt>Harry Potter e a Ordem da Fênix (2007)</dt>
        <dd>Descrição do 5º filme.</dd>

        <dt>arry Potter e o Enigma do Príncipe (2009)</dt>
        <dd>Descrição do 6º filme.</dd>

        <dt>Harry Potter e as Relíquias da Morte: Parte 1 (2010)</dt>
        <dd>Descrição do 7º filme.</dd>

        <dt>Harry Potter e as Relíquias da Morte: Parte 2 (2011)</dt>
        <dd>Descrição do 8º filme.</dd>
    </dl>

    <img src="./harry-potter-movies.png" alt="Capas de todos os filmes do Harry Potter">

No código acima, temos uma lista <dl> envolvendo todos os filmes do Harry Potter:

cada título de filme está na tag <dt> description term;
cada descrição do filme está na tag <dd> descriptions.

O resultado é:

O post já está ficando grande e ainda tenho tags interessantes para te mostrar! Então vamos chamar esse post de Parte 1 e vou fazer em breve a Parte 2 para vocês!

Parabéns!!!

Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!

Quer aprender mais?

Te convido a visitar e seguir o meu canal lá na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML!

Tags HTML para Formulários e Dicas do VS Code.

Douglas Toledo — Mon, 18 Jan 2021 13:26:43 +0000

Agora que você já viu [...]

as principais tags e;
tabelas em HTML;

[...] chegou a hora dos Formulários!

Vamos replicar o formulário abaixo?

No formulário, temos:

Duas entradas de texto ("Nome" e "Senha");
Uma seleção através de botões radiais ("Selecione a tarefa");
Uma seleção através de uma lista de dados ("Selecione o status da tarefa");

Vamos por partes, se não vamos complicar as coisas!

Usamos a tag <input> para o usuário digitar os dados;
Definimos qual é o tipo do dado usando o atributo type="";
Definimos um nome para esse campo usando o atributo name="";

Exemplo em que o usuário irá digitar a sua idade:

<input type="number" name="idade">

Há mais de 20 tipos de dados! É muito importante você colocar o tipo correto para que o navegador prepare a página para receber aquele tipo de dado específico.

Exemplos:

Se você colocar o type="password", o navegador irá entender que o dado é uma senha e ela não ficará visível durante a digitação.
Se você colocar o type=color, o navegador irá entender que o dado é uma cor e irá abrir uma seleção de paleta de cores.
Se você colocar o type=date, o navegador irá entender que o dado é uma data e irá formatar o campo para uma fácil digitação e ou seleção de data.

Você pode ver a lista completa de todos os tipos de inputs no link HTML Input Types - W3Schools!

No formulário inicial, para as duas entradas de texto ("Nome" e "Senha"):

Nome é type="text", então vamos começar nosso formulário adicionando o campo nome:

<input type="text" name="nome">

Senha é type="password", então vamos adicionar o campo senha após uma quebra de linha (tag <br>):

<input type="text" name="nome">
<br>
<input type="password" name="senha">

O resultado do html é:

Mas Douglas, cadê a legenda ("Nome:" e "Senha:") e a descrição do campo ("Insira seu nome" e "Insira sua senha")?

Para a legenda "Nome:", usamos a tag <label>, no seu atributo for="" colocamos o nome do campo usado na tag <input> e entre a abertura e fechamento das tags digitamos a legenda;
Para a descrição "Insira seu nome", usamos o atributo placeholder="" da tag <input>.

Colocando a legenda e descrição, temos:

<label for="nome">Nome:</label>
<input type="text" name="nome" placeholder="Insira seu nome">
<br>
<label for="senha">Senha:</label>
<input type="password" name="senha" placeholder=""Insira sua senha>

Olha o resultado!

Voltando ao formulário inicial, vamos continuar com a seleção através de botões radiais e seleção através de uma lista de dados:

Para a seleção através de botões radiais usamos <input type="radio">:

<label for="tarefa">Seleciona uma tarefa:</label>
<br>
<input name="tarefa" type="radio" value="varrer-a-casa"> Varrer a casa
<input name="tarefa" type="radio" value="lavar-a-louca"> Lavar a louça
<input name="tarefa" type="radio" value="arrumar-o-quarto"> Arrumar o quarto

Note que usamos o mesmo nome "tarefa" para todas as opções. Isso faz com que consigamos selecionar somente uma tarefa entre as três. Se os nomes fossem diferentes, seriamos capaz de selecionar mais de um item.

O resultado desse HTML é:

Para a seleção através uma lista de dados usamos a tag <input> e colocamos o nome da lista no atributo list="", não usamos o atributo type="" nesse caso;
A lista de dados vai entre as tags <datalist id="lista-status"></datalist>, onde id é o mesmo nome dado no atributo list="" da tag <input> e;
Cada dado da lista fica na tag <option value="">

<label for="status">Selecione o status da tarefa</label>
<input name="status" list="lista-status" placeholder="clique e selecione">
<datalist id="lista-status">
     <option value="Aguardando">
     <option value="Em Processo">
     <option value="Concluído">
</datalist>

O resultado é:

O botão "Enviar" é muito simples, é uma tag <input> do type="submit" e o texto do botão fica no atributo value="".

<input type="submit" value="Enviar">

O resultado é:

Juntando todos os HTML, temos:

    <form>
        <label for="nome">Nome:</label>
        <input type="text" placeholder="Insira seu nome" name="nome">
        <br>
        <label for="senha">Senha:</label>
        <input type="password" placeholder="Insira sua senha" name="senha">

        <label for="tarefa">Seleciona uma tarefa:</label>
        <br>
        <input name="tarefa" type="radio" value="varrer-a-casa"> Varrer a casa
        <input name="tarefa" type="radio" value="lavar-a-louca"> Lavar a louça
        <input name="tarefa" type="radio" value="arrumar-o-quarto"> Arrumar o quarto
        <br>

        <label for="status">Selecione o status da tarefa</label>
        <input name="status" list="lista-status" placeholder="clique e selecione">
        <datalist id="lista-status">
            <option value="Aguardando">
            <option value="Em Processo">
            <option value="Concluído">
        </datalist>         

        <input type="submit" value="Enviar">
    </form>

Como resultado:

Reparou que está faltando algo ainda?

Nos campos de seleção há uma divisória, agrupando todos esses campos do formulário (radio e datalist). Isso se chama fieldset!

Usamos a tag <fieldset> para agrupar e;
Podemos dar um nome para o agrupamento usando tag <legend>:

        <fieldset>
            <legend>Seleciona uma tarefa:</legend>
            <input name="tarefa" type="radio" value="varrer-a-casa"> Varrer a casa
            <input name="tarefa" type="radio" value="lavar-a-louca"> Lavar a louça
            <input name="tarefa" type="radio" value="arrumar-o-quarto"> Arrumar o quarto

            <br>

            <label for="status">Selecione o status da tarefa</label>
            <input name="status" list="lista-status" placeholder="clique e selecione">
            <datalist id="lista-status">
                <option value="Aguardando">
                <option value="Em Processo">
                <option value="Concluído">
            </datalist>
        </fieldset>

O resultado final do HTML completo é:

Parabéns!!!

Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!

Quer aprender mais?

Te convido a visitar e seguir o meu canal lá na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML!