Muchas tecnologías entran en la construcción de sitios web. Sistemas de gestión de contenidos^{(Content management systems)} , frameworks , diferentes lenguajes de scripting y programación^{(different scripting and programming languages)} , sistemas de pago^{(payment systems)} … ¡todo tipo de cosas!

Si tiene curiosidad sobre cómo funciona su sitio web favorito, o quiere ver si un sitio está usando algo incompleto, este artículo le mostrará varias formas de mirar debajo del capó y ver cómo está construido.

Ver el código del sitio web

Si no eres desarrollador o estás empezando, estás a punto de aprender el secreto para programar mejor. Mira el código de otras personas. Le mostramos cómo usar las herramientas para desarrolladores de Chrome^{(how to use Chrome’s Developer Tools)} para hacer precisamente eso. 

ChromeDevTools lo ayudará a ver el código HTML^(HTML) , JavaScript y CSS de un sitio , descubrir qué fuentes pueden estar consumiendo y cómo verificar el rendimiento de carga de un sitio en el navegador. Todos los principales navegadores web tienen disponible alguna versión de las herramientas del desarrollador.

construido con^(BuiltWith)

BuiltWith.com es un recurso de nivel profesional que profundiza en los sitios para ver todas las tecnologías que utilizan. Actualmente, cubren más de 673 millones de sitios web y contando. La idea principal detrás del sitio era ayudar a generar clientes potenciales para personas en ventas de software.

Las funciones avanzadas solo están disponibles a través de una suscripción paga, pero cualquiera puede ir a BuiltWith.com , ingresar la dirección de un sitio web, el nombre de la tecnología o una palabra clave y obtener un perfil tecnológico detallado. Regístrese^(Sign) para obtener una cuenta gratuita y podrá realizar cinco búsquedas detalladas al día.

Informe del sitio de Netcraft^{(Netcraft Site Report)}

Netcraft ha sido un recurso para los desarrolladores web desde 1995. Su experiencia de más de 25 años se muestra en la herramienta gratuita Site Report de Netcraft. ^{(Site Report)}Combina un informe de tecnología con un informe de antecedentes de " quién es el propietario del sitio^{(who owns the site)} ", para que obtenga una descripción completa del sitio. Sabrá dónde está alojado y quién es el propietario, además de un historial de dominio.

El Informe del sitio de Netcraft^{(Netcraft Site Report)} parece permitir búsquedas ilimitadas. Aún así, úsalo solo cuando realmente lo necesites. Es un recurso gratuito y a la comunidad de desarrolladores le gustaría que siguiera siendo así.

Información de los sitios de W3Techs^{(W3Techs’ Sites Info)}

La herramienta de información de sitios de W3Techs funciona un poco diferente a las demás. Mantienen una base de datos^(database) de información, pero solo en sitios que ya han sido buscados a través de la herramienta. Si está revisando un sitio que no ha sido revisado antes, rastreará el sitio instantáneamente. 

El informe proporcionado es menos detallado que el que brindan otros servicios, pero sigue siendo perspicaz. Obtendrá qué CMS , lenguajes de programación, servidor web y proveedor de alojamiento utiliza un sitio. W3Techs también proporciona extensiones de navegador para Firefox y Chrome para que pueda consultar los sitios con solo un clic o un toque.

Wappalyzer

Si prefiere tener un complemento de navegador para verificar las tecnologías de un sitio, Wappalyzer tiene complementos para Firefox , Chrome y Edge . Los complementos son gratuitos, fáciles de usar y están presentados en un diseño fácil de leer. Al hacer clic en cualquier tecnología del informe, accederá a una explicación de la misma, lo cual es excelente si encuentra algo que no haya visto antes. 

Wappalyzer ofrece una función única con la capacidad de crear una alerta para un sitio web. Revisan el sitio diariamente y le envían un correo electrónico si detectan un cambio. La alerta requerirá que cree una cuenta gratuita con Wappalyzer y le costará 10 créditos por mes.

