CodeCrush - Abrace o ritmo acelerado da evolução tecnológica https://codecrush.com.br/blog Explore tendências, notícias e dicas sobre tecnologia e muito mais no CODE CRUSH - seu destino definitivo no universo digital. pt-BR devhenrico@gmail.com (Henrico Piubello) devhenrico@gmail.com (Henrico Piubello) Sat, 29 Jul 2023 00:00:00 GMT https://codecrush.com.br/blog/5-sites-para-aprender-css 5 Sites para Aprender CSS Jogando: Flexbox e Grid https://codecrush.com.br/blog/5-sites-para-aprender-css Flexbox Froggy, Flexbox Zombies, Grid Garden, Flexbox Defense e Grid Critters ensinam CSS Flexbox e Grid com jogos interativos no navegador. Sat, 29 Jul 2023 00:00:00 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIs https://codecrush.com.br/blog/a-arquitetura-e-as-metodologias-modernas-do-desenvolvimento-web-da-ide Desenvolvimento Web Moderno: Arquiteturas e Metodologias https://codecrush.com.br/blog/a-arquitetura-e-as-metodologias-modernas-do-desenvolvimento-web-da-ide Desenvolvimento web moderno une arquiteturas como microsserviços e serverless a práticas ágeis e DevOps para criar aplicações escaláveis e seguras. Sun, 21 Jun 2026 15:44:35 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIsDevOps e Ferramentas https://codecrush.com.br/blog/api-facebook-graph Facebook Graph API: o que é e como implementar https://codecrush.com.br/blog/api-facebook-graph A Graph API é a interface HTTP oficial da Meta para ler e publicar dados do Facebook. Veja como registrar o app, autenticar usuários e fazer chamadas. Fri, 29 Mar 2024 00:00:00 GMT devhenrico@gmail.com (Henrico Piubello) Web e APIsDesenvolvimento Facebook Graph API Example

Facebook Graph API Example

