مقدمة عامة عن تصميم الانترنت والمواقع

بسم الله نبدأ
مقدمة عن نشأة الانترنت
في
عام 1957 : خلال الحرب الباردة بين الولايات المتحدة الأمريكية و روسيا
قام الرئيسي الأمريكي في ذلك الوقت بإنشاء و كالة الأبحاث المتقدمة ARPA
التابعة لوزارة الدفاع الأمريكية ، و خلال الستينات أرادت وزارة الدفاع
استمرار الاتصال بين أجهزتها و حتى لو دمر بعضها و قامت بذلك من خلال إرسال
رسائل صغيرة قسمت إلى حزم كل حزمة تحتوي على معلومات عن المرسل و المرسل
إليه .
في عام 1969 : بدأت الجامعات و المعاهد الأمريكية بربط أجهزتها و سميت تلك الشبكة حينها ARPAnet .
في عام 1972 : قام لورنس روبرتس بتطوير خدمة البريد الإلكتروني .
في عام 1973 : تم تطوير خدمة البريد الإلكتروني لتصبح قادرة على إرسال و استقبال الرسائل .
في عام 1983 : تم استخدام بروتوكول TCP بين الشبكات .
في عام 1986 : تم إنشاء شبكة المؤسسة القومية للعلوم NSFnet .
في عام 1990 : تم إغلاق شبكة ARPAnet و استمرت شبكة NSFnet في عملها .
في
عام 1993 : بدأ انتشار الإنترنت من خلال الأخبار و الصحف و أصبحت الشركات
التجارية و مزودي الخدمة (ISP) هم الذين يوفرون الاتصال عبر الإنترنت من
خلال بروتوكول TCP/IP .


ما هي أهم المتطلبات للوصول بشبكة الإنترنت ؟
1- جهاز كمبيوتر يفضّل أن يكون ذو سرعة عالية و ذاكرة كبيرة ..
2- جهاز مودم Internal modem أو External modem .
3- وسيلة اتصال مثل خطوط الهاتف .
4- مزوّد لخدمة الإنترنت ( ISP ) اختصار لـِ Internet Service Provider لتوفير الاتصال مع الإنترنت و تقديم خدمة الإنترنت .
5- برمجيات الإنترنت مثل Mozilla firefox أو Internet Explorer أو Netscape و ما إلى ذلك .

ما هي أهم البروتوكولات المستخدمة في الإنترنت ؟
-
بروتوكول TCP/IP: و هو البروتوكول المعتمد في شبكة الإنترنت ، حيث يقوم
بتقسيم البيانات المرسلة إلى حزم صغيرة و من ثم تجميعها عند الطرفالمستقبل و
تحتوي على حزمة صغيرة فيه على معلومات المرسل و المرسل إليه حيث ..
TCP
: اختصار لـِ Transfer Control Protocol و هو مسؤول عن تقسيم البيانات و
التأكد من صحة توزيع البيانات حيث تكون معرضة للضياع عند توزيعها من خلال
Routers و لذلك فإنه يراقب البيانات و يعيد توجيهها إذا تعرضت للضياع .
IP : اختصار Internet Protocol و هو مسؤول عن عنونة حزم البيانات و إدارتها و تمريرها و تحديد مساراتها عبر الشبكة .
- بروتوكول FTP : اختصار File Trasfer Protocol و هو بروتوكول يقوم بنقل الملفات من جهاز إلى آخر ( و من جهاز لآخر عبر الشبكة ) .
-
بروتوكول TelNet : و هو أحد بروتوكولات TCP/IP و هو اختصار لـِ Tele
Communiction Network و يوفر إمكانية الاتصال عن بعد بحيث تصبح قادر
للاتصال عن بعد بحيث تصبح قادر للاتصال مع أي كمبيوتر موجود على الشبكة .
-
بروتوكول http : اختصار لـِ Hyper Text Transfer Protocol و هو بروتوكول
نقل النصوص المترابطة المتفاعلة و الذي يستخدم في تطبيقات الويب .. حيث
يقوم بنقل صفحات الإنترنت و تفسيرها .
- بروتوكول PPP : اختصار لـِ
Point-To-Point Protocol و هو أحدث البروتوكولات المستخدمة في الإنترنت و
أسرعها أيضاً ، و يوفر وسيلة مرنة للاتصال بين حواسيب الشبكة .


