Πολλές τεχνολογίες μπαίνουν στην κατασκευή ιστοσελίδων. Συστήματα διαχείρισης περιεχομένου^{(Content management systems)} , πλαίσια^(frameworks) , διαφορετικές γλώσσες δέσμης ενεργειών και προγραμματισμού^{(different scripting and programming languages)} , συστήματα πληρωμών^{(payment systems)} …κάθε λογής πράγματα!

Εάν είστε περίεργοι πώς λειτουργεί ο αγαπημένος σας ιστότοπος ή θέλετε να δείτε εάν ένας ιστότοπος χρησιμοποιεί κάτι πρόχειρο, αυτό το άρθρο θα σας δείξει διάφορους τρόπους για να κοιτάξετε κάτω από την κουκούλα και να δείτε πώς είναι κατασκευασμένο.

Δείτε τον Κώδικα της Ιστοσελίδας

Εάν δεν είστε προγραμματιστής ή μόλις ξεκινάτε, πρόκειται να μάθετε το μυστικό για καλύτερο προγραμματισμό. Κοιτάξτε τον κωδικό των άλλων. Σας δείξαμε πώς να χρησιμοποιείτε τα Εργαλεία προγραμματιστών του Chrome για^{(how to use Chrome’s Developer Tools)} να κάνετε ακριβώς αυτό. 

Τα ChromeDevTools^{(ChromeDevTools)} θα σας βοηθήσουν να προβάλετε τον κώδικα HTML^(HTML) , JavaScript και CSS ενός ιστότοπου , να μάθετε ποιες πηγές μπορεί να καταναλώνουν, καθώς και πώς να ελέγξετε την απόδοση φόρτωσης ενός ιστότοπου στο πρόγραμμα περιήγησης. Όλα τα μεγάλα προγράμματα περιήγησης ιστού έχουν διαθέσιμη κάποια έκδοση των εργαλείων του προγραμματιστή.

ΧτισμένοΜε^(BuiltWith)

Το BuiltWith.com^{(BuiltWith.com)} είναι ένας πόρος επαγγελματικού επιπέδου που πηγαίνει βαθιά στους ιστότοπους για να δει όλες τις τεχνολογίες που χρησιμοποιούν. Επί του παρόντος, καλύπτουν πάνω από 673 εκατομμύρια ιστότοπους και συνεχίζουν. Η κύρια ιδέα πίσω από τον ιστότοπο ήταν να βοηθήσει στη δημιουργία δυνητικών πελατών για άτομα σε πωλήσεις λογισμικού.

Οι προηγμένες λειτουργίες είναι διαθέσιμες μόνο μέσω συνδρομής επί πληρωμή, αλλά οποιοσδήποτε μπορεί να μεταβεί στο BuiltWith.com , να εισαγάγει μια διεύθυνση ιστότοπου, όνομα τεχνολογίας ή λέξη-κλειδί και να λάβει ένα λεπτομερές προφίλ τεχνολογίας. Εγγραφείτε^(Sign) για έναν δωρεάν λογαριασμό και μπορείτε να κάνετε πέντε λεπτομερείς αναζητήσεις την ημέρα.

Αναφορά τοποθεσίας Netcraft^{(Netcraft Site Report)}

Το Netcraft είναι ένας πόρος για προγραμματιστές ιστού από το 1995. Η τεχνογνωσία τους εδώ και 25 χρόνια φαίνεται στο δωρεάν εργαλείο Αναφοράς τοποθεσίας της Netcraft. ^{(Site Report)}Συνδυάζει μια αναφορά τεχνολογίας με μια αναφορά παρασκηνίου « ποιος είναι ο ιδιοκτήτης του ιστότοπου^{(who owns the site)} », ώστε να έχετε μια λεπτομερή επισκόπηση του ιστότοπου. Θα γνωρίζετε πού φιλοξενείται και σε ποιον ανήκει, καθώς και κάποιο ιστορικό τομέα.

Η αναφορά τοποθεσίας Netcraft^{(Netcraft Site Report)} φαίνεται να επιτρέπει απεριόριστες αναζητήσεις. Ωστόσο, χρησιμοποιήστε το μόνο όταν το χρειάζεστε πραγματικά. Είναι ένας δωρεάν πόρος και η κοινότητα προγραμματιστών θα ήθελε να το δει να παραμένει έτσι.

Πληροφορίες για τοποθεσίες της W3Techs^{(W3Techs’ Sites Info)}

Το εργαλείο πληροφοριών ιστότοπων της W3Techs λειτουργεί κάπως διαφορετικά από τα άλλα. Διατηρούν μια βάση δεδομένων^(database) με πληροφορίες, αλλά μόνο σε ιστότοπους που έχουν ήδη αναζητηθεί μέσω του εργαλείου. Εάν κάνετε έλεγχο σε έναν ιστότοπο που δεν έχει ελεγχθεί πριν, θα ανιχνεύσει τον ιστότοπο αμέσως. 

Η αναφορά που παρέχεται είναι λιγότερο εμπεριστατωμένη από άλλες υπηρεσίες που παρέχουν, αλλά εξακολουθεί να είναι οξυδερκής. Θα λάβετε ποιο CMS , γλώσσες προγραμματισμού, διακομιστή ιστού και πάροχο φιλοξενίας χρησιμοποιεί ένας ιστότοπος. Η W3Techs^(W3Techs) παρέχει επίσης επεκτάσεις προγράμματος περιήγησης για Firefox και Chrome , ώστε να μπορείτε να ελέγχετε ιστότοπους με ένα μόνο κλικ ή ένα πάτημα.

