Muitas tecnologias entram na construção de sites. Sistemas de gerenciamento de conteúdo^{(Content management systems)} , frameworks , diferentes linguagens de script e programação^{(different scripting and programming languages)} , sistemas de pagamento^{(payment systems)} … todo tipo de coisa!

Se você está curioso para saber como seu site favorito funciona, ou quer ver se um site está usando algo incompleto, este artigo mostrará várias maneiras de olhar por baixo do capô e ver como ele é construído.

Veja o código do site

Se você não é um desenvolvedor, ou está apenas começando, está prestes a aprender o segredo para uma melhor programação. Olhe para o código de outras pessoas. Mostramos a você como usar as Ferramentas do desenvolvedor do Chrome^{(how to use Chrome’s Developer Tools)} para fazer exatamente isso. 

O ChromeDevTools^{(ChromeDevTools)} ajudará você a visualizar o código HTML , JavaScript e CSS de um site , descobrir quais fontes eles podem estar consumindo e como verificar o desempenho de carregamento de um site no navegador. Todos os principais navegadores da web têm alguma versão das ferramentas do desenvolvedor disponíveis.

Construído com^(BuiltWith)

BuiltWith.com é um recurso de nível profissional que se aprofunda nos sites para ver todas as tecnologias que eles usam. Atualmente, eles cobrem mais de 673 milhões de sites e contando. A principal ideia por trás do site era ajudar a gerar leads para pessoas em vendas de software.

Os recursos avançados estão disponíveis apenas por meio de uma assinatura paga, mas qualquer pessoa pode acessar BuiltWith.com , inserir um endereço de site, nome de tecnologia ou palavra-chave e obter um perfil de tecnologia detalhado. Inscreva^(Sign) -se para uma conta gratuita e você pode fazer cinco pesquisas detalhadas por dia.

Relatório do site Netcraft^{(Netcraft Site Report)}

Netcraft tem sido um recurso para desenvolvedores web desde 1995. Sua experiência de mais de 25 anos mostra a ferramenta gratuita Site Report da Netcraft. ^{(Site Report)}Ele combina um relatório de tecnologia com um relatório de histórico de “ quem é o dono do site^{(who owns the site)} ”, para que você tenha uma visão geral completa do site. Você saberá onde está hospedado e quem é o proprietário, além de algum histórico de domínio.

O Netcraft Site Report parece permitir pesquisas ilimitadas. Ainda assim, use-o apenas quando realmente precisar. É um recurso gratuito e a comunidade de desenvolvedores gostaria que continuasse assim.

Informações dos sites da W3Techs^{(W3Techs’ Sites Info)}

A ferramenta Sites Info da W3Techs funciona um pouco diferente das demais. Eles mantêm um banco^(database) de dados de informações, mas apenas em sites que já foram pesquisados ​​pela ferramenta. Se você estiver verificando um site que não foi verificado antes, ele rastreará o site instantaneamente. 

O relatório fornecido é menos aprofundado do que outros serviços fornecem, mas ainda é perspicaz. Você obterá qual CMS , linguagens de programação, servidor web e provedor de hospedagem que um site usa. A W3Techs^(W3Techs) também fornece extensões de navegador para Firefox e Chrome para que você possa verificar sites com apenas um clique ou toque.

Wappalyzer

Se você preferir ter um plug-in de navegador para verificar as tecnologias de um site, o Wappalyzer possui plug-ins para Firefox , Chrome e Edge . Os plugins são gratuitos, fáceis de usar e são dispostos em um design fácil de ler. Clicar em qualquer tecnologia no relatório levará você a uma explicação sobre ela, o que é ótimo se encontrar algo que você não viu antes. 

O Wappalyzer^(Wappalyzer) oferece um recurso exclusivo com a capacidade de criar um alerta para um site. Eles verificam o site diariamente e enviam um e-mail se detectarem uma alteração. O alerta exigirá que você crie uma conta gratuita no Wappalyzer e custa 10 créditos por mês.

Mas você recebe 50 créditos de graça todos os meses e um alerta custa apenas 10 créditos a cada 30 dias. Portanto, os alertas do Wappalyzer são basicamente gratuitos se você estiver monitorando 5 ou menos sites.

Webspotter

Todos os serviços do Webspotter , exceto um, são pagos, mas tudo bem. A extensão gratuita do Webspotter para o Chrome^{(Webspotter Chrome extension)} compensa isso. A extensão Webspotter é semelhante ao Wappalyzer , mas possui alguns recursos diferentes. Ao lado de cada tecnologia listada, há links para estatísticas sobre a tecnologia, uma lista de sites que usam essa tecnologia e o site oficial da tecnologia. 

Um recurso ainda mais intrigante é a capacidade do Webspotter de extrair contatos de e-mail, links de mídia social, análise de SEO^{(SEO analytics)} e outras informações da empresa de um site. Embora isso não diga sobre como o site é feito, pode ser útil para fins de marketing online ou até mesmo para busca de emprego.

Detector de temas do WordPress^{(WordPress Theme Detector)}

Talvez você não esteja tão interessado em desenvolvimento web, mas está montando um site WordPress e gostaria de incluir recursos que viu em outros lugares. Baixe o plug-in do navegador do WordPress Theme Detector Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

O WordPress Theme Detector^{(WordPress Theme Detector)} não apenas informará qual tema do WordPress^{(WordPress theme)} um site está usando, mas também informará quais plugins do WordPress^{(WordPress plugins)} ele está usando. Ele também mostra quem criou o tema ou plugin e fornece um link para onde você pode obtê-los. Isso torna tão fácil incorporar elementos em seu site WordPress que você admirou em outros sites.

Saiba como funcionam os sites

