Pri vytváraní webových stránok sa používa veľa technológií. Systémy na správu obsahu^{(Content management systems)} , rámce^(frameworks) , rôzne skriptovacie a programovacie jazyky^{(different scripting and programming languages)} , platobné systémy^{(payment systems)} ... všeličo!

Ak ste zvedaví, ako funguje vaša obľúbená webová stránka, alebo chcete zistiť, či webová lokalita nepoužíva niečo útržkovité, tento článok vám ukáže niekoľko spôsobov, ako nahliadnuť pod kapotu a zistiť, ako je zostavená.

Pozrite si kód webovej stránky

Ak nie ste vývojár alebo len začínate, chystáte sa spoznať tajomstvo lepšieho programovania. Pozrite sa na kód iných ľudí. Ukázali sme vám, ako na to použiť Vývojárske nástroje prehliadača Chrome^{(how to use Chrome’s Developer Tools)} . 

ChromeDevTools vám pomôže zobraziť kód HTML^(HTML) , JavaScript a CSS stránky , zistiť, aké zdroje môžu spotrebovávať, a tiež ako skontrolovať výkonnosť načítania stránky v prehliadači. Všetky hlavné webové prehliadače majú k dispozícii nejakú verziu nástrojov pre vývojárov.

BuiltWith

BuiltWith.com je zdroj na profesionálnej úrovni, ktorý ide hlboko do stránok, aby videl všetky technológie, ktoré používajú. V súčasnosti pokrývajú viac ako 673 miliónov webových stránok a stále pribúdajú. Hlavnou myšlienkou stránky bolo pomôcť generovať potenciálnych zákazníkov pre ľudí v oblasti predaja softvéru.

Pokročilé funkcie sú dostupné iba prostredníctvom plateného predplatného, ​​ale ktokoľvek môže prejsť na BuiltWith.com , zadať adresu webovej stránky, názov technológie alebo kľúčové slovo a získať podrobný technologický profil. Prihláste^(Sign) sa na bezplatný účet a môžete vykonať päť podrobných vyhľadávaní denne.

Správa stránky Netcraft^{(Netcraft Site Report)}

Netcraft je zdrojom pre vývojárov webu už od roku 1995. Ich odborné znalosti za 25 rokov sa ukazujú v bezplatnom nástroji Netcraft Site Report . Spája technologickú správu so správou na pozadí „ kto vlastní stránku^{(who owns the site)} “, takže získate dôkladný prehľad o stránke. Dozviete sa, kde je hosťovaný a kto ho vlastní, plus históriu domény.

Zdá sa, že správa Netcraft Site Report^{(Netcraft Site Report)} umožňuje neobmedzené vyhľadávanie. Napriek tomu ho používajte len vtedy, keď ho skutočne potrebujete. Je to bezplatný zdroj a komunita vývojárov by chcela, aby to tak zostalo.

Informácie o stránkach W3Techs^{(W3Techs’ Sites Info)}

Nástroj Sites Info od W3Techs funguje trochu inak ako ostatné. Vedú databázu^(database) informácií, ale iba na stránkach, ktoré už boli prostredníctvom nástroja prehľadané. Ak kontrolujete stránku, ktorá ešte nebola skontrolovaná, stránka ju okamžite prehľadá. 

Poskytnutá správa je menej hĺbková ako iné služby, no stále je prehľadná. Dozviete sa, ktoré CMS , programovacie jazyky, webový server a poskytovateľa hostingu stránka používa. W3Techs tiež poskytuje rozšírenia prehliadača pre Firefox a Chrome , takže stránky môžete kontrolovať jediným kliknutím alebo klepnutím.

Wappalyzér^(Wappalyzer)

Ak uprednostňujete doplnok prehliadača na kontrolu technológií stránok, Wappalyzer má doplnky pre Firefox , Chrome a Edge . Doplnky sú bezplatné, ľahko sa používajú a sú usporiadané v ľahko čitateľnom dizajne. Kliknutím na ľubovoľnú technológiu v prehľade sa dostanete k jej vysvetleniu, čo je skvelé, ak nájde niečo, čo ste ešte nevideli. 

Wappalyzer ponúka jedinečnú funkciu s možnosťou vytvorenia upozornenia pre webovú stránku. Denne kontrolujú stránku a ak zistia zmenu, pošle vám e-mail. Upozornenie bude vyžadovať, aby ste si vytvorili bezplatný účet s Wappalyzerom^(Wappalyzer) a stáli 10 kreditov mesačne.

