📚 عرض صفحة إلكترونية
المفاهيم الأساسية
العرض (Rendering): العملية التي يمر بها الجهاز (الهاتف، اللوحي، المتصفح) لجلب صفحة إلكترونية للمستخدم.
العرض من جانب العميل (Client-Side Rendering - CSR): طريقة عرض حيث يقوم جهاز المستخدم (العميل) بتجميع وعرض محتوى الصفحة بعد استلامها من الخادم بشكل "مفكك".
خريطة المفاهيم
```markmap
تحسين محركات البحث (SEO)
تعريف SEO
هدفه: رفع تصنيف الموقع وزيادة الزوار
طريقة العمل: عبر نتائج البحث المجانية (الكلمات المفتاحية)
تقنيات SEO
تحسين العناوين الرئيسية </h4>
<p>#### وضع الكلمة المفتاحية المناسبة في البداية</p>
<p>#### إضافة كلمات مفتاحية مناسبة إلى رأس الصفحة (Header)</p>
<h4>اختيار صور بأحجام مناسبة</h4>
<p>#### الصور الكبيرة تزيد وقت التحميل</p>
<p>#### وقت التحميل الطويل يؤثر سلباً على التصنيف</p>
<h4>تشغيل أدوات تتبع حركة الموقع</h4>
<p>#### لتتبع نتائج البحث غير المدفوعة</p>
<p>#### لمعرفة مدى التقدم في جذب الزوار</p>
<h3>كيفية عمل محركات البحث</h3>
<h4>1. الزحف (Crawling)</h4>
<p>#### عملية اكتشاف المحتوى الجديد</p>
<p>#### يتم عبر روبوتات (برامج زحف)</p>
<p>#### تتبع الروابط للعثور على محتوى جديد</p>
<h4>2. الفهرسة (Indexing)</h4>
<p>#### تخزين وتنظيم المحتوى المكتشف</p>
<p>#### الفهرس: قاعدة بيانات ضخمة للعناوين (URLs)</p>
<p>#### يتم استرداد المحتوى منه عند البحث</p>
<h4>3. الترتيب (Ranking)</h4>
<p>#### ترتيب النتائج حسب الصلة بالاستعلام</p>
<p>#### كلما زادت الصلة، ارتفع ترتيب الموقع</p>
<h3>عرض الصفحات الإلكترونية</h3>
<h4>عملية العرض (Rendering)</h4>
<p>#### تحتاج إلى موارد (جافا سكربت، HTML، CSS)</p>
<p>#### وقتها يعتمد على حجم وكمية الموارد</p>
<h4>عرض من جانب العميل (CSR)</h4>
<p>#### الاختيار الأقل ملاءمة لتحسين محركات البحث</p>
<p>#### خطوات العملية:</p>
<p>##### 1. يرسل الخادم استجابة إلى المتصفح</p>
<p>##### 2. يقوم المتصفح بتنزيل ملف جافا سكربت</p>
<p>##### 3. ينفذ المتصفح الرد (الكود)</p>
<p>##### 4. تصبح الصفحة قابلة للعرض والتفاعل</p>
<p>```</p><p><h4>نقاط مهمة</h4></p>
<ul><li>عملية العرض تتطلب عادةً الحصول على عدة مواد (جافا سكربت، HTML، CSS) لتعمل الصفحة بشكل صحيح.</li>
<li>يمكن أن تستغرق عملية العرض وقتاً طويلاً اعتماداً على حجم وكمية الموارد المختلفة.</li>
<li>في <strong>CSR</strong>، يتم إرسال الصفحة إلى المتصفح "مفككة"، ويقوم المتصفح بتحميل وجمع كل المحتوى وعرضه.</li>
<li><strong>CSR</strong> يعتبر الاختيار الأقل ملاءمة لتحسين محركات البحث (<strong>SEO</strong>).</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">عرض صفحة إلكترونية</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">العرض هو العملية التي يجب أن يمر بها الهاتف أو الجهاز اللوحي أو متصفح جهاز آخر من أجل جلب صفحة إلكترونية للمستخدم.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">في معظم الأحيان، يتطلب هذا أن يحصل جهاز الحاسب على عدة مواد مختلفة (جافا سكربت، HTML، CSS) لجعل الصفحة تعمل بالطريقة التي تريدها.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يمكن أن تستغرق عملية العرض وقتاً طويلاً، اعتماداً على حجم وكمية تلك الموارد المختلفة التي يجب على متصفحك الذهاب إليها وجلبها.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">عرض من جانب العميل: الاختيار الأقل ملاءمة لتحسين محركات البحث</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يقصد بالعرض من جانب العميل (Client Side Rendering - CSR) أن العميل (جهاز المستخدم الذي يقوم بالبحث) يعرض محتوى الصفحة الإلكترونية. بدلاً من تجميع الصفحة على الخادم، ثم إرسالها إلى المتصفح، يتم إرسال الصفحة إلى المتصفح الخاص بك مفككة، تاركة المتصفح يعمل على تحميل وجمع كل المحتوى. هذا يعني أنه يتم استرداد البيانات من الخادم، ومعالجتها في المتصفح لعرضها على المستخدم.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">CSR</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يقوم المتصفح بتنزيل ملف جافا سكربت.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">ينفذ المتصفح رد الفعل.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">الصفحة الآن قابلة للعرض والتفاعل.</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يرسل الخادم استجابة إلى المتصفح.</div>
<h3>🔍 عناصر مرئية</h3>
<h4>CSR</h4>
<p>A flowchart illustrating the Client-Side Rendering (CSR) process. It shows the flow from the server sending a response to the browser, the browser downloading JavaScript, executing the response, and finally rendering an interactive page. Below this, it shows browser windows with 'LOADING' states.</p></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">عرض صفحة إلكترونية
العرض هو العملية التي يجب أن يمر بها الهاتف أو الجهاز اللوحي أو متصفح جهاز آخر من أجل جلب صفحة إلكترونية للمستخدم.
في معظم الأحيان، يتطلب هذا أن يحصل جهاز الحاسب على عدة مواد مختلفة (جافا سكربت، HTML، CSS) لجعل الصفحة تعمل بالطريقة التي تريدها.
يمكن أن تستغرق عملية العرض وقتاً طويلاً، اعتماداً على حجم وكمية تلك الموارد المختلفة التي يجب على متصفحك الذهاب إليها وجلبها.
عرض من جانب العميل: الاختيار الأقل ملاءمة لتحسين محركات البحث
يقصد بالعرض من جانب العميل (Client Side Rendering - CSR) أن العميل (جهاز المستخدم الذي يقوم بالبحث) يعرض محتوى الصفحة الإلكترونية. بدلاً من تجميع الصفحة على الخادم، ثم إرسالها إلى المتصفح، يتم إرسال الصفحة إلى المتصفح الخاص بك مفككة، تاركة المتصفح يعمل على تحميل وجمع كل المحتوى. هذا يعني أنه يتم استرداد البيانات من الخادم، ومعالجتها في المتصفح لعرضها على المستخدم.
CSR
يقوم المتصفح بتنزيل ملف جافا سكربت.
ينفذ المتصفح رد الفعل.
الصفحة الآن قابلة للعرض والتفاعل.
يرسل الخادم استجابة إلى المتصفح.
--- VISUAL CONTEXT ---
**DIAGRAM**: CSR
Description: A flowchart illustrating the Client-Side Rendering (CSR) process. It shows the flow from the server sending a response to the browser, the browser downloading JavaScript, executing the response, and finally rendering an interactive page. Below this, it shows browser windows with 'LOADING' states.
Data: Flow of information and actions in CSR
Context: Explains the client-side rendering process for web pages, contrasting it with server-side rendering.
</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 4 بطاقة لهذه الصفحة</p>
<article><h3>ما المقصود بعرض الصفحة الإلكترونية (Page Rendering)؟</h3><ul><li>أ) عملية تصميم واجهة المستخدم للصفحة الإلكترونية قبل برمجتها.</li><li>ب) العملية التي يجب أن يمر بها الهاتف أو الجهاز اللوحي أو متصفح جهاز آخر من أجل جلب صفحة إلكترونية للمستخدم.</li><li>ج) عملية تخزين الصفحة الإلكترونية في ذاكرة التخزين المؤقت للمتصفح.</li><li>د) عملية فهرسة الصفحة الإلكترونية في محركات البحث.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> العملية التي يجب أن يمر بها الهاتف أو الجهاز اللوحي أو متصفح جهاز آخر من أجل جلب صفحة إلكترونية للمستخدم.</p><p><strong>الشرح:</strong> 1. العرض هو عملية تحويل البيانات والمحتوى إلى صفحة ويب مرئية. 2. يتطلب ذلك جلب موارد مختلفة مثل HTML وCSS وجافا سكربت. 3. الهدف النهائي هو تقديم صفحة قابلة للاستخدام للمستخدم.</p><p><strong>تلميح:</strong> تتعلق هذه العملية بتحويل البيانات إلى شيء يمكن للمستخدم رؤيته والتفاعل معه.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>ما المقصود بالعرض من جانب العميل (Client-Side Rendering - CSR)؟</h3><ul><li>أ) عملية يتم فيها تجميع الصفحة بالكامل على الخادم قبل إرسالها جاهزة للمتصفح.</li><li>ب) أن العميل (جهاز المستخدم) يعرض محتوى الصفحة الإلكترونية، حيث يتم إرسال الصفحة إلى المتصفح مفككة، تاركة المتصفح يعمل على تحميل وجمع كل المحتوى.</li><li>ج) تقنية تعتمد على الذكاء الاصطناعي لتحسين سرعة تحميل الصفحات تلقائياً.</li><li>د) عملية يتم فيها تخزين نسخة كاملة من الصفحة على خادم وسيط لتسريع الوصول إليها.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> أن العميل (جهاز المستخدم) يعرض محتوى الصفحة الإلكترونية، حيث يتم إرسال الصفحة إلى المتصفح مفككة، تاركة المتصفح يعمل على تحميل وجمع كل المحتوى.</p><p><strong>الشرح:</strong> 1. في CSR، يرسل الخادم الصفحة الإلكترونية بشكل غير مكتمل (مفككة). 2. يقوم متصفح المستخدم (العميل) بتنزيل وتنفيذ ملفات مثل جافا سكربت. 3. يقوم المتصفح بمعالجة البيانات وبناء الصفحة النهائية وعرضها للمستخدم.</p><p><strong>تلميح:</strong> في هذا النوع من العرض، يكون العبء الرئيسي على جهاز المستخدم وليس الخادم.</p><p><em>التصنيف: تعريف | المستوى: متوسط</em></p></article>
<article><h3>ما الخطوة الأولى في عملية العرض من جانب العميل (CSR) كما هو موضح في الرسم التخطيطي؟</h3><ul><li>أ) يقوم المتصفح بتنزيل ملف جافا سكربت.</li><li>ب) ينفذ المتصفح رد الفعل.</li><li>ج) يرسل الخادم استجابة إلى المتصفح.</li><li>د) تصبح الصفحة قابلة للعرض والتفاعل.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> يرسل الخادم استجابة إلى المتصفح.</p><p><strong>الشرح:</strong> 1. يبدأ سير العمل الموضح برسالة من الخادم إلى متصفح العميل. 2. هذه الاستجابة الأولية تحتوي عادة على هيكل أساسي للصفحة وروابط للموارد الأخرى. 3. بعدها تبدأ الخطوات الأخرى مثل تنزيل وتنفيذ جافا سكربت.</p><p><strong>تلميح:</strong> تذكر أن العملية تبدأ باتصال من المتصفح إلى الخادم.</p><p><em>التصنيف: صيغة/خطوات | المستوى: متوسط</em></p></article>
<article><h3>ما العيب الرئيسي للعرض من جانب العميل (CSR) فيما يتعلق بمحركات البحث (SEO)؟</h3><ul><li>أ) يستهلك موارد كبيرة من الخادم، مما يزيد التكلفة.</li><li>ب) يعتبر الاختيار الأقل ملاءمة لتحسين محركات البحث.</li><li>ج) يتطلب اتصال إنترنت فائق السرعة ليعمل بكفاءة.</li><li>د) لا يدعم التطبيقات التي تحتوي على بيانات حساسة.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> يعتبر الاختيار الأقل ملاءمة لتحسين محركات البحث.</p><p><strong>الشرح:</strong> 1. في CSR، المحتوى الحقيقي يُبنى ديناميكياً بواسطة جافا سكربت في متصفح المستخدم. 2. قد تواجه برامج الزحف لمحركات البحث صعوبة في قراءة هذا المحتوى الديناميكي أو قد ترى صفحة فارغة. 3. هذا يؤدي إلى ضعف فهرسة المحتوى وتصنيفه في نتائج البحث.</p><p><strong>تلميح:</strong> تتعلق المشكلة بقدرة محركات البحث على قراءة وفهم المحتوى عند الزحف إليه.</p><p><em>التصنيف: مفهوم جوهري | المستوى: صعب</em></p></article>
</section>
</main>
<nav aria-label="صفحات الكتاب">
<a href="https://www.idros.ai/reader/digitaltechnology11-1?page=289">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=291">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=287">صفحة 287</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=288">صفحة 288</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=289">صفحة 289</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=291">صفحة 291</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=292">صفحة 292</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=293">صفحة 293</a>
<a href="https://www.idros.ai/reader/library">العودة إلى المكتبة</a>
</nav>
<footer>
<p>إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم</p>
</footer>
</body>
</html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f894fbb5a4c610f',t:'MTc3ODI1MjE4OQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>