تدخل العديد من التقنيات في بناء مواقع الويب. أنظمة إدارة المحتوى^{(Content management systems)} ، وأطر العمل^(frameworks) ، ولغات البرمجة النصية والبرمجة المختلفة^{(different scripting and programming languages)} ، وأنظمة الدفع^{(payment systems)} ... كل أنواع الأشياء!

إذا كنت مهتمًا بكيفية عمل موقع الويب المفضل لديك ، أو تريد معرفة ما إذا كان أحد المواقع يستخدم شيئًا سطحيًا ، فستعرض لك هذه المقالة عدة طرق للبحث تحت الغطاء ومعرفة كيفية بنائه.

عرض كود الموقع

إذا لم تكن مطورًا أو بدأت للتو ، فأنت على وشك معرفة سر البرمجة الأفضل. انظر إلى كود الآخرين. لقد أوضحنا لك كيفية استخدام أدوات مطوري Chrome^{(how to use Chrome’s Developer Tools)} للقيام بذلك. 

سيساعدك ChromeDevTools في عرض كود ^{(ChromeDevTools)}HTML وجافا سكريبت^(JavaScript) و CSS للموقع ، ومعرفة المصادر التي قد يستهلكونها ، وكذلك كيفية التحقق من أداء تحميل الموقع في المتصفح. تحتوي جميع متصفحات الويب الرئيسية على بعض إصدارات أدوات المطور المتاحة.

بنيت مع^(BuiltWith)

BuiltWith.com هو مورد على مستوى احترافي يتعمق في المواقع لرؤية جميع التقنيات التي يستخدمونها. حاليًا ، تغطي أكثر من 673 مليون موقع ويب والعدد في ازدياد. كانت الفكرة الرئيسية وراء الموقع هي المساعدة في توليد عملاء محتملين في مبيعات البرمجيات.

تتوفر الميزات المتقدمة فقط من خلال اشتراك مدفوع ، ولكن يمكن لأي شخص الانتقال إلى BuiltWith.com وإدخال عنوان موقع ويب أو اسم تقنية أو كلمة رئيسية والحصول على ملف تعريف تقني مفصل. قم^(Sign) بالتسجيل للحصول على حساب مجاني ويمكنك إجراء خمس عمليات بحث تفصيلية في اليوم.

تقرير موقع Netcraft^{(Netcraft Site Report)}

تعد Netcraft موردًا لمطوري الويب منذ عام 1995. تظهر خبرتهم التي تزيد عن 25 عامًا في أداة Site Report المجانية من Netcraft. ^{(Site Report)}فهو يجمع بين تقرير التكنولوجيا وتقرير الخلفية " مالك الموقع^{(who owns the site)} " ، بحيث تحصل على نظرة عامة شاملة على الموقع. ستعرف مكان استضافته ومن يمتلكه بالإضافة إلى بعض محفوظات المجال.

يبدو أن تقرير موقع Netcraft^{(Netcraft Site Report)} يسمح بعمليات بحث غير محدودة. ومع ذلك ، استخدمه فقط عندما تكون في حاجة إليه حقًا. إنه مورد مجاني ويود مجتمع المطورين رؤيته على هذا النحو.

معلومات مواقع W3Techs^{(W3Techs’ Sites Info)}

تعمل أداة معلومات مواقع W3Techs بشكل مختلف قليلاً عن الآخرين. يحتفظون بقاعدة بيانات^(database) للمعلومات ، ولكن فقط على المواقع التي تم البحث عنها بالفعل من خلال الأداة. إذا كنت تتحقق من موقع لم يتم التحقق منه من قبل ، فسوف يزحف إلى الموقع على الفور. 

التقرير المقدم أقل عمقًا مما تقدمه الخدمات الأخرى ، لكنه لا يزال ثاقبًا. ستحصل على نظام إدارة المحتوى ( CMS ) ولغات البرمجة وخادم الويب وموفر الاستضافة الذي يستخدمه الموقع. توفر W3Techs^(W3Techs) أيضًا امتدادات متصفح لمتصفح Firefox^(Firefox) و Chrome حتى تتمكن من التحقق من المواقع بنقرة واحدة أو نقرة.

واباليزر^(Wappalyzer)

