1 of 44

رسم هيكلي/تخطيطي لصفحة موقع الانترنت

Website wireframe

2 of 44

تخطيطي = يبنى او يعرض بخطوط عامة

مثال : رسم تخطيطي لدائرة كهربائية:

​

​

​

​

​

​

​

​

​

3 of 44

رسم هيكلي/تخطيطي لصفحات الانترنت

  • ايضا لصفحات الانترنت يمكن انشاء "هيكل" (رسم تخطيطي website wireframe).

​

​

​

​

​

​

4 of 44

رسم هيكلي/تخطيطي لصفحات الانترنت

  • هي أداة تساعد في تخطيط وتمييز مواقع الانترنت
  • هي أداة توضيح مرئية يعرض الإطار الهيكلي للموقع.

5 of 44

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

وتقلل من احتمالية الأخطاء ،

وتوفر الوقت ،

وتتيح رؤية عامة لإمكانية الوصول والراحة في

تشغيل موقع الانترنت.

6 of 44

​

  • الهيكل هو رسم عام , خطوط وصف , للموقع والذي يمكنهم ان يعرضوا المبنى له.
  • على سبيل المثال: بدلاً من إدخال النص ، ننشئ إطارًا)خانة( ونكتب الكلمة نص“text” بداخله:

7 of 44

"هيكل" (رسم تخطيطي/هيكلي) لصفحات الانترنت.

​

مثال لرسم تخطيطي على الشاشة :

​

  • اي عناصر انتم ترون هنا ?�انتبهوا لطريقة رسم الرموز.

​

  • ماذا تعني هذه الاشارة حسب رأيك ؟

​

  • فكر: ما هي العناصر الأخرى التي

يمكن أن تكون على الموقع؟

8 of 44

"هيكل" (رسم تخطيطي/هيكلي) لصفحات الانترنت.

​

مثال لرسم تخطيطي على الشاشة :

​

  • اي عناصر انتم ترون هنا ?�انتبهوا لطريقة رسم الرموز.

​

  • ماذا تعني هذه الاشارة حسب رأيك ؟

​

  • فكر: ما هي العناصر الأخرى التي

يمكن أن تكون على الموقع؟

טקסט

תמונה

היפרלינק (קישור)

חלון חיפוש

​

9 of 44

الرموز المقبولة في الرسومات التخطيطية/هيكلية :

شعار

صورة

نص

رابط

خانة النص

مواقع التواصل الاجتماعي

تشغيل فيديو

زر

خانة الاشارة

زر

راديو

خانة البحث

Text

Text

Text

Button

Search

Check Box

Check Box

Check Box

سطر واحد فقط

سطور متعددة

كتابة النص

امكانية خيار واحد فقط

يمكن اختيار اكثر من واحد

10 of 44

  • امثلة اضافية :

شعار

صورة

نص

رابط

خانة النص

كتابة النص

تشغيل فيديو

زر

خانة الاشارة

زر راديو

خانة البحث

11 of 44

للاختبار :

  • ستظهر 10 ادعاءات في الاختبار. لكل ادعاء ، حدد ما إذا كان الادعاء صحيح أم خاطئ. إذا كانت إجابتك صحيحة ، فستنتقل إلى الادعاء التالي .

�

للاختبار

12 of 44

اختبار

  • ادعاء 1:
  • لبدء تطوير صفحة انترنت ، من المفضل أولاً إنشاء رسم تخطيطي/هيكلي للصفحة.�

13 of 44

كل الاحترام !!!!!�

14 of 44

  • ادعاء 2:�يحتوي الرسم التخطيطي/الهيكلي على جميع العناصر المهمة لصفحة الانترنت

15 of 44

كل الاحترام !!!!!�

16 of 44

  • ادعاء 3:�لا نستخدم الأشكال البسيطة عند إنشاء رسومات تخطيطية/هيكلية للصفحة.

17 of 44

كل الاحترام !!!!!�

18 of 44

  • ادعاء 4:�لا نكتب أسماء العناصر عند إنشاء رسومات تخطيطي/هيكلية

19 of 44

كل الاحترام !!!!!�

20 of 44

  • ادعاء 5:�رسم تخطيطي/هيكلي هو في الواقع رسم خطوط يعطي تمثيلًا مرئيًا لمكان موضع العناصر في صفحة الانترنت.

21 of 44

كل الاحترام !!!!!�

22 of 44

  • ادعاء 6:�نقوم بإنشاء رسم تخطيطي/هيكلي للصفحة في المراحل الأخيرة من تطوير الموقع.

23 of 44

كل الاحترام !!!!!�

24 of 44

  • ادعاء 7:�لا يمكن استخدام الورق وقلم الرصاص لإنشاء رسم تخطيطي/هيكلي .

25 of 44

كل الاحترام !!!!!�

26 of 44

  • ادعاء 8:�يمكنك استخدام برنامج "الرسام" لإنشاء رسوم تخطيطية/هيكلية.

27 of 44

كل الاحترام !!!!!�

28 of 44

  • ادعاء 9:�يمكن استخدام فوتوشوب لإنشاء رسم تخطيطي.

29 of 44

كل الاحترام !!!!!�

30 of 44

  • ادعاء 10:�مخطط المنزل يشبه الرسم التخطيطي/هيكلي لصفحات الانترنت. �

31 of 44

  • إجابة خاطئة.

32 of 44

  • انتهى الاختبار

​

33 of 44

  • في هذه المرحلة سوف نستخدم برنامج "الرسام" لإنشاء رسوم تخطيطية/هيكلية.

34 of 44

​

  • ملاحظة: إذا كانت هناك صورة متغيرة ، تعامل معها كصورة ثابتة.

35 of 44

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

36 of 44

هل تعلم ?

  • خريطة الموقع (في الانجليزية : sitemap) – هو تمثيل لرسم تخطيطي/هيكلي لموقع انترنت معين ، وتقسيمه إلى صفحات والرابط بين الصفحات.�

37 of 44

  • ادخل الى الموقع التالي : �https://www.calculator.net/
  • ابحث عن طريقة للدخول على خريطة الموقع من الصفحة الرئيسية.

38 of 44

  • تحتوي خريطة الموقع اعلاه على جميع المعلومات )جميع الآلات الحاسبة( وقسمت الآلات الحاسبة إلى فئات وفقًا لنوع الآلة الحاسبة .
  • قم بإنشاء خريطة الموقع في برنامج "الرسام" لموقع الآلات الحاسبة.

اردت ان احصل على

​

39 of 44

  • يوصى ببناء خريطة الموقع قبل إنشاء رسوم تخطيطية/هيكلية

40 of 44

  • حول الموضوع الذي اخترته ، قم بإنشاء مخطط لخريطة الموقع في برنامج "الرسام".

41 of 44

للمتقدمين

  • ابحث عن خريطة الموقع في مواقع الانترنت بالمواضيع التالية :
  • ملابس
  • العاب
  • روبوتات

42 of 44

  • هام : في البحث اضيفوا +sitemap.
  • على سبيل المثال ، للبحث عن موقع انترنت يعرض ملابس ويحتوي على خريطة الموقع ، اكتب باللغة الإنجليزية في خانة البحث�clothes +sitemap.

43 of 44

هل تعتقد أن هناك أي حسنات لمواقع الانترنت الذي يحتوي على خريطة موقع؟ إذا كان الأمر كذلك، ما هي الحسنات ؟

44 of 44

تلخيص وجمع الافكار