Mnoge tehnologije idu u izradu web stranica. Sustavi za upravljanje sadržajem^{(Content management systems)} , okviri^(frameworks) , različiti skriptni i programski jezici^{(different scripting and programming languages)} , sustavi plaćanja^{(payment systems)} …sve vrste stvari!

Ako ste znatiželjni kako vaša omiljena web stranica funkcionira ili želite vidjeti koristi li web-mjesto nešto nedorečeno, ovaj će vam članak pokazati nekoliko načina da pogledate ispod haube i vidite kako je napravljena.

Pogledajte kod web-mjesta

Ako niste programer ili tek počinjete, uskoro ćete naučiti tajnu boljeg programiranja. Pogledajte kod drugih ljudi. Pokazali smo vam kako koristiti Chromeove alate za razvojne programere^{(how to use Chrome’s Developer Tools)} da biste to učinili. 

ChromeDevTools pomoći će vam da vidite HTML , JavaScript i CSS kôd web-lokacije, saznate koje izvore možda koriste, kao i kako provjeriti izvedbu učitavanja web-lokacije u pregledniku. Svi glavni web-preglednici imaju na raspolaganju neku verziju alata programera.

Izgrađen sa^(BuiltWith)

BuiltWith.com je resurs na profesionalnoj razini koji ide duboko u web stranice kako bi vidio sve tehnologije koje koriste. Trenutačno pokrivaju preko 673 milijuna web-mjesta i dalje se povećavaju. Glavna ideja stranice bila je pomoći u generiranju potencijalnih kupaca za ljude u prodaji softvera.

Napredne značajke dostupne su samo putem plaćene pretplate, ali svatko može otići na BuiltWith.com , unijeti adresu web-mjesta, naziv tehnologije ili ključnu riječ i dobiti detaljan tehnološki profil. Prijavite^(Sign) se za besplatni račun i možete napraviti pet detaljnih pregleda dnevno.

Netcraft izvješće o web-mjestu^{(Netcraft Site Report)}

Netcraft je resurs za web programere od 1995. Njihova stručnost tijekom 25 godina pokazuje se u Netcraftovom besplatnom alatu za izvješće o web lokaciji^{(Site Report)} . Kombinira tehnološko izvješće s pozadinskim izvješćem " tko je vlasnik web-mjesta^{(who owns the site)} ", tako da dobivate temeljit pregled web-mjesta. Znat ćete gdje se nalazi i tko ga posjeduje, kao i povijest domene.

Čini se da Netcraft Site Report dopušta neograničeno pretraživanje. Ipak, koristite ga samo kada vam je stvarno potreban. To je besplatan resurs i zajednica programera bi željela da tako i ostane.

Informacije o web-mjestu W3Techs^{(W3Techs’ Sites Info)}

Alat za informacije o web-mjestu tvrtke W3Techs radi malo drugačije od ostalih. Čuvaju bazu^(database) podataka, ali samo na stranicama koje su već pretražene putem alata. Ako provjeravate web-lokaciju koja prije nije provjerena, ona će odmah indeksirati web-lokaciju. 

Dostavljeno izvješće manje je detaljno od ostalih usluga, ali je ipak pronicljivo. Dobit ćete koji CMS , programske jezike, web-poslužitelj i hosting davatelja web-lokacija koristi. W3Techs također nudi proširenja preglednika za Firefox i Chrome tako da možete provjeravati web stranice samo jednim klikom ili dodirom.

Wappalyzer

Ako više volite imati dodatak preglednika za provjeru tehnologija web-mjesta, Wappalyzer ima dodatke za Firefox , Chrome i Edge . Dodaci su besplatni, jednostavni za korištenje i raspoređeni su u lako čitljivom dizajnu. Klikom na bilo koju tehnologiju u izvješću dovest će vas do njezinog objašnjenja, što je sjajno ako pronađe nešto što prije niste vidjeli. 

Wappalyzer nudi jedinstvenu značajku s mogućnošću stvaranja upozorenja za web stranicu. Svakodnevno provjeravaju stranicu i e-porukom vam ako otkriju promjenu. Upozorenje će zahtijevati da stvorite besplatni račun s Wappalyzerom^(Wappalyzer) i koštate 10 kredita mjesečno.