Sim, é tão fácil mergulhar em qualquer site na Internet e ver do que é feito. Tente usar duas ou mais dessas ferramentas, pois algumas captam coisas que outras não. A maior parte do que você vê em um site é realmente renderizado em seu computador. É isso que facilita a visualização. É também a razão pela qual você precisa tornar seu site o mais seguro possível^{(make your website as secure as possible)} . Aproveite o seu mergulho profundo e deixe-nos saber o que você encontra ou constrói.

How Websites Work: Learn What’s Under the Hood

Many technologies go into building websites. Content management systems, frameworks, different scripting and programming languages, payment systems…all sorts of things!

If you’re curious how your favorite website works, or want to see if a site is using something sketchy, this article will show you several ways to look under the hood and see how it’s built.

View the Website’s Code

If you’re not a developer, or just starting out, you’re about to learn the secret to better programming. Look at other people’s code. We’ve shown you how to use Chrome’s Developer Tools to do just that. 

ChromeDevTools will help you view a site’s HTML, JavaScript, and CSS code, find out what sources they may be consuming, as well as how to check a site’s loading performance in the browser. All major web browsers have some version of the developer’s tools available.

BuiltWith

BuiltWith.com is a professional-level resource that goes deep into sites to see all the technologies they use. Currently, they cover over 673 million websites and counting. The main idea behind the site was to help generate leads for people in software sales.

The advanced features are only available through a paid subscription, but anyone can go to BuiltWith.com, enter a website address, technology name, or keyword, and get a detailed technology profile. Sign up for a free account and you can do five detailed lookups a day.

Netcraft Site Report

Netcraft has been a resource for web developers since 1995. Their expertise over 25 years shows in Netcraft’s free Site Report tool. It combines a technology report with a “who owns the site” background report, so you get a thorough overview of the site. You’ll know where it’s hosted, and who owns it, plus some domain history.

The Netcraft Site Report appears to allow unlimited lookups. Still, use it only when you really need it. It’s a free resource and the developer community would like to see it stay that way.

W3Techs’ Sites Info

W3Techs’ Sites Info tool works a bit differently from the others. They keep a database of information, but only on sites that have already been searched through the tool. If you’re checking on a site that hasn’t been checked before, it will crawl the site instantly. 

The report provided is less in-depth than other services provide, but still insightful. You’ll get which CMS, programming languages, web server, and hosting provider a site uses. W3Techs also provide browser extensions for Firefox and Chrome so you can check sites with just a click or a tap.

Wappalyzer

If you prefer to have a browser plugin to check a site’s technologies, Wappalyzer has plugins for Firefox, Chrome, and Edge. The plugins are free, easy to use, and are laid out in an easy to read design. Clicking on any technology in the report will take you to an explanation of it, which is great if it finds something you haven’t seen before. 

Wappalyzer offers a unique feature with the ability to create an alert for a website. They check the site daily and email you if they detect a change. The alert will require you to create a free account with Wappalyzer and cost 10 credits per month.

But you get 50 credits for free every month and an alert only costs 10 credits for every 30 days. So Wappalyzer Alerts are basically free if you’re monitoring 5 or fewer sites.

Webspotter

All but one service of Webspotter is a paid service, but that’s okay. Their free Webspotter Chrome extension makes up for that. The Webspotter extension is similar to Wappalyzer, yet it has a few different features. Next to each technology listed, there are links to statistics about the technology, a list of websites using that tech, and the official website for the tech. 

An even more intriguing feature is Webspotter’s ability to pull email contacts, social media links, SEO analytics, and other company information out of a website. Although that doesn’t tell you about how the site is made, it could be useful for online marketing purposes or even job hunting.

WordPress Theme Detector

Maybe, you’re not so interested in web development but you’re putting together a WordPress site and would like to include features you’ve seen elsewhere. Download the WordPress Theme Detector Chrome browser plugin. 

Not only will the WordPress Theme Detector tell you what WordPress theme a site is using, but it’ll also tell you what WordPress plugins it’s using. It also shows you who created the theme or plugin and provides a link to where you can get them. That makes it so easy to incorporate elements into your WordPress site that you’ve admired on other sites.

Learn How Websites Work

Yes, it’s that easy to dive into any website on the Internet and see what it’s made of. Try using two or more of these tools, as some will pick up things that others don’t. Most of what you see on a site is actually rendered on your computer. That’s what makes it easy to look at. It’s also the reason why you need to make your website as secure as possible. Enjoy your deep diving and let us know what you find or build.

Related posts

• Qual é o melhor serviço de teleconferência - os melhores aplicativos comparados

• Mover, excluir ou copiar arquivos automaticamente no Windows

• Como verificar se a temperatura da sua CPU está muito alta

• Os 5 melhores aplicativos de filtro de luz azul para Windows, Mac e Linux

• Como usar um gerenciador de pacotes do Windows para instalar programas do Windows

• Melhores Editores de Markdown: Todas as Plataformas e Online

• 5 alternativas do Windows para o comando sudo do Linux

• Melhores utilitários de ajuste de CPU, placa de vídeo e RAM

• Melhores widgets meteorológicos para Windows 10/11

• Como bloquear sites com software de controle parental gratuito

• 4 melhores aplicativos de software de encaminhamento de porta e como usá-los

• Preenchimento automático do Google Chrome: um guia completo

• Editor de scripts do Google Apps: tudo o que você precisa saber para começar

• Um tutorial do Microsoft Planner: tudo o que você precisa saber

• Melhores programas para adicionar novas funcionalidades ao Windows 10

• Coisas a considerar antes de criar seu próprio Wiki

• 11 melhores softwares de captura de tela gratuitos para Windows

• 4 ótimas ferramentas para criar pacotes do Windows Installer

• O que é um chatbot e como usar um em seu site

• Testes de pixel morto para corrigir um pixel preso no seu monitor