توضّح آلية عمل المتصفح Browser في إظهار الصفحات (الموقع)؟
- يتم وضع العنوان المطلوب مثل [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
في المكان المحدد له و هذا المكان يسمّى URL و هو اختصار لـِ Uniform
resource Location و هو عبارة عن عنوان يسمح للمتصفح بمعرفة مكان البحث عن
الملف أو الموقع المطلوب .
- بعد وضع العنوان المطلوب فإن البروتوكول
يقوم بإرساله إلى الـ Web Server و هو المكان الحاضن لذلك الموقع ومن خلال
ما يسمّى بالـ CGI يمرر العنوان إلى برنامج يسمّى سكريبت سواء Perl Script
أو VbScript فيبحث فيه عن الصفحة أو الموقع المطلوب و عندما يجده يعيده إلى
الـ Web Server و يعطي نتيجة البحث للمستعرض لتظهر أمامه النتيجة و هي
عبارة عن الموقع أو الصفحة التي قمنا بكتابة عنوانها .

مم يتكون العنوان مثلاً [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ؟
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] هو نوع البروتوكول المستخدم في نقل الملفات و البيانات و يمكن أن يكون FTP أو غيره .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] اختصار لـِ world wide web و هو نظام عملاق من النصوص و المستندات المترابطة فيما بينها حول العالم.
science-union. اسم الموقع و هو حقيقة اسم الـ Web Serverالجهاز الحاضن للموقع .
Com/ و هو نوع الموقع أو امتداده و يمكن ان يكون .net أو .org أو .edu و ما إلى ذلك (سيتم تفصيله ) .
gallery و هو الدليل أو الـ Folder الذي سيبحث فيه ال Web Server عن الصفحة المطلوبة .
index هو اسم الملف أو الصفحة التي نريد الوصول إليها و عرضها على المتصفح .
.php هو امتداد الملف المراد فتحه و عرضه و هنا هو عبارة عن صفحة ويب و يمكن أن يكون .gif أو jpg أو .zip أو .wav و ما إلى ذلك .

معانى امتدادات المواقع
com . = عادة ما يكون تجاري commercial مع بعض الاستثناءات ( الاكثر انتشاراً )
net . = عادة يكون موقع موصل لمواقع اخرى او محتضن مواقع اخرى network
edu . = تعليمي education
gov . = حكومي governmental
mil . = عسكري military
org . = مؤسسة organization
ويمكن ايضاُ ان ينتهى باسم لغة ar,en او اسم دولة eg,uk,us

ما الفرق بين الموقع Site و الصفحة Page ؟
الموقع : هو مجموعة من الصفحات المترابطة و التي يتم الوصول إليها من خلال عنوان خاص ..
الصفحة : هي مجموعة من النصوص و الوصلات التشعبية و الصور و الرسومات المترابطة فيما بينها .

ما هي أساسيات تصميم الصفحات ؟
1-تحديد الهدف الرئيسي من الصفحة أو الموقع .
2- ماهية المعلومات التي نريد تضمينها للصفحة أو الموقع .
4- معرفة المستقبل المتوقع للصفحة او الموقع .
5- من هم الأشخاص المتوقع زيارتهم للموقع ( أجناسهم ، أعمارهم ، لغاتهم ، هواياتهم .....).

ما هي أهم المقاييس التي تحدد نجاح و كمال و استمرارية الموقع أو الصفحة ..
- الوضوح Clearity : يجب مراعاة وضوح النصوص و محتويات الموقع .
-
ثبات و متانة الموقع Consistency : يجب أن تكون صفحات الموقع منسجمة و
متناسقة و تحقق الهدف الذي أُنشئت من أجله و تكون كل الصفحات بنفس التميز .
- الاستعارات Metaphor : وجوب استخدام الرموز و الرسوم و الصور للتعبير عن الأفكار التي وجد من أجلها الموقع .
-التقنيات المستخدمة Media Technical: وجوب استخدام محركات البحث و الصوت و الصورة المتحركة بالصورة المطلوبة .
- ترتيب الصفحات داخل الموقع بالشكل المطلوب .


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

صياغة المحتوى
تكون
صيغة المحتوى الأولية -في كثير من الأحيان- ملفات Word، و PowerPoint، و
صور، و غير ذلك. ولاستخدام هذه الصيغ في موقع ما لابد أن نوحد صياغتها إلى
لغة تفهمها متصفحات المواقع، هذه اللغة هي لغة HTML والتي تطورت لتصبح
XHTML، والتي تعتبر التكوين الأساسي لـهيكل الصفحة. ولهذه اللغة قواعد تهدف
إلى ضمان وصول معلومات المواقع إلى جميع فئات مستخدمي الإنترنت، مهما
اختلفت المتصفحات التي يستخدمونها للوصول إلى موقعك، وقراءة محتواه.

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

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

الحركة الضيقة ،
تمثل المحتوى الضيق المحدود بمجال معين ( المحتوى المتخصص ) حيث أن المحتوى
يشكل وحدة بالمعنى و مثاله موقع Web Master World حيث أنه يستهدف أصحاب
الموقع و محتواه يهمهم فقط هم لا أحد غيرهم .
المواقع التي لديها حركة
ضيقة و تمتلك محتوى مخصص و مهم لمجموعة من الناس ( في بعض الأحيان يكون
عددهم لا يتجاوز 10000 ) تمتلك ترتيب مرتفع على محركات البحث لهذه الكلمات
المرتبطة بهذا المحتوى ( كووورة يملك تقيم عالي لدى محركات البحث للكلمات
الرياضية ) .
قدم محتوى موقعك ببساطة ، بعض المواقع تمتلك محتوى جيد و
لكنها لا تقدمه للزوار ببساطة و تعقد الوصول إلى ذلك المحتوى ( مثال : شرط
التسجيل في المنتديات للحصول على المعلومات ) ، هذه التعقيدات تقلل من
كفائة موقعك مع محركات البحث و تزعج الزوار .

