YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Arabic subtitles

Layout - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 1 created 06/09/2016 by Udacity Robot.

  1. حسنًا، أشعر أن الأمر قد شارف على الانتهاء. لقد أصبح لدينا
  2. شجرة العرض. هل يمكننا وضع وحدات بكسل على الشاشة الآن؟
  3. >> نحن قريبون جدًّا بالفعل، ولكن تبقى هناك
  4. خطوة أخرى. ما زلنا نحتاج إلى معرفة أماكن
  5. .وضع جميع العناصر على الصفحة وكيفية القيام بذلك
  6. وهذه هي خطوة التخطيط. Let's take a look. لاستعراض
  7. ،تخطيط في وضعه الفعلي
  8. فقد أتيت لكم بشجرة عرض بسيطة. هذا ما ستبدو عليه
  9. ،النتيجة النهائية. لاحظوا أنه عندما نقوم بتدوير الهاتف
  10. تتغير أبعاد المربعات. ولكن تبقى النسب
  11. كما هي. دعونا نرى ما إذا كان يمكننا التعرُّف على
  12. ما يفعله المستعرض هنا. لنبدأ من أعلى. نقوم بتعيين
  13. .خلفية العنصر body على اللون الرمادي. يبدو ذلك منطقيًّا
  14. .هذا ما رأيناه بالضبط. ونقوم بتعيين عرضها على 100%
  15. >> مهلاً، 100% من ماذا بالضبط؟
  16. >> إنها 100% من حجم منفذ العرض الخاص بالتخطيط. إذا
  17. .لاحظت، فستجد أن أمثلة hello world الخاصة بنا تحتوى على علامة meta إضافية
  18. >> آه نعم، كنت أقرأ
  19. دليل أساسيات الويب حول التصميم التفاعلي. وكان يقول إنه يجب أن
  20. .يكون لديَّ هذه العلامة دائمًا. ولكني لم أفهم السبب وراء ذلك بالفعل
  21. >> يبدو ذلك غامضًا إلى حد ما، ولكن دعنا نحاول فهمها. تتمثل
  22. وظيفتها في إخبار المستعرض
  23. بأن عرض منفذ عرض التخطيط
  24. .يجب أن يكون مساويًا لعرض الجهاز. إذًا، دعنا نفترض أن عرض الجهاز يبلغ 320 بكسل
  25. ،إذًا، في حالة وجود علامة meta الخاصة بمنفذ العرض
  26. فإن المستعرض سوف يعين منفذ العرض الخاص بالتخطيط على
  27. .320 بكسل وهذا سيمثل 100% بالنسبة لنا
  28. >> حسنًا، أفهم ذلك. ولكن ما الذي يحدث إذا لم أقم بإضافة هذه العلامة؟
  29. >> إذًا، يستخدم المستعرض عرض منفذ العرض الافتراضي، والذي عادة
  30. ما يبلغ 980 بكسل. وهي مُحسنة لتناسب الشاشات الكبيرة. أتعرفون، أحيانًا يبدو
  31. عرض المواقع مُصغرًا ويكون عليكم التكبير
  32. .للتنقل وقراءة النص. يرجع السبب في ذلك إلى أنهم لا يقومون بتعيين تأخير بمنفذ العرض
  33. >> آه، يبدو هذا منطقيًّا. لا
  34. .تعجبني تلك المواقع على الإطلاق
  35. >> ولا أنا. لبناء تجربة رائعة بالنسبة للأجهزة الجوّالة، يجب عليك دائمًا
  36. .تعيينها بمنفذ العرض. ولكن بالعودة إلى مثالنا
  37. إذا كان عرض شاشة الهاتف الجوّال 320 بكسل، إذًا
  38. فسيبلغ عرض العنصر body 320 بكسل. وبعد ذلك، يكون عرض العنصر divnote
  39. .هو 50%. ويُعد هذا عنصرًا تابعًا للعنصر body، وبالتالي يتناسب عرضه مع أصله
  40. ونسبة 50% من 320 بكسل تساوي 160 بكسل. وبالنسبة
  41. ،لعنصر الفقرة، يبلغ العرض 50% من الأصل الذي يتبعه. وبالتالي
  42. .يبلغ عرضه 80 بكسل. وبذلك، نكون قد انتهينا
  43. فهذا تخطيط. والآن، ما رأيكم أن تجربوا ذلك؟