``` Dentro da função `getUserData()`, a URL da Graph API pede os campos básicos do usuário (`id`, `name` e `email`) via parâmetro `fields`. O método `fetch()` faz a solicitação GET, e a resposta JSON é exibida na página com `innerHTML`. Substitua `COLOQUE_SEU_TOKEN_DE_ACESSO_AQUI` pelo token real obtido no login do Facebook. Em produção, nunca exponha tokens de longa duração ou a chave secreta no front-end — mantenha-os no servidor e repasse ao navegador apenas tokens curtos com o mínimo de permissões. ## Conclusão A Facebook Graph API continua sendo a forma mais confiável de integrar um produto ao maior grafo social do mundo — desde que você jogue pelas regras da Meta: fixe a versão da API, peça só as permissões necessárias, monitore os limites de taxa e trate a expiração de tokens desde o primeiro commit. O custo de ignorar esses detalhes é um app bloqueado na revisão ou quebrado numa depreciação de versão. Comece pequeno no Graph API Explorer, valide o fluxo de login e só então leve as chamadas para o código — aqui no CodeCrush, essa é a ordem que recomendamos para qualquer integração com APIs de terceiros.]]> https://codecrush.com.br/blog/api-google-maps Google Maps API: o que é, como implementar e quanto custa https://codecrush.com.br/blog/api-google-maps A Google Maps API permite incorporar mapas interativos, rotas e geolocalização em sites e apps; requer chave de API e tem 10.000 chamadas gratuitas por mês. Fri, 29 Mar 2024 20:40:00 GMT devhenrico@gmail.com (Henrico Piubello) Web e APIs ` das suas páginas HTML: ```html ``` Substitua `SUA_CHAVE_DE_API` pela chave gerada no passo anterior. O parâmetro `loading=async` é a forma recomendada pelo Google de carregar a biblioteca sem bloquear a renderização da página. ### Passo 3: adicione um mapa à página Com a biblioteca carregada, poucas linhas de código exibem um mapa com marcador: ```html
``` Este código cria um mapa centrado nas coordenadas especificadas e adiciona um marcador ao local. A partir daí, a [documentação de marcadores](https://developers.google.com/maps/documentation/javascript/markers#add) mostra como adicionar polígonos, linhas e camadas de tráfego em tempo real. ## Exemplos práticos e repositórios de referência Ver código real acelera o aprendizado da Google Maps API. Três repositórios open source são bons pontos de partida: 1. **[Uber Clone](https://github.com/SimCoderYoutube/UberClone)**: código-fonte de um clone do aplicativo Uber, com mapeamento e direções usando a Google Maps API. 2. **[React Native Maps](https://github.com/react-native-maps/react-native-maps)**: pacote npm que integra mapas nativos do Google em aplicativos React Native — útil para quem já está [iniciando em React](/blog/iniciando-com-react) e quer levar mapas para o mobile. 3. **[Restaurant Reviews App](https://github.com/udacity/mws-restaurant-stage-1)**: projeto da Udacity que exibe avaliações de restaurantes em um mapa interativo. Além desses projetos, quatro implementações práticas cobrem a maioria das necessidades do dia a dia: geocodificação de endereços com a [Geocoding API](https://developers.google.com/maps/documentation/geocoding/overview#geocoding_requests) para buscas baseadas em localização; cálculo de rotas para apps de transporte e entregas; a [camada de tráfego em tempo real](https://developers.google.com/maps/documentation/javascript/examples/layer-traffic) para ajudar usuários a evitar congestionamentos; e marcadores, polígonos e linhas para destacar pontos de interesse e áreas de cobertura. Combinando esses blocos, dá para construir desde um simples mapa de contato até uma plataforma logística completa. ## Conclusão A Google Maps API continua sendo a escolha mais segura para localização em produção: nenhuma alternativa combina a mesma cobertura global, dados de tráfego em tempo real e ecossistema de bibliotecas. O ponto de atenção mudou de "como implementar" para "o que usar e quanto custa" — com o modelo de cotas por SKU vigente desde março de 2025 e as APIs Legacy sendo aposentadas, vale começar qualquer projeto novo já na Routes API e na Places API (New), com a chave restrita por domínio e alertas de orçamento configurados desde o primeiro dia.]]> https://codecrush.com.br/blog/comunicacao-em-redes Comunicação em Redes: Protocolos, Modelo OSI e TCP/IP https://codecrush.com.br/blog/comunicacao-em-redes Comunicação em redes é a troca de dados entre dispositivos regida por protocolos. Entenda o Modelo OSI de 7 camadas, TCP/IP e os modelos de serviço. Sat, 09 Sep 2023 00:00:00 GMT devhenrico@gmail.com (Henrico Piubello) Hardware e SistemasWeb e APIs https://codecrush.com.br/blog/desenvolvimento-de-plugins-a-arte-de-estender-e-personalizar-software Desenvolvimento de Plugins: Como Estender Software https://codecrush.com.br/blog/desenvolvimento-de-plugins-a-arte-de-estender-e-personalizar-software Plugin é um módulo que adiciona funções a uma aplicação via APIs e pontos de extensão, sem alterar o código-fonte. Veja tipos, vantagens e como criar. Mon, 29 Jun 2026 21:36:19 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIs https://codecrush.com.br/blog/desvendando-websockets-a-essencia-da-comunicacao-bidirecional-em-tempo WebSockets: comunicação bidirecional em tempo real na web https://codecrush.com.br/blog/desvendando-websockets-a-essencia-da-comunicacao-bidirecional-em-tempo WebSocket é um protocolo que mantém conexão TCP persistente e full-duplex entre cliente e servidor, base de chats, jogos e dashboards em tempo real. Sun, 28 Jun 2026 19:54:58 GMT devhenrico@gmail.com (Henrico Piubello) Web e APIsDesenvolvimento { console.log('Cliente conectado!') ws.on('message', (message) => { // Reenvia a mensagem para todos os outros clientes conectados wss.clients.forEach((client) => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(`Outro cliente disse: ${message}`) } }) ws.send(`Você disse: ${message}`) }) ws.send('Bem-vindo ao servidor WebSocket!') }) ``` E o cliente no navegador: ```javascript const ws = new WebSocket('ws://localhost:8080') ws.onopen = () => console.log('Conectado ao servidor!') ws.onmessage = (event) => console.log(`Recebido: ${event.data}`) ws.onclose = () => console.log('Desconectado do servidor.') // Envia uma mensagem ao servidor ws.send('Olá, servidor!') ``` Com esse esqueleto funcionando, o próximo passo é adicionar autenticação, validação de mensagens e reconexão automática — os pontos das seções seguintes. ## Quais são os desafios ao implementar WebSockets? Os principais desafios dos WebSockets são o gerenciamento de estado das conexões, a escalabilidade horizontal, a reconexão e a segurança — todos consequência de o protocolo ser stateful, ao contrário do HTTP. 1. **Gerenciamento de estado:** o servidor precisa manter o estado de cada conexão ativa, o que consome recursos e exige lógica para sessões, autenticação e autorização ao longo da vida da conexão. 2. **Escalabilidade:** como as conexões são persistentes, balanceadores de carga precisam de _sticky sessions_, ou a arquitetura deve distribuir mensagens entre servidores via _message broker_ (Redis Pub/Sub, RabbitMQ, Apache Kafka). 3. **Reconexão e tolerância a falhas:** clientes devem lidar com quedas de rede com reconexão automática e backoff exponencial; sem isso, a experiência do usuário degrada rapidamente. 4. **Segurança:** a conexão persistente amplia a superfície de ataque. É crucial validar todas as mensagens recebidas e proteger contra Cross-Site WebSocket Hijacking (CSWSH) e DoS (Denial of Service). 5. **Proxies e balanceadores:** Nginx e HAProxy exigem configuração específica para o upgrade de protocolo e para manter conexões abertas. Um jogo multiplayer com milhares de jogadores simultâneos, por exemplo, precisa distribuir conexões entre vários servidores e usar um broker como Redis Pub/Sub para que jogadores em servidores diferentes interajam na mesma partida com estado consistente. ## Quais as melhores práticas com WebSockets? As melhores práticas com WebSockets giram em torno de segurança, resiliência e eficiência de mensagens. As sete mais importantes: 1. **Use sempre `wss://` em produção:** o WebSocket Secure criptografa o tráfego com TLS (Transport Layer Security), protegendo contra interceptação e ataques man-in-the-middle. 2. **Autentique e autorize cada conexão:** faça isso no handshake (cookies ou [tokens](/glossario/token) JWT) e não confie apenas no cabeçalho `Origin`. 3. **Valide todas as mensagens recebidas:** trate dados do cliente como potencialmente maliciosos para prevenir injeção e manipulação de dados. 4. **Implemente reconexão com backoff exponencial:** tente reconectar após 1, 2, 4, 8 segundos, e assim por diante, para não sobrecarregar o servidor em falhas de rede. 5. **Use heartbeats (ping/pong):** detecte conexões mortas e libere recursos de clientes inativos. 6. **Envie mensagens leves:** serialize com JSON ou Protocol Buffers e evite payloads grandes e repetitivos. 7. **Monitore conexões e mensagens:** acompanhe número de conexões ativas, taxa de mensagens e erros, com logs detalhados para depuração. Um e-commerce com carrinho em tempo real, por exemplo, deve autenticar cada conexão com JWT, validar produto e quantidade em cada mensagem e reconectar automaticamente em caso de queda — garantindo uma experiência consistente e segura. ## Qual é o futuro dos WebSockets? WebSockets seguem como a espinha dorsal do tempo real na web em 2026, mesmo com a chegada de padrões complementares. O WebTransport — alternativa moderna sobre HTTP/3 — atingiu status Baseline em 2026, com suporte no Chrome 97+, Firefox 114+ e Safari 26.4+, segundo o [Can I use](https://caniuse.com/webtransport), mas a simplicidade e a adoção massiva dos WebSockets garantem sua relevância por muitos anos. A demanda por interatividade só cresce, impulsionada por três frentes. Primeiro, a IA (Inteligência Artificial) generativa: chatbots e assistentes fazem streaming de respostas incrementais, um caso de uso natural para conexões persistentes. Segundo, a Internet das Coisas: dispositivos transmitem telemetria e recebem comandos em tempo real, frequentemente via MQTT sobre WebSocket. Terceiro, aplicações colaborativas e de edge computing, que sincronizam estado entre múltiplos usuários e nós distribuídos. Plataformas de telemedicina são um bom exemplo dessa convivência de protocolos: usam WebRTC para o streaming de vídeo e áudio e WebSockets para chat, anotações e atualizações de prontuário — cada tecnologia no papel em que é mais forte. ## Conclusão WebSockets resolveram um problema estrutural da web — a incapacidade do HTTP de sustentar comunicação bidirecional de baixa latência — e por isso continuam indispensáveis quinze anos após o RFC 6455. A recomendação prática é direta: se sua aplicação só precisa de push unidirecional, comece com SSE, que é mais simples de operar; se há interação nos dois sentidos, adote WebSockets desde o início, mas trate segurança (wss://, autenticação, validação) e reconexão como requisitos de primeira classe, não como refinamentos futuros. Quem domina esse protocolo hoje está preparado tanto para os chats e dashboards de sempre quanto para a próxima onda de aplicações de IA em streaming.]]> https://codecrush.com.br/blog/estrutura-distribuida-dns DNS distribuído: por que a internet não tem servidor central https://codecrush.com.br/blog/estrutura-distribuida-dns O DNS é distribuído para eliminar pontos únicos de falha: 13 servidores-raiz com mais de 2.000 instâncias mantêm a internet no ar mesmo sob ataques. Sat, 30 Sep 2023 17:00:00 GMT devhenrico@gmail.com (Henrico Piubello) Web e APIsCloud e Infraestrutura https://codecrush.com.br/blog/framework Framework: o que é, como funciona e qual escolher em 2026 https://codecrush.com.br/blog/framework Framework é uma estrutura de código reutilizável que padroniza e acelera o desenvolvimento de software. Veja tipos, exemplos e como escolher o seu. Sat, 10 Jun 2023 10:32:14 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIs https://codecrush.com.br/blog/iniciando-com-react Como Começar com React: Guia Passo a Passo para Iniciantes https://codecrush.com.br/blog/iniciando-com-react React é a biblioteca JavaScript mais usada para criar interfaces web. Aprenda a criar seu primeiro aplicativo com Node.js, npx e Vite passo a passo. Sat, 16 Mar 2024 16:20:00 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIs Animação do terminal executando create-react-app e iniciando o servidor de desenvolvimento Você não precisa instalar ou configurar ferramentas como [webpack](/glossario/webpack) ou [Babel](/glossario/babel): elas vêm pré-configuradas e ocultas, para que o foco fique no código. Se em algum momento você instalou o `create-react-app` globalmente via `npm install -g create-react-app`, desinstale-o com `npm uninstall -g create-react-app` — isso garante que o `npx` sempre baixe a versão mais recente do pacote. ## Create React App ainda vale a pena em 2026? O Create React App (CRA) não é mais recomendado para projetos novos. Em [anúncio oficial de 14 de fevereiro de 2025](https://react.dev/blog/2025/02/14/sunsetting-create-react-app), a equipe do React declarou: "Today, we're deprecating Create React App for new apps" — "hoje, estamos descontinuando o Create React App para novos aplicativos", em tradução livre. A recomendação oficial passou a ser um framework completo ou uma ferramenta de build moderna como o [Vite](https://vite.dev/guide/). | Ferramenta | Comando de criação | Situação em 2026 | | --- | --- | --- | | Create React App | `npx create-react-app my-app` | Descontinuado para projetos novos | | Vite | `npm create vite@latest` | Build tool recomendada pela equipe React | | Next.js | `npx create-next-app@latest` | Framework completo recomendado | Por que aprender os comandos do CRA, então? Porque milhares de projetos em manutenção ainda o utilizam, a maior parte dos tutoriais clássicos o referencia, e os conceitos — estrutura de pastas, scripts, servidor de desenvolvimento — são os mesmos nas ferramentas modernas. O motivo da descontinuação é prático: o CRA não oferece soluções nativas para roteamento, busca de dados e divisão de código, necessidades comuns de aplicações reais em produção. Aprenda o fluxo com este guia e, ao iniciar um projeto profissional novo, aplique exatamente os mesmos conceitos com Vite ou Next.js. ## npx, npm ou Yarn: qual usar para criar o projeto? Os três comandos produzem o mesmo resultado; a escolha depende do gerenciador de pacotes que você já usa no dia a dia. O executor [npx](/blog/introducao-npx-uma-biblioteca-de-execucao) baixa e roda o pacote sem instalação global, enquanto npm e Yarn são gerenciadores completos — as diferenças entre eles estão detalhadas no nosso guia de [gerenciadores de pacotes npm, Yarn e pnpm](/blog/gerenciadores-de-pacotes-npm-yarn-pnpm). A [CLI](/glossario/cli) (Command Line Interface) do Create React App instala as dependências com npm ou Yarn conforme a ferramenta usada na criação. ### npx ```bash npx create-react-app my-app ``` O `npx` está disponível a partir do npm 5.2. ### npm ```bash npm init react-app my-app ``` O `npm init ` está disponível a partir do npm 6. ### Yarn ```bash yarn create react-app my-app ``` O `yarn create` está disponível a partir do Yarn 0.25. ## Templates do Create React App Templates permitem iniciar um aplicativo a partir de um modelo pronto, adicionando `--template [nome-do-modelo]` ao comando de criação: ```bash npx create-react-app my-app --template [nome-do-modelo] ``` Sem um template explícito, o projeto é criado com o modelo base em JavaScript. Os pacotes de template seguem o formato `cra-template-[nome-do-modelo]`, mas apenas o `[nome-do-modelo]` é informado no comando. A [documentação de templates personalizados do Create React App](https://create-react-app.dev/docs/custom-templates) descreve como construir e publicar o seu próprio modelo. ### Como criar um aplicativo React com TypeScript? Para iniciar um projeto com [TypeScript](/glossario/typescript), adicione `--template typescript` ao comando de criação: ```bash npx create-react-app my-app --template typescript ``` O template TypeScript gera os arquivos com extensão `.tsx` e a configuração de tipos pronta, sem nenhum ajuste manual. ## Estrutura de arquivos do projeto React O comando de criação gera um diretório `my-app` com a estrutura inicial do projeto e todas as dependências instaladas: ```bash my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js ``` A pasta `public` guarda os arquivos estáticos servidos diretamente (como o `index.html`), e a pasta `src` concentra o código da aplicação — é nela que você passa a maior parte do tempo, começando pelo componente `App.js`. Sem configuração extra nem estruturas de pastas complicadas: apenas os arquivos necessários para construir o aplicativo. ### Quais scripts vêm configurados? O projeto recém-criado inclui comandos integrados no `package.json`: ```bash npm start # ou yarn start ``` O `npm start` executa o aplicativo em modo de desenvolvimento em http://localhost:3000, com recarga automática a cada alteração salva. O `npm run build`, citado nos passos anteriores, gera a versão minificada para produção na pasta `build`. ## Conclusão Criar o primeiro aplicativo React é a parte fácil — um comando no terminal resolve. O que separa iniciantes de profissionais é o que vem depois: entender componentes, props e estado, e saber escolher a ferramenta certa para cada contexto. Em 2026, isso significa usar este fluxo para aprender os fundamentos, mas iniciar projetos novos com Vite ou Next.js, como orienta a própria equipe do React. Pratique recriando interfaces que você usa todos os dias: a fluência em React vem da repetição, não da leitura.]]> https://codecrush.com.br/blog/linguagem-de-estilos-css O que é CSS? Guia da linguagem de estilos da web https://codecrush.com.br/blog/linguagem-de-estilos-css CSS (Cascading Style Sheets) é a linguagem que define cores, tipografia e layout de páginas HTML, usada por 62% dos devs segundo a Stack Overflow. Tue, 07 Nov 2023 00:00:00 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIs ` de uma página. ```css p { font-size: 16px; line-height: 1.5; } ``` ### Cascata e especificidade A cascata é o mecanismo que decide qual regra prevalece quando várias regras conflitam: vence a mais específica e, em caso de empate, a última declarada. Compreender a cascata é essencial para controlar o estilo de elementos específicos. - **Exemplo de cascata**: suponha duas regras conflitantes para o mesmo elemento. ```css /* Regra 1 */ p { color: red; } /* Regra 2 */ p { color: blue; } ``` Pelo princípio da cascata, o texto do parágrafo será azul: as duas regras têm a mesma especificidade, e a "Regra 2" é a última declarada para o seletor `p`. - **Exemplo de especificidade**: a especificidade é o sistema que determina qual regra vale quando seletores diferentes atingem o mesmo elemento. Ela é calculada com base no número de IDs, classes e elementos usados no seletor. ```css /* Regra 1 */ p { color: red; } /* Regra 2 */ #paragrafo-especial { color: blue; } ``` Aqui, a "Regra 2" é mais específica, pois usa o ID "paragrafo-especial". Portanto, o parágrafo com esse ID será azul, mesmo existindo uma regra geral para todos os parágrafos. ### Herança de estilos A herança no CSS faz com que estilos aplicados a um elemento afetem seus elementos filhos, o que simplifica a estilização consistente de uma página. - **Considere o seguinte HTML e CSS**: ```html