Ali dobivate 50 kredita besplatno svaki mjesec, a upozorenje košta samo 10 kredita za svakih 30 dana. Dakle, upozorenja Wappalyzera su u osnovi besplatna ako nadzirete 5 ili manje stranica.

Webspotter

Sve osim jedne usluge Webspottera^(Webspotter) su plaćene usluge, ali to je u redu. Njihovo besplatno proširenje za Chrome Webspotter^{(Webspotter Chrome extension)} nadoknađuje to. Proširenje Webspotter slično je Wappalyzeru^(Wappalyzer) , ali ima nekoliko različitih značajki. Pored svake navedene tehnologije nalaze se poveznice na statistiku o tehnologiji, popis web-mjesta koje koriste tu tehnologiju i službenu web stranicu za tehnologiju. 

Još intrigantnija značajka je Webspotterova sposobnost da izvuče kontakte e-pošte, veze na društvene mreže, SEO analitiku^{(SEO analytics)} i druge informacije o tvrtki s web stranice. Iako vam to ne govori o tome kako je stranica napravljena, mogla bi biti korisna u svrhe internetskog marketinga ili čak traženja posla.

Detektor tema za WordPress^{(WordPress Theme Detector)}

Možda niste toliko zainteresirani za web razvoj, ali sastavljate WordPress stranicu i želite uključiti značajke koje ste vidjeli drugdje. Preuzmite dodatak WordPress Theme Detector za preglednik Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Ne samo da će vam WordPress Theme Detector reći koju WordPress temu^{(WordPress theme)} web-mjesto koristi, već će vam reći i koje WordPress dodatke^{(WordPress plugins)} koristi. Također vam pokazuje tko je stvorio temu ili dodatak i pruža vezu do mjesta gdje ih možete dobiti. Zbog toga je tako lako ugraditi elemente u svoju WordPress stranicu kojima ste se divili na drugim stranicama.

Saznajte kako web stranice rade

Da, tako je lako zaroniti u bilo koju web stranicu na Internetu^(Internet) i vidjeti od čega je napravljena. Pokušajte upotrijebiti dva ili više ovih alata, jer će neki pokupiti stvari koje drugi ne. Većina onoga što vidite na web-mjestu zapravo se prikazuje na vašem računalu. To je ono što olakšava gledanje. To je također razlog zašto svoju web stranicu trebate učiniti što sigurnijom^{(make your website as secure as possible)} . Uživajte u dubokom ronjenju i javite nam što ste pronašli ili napravili.

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

• Koja je najbolja usluga konferencijskih poziva – najbolje aplikacije u usporedbi

• Automatski premjestite, izbrišite ili kopirajte datoteke u sustavu Windows

• Kako provjeriti je li temperatura vašeg procesora previsoka

• 5 najboljih aplikacija za filter plavog svjetla za Windows, Mac i Linux

• Kako koristiti Windows Package Manager za instaliranje Windows programa

• Google Chrome Autofill: Potpuni vodič

• Najbolje aplikacije za praćenje korištenja interneta

• 5 prijenosnih aplikacija koje svakako želite imati na svom USB sticku

• 3 alata za dijagnosticiranje i rješavanje problema s vašim monitorom

• Vodič za Microsoft Planner: sve što trebate znati

• 5 alata za pretvaranje BIN datoteka u ISO slike

• 9 načina za snimanje igre na računalu

• 5 najboljih alata za IP skener za Windows, Mac, iOS i Android

• Najbolji Markdown urednici: sve platforme i online

• 4 sjajna alata za izradu paketa Windows Installer

• 5 najboljih dodataka za privatnost Firefoxa za sigurnost na mreži

• 5 najboljih sigurnih mjesta za preuzimanje APK-a za Android aplikacije

• Uređivač skripti za Google Apps: sve što trebate znati da biste započeli

• 5 trikova naredbenog retka koji će učiniti CMD zanimljivijim

• 10 najboljih proširenja privatnosti za Chrome (2022.)