Много технологии влизат в изграждането на уебсайтове. Системи за управление на съдържанието^{(Content management systems)} , рамки^(frameworks) , различни езици за скриптове и програмиране^{(different scripting and programming languages)} , системи за плащане^{(payment systems)} ... всякакви неща!

Ако сте любопитни как работи любимият ви уебсайт или искате да видите дали даден сайт използва нещо схематично, тази статия ще ви покаже няколко начина да погледнете под капака и да видите как е изграден.

Вижте кода на уебсайта

Ако не сте разработчик или просто започвате, вие сте на път да научите тайната на по-доброто програмиране. Вижте кода на други хора. Показахме ви как да използвате инструментите за разработчици на Chrome, за^{(how to use Chrome’s Developer Tools)} да направите точно това. 

ChromeDevTools ще ви помогне да прегледате HTML , JavaScript и CSS кода на сайта, да разберете какви източници могат да използват, както и как да проверите ефективността на зареждане на сайта в браузъра. Всички основни уеб браузъри имат достъпна версия на инструментите на разработчика.

Построен с^(BuiltWith)

BuiltWith.com е ресурс на професионално ниво, който навлиза дълбоко в сайтовете, за да види всички технологии, които използват. В момента те покриват над 673 милиона уебсайта и продължават да се броят. Основната идея зад сайта беше да помогне за генериране на потенциални клиенти за хора в продажбите на софтуер.

Разширените функции са достъпни само чрез платен абонамент, но всеки може да отиде на BuiltWith.com , да въведе адрес на уебсайт, име на технология или ключова дума и да получи подробен технологичен профил. Регистрирайте^(Sign) се за безплатен акаунт и можете да правите пет подробни прегледи на ден.

Доклад за сайта на Netcraft^{(Netcraft Site Report)}

Netcraft е ресурс за уеб разработчици от 1995 г. Техният опит в продължение на 25 години се вижда в безплатния инструмент за доклад на сайта^{(Site Report)} на Netcraft . Той комбинира технологичен отчет с фонов отчет „ кой е собственик на сайта^{(who owns the site)} “, така че да получите задълбочен преглед на сайта. Ще знаете къде се хоства и кой го притежава, плюс малко история на домейна.

Докладът за сайта на Netcraft^{(Netcraft Site Report)} изглежда позволява неограничени търсения. Все пак го използвайте само когато наистина имате нужда от него. Това е безплатен ресурс и общността на разработчиците би искала да остане такъв.

Информация за сайтовете на W3Techs^{(W3Techs’ Sites Info)}

Инструментът за информация за сайтове на W3Techs работи малко по-различно от другите. Те поддържат база данни^(database) с информация, но само на сайтове, които вече са били търсени чрез инструмента. Ако проверявате на сайт, който не е проверяван преди, той ще обходи сайта незабавно. 

Предоставеният отчет е по-малко задълбочен от другите услуги, но все пак е проницателен. Ще получите кои CMS , езици за програмиране, уеб сървър и хостинг доставчик използва даден сайт. W3Techs също така предоставя разширения за браузър за Firefox и Chrome , така че можете да проверявате сайтове само с едно щракване или докосване.

Wappalyzer

Ако предпочитате да имате плъгин за браузър, за да проверите технологиите на сайта, Wappalyzer има плъгини за Firefox , Chrome и Edge . Плъгините са безплатни, лесни за използване и са изложени в лесен за четене дизайн. Щракването върху която и да е технология в отчета ще ви отведе до обяснение за нея, което е чудесно, ако открие нещо, което не сте виждали преди. 

Wappalyzer предлага уникална функция с възможност за създаване на сигнал за уебсайт. Те проверяват сайта ежедневно и ви изпращат имейл, ако открият промяна. Сигналът ще изисква от вас да създадете безплатен акаунт с Wappalyzer и да струва 10 кредита на месец.

Но получавате 50 кредита безплатно всеки месец, а сигналът струва само 10 кредита на всеки 30 дни. Така че предупрежденията на Wappalyzer са основно безплатни, ако наблюдавате 5 или по-малко сайта.

Webspotter

Всички услуги на Webspotter освен една са платени, но това е добре. Тяхното безплатно разширение за Chrome Webspotter^{(Webspotter Chrome extension)} компенсира това. Разширението Webspotter е подобно на Wappalyzer , но има няколко различни функции. До всяка изброена технология има връзки към статистически данни за технологията, списък с уебсайтове, използващи тази технология, и официалния уебсайт за технологията. 

Още по-интригуваща функция е способността на Webspotter да извлича имейл контакти, връзки към социалните медии, SEO анализи^{(SEO analytics)} и друга фирмена информация от уебсайт. Въпреки че това не ви казва как е направен сайтът, той може да бъде полезен за целите на онлайн маркетинга или дори за търсене на работа.

Детектор на теми за WordPress^{(WordPress Theme Detector)}

Може би не се интересувате толкова от уеб разработката, но създавате сайт на WordPress и бихте искали да включите функции, които сте виждали другаде. Изтеглете приставката за браузър Chrome Detector на тема WordPress^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Не само, че WordPress Theme Detector ще ви каже каква WordPress тема^{(WordPress theme)} използва даден сайт, но също така ще ви каже какви WordPress плъгини^{(WordPress plugins)} използва. Той също така ви показва кой е създал темата или приставката и предоставя връзка към мястото, където можете да ги получите. Това прави толкова лесно включването на елементи във вашия WordPress сайт, на които сте се възхищавали на други сайтове.

Научете как работят уебсайтовете

Да, толкова лесно е да се потопите във всеки уебсайт в Интернет^(Internet) и да видите от какво е направен. Опитайте да използвате два или повече от тези инструменти, тъй като някои ще вземат неща, които други не. Повечето от това, което виждате на даден сайт, всъщност се изобразява на вашия компютър. Това го прави лесен за гледане. Това е и причината, поради която трябва да направите уебсайта си възможно най-сигурен^{(make your website as secure as possible)} . Насладете се на дълбокото си гмуркане и ни уведомете какво сте открили или построили.

How Websites Work: Learn What’s Under the Hood

Many technologies go into building websіtes. 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

• Коя е най-добрата услуга за конферентни разговори – най-добрите сравнени приложения

• Автоматично преместване, изтриване или копиране на файлове в Windows

• Как да проверите дали температурата на вашия процесор е твърде висока

• 5-те най-добри приложения за филтриране на синя светлина за Windows, Mac и Linux

• Как да използвате Windows Package Manager за инсталиране на Windows програми

• Урок за Microsoft Planner: Всичко, което трябва да знаете

• 5 най-добри безплатни имейл акаунта за еднократна употреба

• 5 най-добри инструменти за скенер за IP за Windows, Mac, iOS и Android

• Как да премахнете дублиращи се цифрови снимки на вашия компютър с Windows

• 7 начина за отваряне на MDB файл без Microsoft Access

• Използвайте стара уеб камера, за да наблюдавате имота си безплатно

• Най-добрите програми за добавяне на нова функционалност към Windows 10

• Най-добрите помощни програми за настройка на процесора, видеокарта и RAM

• Редактор на скриптове на Google Apps: Всичко, което трябва да знаете, за да започнете

• Най-добрите джаджи за времето за Windows 10/11

• Тестове за мъртви пиксели за отстраняване на заседнал пиксел на вашия монитор

• 5 трика с командния ред, за да направите CMD по-интересен

• 5 най-добри софтуерни програми за управление на двойни монитори

• Автоматично попълване на Google Chrome: Пълно ръководство

• HDG обяснява: Какво е Markdown и какви са основните положения, които трябва да знам?