Pero obtienes 50 créditos gratis cada mes y una alerta solo cuesta 10 créditos por cada 30 días. Por lo tanto, las alertas de Wappalyzer son básicamente gratuitas si está monitoreando 5 sitios o menos.

observador web^(Webspotter)

Todos menos uno de los servicios de Webspotter es un servicio pago, pero está bien. Su extensión gratuita Webspotter Chrome^{(Webspotter Chrome extension)} lo compensa. La extensión Webspotter es similar a Wappalyzer , pero tiene algunas características diferentes. Junto a cada tecnología enumerada, hay enlaces a estadísticas sobre la tecnología, una lista de sitios web que usan esa tecnología y el sitio web oficial de la tecnología. 

Una característica aún más intrigante es la capacidad de Webspotter para extraer contactos de correo electrónico, enlaces de redes sociales, análisis SEO^{(SEO analytics)} y otra información de la empresa de un sitio web. Aunque eso no le dice cómo se hace el sitio, podría ser útil para fines de marketing en línea o incluso para buscar trabajo.

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

Tal vez no esté tan interesado en el desarrollo web, pero está armando un sitio de WordPress y le gustaría incluir funciones que ha visto en otros lugares. Descargue el complemento del navegador Chrome de WordPress Theme Detector^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

El detector de temas de WordPress^{(WordPress Theme Detector)} no solo le dirá qué tema de WordPress^{(WordPress theme)} está usando un sitio, sino que también le dirá qué complementos de WordPress^{(WordPress plugins)} está usando. También le muestra quién creó el tema o complemento y proporciona un enlace a dónde puede obtenerlos. Eso hace que sea tan fácil incorporar elementos en su sitio de WordPress que ha admirado en otros sitios.

Aprenda cómo funcionan los sitios web

Sí, así de fácil es sumergirse en cualquier sitio web de Internet y ver de qué está hecho. Intente usar dos o más de estas herramientas, ya que algunas detectarán cosas que otras no. La mayor parte de lo que ve en un sitio en realidad se procesa en su computadora. Eso es lo que hace que sea fácil de mirar. También es la razón por la que necesita hacer que su sitio web sea lo más seguro posible^{(make your website as secure as possible)} . Disfrute de su inmersión profunda y háganos saber lo que encuentra o construye.

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

• ¿Cuál es el mejor servicio de llamadas de conferencia? Las mejores aplicaciones comparadas

• Mover, eliminar o copiar archivos automáticamente en Windows

• Cómo verificar si la temperatura de su CPU es demasiado alta

• Las 5 mejores aplicaciones de filtro de luz azul para Windows, Mac y Linux

• Cómo usar un administrador de paquetes de Windows para instalar programas de Windows

• Los 5 mejores sitios seguros de descarga de APK para aplicaciones de Android

• ¿Qué es un chatbot y cómo usar uno en su sitio?

• Las mejores utilidades de ajuste de CPU, tarjeta de video y RAM

• Los 11 mejores programas gratuitos de captura de pantalla para Windows

• Extensión de Avast Online Security: ¿Vale la pena usarla?

• Las 7 mejores herramientas de recorte para Chromebook

• 7 formas de abrir un archivo MDB sin Microsoft Access

• Las mejores 4 alternativas a Google Chromecast

• Los mejores programas para agregar nuevas funciones a Windows 10

• 5 trucos del símbolo del sistema para hacer que CMD sea más interesante

• ¿Funciona la recuperación de archivos de Windows de Microsoft? Lo Probamos.

• Cómo eliminar fotos digitales duplicadas en su computadora con Windows

• Pruebas de píxeles muertos para reparar un píxel atascado en su monitor

• HDG explica: ¿Qué es Markdown y cuáles son los conceptos básicos que debo saber?

• 5 alternativas de Windows al comando sudo de Linux