Este é um parágrafo dentro de uma div.

``` ```css .container { font-family: Arial, sans-serif; font-size: 18px; color: #333; } ``` Neste exemplo, a classe "container" define `font-family`, `font-size` e `color`. Graças à herança, o parágrafo dentro da div herda automaticamente essas propriedades: o texto será exibido em Arial, com 18 pixels e cor `#333`, sem nenhuma regra extra. ## Quais recursos modernos do CSS valem atenção em 2026? O CSS moderno vai muito além de cores e margens: [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) permitem estilizar um componente conforme o tamanho do contêiner que o envolve (e não apenas da tela), e o seletor [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) permite selecionar um elemento pai com base nos filhos que ele contém — algo impossível no CSS clássico. A adoção desses recursos já é mensurável. Segundo a pesquisa [State of CSS 2025](https://2025.stateofcss.com/en-US/features/), as container queries de tamanho foram usadas por 41% dos participantes, e o `:has()` foi apontado como o recurso mais usado e mais amado entre todos os avaliados na edição. Vale acompanhar também o nesting nativo (aninhamento de regras sem pré-processador) e as variáveis CSS (custom properties), que reduziram bastante a necessidade de ferramentas como Sass em projetos novos. O CSS de 2026 entrega, nativamente, muito do que antes exigia tooling adicional. ## Dicas para dominar o CSS na prática O caminho para escrever bom CSS combina fundamento teórico com prática deliberada. Estes passos aceleram a evolução: 1. **Pratique em playgrounds**: crie experimentos de layout e animação no [CodePen](https://codepen.io/) para testar ideias sem montar projeto. 2. **Estude interfaces bem construídas**: inspecione o código de sites que você admira e descubra como cada estilo foi alcançado. 3. **Domine o design responsivo**: aprenda media queries e container queries para adaptar o layout a qualquer tamanho de tela. 4. **Estude por fontes confiáveis**: aqui no CodeCrush, a lista de [5 sites para aprender CSS](/blog/5-sites-para-aprender-css) reúne plataformas gratuitas para treinar do básico ao avançado. ## Conclusão O CSS deixou de ser coadjuvante para se tornar uma plataforma de layout completa — e é justamente quem domina os fundamentos (seletores, cascata, especificidade e herança) que aproveita os recursos modernos sem depender de frameworks de estilo para tudo. Se você trabalha ou quer trabalhar com frontend, investir tempo em CSS puro é uma das apostas de melhor retorno da carreira: interfaces mais leves, código mais durável e menos horas perdidas brigando com estilos que "não funcionam".]]> https://codecrush.com.br/blog/linguagem-de-programacao-php PHP: o que é, para que serve e como começar na linguagem https://codecrush.com.br/blog/linguagem-de-programacao-php PHP é uma linguagem open source para desenvolvimento web que roda em 71,8% dos sites com linguagem server-side conhecida (W3Techs, 2026). Sun, 28 Jan 2024 00:00:00 GMT devhenrico@gmail.com (Henrico Piubello) Linguagens de ProgramaçãoWeb e APIs `, que marcam onde o interpretador deve agir. O exemplo clássico imprime uma mensagem na tela com a instrução `echo`: ```php ``` Nesse trecho, `` devolve o controle ao HTML. Variáveis em PHP começam sempre com `$` (como `$nome`), e cada instrução termina com ponto e vírgula — duas regras que resolvem a maioria dos erros de quem está começando. ## PHP embutido no HTML O PHP foi projetado para ser misturado ao HTML no mesmo arquivo, dispensando camadas extras para gerar conteúdo dinâmico. Uma página `.php` é um documento HTML comum com blocos de código inseridos onde o conteúdo precisa ser calculado: ```html Página PHP

Exemplo PHP

``` O servidor executa o bloco `` e entrega ao navegador apenas o HTML resultante. Para que essa página final seja bem estruturada e amigável para buscadores, vale dominar também o [HTML semântico e sua relação com SEO](/blog/o-que-e-html-estrutura-seo). ## Formulários em PHP: exemplo prático O processamento de formulários é o caso de uso mais tradicional do PHP. O formulário HTML envia os dados via método POST para um script PHP indicado no atributo `action`: ```html
Nome:
``` No arquivo `processar_formulario.php`, a variável superglobal `$_POST` dá acesso aos dados enviados: ```php ``` Repare na função `htmlspecialchars`: ela converte caracteres especiais em entidades HTML e impede que um visitante injete código malicioso na página (ataque conhecido como XSS, Cross-Site Scripting). Nunca exiba dados vindos do usuário sem esse tratamento — é a primeira regra de segurança em PHP. ## Quando usar PHP em um projeto? Use PHP quando o projeto envolve sites de conteúdo, lojas virtuais, painéis administrativos ou qualquer sistema web que dependa de um CMS ou da pilha LAMP (Linux, Apache, MySQL, PHP). Nesses cenários, a combinação com o [MySQL, o banco relacional mais usado da web](/blog/mysql-o-coracao-relacional-da-web-moderna-e-suas-aplicacoes-empresaria), oferece hospedagem barata, mão de obra abundante e um ecossistema de plugins gigantesco. O PHP também é forte em APIs REST convencionais e aplicações corporativas: o Laravel traz autenticação, filas e ORM prontos, enquanto o Symfony serve de base para projetos de longa duração. Por outro lado, cargas de trabalho em tempo real (chats, streaming de eventos) e computação científica costumam ser mais bem servidas por Node.js, Go ou Python — a escolha certa depende do problema, não da moda. ## Conclusão O PHP segue sendo a porta de entrada mais pragmática para o backend web: nenhuma outra linguagem oferece tanta oferta de emprego em manutenção e evolução de sistemas reais com uma curva de aprendizado tão curta. Aqui no CodeCrush, a recomendação é direta — aprenda a base mostrada neste guia, pratique com formulários e banco de dados e, só então, adote um framework como o Laravel. Quem domina o PHP moderno, com tipos e boas práticas de segurança, trabalha na tecnologia que sustenta sete em cada dez sites da web.]]> https://codecrush.com.br/blog/metaverso Metaverso: o que é, como funciona e o futuro da internet https://codecrush.com.br/blog/metaverso O metaverso é um espaço virtual 3D compartilhado que une realidade virtual, aumentada e blockchain para pessoas interagirem, trabalharem e negociarem online. Sun, 14 May 2023 15:32:14 GMT devhenrico@gmail.com (Henrico Piubello) Tecnologia e InovaçãoWeb e APIs https://codecrush.com.br/blog/mysql-o-coracao-relacional-da-web-moderna-e-suas-aplicacoes-empresaria MySQL: o banco de dados relacional da web moderna https://codecrush.com.br/blog/mysql-o-coracao-relacional-da-web-moderna-e-suas-aplicacoes-empresaria MySQL é o RDBMS de código aberto mais usado na web e o 2º banco mais popular do mundo (DB-Engines, 2026), base de sites, e-commerce e SaaS. Thu, 02 Jul 2026 19:53:18 GMT devhenrico@gmail.com (Henrico Piubello) Banco de DadosWeb e APIs '2023-01-01' ORDER BY valor_total DESC;` fica lenta sem índice. Ao criar `CREATE INDEX idx_data_valor ON pedidos (data_pedido, valor_total);`, o MySQL localiza e ordena os dados por índice, transformando segundos em milissegundos. ## Quais são as melhores práticas de segurança para MySQL? A segurança do MySQL protege os dados contra acesso não autorizado, corrupção e perda, cobrindo desde a configuração do servidor até a gestão de usuários e a aplicação. As práticas essenciais são objetivas e cumulativas. 1. **Use senhas fortes e únicas** para cada usuário, especialmente o `root`, e adote autenticação multifator (MFA) para acesso administrativo. 2. **Aplique o privilégio mínimo:** conceda apenas os privilégios necessários por usuário e nunca use o `root` na aplicação. 3. **Restrinja o acesso à rede:** libere a porta 3306 apenas para hosts autorizados e evite expor o MySQL em `0.0.0.0`. 4. **Criptografe os dados** em trânsito (SSL/TLS) e em repouso; o MySQL 8.0 oferece criptografia transparente de dados (TDE). 5. **Faça backups regulares e testados,** validando a restauração periodicamente. 6. **Monitore logs** de erro, de consultas lentas e de auditoria para detectar anomalias. 7. **Mantenha o servidor atualizado** com os patches de segurança mais recentes. 8. **Use prepared statements** na aplicação para bloquear injeção de SQL, uma das maiores ameaças a bancos de dados. **Exemplo prático:** em vez de `GRANT ALL PRIVILEGES ON minha_base.* TO 'app_user'@'%'`, use `GRANT SELECT, INSERT, UPDATE, DELETE ON minha_base.* TO 'app_user'@'localhost'` e configure o firewall para liberar apenas o servidor de aplicação, ativando SSL em todas as conexões. ## Como começar a usar MySQL passo a passo? Começar com MySQL envolve instalar o servidor, conectar-se, criar um banco de dados e executar comandos SQL básicos. O caminho é direto tanto localmente quanto em contêineres. 1. **Instale o MySQL Community Server** pelo [site oficial da Oracle](https://dev.mysql.com/downloads/mysql/), ou via gerenciador de pacotes (`sudo apt install mysql-server` no Ubuntu, `brew install mysql` no macOS). 2. **Suba um contêiner** com [Docker](/glossario/docker) para um ambiente isolado: `docker run --name meu-mysql -e MYSQL_ROOT_PASSWORD=segredo -d mysql:latest`. 3. **Defina uma senha forte** para o usuário `root` durante a configuração inicial. 4. **Conecte-se** via linha de comando (`mysql -u root -p`) ou por uma GUI como o MySQL Workbench. 5. **Crie um banco de dados e uma tabela** para começar a modelar seus dados: ```sql CREATE DATABASE meu_primeiro_banco; USE meu_primeiro_banco; CREATE TABLE usuarios ( id INT AUTO_INCREMENT PRIMARY KEY, nome VARCHAR(100) NOT NULL, email VARCHAR(100) UNIQUE NOT NULL, data_cadastro DATETIME DEFAULT CURRENT_TIMESTAMP ); ``` 6. **Insira e consulte dados** para validar o esquema: ```sql INSERT INTO usuarios (nome, email) VALUES ('Alice Silva', 'alice@example.com'); SELECT nome, email FROM usuarios WHERE id = 1; ``` **Exemplo prático:** ao concluir esses passos, você terá um servidor MySQL em execução, um banco `meu_primeiro_banco` e uma tabela `usuarios` populada, pronta para integrar com uma aplicação web ou explorar recursos SQL mais avançados. ## Como rodar MySQL na nuvem? Rodar MySQL na nuvem elimina a complexidade de provisionamento, patching, backup e escalabilidade manual, entregando alta disponibilidade com replicação e failover automáticos. Os três grandes provedores oferecem serviços gerenciados maduros. Os serviços gerenciados permitem que a equipe se concentre na lógica da aplicação, não na administração do banco. As opções principais são o **Amazon RDS for MySQL** (AWS), com Multi-AZ e réplicas de leitura; o **Azure Database for MySQL** (Microsoft), com integração nativa ao ecossistema Azure; e o **Cloud SQL for MySQL** (Google Cloud), que automatiza manutenção e escala. Para comparar preços e recursos, vale estudar as diferenças entre [AWS, Azure e Google Cloud](/blog/comparacao-entre-servicos-em-nuvem) antes de decidir. **Exemplo prático:** uma startup de SaaS que migra de um servidor on-premise para a AWS opta pelo Amazon RDS em vez de gerenciar o MySQL numa VM EC2. Assim configura alta disponibilidade (Multi-AZ), réplicas de leitura e backups automáticos com esforço mínimo, liberando tempo para o desenvolvimento do produto. ## Quais ferramentas e ORMs funcionam com MySQL? O MySQL conta com um ecossistema maduro de ferramentas de administração, conectores nativos e ORMs (Object-Relational Mappers) que facilitam a integração com quase toda linguagem e framework populares. Um ORM é uma técnica que mapeia objetos de uma linguagem orientada a objetos para tabelas relacionais, abstraindo o SQL direto. Para administração, o **MySQL Workbench** é a ferramenta gráfica oficial e o **phpMyAdmin** domina ambientes web LAMP. Em linguagens, o MySQL tem conectores para Python (`mysql-connector-python`), Java (JDBC), PHP (PDO), Node.js (`mysql2`) e .NET. E os ORMs — SQLAlchemy (Python), Hibernate (Java), Eloquent (PHP/Laravel), Sequelize (Node.js) e Entity Framework (.NET) — permitem manipular o banco por objetos da linguagem. **Exemplo prático:** numa aplicação Laravel, em vez de escrever `SELECT * FROM produtos WHERE id = 1;`, o desenvolvedor usa o Eloquent com `$produto = Produto::find(1);`. O ORM traduz a chamada em SQL, executa no MySQL e devolve um objeto `Produto` preenchido, simplificando drasticamente a interação com o banco. ## Vale a pena aprender MySQL em 2026? Sim, vale a pena aprender MySQL em 2026. Ele segue como o segundo banco mais popular do mundo, com desenvolvimento ativo da Oracle, integração nativa às nuvens e demanda constante no mercado de back-end e dados. Apesar da ascensão de alternativas NoSQL e do avanço do PostgreSQL, o MySQL mantém liderança pela maturidade, confiabilidade e vasto conhecimento acumulado. A Oracle segue investindo em melhorias de performance, segurança e suporte a JSON, e a integração com RDS, Azure Database e Cloud SQL o torna ágil em arquiteturas modernas. Para microsserviços transacionais — como serviços de autenticação ou de pedidos —, o MySQL gerenciado na nuvem continua sendo eficiente e barato de manter. **Exemplo prático:** uma empresa que adota microsserviços pode dar a cada serviço seu próprio banco. Para os que exigem armazenamento transacional bem estruturado, uma instância gerenciada de MySQL na nuvem garante independência, escalabilidade e baixo custo de manutenção por serviço. ## Conclusão O MySQL não é apenas um banco de dados legado que sobrevive por inércia: ele é uma escolha deliberada e sólida para a maioria das aplicações transacionais em 2026. Se o seu projeto precisa de dados bem estruturados, integridade ACID e ampla compatibilidade de hospedagem, comece pelo MySQL — a curva de aprendizado é curta, o custo é zero na Community Edition e a habilidade se transfere para praticamente qualquer stack. Reserve NoSQL e data warehouses para os casos em que o modelo relacional realmente aperta; para todo o resto, o MySQL continua sendo o caminho mais previsível.]]> https://codecrush.com.br/blog/o-que-e-html-estrutura-seo HTML Semântico: o que é, tags e como melhora o SEO https://codecrush.com.br/blog/o-que-e-html-estrutura-seo HTML semântico usa tags como header, nav, main e article para descrever o significado do conteúdo, melhorando acessibilidade, SEO e leitura por máquinas. Mon, 11 Sep 2023 07:00:00 GMT devhenrico@gmail.com (Henrico Piubello) DesenvolvimentoWeb e APIs `, `