<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Front-end &#8211; Manual do Programador</title>
	<atom:link href="https://www.manualdoprogramador.com/category/programacao/front-end/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.manualdoprogramador.com</link>
	<description>Explore o Manual do Programador e encontre artigos detalhados e atualizados sobre linguagens de programação, frameworks, desenvolvimento web, mobile, inteligência artificial e muito mais. Nosso objetivo é fornecer um conteúdo de qualidade e prático para desenvolvedores de todos os níveis - desde iniciantes até profissionais experientes. Descubra dicas para melhorar a eficiência do seu código, tutoriais passo a passo para projetos práticos, novidades do mundo da programação e resenhas de ferramentas úteis</description>
	<lastBuildDate>Thu, 24 Jul 2025 12:02:03 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.2</generator>

<image>
	<url>https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/06/Logo-redonda-1-1.png?fit=32%2C32&#038;ssl=1</url>
	<title>Front-end &#8211; Manual do Programador</title>
	<link>https://www.manualdoprogramador.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">220693552</site>	<item>
		<title>CNPJ Alfanumérico Desafios e Impactos nos Sistemas Atuais</title>
		<link>https://www.manualdoprogramador.com/cnpj-alfanumerico-desafios-e-impactos-nos-sistemas-atuais/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=cnpj-alfanumerico-desafios-e-impactos-nos-sistemas-atuais</link>
					<comments>https://www.manualdoprogramador.com/cnpj-alfanumerico-desafios-e-impactos-nos-sistemas-atuais/#respond</comments>
		
		<dc:creator><![CDATA[Silvio Cesar Junior]]></dc:creator>
		<pubDate>Sun, 13 Jul 2025 20:58:31 +0000</pubDate>
				<category><![CDATA[Back-end]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Programação]]></category>
		<guid isPermaLink="false">https://www.manualdoprogramador.com/?p=1213</guid>

					<description><![CDATA[Em julho de 2026, a Receita Federal passa a emitir CNPJs com 12 caracteres alfanuméricos seguidos de dois dígitos verificadores [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-full"><img data-recalc-dims="1" fetchpriority="high" decoding="async" width="1024" height="1024" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2025/07/ChatGPT-Image-13-de-jul.-de-2025-18_13_51.png?resize=1024%2C1024&#038;ssl=1" alt="" class="wp-image-1216"/></figure>



<p>Em julho de 2026, a Receita Federal passa a emitir CNPJs com 12 caracteres alfanuméricos seguidos de dois dígitos verificadores numéricos. A mudança visa acomodar o contínuo crescimento do número de empresas no Brasil e evitar o esgotamento da numeração disponível. Porém, essa novidade trará uma série de desafios técnicos e exigirá adaptações em diversos pontos dos sistemas corporativos. Neste artigo, vamos explorar os principais impactos e sugerir estratégias para uma transição suave.</p>



<h3 class="wp-block-heading">1. Nova Regra de Cálculo dos Dígitos Verificadores</h3>



<p>Até então, os doze primeiros dígitos do CNPJ eram exclusivamente numéricos, e os dois últimos resultavam de um cálculo baseado em módulo 11 e pesos de 2 a 9. Com a inclusão de letras, será necessário atribuir valores numéricos a cada caractere alfabético (A=17, B=18, …, Z=42) antes de aplicar o algoritmo tradicional de dígitos verificadores.</p>



<p><strong>Fluxo de cálculo resumido</strong>:</p>



<ol class="wp-block-list">
<li><strong>Mapeamento</strong>: converta cada caractere alfanumérico no seu valor segundo tabela (por exemplo, A→17, B→18, …) .</li>



<li><strong>Aplicação de pesos</strong>: aplique pesos de 2 a 9 da direita para a esquerda, reiniciando após o peso</li>



<li><strong>Somatório e módulo</strong>: calcule o somatório dos produtos valor×peso e obtenha o resto da divisão por 11.</li>



<li><strong>Definição do dígito</strong>: se o resto for 0 ou 1, o dígito é 0; caso contrário, é 11 menos o resto.</li>



<li><strong>Repetição</strong>: para o segundo dígito, inclua o primeiro DV ao final e repita o processo.</li>
</ol>



<h3 class="wp-block-heading">1.1 Primeiro Dígito Verificador</h3>



<p>Para validar o CNPJ alfanumérico <strong><code>Y6.K55.XEN/0001-99</code></strong>, extraímos primeiro os 12 caracteres e depois calculamos os dois dígitos verificadores.</p>



<h4 class="wp-block-heading">1.1.1 Primeiro Dígito Verificador</h4>



<ul class="wp-block-list">
<li><strong>Base (12 chars):</strong> <code>Y 6 K 5 5 X E N 0 0 0 1</code></li>



<li><strong>Valor (ASCII–48):</strong>
<ul class="wp-block-list">
<li>Y → 41</li>



<li>6 → 6</li>



<li>K → 27</li>



<li>5 → 5</li>



<li>5 → 5</li>



<li>X → 40</li>



<li>E → 21</li>



<li>N → 30</li>



<li>0 → 0</li>



<li>0 → 0</li>



<li>0 → 0</li>



<li>1 → 1</li>
</ul>
</li>



<li><strong>Pesos:</strong> 5,&nbsp;4,&nbsp;3,&nbsp;2,&nbsp;9,&nbsp;8,&nbsp;7,&nbsp;6,&nbsp;5,&nbsp;4,&nbsp;3,&nbsp;2</li>
</ul>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Posição</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th></tr></thead><tbody><tr><td>Caract.</td><td>Y</td><td>6</td><td>K</td><td>5</td><td>5</td><td>X</td><td>E</td><td>N</td><td>0</td><td>0</td><td>0</td><td>1</td></tr><tr><td>Valor</td><td>41</td><td>6</td><td>27</td><td>5</td><td>5</td><td>40</td><td>21</td><td>30</td><td>0</td><td>0</td><td>0</td><td>1</td></tr><tr><td>Peso</td><td>5</td><td>4</td><td>3</td><td>2</td><td>9</td><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td></tr></tbody></table></figure>



<ol class="wp-block-list">
<li>Soma dos produtos</li>
</ol>



<pre class="wp-block-code"><code>41×5 + 6×4 + 27×3 + 5×2 + 5×9 + 40×8 + 21×7 + 30×6 + 0 + 0 + 0 + 1×2 = 1 014</code></pre>



<ol start="2" class="wp-block-list">
<li>Resto da divisão por 11</li>
</ol>



<pre class="wp-block-code"><code>1 014 mod 11 = 2</code></pre>



<ol start="3" class="wp-block-list">
<li>Cálculo do primeiro dígito (DV₁)
<ul class="wp-block-list">
<li>Resto ≥ 2 → 11&nbsp;–&nbsp;2 = <strong>9</strong></li>
</ul>
</li>
</ol>



<h4 class="wp-block-heading">1.1.2 Segundo Dígito Verificador</h4>



<pre class="wp-block-code"><code>Y 6 K 5 5 X E N 0 0 0 1 9</code></pre>



<ul class="wp-block-list">
<li><strong>Valores:</strong> mesmos 12 anteriores + 9</li>



<li><strong>Pesos:</strong> 6,&nbsp;5,&nbsp;4,&nbsp;3,&nbsp;2,&nbsp;9,&nbsp;8,&nbsp;7,&nbsp;6,&nbsp;5,&nbsp;4,&nbsp;3,&nbsp;2</li>
</ul>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Posição</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th></tr></thead><tbody><tr><td>Caract.</td><td>Y</td><td>6</td><td>K</td><td>5</td><td>5</td><td>X</td><td>E</td><td>N</td><td>0</td><td>0</td><td>0</td><td>1</td><td>9</td></tr><tr><td>Valor</td><td>41</td><td>6</td><td>27</td><td>5</td><td>5</td><td>40</td><td>21</td><td>30</td><td>0</td><td>0</td><td>0</td><td>1</td><td>9</td></tr><tr><td>Peso</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td><td>9</td><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td></tr></tbody></table></figure>



<p><strong>Soma dos produtos</strong></p>



<pre class="wp-block-code"><code>41×6 + 6×5 + 27×4 + 5×3 + 5×2 + 40×9 + 21×8 + 30×7 + 0 + 0 + 0 + 1×3 + 9×2 = 1 168</code></pre>



<p>Resto da divisão por 11</p>



<pre class="wp-block-code"><code>1 168 mod 11 = 2</code></pre>



<p>Cálculo do segundo dígito (DV₂)</p>



<p>Resto ≥ 2 → 11&nbsp;–&nbsp;2 = <strong>9</strong></p>



<p>Portanto, os dígitos verificadores são <strong>9</strong> e <strong>9</strong>, conferindo com o CNPJ completo:</p>



<pre class="wp-block-code"><code>Y6.K55.XEN/0001-99</code></pre>



<h3 class="wp-block-heading">1.2 Algoritmo JS para validar se um CNPJ é valido</h3>



<p>Será necessário alterar no front-end do sistema, lugares onde tem validação de CNPJ valído, para isso, segue um algoritmo atualizado para fazer essa validação nos inputs informados do sistema:</p>



<pre class="wp-block-code"><code>/**
 * Valida CNPJ alfanumérico (12 caracteres + 2 dígitos)
 * @param {string} input CNPJ formatado ou não (aceita letras e números)
 * @returns {boolean} true se válido, false caso contrário
 */
function validaCnpjAlpha(input) {
  // Remove tudo que não for letra ou dígito
  const cnpj = input.replace(/&#091;^0-9A-Za-z]/g, &#039;&#039;).toUpperCase();
  if (!/^&#091;0-9A-Z]{14}$/.test(cnpj)) return false;

  // Converte caractere para valor: código ASCII - 48
  const toValue = ch =&gt; ch.charCodeAt(0) - 48;

  // Função que calcula um DV (1 ou 2)
  function calcDv(len) {
    let peso = len + 1; // para len=12, peso inicial é 5; para len=13, peso=6
    const soma = cnpj
      .slice(0, len)
      .split(&#039;&#039;)
      .map(toValue)
      .reduce((acc, val) =&gt; {
        acc += val * peso;
        peso = peso &gt; 2 ? peso - 1 : 9;
        return acc;
      }, 0);
    const resto = soma % 11;
    return resto &lt; 2 ? 0 : 11 - resto;
  }

  // Calcula os dois dígitos verificadores
  const dv1 = calcDv(12);
  const dv2 = calcDv(13);

  // Compara com os dois últimos dígitos do input
  return dv1 === toValue(cnpj&#091;12]) &amp;&amp; dv2 === toValue(cnpj&#091;13]);
}

// Exemplo de uso:
console.log(validaCnpjAlpha(&#039;12.ABC.345/01DE-35&#039;)); // true ou false</code></pre>



<h3 class="wp-block-heading">2. Mudança nas mascaras de input</h3>



<p>Com a entrada de letras, as máscaras de campos de CNPJ em formulários e aplicativos precisam ser revisadas:</p>



<ul class="wp-block-list">
<li><strong>Bibliotecas JavaScript/Vue/Angular</strong>: atualize plugins como <em>mask.js</em> para aceitar <code>[0-9A-Za-z]</code> em todas as posições – não apenas dígitos.</li>



<li><strong>React (IMask)</strong>: configure o <em>pattern</em> para alfanumérico e garanta a conversão automática para maiúsculas, evitando inconsistências de case.</li>



<li><strong>UX/UI</strong>: ofereça feedback claro ao usuário sobre o formato (ex.: <code>XX.XXX.XXX/YYYY-00</code>). Considere usar placeholders dinâmicos que exibam letras e números.</li>
</ul>



<p>Essas mudanças exigem testes end‑to‑end (Selenium, Cypress) para garantir que fluxos de cadastro e edição continuem funcionando sem erros.</p>



<h3 class="wp-block-heading">3. Banco de Dados com VARCHAR</h3>



<p>Sistemas que atualmente definem o campo de CNPJ como <code>INT</code> ou <code>BIGINT</code> devem migrar para tipos de texto:</p>



<ul class="wp-block-list">
<li><strong>VARCHAR(14)</strong> ou <strong>CHAR(14)</strong> (12 alfanuméricos + 2 numéricos): garante espaço exato e evita desperdício.</li>



<li><strong>Índices</strong>: recrie índices baseados em strings e avalie o desempenho em consultas que utilizam <code>LIKE</code>, <code>=</code>, ou ordenação. Em bancos muito volumosos, pode ser necessário particionamento ou índices parciais.</li>
</ul>



<p>Planeje a migração de dados com scripts SQL que convertam registros antigos para o novo padrão, incluindo rotinas de validação de integridade.</p>



<h3 class="wp-block-heading">4. Regex e Validações em Código</h3>



<p>Muitos sistemas usam expressões regulares para extrair ou validar CNPJ em strings (logs, relatórios, integrações). Atualize-as para algo que vai validar se oque foi digitado é um CNPJ valído com:</p>



<pre class="wp-block-code"><code>/^&#091;A-Za-z0-9]{2}\.&#091;A-Za-z0-9]{3}\.&#091;A-Za-z0-9]{3}\/&#091;A-Za-z0-9]{4}-\d{2}$/</code></pre>



<p>Localize todos os artefatos de regex (busca em repositórios, IDEs) e adeque-os para evitar falhas silenciosas em processos automáticos.</p>



<h2 class="wp-block-heading">Conclusão e Boas Práticas</h2>



<p>A adoção do CNPJ alfanumérico é inevitável diante do crescimento das empresas no país. Para mitigar riscos:</p>



<ol class="wp-block-list">
<li><strong>Planeje versões</strong>: use feature flags para alternar validações.</li>



<li><strong>Crie ambientes de homologação</strong>: inclua casos de teste com letras em processos críticos.</li>



<li><strong>Documente mudanças</strong>: atualize guias de estilo e manuais de API.</li>



<li><strong>Automatize migrações</strong>: scripts SQL e pipelines de dados devem rodar sem intervenção manual.</li>



<li><strong>Comunique stakeholders</strong>: informe times de desenvolvimento, QA, operação e parceiros externos.</li>
</ol>



<p>Com esses cuidados, seu sistema estará preparado para lidar com o novo padrão de CNPJ, garantindo integridade, performance e compatibilidade.</p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.manualdoprogramador.com/cnpj-alfanumerico-desafios-e-impactos-nos-sistemas-atuais/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1213</post-id>	</item>
		<item>
		<title>Dominando a Arte da Centralização de Divs:  Diferentes Métodos e Quando Usá-los</title>
		<link>https://www.manualdoprogramador.com/dominando-a-arte-da-centralizacao-de-divs-diferentes-metodos-e-quando-usa-los/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=dominando-a-arte-da-centralizacao-de-divs-diferentes-metodos-e-quando-usa-los</link>
					<comments>https://www.manualdoprogramador.com/dominando-a-arte-da-centralizacao-de-divs-diferentes-metodos-e-quando-usa-los/#respond</comments>
		
		<dc:creator><![CDATA[Davi Antonaji]]></dc:creator>
		<pubDate>Mon, 15 Apr 2024 12:55:57 +0000</pubDate>
				<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[centralização]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS Grid]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[Flexbox]]></category>
		<category><![CDATA[layout responsivo]]></category>
		<category><![CDATA[programação]]></category>
		<category><![CDATA[web design]]></category>
		<guid isPermaLink="false">https://www.manualdoprogramador.com/?p=973</guid>

					<description><![CDATA[Centralizar elementos é crucial em web design e há vários métodos com vantagens e contextos próprios. Com o CSS Flexbox, a centralização é simplificada em ambas as direções dentro de um contêiner, sendo perfeito para layouts responsivos. O CSS Grid oferece controle detalhado e centralização eficaz, ideal para layouts complexos. Margens automáticas são uma forma clássica de centralizar horizontalmente, com ampla compatibilidade, mas menos flexibilidade que os métodos anteriores. Ao escolher a técnica de centralização adequada, considere as necessidades do seu projeto para obter um layout web atraente e funcional.]]></description>
										<content:encoded><![CDATA[
<p>A centralização de elementos é uma habilidade fundamental no desenvolvimento web. No entanto, existem várias maneiras de alcançar esse objetivo, e cada uma tem suas próprias vantagens e casos de uso. Neste artigo, vamos explorar diferentes métodos para centralizar uma div e discutir quando é apropriado usar cada um deles.</p>



<h3 class="wp-block-heading"><strong>Método 1: Centralização com CSS Flexbox</strong></h3>



<p>O Flexbox é uma ferramenta poderosa para layouts responsivos e centralização de elementos. Aqui está um exemplo de como centralizar uma div vertical e horizontalmente usando Flexbox:</p>



<pre class="wp-block-code"><code>.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* Altura da div */
}</code></pre>



<p><strong>Explicação:</strong> O uso do Flexbox simplifica a centralização, proporcionando um código limpo e eficiente. É ideal para situações em que você precisa centralizar elementos em relação ao contêiner pai.</p>



<h3 class="wp-block-heading"><strong>Método 2: Centralização com CSS Grid</strong></h3>



<p>O CSS Grid também oferece uma maneira elegante de centralizar elementos. Veja como você pode fazer isso:</p>



<pre class="wp-block-code"><code>.container {
  display: grid;
  place-items: center;
  height: 300px; /* Altura da div */
}</code></pre>



<p><strong>Explicação:</strong> O CSS Grid é ótimo para criar layouts complexos, mas também pode ser usado para centralizar elementos de forma simples e eficaz. Ele funciona bem quando você precisa de mais controle sobre o layout.</p>



<h3 class="wp-block-heading"><strong>Método 3: Centralização com Margens Automáticas</strong></h3>



<p>Uma maneira clássica de centralizar uma div é usando margens automáticas. Veja como fazer isso:</p>



<pre class="wp-block-code"><code>.container {
  margin: 0 auto;
  width: 50%; /* Largura da div */
}</code></pre>



<p><strong>Explicação:</strong> Embora esse método seja simples e amplamente suportado, pode ser menos flexível em comparação com Flexbox e CSS Grid. No entanto, ainda é uma opção válida para centralizar elementos horizontalmente.</p>



<p><strong>Conclusão:</strong> Dominar a arte da centralização de divs é essencial para criar layouts web atraentes e funcionais. Neste artigo, exploramos três métodos diferentes &#8211; Flexbox, CSS Grid e margens automáticas &#8211; e discutimos seus pontos fortes e fracos. Ao escolher o método certo para centralizar seus elementos, leve em consideração o contexto do seu projeto e suas necessidades específicas de layout.</p>



<p>Experimente esses métodos em seu próximo projeto e descubra qual funciona melhor para você!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.manualdoprogramador.com/dominando-a-arte-da-centralizacao-de-divs-diferentes-metodos-e-quando-usa-los/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">973</post-id>	</item>
		<item>
		<title>O Impacto Oculto de 11 Linhas de Código</title>
		<link>https://www.manualdoprogramador.com/o-impacto-oculto-de-11-linhas-de-codigo/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=o-impacto-oculto-de-11-linhas-de-codigo</link>
					<comments>https://www.manualdoprogramador.com/o-impacto-oculto-de-11-linhas-de-codigo/#respond</comments>
		
		<dc:creator><![CDATA[Davi Antonaji]]></dc:creator>
		<pubDate>Fri, 12 Apr 2024 23:00:00 +0000</pubDate>
				<category><![CDATA[Back-end]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Programação]]></category>
		<guid isPermaLink="false">https://www.manualdoprogramador.com/?p=960</guid>

					<description><![CDATA[Em 22 de março de 2016, um incidente surpreendente deixou milhares de desenvolvedores de JavaScript perplexos e preocupados. Serviços online [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Em 22 de março de 2016, um incidente surpreendente deixou milhares de desenvolvedores de JavaScript perplexos e preocupados. Serviços online começaram a apresentar comportamentos estranhos e inesperados, deixando a comunidade de desenvolvimento em estado de alerta. O que estava acontecendo era um resultado inesperado de um incidente que começou com a remoção de um punhado de linhas de código, algo que poderia se repetir a qualquer momento, sem aviso prévio.</p>



<p>Para entender completamente o que ocorreu em 22 de março, é necessário retroceder alguns dias antes e mergulhar em uma série de emails entre o programador turco Azer Koçulu e um advogado especializado em patentes.</p>



<p>Para compreender melhor o cenário, é preciso viajar no tempo até 1985 e conhecer a filosofia de Azer Koçulu. Esse desenvolvedor autodidata, residente em Oakland, Califórnia, sempre foi um fervoroso defensor do código-fonte aberto. Inspirado por frases como &#8220;o ato fundamental de amizade entre programadores é o compartilhamento de programas&#8221;, proferida por Richard Stallman em 1985, Koçulu sempre sonhou em fazer parte da comunidade de código aberto. Em um gesto de gratidão pelas lições que aprendeu com outros programadores, Koçulu se tornou um colaborador ativo na plataforma npm.</p>



<p>&#8220;Devo minha trajetória às pessoas que nunca abandonaram a filosofia do código aberto&#8221;, declarou Koçulu em uma entrevista. Ele contribuiu com 273 pacotes diversos na plataforma, cada um deles projetado para facilitar a vida de seus colegas desenvolvedores. Devido à sua longa associação com o npm, ele conseguiu reservar palavras-chave significativas para nomear seus pacotes, como &#8220;rnd&#8221; e &#8220;strip&#8221;, por exemplo.</p>



<p>No entanto, foi um pacote com um nome aparentemente trivial que desencadeou uma série de eventos que afetaria a internet como a conhecemos. Esse pacote era simplesmente chamado de &#8220;kik&#8221;.</p>



<h3 class="wp-block-heading">Conflito</h3>



<p> O problema com o pacote &#8220;kik&#8221; surgiu quando a empresa canadense de mensagens Kik se preparava para lançar seu próprio pacote na plataforma npm. Em 11 de março de 2016, um advogado de patentes chamado Bob Stratton entrou em contato com Azer Koçulu, explicando que ele teria que mudar o nome de seu pacote, pois &#8220;kik&#8221; era uma marca registrada em muitos países ao redor do mundo. Koçulu recusou a colaboração, argumentando que estava trabalhando no projeto há anos.</p>



<p>Em resposta, Stratton elevou o tom da conversa: &#8220;Não queremos ser excessivamente rigorosos, mas essa é uma marca registrada na maioria dos países ao redor do mundo, e se você realmente lançar um projeto de código aberto chamado &#8216;kik&#8217;, nossos advogados de marcas registradas tomarão medidas legais.&#8221;</p>



<p>Koçulu também respondeu de maneira agressiva, utilizando linguagem inapropriada. Nesse ponto, Stratton ofereceu uma quantia em dinheiro como incentivo para a mudança de nome, mas os ânimos já estavam exaltados.</p>



<p>O caso poderia ter se desenrolado nos tribunais, mas, surpreendentemente, ele foi parar nas instalações do próprio npm. Apesar de fornecer suporte gratuito à comunidade de código aberto, o modelo de negócios do npm dependia do armazenamento pago de código de grandes empresas. Em outras palavras, eram as assinaturas de empresas como a Kik que permitiam ao npm oferecer serviços gratuitos para entusiastas como Koçulu. O npm decidiu apoiar a empresa canadense.</p>



<p>Isaac Schlueter, CEO do npm, entrou em contato com o desenvolvedor para explicar a situação. O npm estava prestes a transferir o nome &#8220;kik&#8221; para a empresa Kik, sem o consentimento de Koçulu. Para o programador turco, isso parecia uma traição aos princípios do software livre.</p>



<p>Desiludido, Koçulu tomou a decisão radical de remover todos os seus pacotes do npm, sem exceção. Dois dias depois, a cadeia de eventos que abalaria a internet estava em curso.</p>



<h3 class="wp-block-heading">As 11 Linhas Fundamentais</h3>



<p> O que causou a disrupção na internet não foi a remoção de &#8220;kik&#8221;, &#8220;rnd&#8221; ou mesmo &#8220;strip&#8221;, mas sim a exclusão de &#8220;left-pad&#8221;, um pacote aparentemente insignificante que Azer Koçulu mal se lembrava de ter criado. Contudo, esse pacote continha apenas 11 linhas de código:</p>



<pre class="wp-block-code"><code>module.exports = leftpad;
function leftpad (str, len, ch)  {
	str = String(str);
	var i = -1;
	if (!ch &amp;&amp; ch !== 0)
		ch = &#039; &#039;;
	len = len - str.length;
	while (++i &lt; len)  {
		str = ch + str;
	}
	return str;
}</code></pre>



<p>Essa função não era complexa em sua essência, nem difícil de implementar. Basicamente, &#8220;left-pad&#8221; tinha a função de pegar uma string qualquer e adicionar outra string repetidamente à esquerda, como ilustrado aqui:</p>



<pre class="wp-block-code"><code>&lt;code&gt;leftPad(17, 5, 0) // Retorna &quot;00017&quot;</code></code></pre>



<p>De forma inexplicável, desenvolvedores de plataformas renomadas como Facebook, Netflix, Paypal e Reddit, que nunca tinham ouvido falar de Azer Koçulu ou de &#8220;left-pad&#8221;, de repente se depararam com mensagens de erro em suas aplicações. Reclamações surgiram de diferentes partes do mundo, incluindo Austrália, Alemanha, República Checa e Estados Unidos, todos buscando entender o significado da mensagem de erro &#8220;Npm ERR! 404 &#8216;left-pad&#8217; is not in the npm registry.&#8221;</p>



<p>Indiretamente, a crise também afetou a Kik, já que a falha impediu o funcionamento de um de seus softwares. Nesse momento, o mundo da tecnologia estava dando voltas.</p>



<p>Foi um efeito cascata que ninguém havia previsto. Surpreendentemente, &#8220;left-pad&#8221; estava incorporado a mais de 2 milhões de projetos de JavaScript. Este pacote, com uma única função, tinha como um de seus dependentes o pacote &#8220;line-numbers&#8221;, responsável por adicionar números de linha ao texto. Por sua vez, &#8220;line-numbers&#8221; era uma dependência do Babel, um projeto significativo que permitia aos desenvolvedores escrever em EcmaScript 6 (ou ES6) e transformar o código resultante em ES5, compatível com a maioria dos navegadores. Curiosamente, o Babel foi criado por Sebastian McKenzie, um estudante do Ensino Médio da Austrália.</p>



<p>&#8220;Toda a infraestrutura digital moderna&#8221; &#8220;Um projeto mantido anonimamente por alguém no Nebraska desde 2003&#8221; O Babel, por sua vez, era essencial para o React Native, o framework móvel desenvolvido pelo Facebook, mas adotado por inúmeros projetos em todo o mundo. O React Native dependia do Babel, que por sua vez dependia de &#8220;line-numbers&#8221;, que dependia de &#8220;left-pad&#8221;. O estrago estava feito.</p>



<p>Resolvendo o Problema Enquanto Azer Koçulu compartilhava suas motivações em uma postagem no Medium (agora excluída), nos bastidores do npm, o problema estava sendo identificado. Uma decisão sem precedentes foi tomada: reverter a remoção do pacote &#8220;left-pad&#8221;.</p>



<p>Cameron Westland, associado ao npm, interveio e lançou uma versão funcionalmente idêntica da função &#8220;left-pad&#8221;, mantendo o mesmo nome do pacote, que estava disponível. No entanto, isso não resolveu o problema, já que algumas dependências ainda estavam esperando explicitamente pela versão 0.3.3, incluindo o &#8220;line-numbers&#8221;. O npm teve que recorrer a um backup e restaurar a versão original de &#8220;left-pad&#8221; de Koçulu.</p>



<p>Laurie Voss, diretora de tecnologia do npm, explicou a decisão: &#8220;Cancelar a &#8216;despublicação&#8217; é uma ação sem precedentes que estamos tomando, dada a gravidade e a natureza generalizada da quebra, e não é feita levianamente. Esta ação coloca os interesses mais amplos da comunidade de usuários do npm em desacordo com os desejos de um autor; nós escolhemos as necessidades de muitos.&#8221;</p>



<p>A crise durou apenas duas horas, mas durante esse período, a internet foi lançada em um estado de perplexidade devido a 11 linhas de código e à complexa teia de dependências que se entrelaçam nos processos de desenvolvimento. Após o incidente, o Babel foi atualizado para não depender mais do &#8220;line-numbers&#8221;.</p>



<p>O pacote &#8220;left-pad&#8221; permanece até hoje, agora marcado como obsoleto no npm. Suas onze linhas de código têm 143 forks no GitHub, e mais de 2.170.445 repositórios ainda o listam como uma de suas dependências.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.manualdoprogramador.com/o-impacto-oculto-de-11-linhas-de-codigo/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">960</post-id>	</item>
		<item>
		<title>CSS Timing Function &#8211; Dê vida as animações</title>
		<link>https://www.manualdoprogramador.com/css-timing-function/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=css-timing-function</link>
					<comments>https://www.manualdoprogramador.com/css-timing-function/#respond</comments>
		
		<dc:creator><![CDATA[Silvio Cesar Junior]]></dc:creator>
		<pubDate>Sun, 23 Jul 2023 18:11:23 +0000</pubDate>
				<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Programação]]></category>
		<guid isPermaLink="false">https://www.manualdoprogramador.com/?p=922</guid>

					<description><![CDATA[Hoje, vamos explorar uma poderosa ferramenta do CSS que pode elevar o nível de suas animações em páginas da web: [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-full"><img data-recalc-dims="1" decoding="async" width="600" height="125" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/linear.png?resize=600%2C125&#038;ssl=1" alt="Exemplos de utilização do CSS Timing Function" class="wp-image-925" srcset="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/linear.png?w=600&amp;ssl=1 600w, https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/linear.png?resize=300%2C63&amp;ssl=1 300w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



<p>Hoje, vamos explorar uma poderosa ferramenta do CSS que pode elevar o nível de suas animações em páginas da web: o <em>CSS Timing Function.</em> Se você deseja criar transições suaves, efeitos envolventes e tornar a experiência do usuário ainda mais agradável, este é o lugar certo para aprender tudo sobre essa propriedade. Vamos mergulhar no mundo das animações e descobrir como utilizar o CSS Timing Function para encantar seus visitantes.</p>



<h3 class="wp-block-heading"><strong>O que é o CSS Timing Function?</strong></h3>



<p>O CSS Timing Function é um tipo de propriedade que controla o ritmo e a velocidade de animações e transições em páginas da web. Em outras palavras, ele define como a animação progride ao longo do tempo. Essa propriedade trabalha em conjunto com outras, como <code>animation-duration</code> e <code>animation-timing-function</code>, para criar efeitos visuais atraentes e fluidos.</p>



<h3 class="wp-block-heading"><strong>Diferentes Formas do CSS Timing Function</strong></h3>



<p>Essa propriedade oferece diversas formas para personalizar o comportamento das suas animações. Cada forma possui características únicas e pode se adequar melhor a diferentes contextos. Vamos explorar algumas delas:</p>



<p><strong>ease:</strong> Essa é forma padrão. Inicia a animação lentamente, acelera no meio e desacelera no final. Perfeito para criar transições naturais e suaves.</p>



<p><strong>ease-in:</strong> A animação começa lentamente e acelera à medida que progride. Ideal para destacar elementos no início de uma transição.</p>



<p><strong>ease-out:</strong> Ao contrário do ease-in, a animação inicia rapidamente e desacelera no final. Ótimo para focar na saída dos elementos.</p>



<p><strong>ease-in-out: </strong>Combinação das funções ease-in e ease-out. A animação começa lentamente, acelera no meio e desacelera novamente no final.</p>



<p><strong>linear: </strong>A animação avança de forma constante e uniforme ao longo do tempo. Ideal para criar movimentos diretos e previsíveis.</p>



<p><strong>cubic-bezier: </strong>Oferece a possibilidade de criar uma curva de velocidade personalizada usando pontos de controle. Permite controle total sobre a animação.</p>



<h3 class="wp-block-heading">Exemplo:</h3>



<iframe width="100%" height="900" src="//jsfiddle.net/juniorcoding/utperx6f/3/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>



<p></p>



<h3 class="wp-block-heading">Conclusão</h3>



<p>O CSS Timing Function é uma ferramenta valiosa para criar animações cativantes e proporcionar uma experiência de usuário memorável em suas páginas da web. Ao dominar as diversas formas dessa propriedade, você terá o poder de criar transições suaves e envolventes, encantando seus visitantes e tornando o seu site ainda mais atrativo.</p>



<p>Espero que tenham gostado do artigo e que aproveitem ao máximo essa poderosa propriedade do CSS. Até a próxima!</p>



<p>Aproveite e confira os posts no Instagram do <a href="https://www.instagram.com/junior.coding/">@junior.coding</a> e <a href="https://www.instagram.com/blogmdp/">@blogmdp</a>.</p>



<p><a href="https://www.manualdoprogramador.com/display-grid-vs-display-flexbox/">CSS Grid vs Flexbox: Qual escolher para seu layout?</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.manualdoprogramador.com/css-timing-function/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">922</post-id>	</item>
		<item>
		<title>NVM: A ferramenta essencial para gerenciar versões do Node.js!</title>
		<link>https://www.manualdoprogramador.com/nvm-a-ferramenta-essencial-para-gerenciar-versoes-do-node-js/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=nvm-a-ferramenta-essencial-para-gerenciar-versoes-do-node-js</link>
					<comments>https://www.manualdoprogramador.com/nvm-a-ferramenta-essencial-para-gerenciar-versoes-do-node-js/#respond</comments>
		
		<dc:creator><![CDATA[Guilherme Scarmagnani]]></dc:creator>
		<pubDate>Tue, 11 Jul 2023 15:00:00 +0000</pubDate>
				<category><![CDATA[Back-end]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[desenvolvimento web]]></category>
		<category><![CDATA[ferramenta]]></category>
		<category><![CDATA[gerenciamento de versões]]></category>
		<category><![CDATA[Node.js]]></category>
		<category><![CDATA[NVM]]></category>
		<guid isPermaLink="false">https://www.manualdoprogramador.com/?p=815</guid>

					<description><![CDATA[Olá leitores!Hoje vamos explorar uma ferramenta excelente: o Node Version Manager. O que é? NVM, que significa Node Version Manager, [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-full"><img data-recalc-dims="1" decoding="async" width="1400" height="927" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/pexels-photo-574071.jpeg?resize=1400%2C927&#038;ssl=1" alt="person encoding in laptop" class="wp-image-832"/></figure>



<p>Olá leitores!<br>Hoje vamos explorar uma ferramenta excelente: o Node Version Manager. </p>



<h4 class="wp-block-heading">O que é?</h4>



<p>NVM, que significa Node Version Manager, é uma ferramenta utilizada para gerenciar múltiplas versões do Node.js em um sistema operacional. Embora originalmente tenha sido desenvolvida para sistemas Unix-like, como Linux e macOS, existem algumas versões adaptadas do NVM disponíveis para o Windows.</p>



<h4 class="wp-block-heading">E porque eu deveria utilizar?</h4>



<p>O NVM é útil quando você precisa alternar entre diferentes versões do Node.js para diferentes projetos ou quando deseja testar sua aplicação em diferentes versões do Node.js para garantir compatibilidade.</p>



<h4 class="wp-block-heading">Como instalar no Windows</h4>



<p>Abra o seu navegador e acesse o repositório oficial do NVM para Windows no GitHub: <a href="https://github.com/coreybutler/nvm-windows">https://github.com/coreybutler/nvm-windows</a>.</p>



<ul class="wp-block-list">
<li>Na página do repositório, clique no botão &#8220;Releases&#8221; para acessar a seção de lançamentos.</li>



<li>Role a página até encontrar a seção &#8220;Assets&#8221; e baixe o arquivo ZIP mais recente, que corresponde à versão estável do NVM para Windows.</li>



<li>Extraia o conteúdo do arquivo ZIP para um diretório de sua escolha. Recomenda-se extrair em um diretório sem espaços no nome, como &#8220;C:\nvm&#8221;.</li>



<li>Abra o prompt de comando ou o PowerShell como administrador.</li>



<li>Navegue até o diretório onde você extraiu o conteúdo do arquivo ZIP usando o comando cd. Por exemplo, se você extraiu o NVM em &#8220;C:\nvm&#8221;, digite cd C:\nvm.</li>
</ul>



<h4 class="wp-block-heading">E como utilizar?</h4>



<p>Primeiro vamos baixar a versão mais recente do Node.js que é <em>20.4.0</em> na data atual do post.</p>



<pre class="wp-block-code"><code>nvm install latest</code></pre>



<figure class="wp-block-image size-full is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-INSTALL-LATEST.png?resize=560%2C217&#038;ssl=1" alt="" class="wp-image-816" width="560" height="217"/></figure>



<p><em>Aguardamos alguns segundos… Instalado com sucesso!.</em></p>



<p>Antes de proseguir vamos entender o que o NVM fez:<br>1 &#8211; Baixou a versão mais recente do Node.js.<br>2 &#8211; Extraiu o Node e o NPM.<br>3 &#8211; Instalou o Node e a versão do NPM mais recente para a versão do Node.</p>



<p>Agora vamos utilizar o comando abaixo para listar todas as versões instaladas do Node.js.</p>



<pre class="wp-block-code"><code>nvm list</code></pre>



<figure class="wp-block-image size-full is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/Captura-de-tela-2023-07-10-101049.png?resize=596%2C214&#038;ssl=1" alt="" class="wp-image-868" width="596" height="214" srcset="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/Captura-de-tela-2023-07-10-101049.png?w=442&amp;ssl=1 442w, https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/Captura-de-tela-2023-07-10-101049.png?resize=300%2C107&amp;ssl=1 300w" sizes="(max-width: 596px) 100vw, 596px" /></figure>



<p>E por ultimo, para utilizar a versão nova instalada do Node.js vamos executar</p>



<pre class="wp-block-code"><code>nvm use 20.4.0</code></pre>



<figure class="wp-block-image size-full is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-USE.png?resize=595%2C106&#038;ssl=1" alt="" class="wp-image-817" width="595" height="106"/></figure>



<p>E pronto simples assim ja estamos utilizando a versão mais recente do Node.js!</p>



<h5 class="wp-block-heading">E para completar</h5>



<p>E para completar, vamos instalar outra versão do Node.js.<br>Primeiro vamos instalar a ultima versão do Node LTS que atualmente é a 18.16.0, para instalar basta digitar:</p>



<pre class="wp-block-code"><code>nvm install 18.16.0</code></pre>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="590" height="198" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-INSTALL-18.16.0.png?resize=590%2C198&#038;ssl=1" alt="" class="wp-image-869" srcset="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-INSTALL-18.16.0.png?w=590&amp;ssl=1 590w, https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-INSTALL-18.16.0.png?resize=300%2C101&amp;ssl=1 300w" sizes="(max-width: 590px) 100vw, 590px" /></figure>



<p>Instalado com sucesso!, agora iremos setar ela, e como ja vimos nvm use xxx</p>



<pre class="wp-block-code"><code>nvm use 18.16.0</code></pre>



<figure class="wp-block-image size-full is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-USE-18.16.0.png?resize=586%2C83&#038;ssl=1" alt="" class="wp-image-870" width="586" height="83" srcset="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-USE-18.16.0.png?w=374&amp;ssl=1 374w, https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/NVM-USE-18.16.0.png?resize=300%2C43&amp;ssl=1 300w" sizes="(max-width: 586px) 100vw, 586px" /></figure>



<p>Versão do node setada com sucesso, se usarmos node -v veremos que a versão atual utilizada é 18.16.0.+</p>



<pre class="wp-block-code"><code>node -v</code></pre>



<figure class="wp-block-image size-full is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/node-v.png?resize=591%2C95&#038;ssl=1" alt="" class="wp-image-871" width="591" height="95"/></figure>



<p></p>



<h3 class="wp-block-heading">Comandos uteis</h3>



<pre class="wp-block-code"><code>nvm use x.x.x</code></pre>



<p>Define a versão do Node.js a ser utilizada no ambiente atual.</p>



<pre class="wp-block-code"><code>nvm list</code></pre>



<p>Lista as versões do Node.js instaladas no sistema.</p>



<pre class="wp-block-code"><code>nvm install x.x.x</code></pre>



<p>Instala uma versão específica do Node.js.</p>



<pre class="wp-block-code"><code>nvm uninstall x.x.x</code></pre>



<p>Desinstala uma versão específica do Node.js.</p>



<p>Certifique-se de substituir &#8220;x.x.x&#8221; pelos números correspondentes à versão do Node.js que deseja utilizar.<br>Para ver todos os comandos disponiveis basta executar:  <code>nvm h</code></p>



<p>Repositório oficial do NVM: https://github.com/coreybutler/nvm-windows</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.manualdoprogramador.com/nvm-a-ferramenta-essencial-para-gerenciar-versoes-do-node-js/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">815</post-id>	</item>
		<item>
		<title>A importância do design de interfaces de usuário (UI) e experiência do usuário (UX)</title>
		<link>https://www.manualdoprogramador.com/a-importancia-do-design-de-interfaces-de-usuario-ui-e-experiencia-do-usuario-ux/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=a-importancia-do-design-de-interfaces-de-usuario-ui-e-experiencia-do-usuario-ux</link>
					<comments>https://www.manualdoprogramador.com/a-importancia-do-design-de-interfaces-de-usuario-ui-e-experiencia-do-usuario-ux/#respond</comments>
		
		<dc:creator><![CDATA[Davi Antonaji]]></dc:creator>
		<pubDate>Mon, 10 Jul 2023 14:00:00 +0000</pubDate>
				<category><![CDATA[Carreira]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Programação]]></category>
		<category><![CDATA[design de interfaces de usuário]]></category>
		<category><![CDATA[experiência do usuário]]></category>
		<category><![CDATA[importância do design]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[usabilidade]]></category>
		<category><![CDATA[UX]]></category>
		<guid isPermaLink="false">https://www.manualdoprogramador.com/?p=762</guid>

					<description><![CDATA[Olá leitores, hoje vamos aprender sobre a importância do design de interfaces de usuário (UI) e experiência do usuário (UX). [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1400" height="1050" src="https://i0.wp.com/www.manualdoprogramador.com/wp-content/uploads/2023/07/pexels-photo-577585.jpeg?resize=1400%2C1050&#038;ssl=1" alt="data codes through eyeglasses" class="wp-image-830"/></figure>



<p>Olá leitores, hoje vamos aprender sobre a importância do design de interfaces de usuário (UI) e experiência do usuário (UX). Quando você usa um aplicativo, visita um site ou interage com qualquer sistema digital, a qualidade do design da interface e a experiência do usuário desempenham um papel crucial em sua satisfação e engajamento.</p>



<p>Vamos começar com o design de interfaces de usuário, também conhecido como UI. A UI se concentra na aparência visual e na disposição dos elementos de uma interface. Uma interface bem projetada é visualmente atraente, intuitiva e fácil de usar. Ela deve levar em consideração fatores como cores, tipografia, ícones e layout para criar uma experiência agradável e eficiente para o usuário.</p>



<p>Imagine um aplicativo de compras online com uma UI bem projetada. Os botões são facilmente identificáveis, as informações são organizadas de forma clara e as cores são usadas de maneira estratégica para direcionar a atenção do usuário. Esses elementos contribuem para uma experiência positiva, onde o usuário se sente confortável e capaz de navegar pelo aplicativo com facilidade.</p>



<p>Por outro lado, uma UI mal projetada pode resultar em frustração e confusão. Elementos desalinhados, cores conflitantes ou botões mal posicionados podem levar o usuário a cometer erros ou abandonar a interação com o sistema. Imagine tentar usar um aplicativo de pagamento com uma interface confusa e desorganizada. Isso certamente causaria uma má experiência e poderia até mesmo levar o usuário a desistir de usar o serviço.</p>



<p>Agora, vamos falar sobre a experiência do usuário, ou UX. A UX envolve o design de todo o processo de interação do usuário com um produto ou serviço. Ela se concentra em proporcionar uma experiência agradável, útil e satisfatória ao usuário. Um bom design de UX leva em consideração as necessidades, expectativas e objetivos do usuário, garantindo que suas tarefas sejam realizadas de forma eficiente e agradável.</p>



<p>Um exemplo de uma boa experiência do usuário é um site de reservas de viagens que oferece um processo de reserva simplificado e informações relevantes sobre destinos. O usuário consegue encontrar rapidamente as opções de viagem desejadas, visualizar detalhes importantes e finalizar a reserva com facilidade. A jornada do usuário é suave e sem complicações, resultando em uma experiência positiva que o incentiva a retornar ao site no futuro.</p>



<p>Por outro lado, uma má experiência do usuário pode levar à insatisfação e à perda de usuários. Imagine um aplicativo de streaming de vídeo com um sistema de navegação confuso e uma reprodução inconsistente. O usuário teria dificuldade em encontrar e assistir aos conteúdos desejados, o que resultaria em uma experiência frustrante e, eventualmente, poderia levá-lo a procurar um serviço alternativo.</p>



<p>Portanto, o design de interfaces de usuário (UI) e a experiência do usuário (UX) são elementos cruciais no desenvolvimento de produtos e serviços digitais. Uma boa UI e UX contribuem para uma experiência agradável, intuitiva e eficiente, aumentando a satisfação do usuário e a probabilidade de sucesso do produto. Portanto, ao criar um sistema digital, lembre-se de dedicar tempo e esforço para projetar uma UI atraente e uma UX satisfatória. Isso fará toda a diferença na percepção e adoção do seu produto pelos usuários.</p>



<p>Espero que este post tenha ajudado você a entender a importância do design de interfaces de usuário (UI) e experiência do usuário (UX). Se você tiver mais exemplos ou histórias para compartilhar, sinta-se à vontade para deixar seus comentários abaixo. Até a próxima!</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.manualdoprogramador.com/a-importancia-do-design-de-interfaces-de-usuario-ui-e-experiencia-do-usuario-ux/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">762</post-id>	</item>
	</channel>
</rss>