Wappalyzer

Εάν προτιμάτε να έχετε μια προσθήκη προγράμματος περιήγησης για να ελέγχετε τις τεχνολογίες ενός ιστότοπου, το Wappalyzer διαθέτει προσθήκες για Firefox , Chrome και Edge . Τα πρόσθετα είναι δωρεάν, εύχρηστα και έχουν σχεδιαστεί με ευκολία στην ανάγνωση. Κάνοντας κλικ σε οποιαδήποτε τεχνολογία στην αναφορά θα μεταφερθείτε σε μια εξήγησή της, κάτι που είναι υπέροχο αν βρει κάτι που δεν έχετε ξαναδεί. 

Το Wappalyzer^(Wappalyzer) προσφέρει μια μοναδική δυνατότητα με τη δυνατότητα δημιουργίας ειδοποίησης για έναν ιστότοπο. Ελέγχουν καθημερινά τον ιστότοπο και σας στέλνουν email εάν εντοπίσουν κάποια αλλαγή. Η ειδοποίηση θα σας ζητήσει να δημιουργήσετε έναν δωρεάν λογαριασμό με το Wappalyzer^(Wappalyzer) και να κοστίσει 10 μονάδες ανά μήνα.

Αλλά λαμβάνετε 50 μονάδες δωρεάν κάθε μήνα και μια ειδοποίηση κοστίζει μόνο 10 μονάδες για κάθε 30 ημέρες. Επομένως, οι ειδοποιήσεις Wappalyzer είναι βασικά δωρεάν εάν παρακολουθείτε 5 ή λιγότερους ιστότοπους.

Webspotter

Όλες οι υπηρεσίες του Webspotter εκτός από μία είναι πληρωμένη υπηρεσία, αλλά δεν πειράζει. Η δωρεάν επέκταση Webspotter Chrome^{(Webspotter Chrome extension)} το αντισταθμίζει. Η επέκταση Webspotter είναι παρόμοια με το Wappalyzer , ωστόσο έχει μερικές διαφορετικές δυνατότητες. Δίπλα σε κάθε τεχνολογία που αναφέρεται, υπάρχουν σύνδεσμοι προς στατιστικά στοιχεία σχετικά με την τεχνολογία, μια λίστα ιστότοπων που χρησιμοποιούν αυτήν την τεχνολογία και ο επίσημος ιστότοπος για την τεχνολογία. 

Ένα ακόμη πιο ενδιαφέρον χαρακτηριστικό είναι η ικανότητα του Webspotter να αποσύρει επαφές email, συνδέσμους μέσων κοινωνικής δικτύωσης, αναλυτικά στοιχεία SEO^{(SEO analytics)} και άλλες εταιρικές πληροφορίες από έναν ιστότοπο. Αν και αυτό δεν σας λέει για τον τρόπο κατασκευής του ιστότοπου, θα μπορούσε να είναι χρήσιμο για σκοπούς διαδικτυακού μάρκετινγκ ή ακόμα και για αναζήτηση εργασίας.

Ανιχνευτής θεμάτων WordPress^{(WordPress Theme Detector)}

Ίσως, δεν σας ενδιαφέρει τόσο η ανάπτυξη ιστού, αλλά δημιουργείτε έναν ιστότοπο WordPress και θα θέλατε να συμπεριλάβετε λειτουργίες που έχετε δει αλλού. Κατεβάστε την προσθήκη WordPress Theme Detector του προγράμματος περιήγησης Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

Ο ανιχνευτής θεμάτων WordPress^{(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

• Πώς να ελέγξετε εάν η θερμοκρασία της CPU σας είναι πολύ υψηλή

• Οι 5 καλύτερες εφαρμογές φίλτρου μπλε φωτός για Windows, Mac και Linux

• Τρόπος χρήσης ενός Windows Package Manager για την εγκατάσταση προγραμμάτων των Windows

• 5 φορητές εφαρμογές που θέλετε οπωσδήποτε να έχετε στο USB Stick σας

• Επέκταση Avast Online Security: Αξίζει να τη χρησιμοποιήσετε;

• 5 Εργαλεία για τη μετατροπή αρχείων BIN σε εικόνες ISO

• Τα καλύτερα βοηθητικά προγράμματα συντονισμού CPU, κάρτας βίντεο και μνήμης RAM

• 3 Εργαλεία για τη διάγνωση και την αντιμετώπιση προβλημάτων με την οθόνη σας

• Τι είναι το Microsoft Power Automate και τα δωρεάν πρότυπα για λήψη

• Τα καλύτερα προγράμματα για την προσθήκη νέας λειτουργικότητας στα Windows 10

• Χρησιμοποιήστε μια παλιά κάμερα web για να παρακολουθείτε δωρεάν την ιδιοκτησία σας

• 7 καλύτερα εργαλεία αφαίρεσης Bloatware για Windows

• Το HDG εξηγεί : Τι είναι τα SQL, T-SQL, MSSQL, PL/SQL και MySQL;

• Δύο εργαλεία μεταγραφής για τη μετατροπή ήχου σε κείμενο

• Πράγματα που πρέπει να λάβετε υπόψη πριν δημιουργήσετε το δικό σας Wiki

• Πώς να αντιγράψετε τα DVD και τα Blu-Ray σας χωρίς κόπο με το MakeMKV

• 5 καλύτερα εργαλεία σαρωτή IP για Windows, Mac, iOS και Android

• 7 καλύτερα εργαλεία αποκοπής για Chromebook