درس تعلم تصميم المواقع من تحت الصفر (أرجو التثبيت)

بسم الله الرحمن الرحيم

((سُبْحَانَكَ لَا عِلْمَ لَنَا إِلَّا مَا عَلَّمْتَنَا إِنَّكَ أَنْتَ الْعَلِيمُ الْحَكِيمُ ))
{وإن من شئ إلا عندنا خزائنه وما نزله إلا بقدر معلوم}

========================
الحقوق محفوظة للمسلمين
========================
اليوم سوف أقدم الدرس الاول في تصميم وتطوير المواقع بأذن الله معلومات جديدة ومفيدة
بسم الله نبداء
1- ما هي المواقع؟
هي مساحه مستأجرة أو محجوزة لدى احدى الشركات الاستضافة أما مدفوعة أو مجانية تقدم
لزوار الموقع معلومات يستفيد منها.
2-من أين أحصل على موقع ؟
هناك شركات عدة تقدم خدمة أستضافة مواقع مجانية أو مدفوعة ونذكر هنا على سبيل المثال لا الحصر ومنها
جيران
و هناك شركات أخرى مدفوعة يمكن البحث عنها
لكن كن حذرا من هذة الناحيه لن من الممكن تكون شركة *** و أحتيل
و أنا أنصح أذا تريد تستأجر مساحة مدفوع أن يكون لديك بعض الخبرة أنصح أن تطور نفسك أول
بمساحة مجانية وبعد م تتقن طريقة عمل الموقع تحول لمساحة مدفوعة.
أكثر أهمية .
يجب علينا أن نتكلم عن تصميم المواقع:
يستخدم للتصميم المواقع لغات برمجة كثيرة وتنقسم لغات الويب الى قسمين لغات برمج من جهة المتصفح
ولغات من جهة السريفير الذي يحتوي على الموقع.
من أشهر لغات من جهة المتصفحة لغة html و java و java****** وvb****** وغيرها
أما لغات البرمجة من جهة السريفير فهي php و asp و برامج العبور العامة cgi و في الاغلب تستخدم فيها
لغة perl .
و لتصميم المواقع هناك برامج خاصة للتصميم صفحات الويب مثل فرونت بيج و دريم ويفر وغيرها.
أنصح من يريد أن يصبح مصمم صفحات أن يتعلم لغة html كبداية للنتقال الى لغات السريفر.
تصمييم الصفحة :
1- شريط العنوان:
يجب أن يكون شريط العنوان مختصرا و مفيد و يعبر عن ما في الصفحة بشكل جيدا أحينا عندما أدخل
صفحات الويب يظهر شريط العنوان مكتوب صفحة جديدة ما ذا يعني هذا للمتصفح يظهر أن مصمم هذة الصفحة
لا يجيد التصميم.
2-الارتباطات التشعبيه:
وهي روح الويب لانها تربط بين صفحات الويب ويجب عليك أن تكون موضوعة بشكل ملائم ومتناغمة و واضحة
أعلم أخي العزيز أن هناك من المتصفحين يصعب عليهم معرفة الارتباط التشعيبي بوضعة مثلا تحت خط أو
بجدول أو أن يكون واضحاٌ أنهو أرتباط تشعبي.
3- تنظيم نص الويب:
وهو من أهم متطلبات التصميم الجيد للصفحة تخيل نفسك مثلا أمام صفحة ممتلائه من النص بتنسيق ردئ
على ما أعتقد أنك سوف تترك هذة الصفحة مهما كانت تحتوي .
4- معلومات حقوق النشر والتوزيع:
هذة من أهم الاشياء لدى الشركات و المؤسسات و من الافضل وضعها في أخر صفحتك بخط صغير مثل
حقوق النشر ,أسمك وأسم شركتك
معلومات أساسيه تحتاجها للكتابة نصك:
1- أجعل بين فقرات نصك مساحة بيضاء
2- أستعمل الاوائح المرقمة فقط عند تقديم سلسلة من الخطوات
3-أستعمل لوائح نقطية كلما أمكن
4-ابق الجمل قصيرة قدر الامكان من دون أختزال
5- حاول أستخدام الخطوط الكبيرة أو تغير اللون أو وضع الخط تحت الكلمات المهمة.
6-أدرج عناوين رئيسية وعناوين فرعية لتقسيم النص و تمييز النقاط الرئيسية
7- تجنب وجود الكثير من الارتباطات التشعبية داخل النص
8- إبق بسيطة ومباشرة أفعلا معلومة , وأستعمل الكلمات التي لها معنا على الكلمات الذكية.