نصائح لتقديم المحتوى بشكل جيد
* يجب أن تظهر لزوار موقعك أن غايتك إيصال محتوى موقعك إليهم لذلك استخدم عناوين واضحة للمحتويات
* اجعل التنقل بين صفحات الموقع و اقسامه سهلاً و لا تستخدم الإطارات المضمنة كثيراً
* مربع البحث ضمن موقعك ضروري بالاضافة الى خريطة الموقع التي تبين أقسام الموقع و ترتيبها بشكل بسيط
* احرص على ان يكون الخط مقروء و الصور و ملفات الصوت و الفيديو بدقة و جودة مناسبة
* حافظ على حجم و قياس صفحات الموقع ضمن الحد المعقول ( حافظ على كل بكسل )
* اجعل محتوى موقعك متجدد دائماً و قدم وسائل متابعة لجديد موقعك ( Rss )

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

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

التصميم

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

تلك هي نظرة مثالية لتصميم المواقع، ولكن يوجد على
“شبكة” الواقع الكثير من المواقع -المبتدئة والناجحة- التي بدأت تتجه إلى
التصميم الإعلاني في مواقعها، فالمواقع المبتدئة تسخّر جميع مواردها لأن
تصيب المتصفح باليأس! سواءاً بتشكيلة الألوان الغير متناسقة، أو الصور
الموضوعة -فقط- لجذب الإنتباه دون أن يكون لها اتصال بالمحتوى، أو غير ذلك
من العناصر الموضوعة بدون هدف، أو حتى لخدمة هدف غير ماذكرناه في البداية.
أما بالنسبة للمواقع الناجحة فتجد كمّاً من روابط الإعلانات يفوق المحتوى،
حتى أنه يكون -أحياناً- في وسط المحتوى، ليستحيل عليك أن تتجنب الإعلان، مع
إحتمال خلطه بالمحتوى! من المؤكد أن هذا التصرف غير صحيح بل غير لائق
ذوقياً حين نفكر فيه.

على كل حال، التصميم -مهما كان بسيطاً- هو جزء
هام من تكوين شخصية موقعك، وبإمكانك من خلاله إيصال رسائل للزوار، مثل
طبيعة الموقع -في صفحة البداية خاصة-، وما هي هذه الصفحة، وإعطاء معانٍ
لعناصر التصفح، وغيرها من فوائد التصميم الجيد. وللتصميم أيضاً العديد من
القواعد الهامة التي لابد أن تراعى قبل وأثناء عملية التصميم، مثل قاعدة
Keep it simple stupid…K.I.S.S وتعتبر هذه القاعدة كنز لمن فهمها وعرف كيف
يطبقها في أي مشروع تصميم بشكل عام.

كما عرفنا سابقاً أن المحتوى هو الموقع، فإن التصميم هو ثوبه الذي يستر عيوبه ويبرز مفاتنه — بالحلال

ما معنى ان يكون التصميم بسيط K.I.S.S ؟
هناك أساسيات لبساطة التصميم يجمع عليها عدد كبير من الخبراء و المهتمين بالتصميم مثل :
•
أن يساعد تصميم الموقع على إظهار محتواة وهدفة بحيث يكون محتوى الموقع هو
العنصر الطاغى الذى يفرض نفسة بقوة و يلفت إنتباة الزائر لة .
• الا يتوقف المستخدم فى الموقع و لا يعرف الى اين يذهب أو كيف يتوجة لصفحة ما , يجب ان تكون خريطة الموقع واضحة و سهلة الإستخدام.
•
ان كل عنصر و كل صورة فى التصميم يكون لها وظيفة و معنى , لا تتواجد ابدا
عناصر زائدة تزحم الموقع ( و لعلك تصادف فى الكثير من المواقع ازدحاماُ
هائلاُ بعناصر ان تم ازالتها لفقد الموقع نصف حجمة ..و لا أدرى حتى هذة
اللحظة ما سبب وضع البعض لساعة على سبيل المثال بموقعهم !! …و قس على ذلك
عناصر كثيرة تقع تحت هذا البند)
لعل المشكلة فى التصميم البسيط هى ان
الكثير يربط ما بين التصميم البسيط و التصميم الباهت و يفترض ان البساطة
معناها ان يكون الموقع عبارة عن محتوى فقط و تصميم غير جذاب قليل
الإمكانيات او غير مؤثر..و هو تصور خاطىء فكل الذى تتطلبة البساطة ان يكون
التصميم سهل الإستخدام و لا يوجد به عناصر زائدة و لكن ذلك من الممكن ان
يتحقق مع وجود تصميم جذاب مبهر فى الفكرة و العرض..الحديث عن كيفية تطبيق
البساطة فى التصميم حديث مطول و هو علم لة دراساتة و ما ذكرتة يعد نبذة عن
أساسياتة فقط

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