إذا كنت تفضل أن يكون لديك مكون إضافي للمتصفح للتحقق من تقنيات الموقع ، فإن Wappalyzer يحتوي على مكونات إضافية لمتصفح Firefox^(Firefox) و Chrome و Edge . الإضافات مجانية وسهلة الاستخدام وهي موضوعة في تصميم سهل القراءة. سينقلك النقر فوق أي تقنية في التقرير إلى شرح لها ، وهو أمر رائع إذا وجدت شيئًا لم تره من قبل. 

يوفر Wappalyzer^(Wappalyzer) ميزة فريدة من نوعها مع القدرة على إنشاء تنبيه لموقع ويب. يقومون بفحص الموقع يوميًا وإرسال بريد إلكتروني إليك إذا اكتشفوا تغييرًا. سيطلب منك التنبيه إنشاء حساب مجاني باستخدام Wappalyzer وتكلفة 10 أرصدة شهريًا.

لكنك تحصل على 50 رصيدًا مجانًا كل شهر والتنبيه لا يكلفك سوى 10 أرصدة لكل 30 يومًا. لذا فإن تنبيهات Wappalyzer مجانية بشكل أساسي إذا كنت تراقب 5 مواقع أو أقل.

موقع الويب^(Webspotter)

جميع خدمات Webspotter باستثناء واحدة هي خدمة مدفوعة ، ولكن لا بأس بذلك. ملحق Webspotter Chrome^{(Webspotter Chrome extension)} المجاني يعوض عن ذلك. امتداد Webspotter^(Webspotter) مشابه لـ Wappalyzer ، إلا أنه يحتوي على بعض الميزات المختلفة. بجانب كل تقنية مدرجة ، توجد روابط لإحصائيات حول التكنولوجيا ، وقائمة بالمواقع التي تستخدم تلك التقنية ، والموقع الرسمي للتكنولوجيا. 

ميزة أكثر إثارة للاهتمام هي قدرة Webspotter على سحب جهات اتصال البريد الإلكتروني وروابط الوسائط الاجتماعية وتحليلات تحسين محركات البحث^{(SEO analytics)} ومعلومات الشركة الأخرى من موقع الويب. على الرغم من أن هذا لا يخبرك بكيفية إنشاء الموقع ، إلا أنه قد يكون مفيدًا لأغراض التسويق عبر الإنترنت أو حتى البحث عن عمل.

ووردبريس موضوع الكاشف^{(WordPress Theme Detector)}

ربما لا تكون مهتمًا جدًا بتطوير الويب ولكنك تقوم بتجميع موقع WordPress وترغب في تضمين الميزات التي رأيتها في مكان آخر. قم بتنزيل المكون الإضافي لمتصفح WordPress Theme Detector Chrome^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

لن يخبرك برنامج WordPress Theme Detector فقط ^{(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 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

• ما هي أفضل خدمة اتصال جماعي - أفضل التطبيقات مقارنة

• نقل الملفات أو حذفها أو نسخها تلقائيًا في Windows

• كيفية التحقق مما إذا كانت درجة حرارة وحدة المعالجة المركزية لديك مرتفعة جدًا

• أفضل 5 تطبيقات لتصفية الضوء الأزرق لنظام التشغيل Windows و Mac و Linux

• كيفية استخدام Windows Package Manager لتثبيت برامج Windows

• 4 أدوات رائعة لإنشاء حزم Windows Installer

• محرر النصوص البرمجية لـ Google Apps: كل ما تحتاج إلى معرفته للبدء

• أفضل 5 أدوات IP Scanner لنظام التشغيل Windows و Mac و iOS و Android

• أفضل 10 إضافات للخصوصية لمتصفح Chrome (2022)

• كيفية التخلص من الصور الرقمية المكررة على جهاز الكمبيوتر الذي يعمل بنظام Windows

• Google Chrome Autofill: دليل كامل

• أفضل أدوات الطقس لنظام التشغيل Windows 10/11

• اثنان من أدوات النسخ لتحويل الصوت إلى نص

• 9 طرق لتسجيل اللعب على جهاز الكمبيوتر الخاص بك

• استخدم كاميرا ويب قديمة لمراقبة ممتلكاتك مجانًا

• كيفية نسخ أقراص DVD و Blu-Rays الخاصة بك بسهولة مع MakeMKV

• أشياء يجب مراعاتها قبل إنشاء الويكي الخاص بك

• 5 تطبيقات محمولة تريد بالتأكيد الحصول عليها على USB Stick

• أفضل 4 بدائل لـ Google Chromecast

• هل يعمل استرداد ملفات Windows من Microsoft؟ اختبرناها.