الجمل القوية:
لا تعتقد أن الجمل تحتاج الى عضلات أو منشطات لا تكوين جمل قوية.
يكون تقوية جملك فقط في تضمين أكبر قدر ممكن من المعاني في كل كلمة أو عبارة لانك تريد الحد الادني
من أستخدامك للكلمات في صفحات الويب الإيجاز هو السر .
و لتقوية جملك تقيد بألأساليب التالية:
1-كلمات دقيقة:
يجب عليك أن تستعمل الكلمات الواضحة و الدقيقة والتي يسهل فهمها و أستبدال الكلمات الطويله بالكلمات
القصيرة مثل "يجب عليك النقر هنا" بي " أنقر هنا".
2-أفعال قوية:
كلما أمكن أن تستخدم أفعال قوية و قصيرة مثل أن تبدل هذة الكلمات "هذة الصورة تهدف الى توضيح " أكتب
"هذة الصورة توضح"
الاخطاء المطبعية:
دائما أثناء تصفحنا في الويب نشاهد الكثير من الاخطاء المطبعية التي تشوهة سمعة الموقع ويجب
المصمم التنبة الى هذة الاخطاء لان الكثير من المصممين يقعون فيها.
الصور في الويب:
أولاٌ يتألف كل رسم من بكسلات وهي النقاط الصغيرة التي تكون الصورة و للرؤية هذة البكسلات
أفتح أي محرر صور وكبر الصور الى أخر حد سوف تلاحظ هناك نقاط مربعة هذي هي البكسلات.
أنواع صور الويب
1- صور gif :
هذة الصور هي من أوسع الصور أنتشار و هي مدعومة من أغلب المتصفحات القديمة و الجديدية و فيما بينهم
بطبيعة الحال.
كلمة gif أختصار Graphics Interchange Format .
لقد أنشأت الشركة CompuServe هذ التنسيق في بدايت الثمانينات كوسيلة فعالة لرسال الصور عبر
شبكة البيانات .
تكمن قوة صور gif هي أن صور gif صغيرة الحجم ويتم تحميلها وعرضها بسرعة في العادة.
ملاحظة:
صور gif لاتتعد عدد الوان هذة الصور عن 256 لون كحد أقصى.
2- صور jpg :
تحتل الصور من نوع jpg المرتبة الثانية بعد gif بكثرة الصور الموجودة بالويب .
يتميز تنسيق jpg بأنهو يدعم ملايين الالوان وهو تقريبا مدعوم من أغلب المتصفحات,صور jpg تدعم 24 بت
وهذه تسمى الألوان الكاملة أو الحقيقية .
سمية jpg بهذا الاسم نسبة الى أسم المجموع التي أنشأتها وهي joint photogarapohic Experts Group


ملاحظه:
ينصح بعدم أستخدام هذا التنسق من الصور لسبب أن حجم هذا الصور كبير نسبيا ولا يستخدم الى عند الضرورة.

الحجم يؤثر :
لا بد أنك وجدت نفسك يوما تفتح صفحة الويب وقد نفذ صبرك بينما تنتظر ظهور الصفحة أو حتى انك قد تنقر للخروج من الصفحة قبل ان يتم تحميلها , بصفتك مصمم للويب يجب أن تتذكر هذا الاحساس بمرارة .

يمكنك تصغير حجم الصور وزيادة سرعة التحميل بأستخدام الطرق التالية :

1-تجنب التشابة اللوني في الصور gif باستعمال الالون الآمنه للوب كلما أمكن.
2- ضبط تكوين الصور jpeg بحيث يتم تصييرها تدريجا.
3-ضغط الصور jpeg لتخفيض أحجام الملفات.
4- تصغير مساحة الصور ليس من تكبير/تصغير لاكن من تصغير الحجم الاساسي للصورة.

ملاحظة:
ينصح بعدم أستخدام الصور بشكل كثير في الصفحة لانها قد تطيل تحميل الصفحة .


تصميم صفحة الويب وموقع الويب


ما هي صفحة الويب؟
هي صفحة واحدة تظهر في متصفحك .
ماهو موقع الويب؟
هو مجموعة من الصفحات مرتبطه مع بعضها البعض.
ما هي صفحة البداية؟
هي الصفح الرئيسية للموقع والتي تكون في العادة الدليل الذي يوصلك الى أنحاء الموقع.

