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

Ако сте радознали како функционише ваша омиљена веб локација или желите да видите да ли веб локација користи нешто што је недовољно, овај чланак ће вам показати неколико начина да погледате испод хаубе и видите како је направљен.

Погледајте код веб локације

Ако нисте програмер или тек почињете, ускоро ћете научити тајну бољег програмирања. Погледај код других људи. Показали смо вам како да користите Цхроме-ове алатке за програмере^{(how to use Chrome’s Developer Tools)} да бисте то урадили. 

ЦхромеДевТоолс^{(ChromeDevTools)} ће вам помоћи да видите ХТМЛ^(HTML) , ЈаваСцрипт^(JavaScript) и ЦСС^(CSS) код сајта, сазнате које изворе можда користе, као и како да проверите учинак учитавања сајта у прегледачу. Сви главни веб претраживачи имају на располагању неку верзију алата програмера.

БуилтВитх^(BuiltWith)

БуилтВитх.цом^{(BuiltWith.com)} је ресурс на професионалном нивоу који иде дубоко у сајтове да би видео све технологије које користе. Тренутно покривају преко 673 милиона веб локација и све више се повећавају. Главна идеја сајта је била да помогне у генерисању потенцијалних клијената за људе у продаји софтвера.

Напредне функције су доступне само путем плаћене претплате, али свако може да оде на БуилтВитх.цом^{(BuiltWith.com)} , унесе адресу веб локације, назив технологије или кључну реч и добије детаљан технолошки профил. Пријавите^(Sign) се за бесплатан налог и можете да урадите пет детаљних прегледа дневно.

Извештај Нетцрафт сајта^{(Netcraft Site Report)}

Нетцрафт је ресурс за веб програмере од 1995. Њихова стручност током 25 година показује се у Нетцрафт-овом бесплатном алату за извештаје о сајту^{(Site Report)} . Комбинује извештај о технологији са извештајем о позадини „ ко је власник сајта^{(who owns the site)} “, тако да добијате детаљан преглед сајта. Знаћете где је хостован и ко је власник, плус нешто историје домена.

Чини се да извештај Нетцрафт сајта^{(Netcraft Site Report)} дозвољава неограничено тражење. Ипак, користите га само када вам је заиста потребан. То је бесплатан ресурс и заједница програмера би волела да тако и остане.

Информације о сајтовима В3Тецхс^{(W3Techs’ Sites Info)}

Алат за информације о сајтовима компаније В3Тецхс ради мало другачије од осталих. Они чувају базу^(database) података, али само на сајтовима који су већ претраживани путем алата. Ако проверавате сајт који раније није проверен, он ће одмах пописати сајт. 

Достављени извештај је мање дубински него што пружају друге услуге, али је ипак проницљив. Добићете који ЦМС^(CMS) , програмски језик, веб сервер и хостинг провајдер сајт користи. В3Тецхс^(W3Techs) такође обезбеђује проширења претраживача за Фирефок^(Firefox) и Цхроме^(Chrome) тако да можете да проверавате сајтове само једним кликом или додиром.

Ваппализер^(Wappalyzer)

Ако више волите да имате додатак за прегледач да бисте проверили технологије сајта, Ваппализер^(Wappalyzer) има додатке за Фирефок^(Firefox) , Цхроме^(Chrome) и Едге^(Edge) . Додаци су бесплатни, лаки за употребу и распоређени су у дизајну који је лак за читање. Кликом на било коју технологију у извештају ћете доћи до њеног објашњења, што је сјајно ако пронађе нешто што раније нисте видели. 

Ваппализер^(Wappalyzer) нуди јединствену функцију са могућношћу креирања упозорења за веб локацију. Они свакодневно проверавају сајт и ако открију промену, добијате е-пошту. Упозорење ће захтевати да креирате бесплатан налог са Ваппализер^(Wappalyzer) -ом и коштаће 10 кредита месечно.

Али добијате 50 кредита бесплатно сваког месеца, а упозорење кошта само 10 кредита на сваких 30 дана. Дакле, Ваппализер упозорења су у основи бесплатна ако надгледате 5 или мање сајтова.

Вебспоттер^(Webspotter)

Све осим једне услуге Вебспоттера^(Webspotter) су плаћене услуге, али то је у реду. Њихово бесплатно проширење за Цхроме Вебспоттер^{(Webspotter Chrome extension)} надокнађује то. Екстензија Вебспоттер^(Webspotter) је слична Ваппализер-^(Wappalyzer) у , али има неколико различитих функција. Поред сваке наведене технологије налазе се везе до статистике о технологији, списак веб локација које користе ту технологију и званична веб локација за технологију. 

Још интригантнија карактеристика је Вебспоттер-ова способност да извуче контакте е-поште, везе друштвених медија, СЕО аналитику^{(SEO analytics)} и друге информације о компанији са веб странице. Иако вам то не говори о томе како је сајт направљен, могао би бити користан у сврхе онлајн маркетинга или чак тражења посла.

ВордПресс детектор тема^{(WordPress Theme Detector)}

Можда нисте толико заинтересовани за веб развој, али састављате ВордПресс^(WordPress) сајт и желели бисте да укључите функције које сте видели негде другде. Преузмите додатак за Цхроме претраживач ВордПресс Тхеме Детецтор^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Не само да ће вам ВордПресс детектор тема^{(WordPress Theme Detector)} рећи коју ВордПресс тему^{(WordPress theme)} сајт користи, већ ће вам рећи и које ВордПресс додатке^{(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 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

• Која је најбоља услуга конференцијских позива – најбоље апликације у поређењу

• Аутоматски премести, избриши или копирај датотеке у Виндовс-у

• Како проверити да ли је температура вашег процесора превисока

• 5 најбољих апликација за филтер плаве светлости за Виндовс, Мац и Линук

• Како користити Виндовс менаџер пакета за инсталирање Виндовс програма

• Тестови мртвих пиксела да поправите заглављени пиксел на вашем монитору

• Да ли Мицрософт Виндовс Филе Рецовери ради? Тестирали смо то.

• Најбоље 4 алтернативе за Гоогле Цхромецаст

• 5 најбољих алата за ИП скенер за Виндовс, Мац, иОС и Андроид

• Како уклонити дупликате дигиталних фотографија на вашем Виндовс рачунару

• 5 најбољих софтверских програма за управљање двоструким мониторима

• Користите стару веб камеру да бисте бесплатно надгледали своју имовину

• 7 начина за отварање МДБ датотеке без Мицрософт Аццесс-а

• Запиер парсер е-поште: 3 креативна начина да га користите

• ХДГ објашњава: Шта је СКЛ, Т-СКЛ, МССКЛ, ПЛ/СКЛ и МиСКЛ?

• Гоогле Аппс Сцрипт Едитор: све што треба да знате да бисте започели

• 11 најбољих бесплатних софтвера за снимање екрана за Виндовс

• Ствари које треба размотрити пре него што направите сопствену Вики

• Најбољи Маркдовн уређивачи: све платформе и онлајн

• Најбољи временски виџети за Виндовс 10/11