Každý mesiac však dostanete 50 kreditov zadarmo a upozornenie stojí iba 10 kreditov na každých 30 dní. Takže Wappalyzer Alerts sú v podstate zadarmo, ak monitorujete 5 alebo menej stránok.

Webspotter

Všetky služby Webspottera^(Webspotter) okrem jednej sú platenou službou, ale to je v poriadku. Ich bezplatné rozšírenie Webspotter Chrome^{(Webspotter Chrome extension)} to kompenzuje. Rozšírenie Webspotter je podobné ako Wappalyzer , má však niekoľko odlišných funkcií. Vedľa každej uvedenej technológie sú odkazy na štatistiky o technológii, zoznam webových stránok, ktoré túto technológiu používajú, a oficiálnu webovú stránku danej technológie. 

Ešte zaujímavejšou funkciou je schopnosť Webspottera vytiahnuť z webovej stránky e-mailové kontakty, odkazy na sociálne siete, SEO analýzy^{(SEO analytics)} a ďalšie firemné informácie. Hoci to nehovorí o tom, ako je stránka vytvorená, môže byť užitočná na účely online marketingu alebo dokonca na hľadanie zamestnania.

Detektor tém WordPress^{(WordPress Theme Detector)}

Možno vás až tak nezaujíma vývoj webových aplikácií, ale vytvárate webovú stránku WordPress a chceli by ste zahrnúť funkcie, ktoré ste videli inde. Stiahnite si doplnok WordPress Theme Detector pre prehliadač Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Detektor tém WordPress^{(WordPress Theme Detector)} vám nielen povie, akú tému WordPress^{(WordPress theme)} stránka používa, ale tiež vám povie, aké doplnky WordPress^{(WordPress plugins)} používa. Tiež vám ukáže, kto vytvoril tému alebo doplnok, a poskytuje odkaz, kde ich môžete získať. Vďaka tomu je tak jednoduché začleniť do vašej stránky WordPress prvky , ktoré ste obdivovali na iných stránkach.

Zistite, ako fungujú webové stránky

Áno, je také ľahké ponoriť sa do akejkoľvek webovej stránky na internete^(Internet) a zistiť, z čoho pozostáva. Skúste použiť dva alebo viac z týchto nástrojov, pretože niektoré dokážu zachytiť veci, ktoré iní nie. Väčšina z toho, čo vidíte na stránke, sa v skutočnosti vykresľuje vo vašom počítači. To je to, čo uľahčuje pohľad. Je to tiež dôvod, prečo musíte urobiť svoju webovú stránku čo najbezpečnejšou^{(make your website as secure as possible)} . Užite si svoje hĺbkové potápanie a dajte nám vedieť, čo nájdete alebo postavíte.

How Websites Work: Learn What’s Under the Hood

Many technologieѕ go into buildіng 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

• Aká je najlepšia služba konferenčného hovoru – porovnávanie najlepších aplikácií

• Automaticky presúvať, odstraňovať alebo kopírovať súbory v systéme Windows

• Ako skontrolovať, či je teplota vášho procesora príliš vysoká

• 5 najlepších aplikácií na filtrovanie modrého svetla pre Windows, Mac a Linux

• Ako používať správcu balíkov systému Windows na inštaláciu programov systému Windows

• Použite starú webovú kameru na bezplatné monitorovanie svojho majetku

• Ako blokovať stránky pomocou bezplatného softvéru na rodičovskú kontrolu

• Najlepšie nástroje na ladenie CPU, grafickej karty a RAM

• 4 skvelé nástroje na vytváranie inštalačných balíkov systému Windows

• 9 spôsobov, ako zaznamenať hranie na vašom PC

• Google Apps Script Editor: Všetko, čo potrebujete vedieť, aby ste mohli začať

• Dva nástroje na prepis na transformáciu zvuku na text

• 3 nástroje na diagnostiku a riešenie problémov s monitorom

• 11 najlepších bezplatných softvérových snímok obrazovky pre Windows

• 5 Windows alternatív k príkazu sudo pre Linux

• 5 trikov príkazového riadka, vďaka ktorým bude CMD zaujímavejšie

• Najlepšie aplikácie na monitorovanie používania internetu

• 5 najlepších bezpečných stránok na stiahnutie APK pre aplikácie pre Android

• Funguje obnova súborov systému Windows od spoločnosti Microsoft? Testovali sme to.

• Ako odstrániť duplicitné digitálne fotografie na počítači so systémom Windows