ملاحظة:
يجب أن تكون الصفحة الرئيسية بهذا الاسم index.htm أو index.html أو index.php للمواقع التي تدعم لغة php أن رغب .


قبل أن تصمم صفحتك يجب عليك أن تجيب على هذة الاسئلة التالية:

1- ما هو هدف صفحتك او موقعك؟

عرف هدف صفحتك أو موقعك لنفسك بوضوح مثلا حدد ما هو نوعية الموقع ترفيهي,تعليمي , تديني ....الخ.

من هم زوار موقعك ؟

حلل من سيعاين صفاتك و ذلك لكي تستطيع أتخاذ الخدمات الافضل لنوعية زوارك.

من انا ؟

حدد كيف أن تقدم نفسك للزوار الموقع .

كيف ستظهر صفحاتي للزوار؟

يحب أن تفكر هنا مليا وهو كيف تظهر صفحات موقعي للزوار .

أساسيات تصميم صفحات الويب:

1- أبعاد صفحة الويب
2-مسائل تخطيط الصفحة
3-اللون
4-أدوات التنقل والارتباط التشعبي
5-مكونات المصداقية القياسية
6-النص
7-اللون

1-أبعاد صفحة الويب

تستطيع أن تجعل صفحات موقع طويلة الى ملانهاية وعريضه الى ملانهاية ,بالطبع تصميم صفحاتك بهذا القياسات
لاتخدمك أنت ولا زوارك .
من الافضل وهذا على حسب أعتقادي أن تجعل قياسات صفحاتك بشكل طولي دون أن تجعلها بشكل عرضي
طبع الطولي يجب أن تكون معقول الطول .

أفضل شي أن تجعل صفحة الويب مضبوطة عن 800*600 .

2- مسائل تخطيط الصفحات

أفضل منطقه في صفحتك أذا كانت عربية هي الزاويه العلوية اليمنا .
وهي في الغالب التي تحتوي شعار المؤسسه |أو الشركة .

ثم أرتبطات التنقل ثم المتن وأخيرا التذييل.

مبادئ التصمميم الشائعة التي يجب أن تتذكرها :

1- النص الوامض و الحركات الجانبية :
تجنب استخدام النص الوامض والحركات الغير ضرورية ك؛ العديد من الاشخاص يرون هذة التأثيرات مزعجة و بلا معنى , ومن جهة أخرى ,يقدر الكثير من الاشخاص تأثير تشقلب مصقول ولكن بسيط الأزرار.

2-المنافسة:
ابحث في المواقع المشابهة لترى ماذا يوجد فيها وثم أجعل موقعك فريدا من نوعه .

4- المحتوى:

ابق المحتوى حديثا وذكيا. وأكثر من ذلك حاول أستعمال 80 بالمئه من صفحاتك على الاقل لإظهار محتواك,
واحصر عناصر التنقل والارتباطة التشعبية عند 20 بالمئه أو أقل من ناحية صفحتك.

5- سرعة التحميل:

تأكد أن تحميل صفحتك يتم أسرع ما يمكن ؛ لديك حوالي 15 ثانية قبل أن يضجر الزوار ويذهبون إلى مكان أخر خاصة أذا كانت الصفحة الرئيسية.

6- الالواح أو الصفحات المتداخلة:

أستعمل الالواح بشكل نادر وعند الضرورة فقط ؛فتطبيقها يتطلب براعة وتكون أحيانا صعبة للتنقل بالنسبة للمستخدمين.

7- العناصر المهمة:

اضبط حجم العناصر وفقا لأهميتها ,الأكبر يعني أهم ويلفت الانتباه أسرع, بينما الصغر يعني الاقل أهميه.

8- ملفات الاصوات:

اغلب المستخدمين لا يحبون لاستماع إلى أصوات الخلفية و العديد منهم يبقى مكبرات الصوت لديهم منخفضه
مما عني لا حاجة الى أستخدام الاصوات أما أذا كنت مصرا فمن الافضل وضع أداة لايقاف أو تشغيل الصوت.

9- مغلسة المطبخ:

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

10- الجاذبيه البصريه :
تحقق أن صفحتك تبدو جيدة في مختلف أنواع المتصفحات مثل أنترنت أكسبلورو و نتسكيب و في مختلف الدقات و إعماق الالوان.

11- المساحة البيضاء:

أنشئ مساحة مريحة للعين وللبصر بواسطة نواحي فارغة يفضل أن تكون بيضاء موضوعة في أماكن جيدة.