[المبدع العربي]

السلام عليكم ورحمة الله تعالى وبركاته

اخواني الكرام.. مرحباً بكم..
فهذا الموضوع هو نتيجة لاستفتاء طرحته منذ شهر في المنتدى بعنوان: (هل تريدون فعلاً تطوير مواقعكم والنهوض بها للتطور ؟ ).. وبعد أن رأيت التفاعل والتجاوب من الأخوة الكرام.. قررت البدء بهذه السلسة وهي: سلسلة (طوّر موقعك)..


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

- أما ما سنستفيده من هذه السلسلة فهو تحسين الحال بإذن الله.. فأصحاب المواقع والمصممين لا يرغبون بتعلم لغات تصميم المواقع الأساسية: HTML, XHTML, CSS.. فلا يجب علينا الوقوف مكتوفي الأيدي حيال هذا، فأتت فكرة هذا المشروع بدروس بسيطة جاهزة للتطبيق وليس فيها شروحات كثيرة ان شاء الله أو حفظ أشياء جديدة.. كل ماعليك هو تطبيق المكتوب، حتى تحسّن حال موقعك شيئاً فشيئاً وتجعله أفضل من قبل.

+ والتحسن ستراه شيئاً فشيئاً في نواحٍ متعددة:
1- من ناحية المظهر: فمع حلقات السلسلة ستقوم بتغيير بعض أجزاء التصميم وإضافة بعض الحركات الجمالية والحيوية بإذن الله.
2- من ناحية التطوير في المستقبل: سواء منك أو من مطور مواقع آخر.
3- مواكبة التطور التقني: فاللغات وعالم المواقع في تطور مستمر وفي المستقبل لعله سيتم الانضباط أكثر والاتحاد والتوافق بين المتصفحات واللغات والبرامج فإذا كان موقعك منضبطاً من الآن فلن تحتاج لعمل تغييرات كبيرة جداً وجذرية في المستقبل القريب وليس البعيد
4- سرعة الموقع: وربما لاتلاحظه أنت لكن مع كثرة الزوار سيتضح هذا من الاحصائيات والنتائج فالكود الصحيح يؤدي إلى سرعة تعامل المتصفح معك دون الحاجة للبحث بين الأكواد عن النواقص وتضييع الوقت فيها
5- توافقيته مع بقية المتصفحات: فلا تشكو من أن مقوعك لايظهر بشكل جيد في الفايرفوكس او في المتصفح أو النظام الفلاني وتظهر مشاكل ولخبطة فيه.

-- هذه بعض الفوائد التي سنجنيها من تطوير مواقعنا ومتابعة السلسلة وان شاء الله يتحقق ولو جزء بسيط أو يسير منها


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

.:: طريقة دروس السلسلة:
- سأحدثكم في هذه السلسلة على أنكم صممتم مواقعكم عبر الفرونت البيج البحت وبلغة الـHTML، وليس لديكم علم غيره


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


.:: من أنا؟
- لعل هذا سؤال مهم، ويسأله البعض ممن لايريدون أخذ العلم أو المعلومة من أي شخص لايعرفون من هو..
ببسطة، أنا مثلكم ولست متخصصاً بعد فيه وسيكون بإذن الله تخصصي هذا في الجامعة.
لكن كل مافي الأمر انني تعلمت من كتب ومقالات أجنبية ومقالات عربية أيضاً واستفدت منها أشياء كثيرة، فأردت أن أبلغكم ما تعلمت، فمن يعرف ما أقول فستكون له مراجعة أو لا يكمل إن أراد ومن لايعرف فليتابع ليتعلم.
وبإذن الله سأقدم على شهادة W3 العالمية للـHTML والـXHTML والـCSS قريباً وادعوا لي بالتوفيق


.:: البداية: إضافات لابدّ منها

+ البسملة:
- بما اننا مسلمين، فحريّ بنا أن نبدأ باسم الله في كل عمل نقوم به، وهذا أيضاً من الممكن تطبيقه في أكواد الـHTML.. فيمكننا إضافة البسملة في بداية الأكواد في كل صفحة من مواقعنا، والفكرة أخبرنا بها الأستاذ Zizwar بارك الله فيه ونبّهنا عليها..
وطريقة وضعه سهلة، كلما عليك هو وضع هذا الكود في رأس وبداية كل صفحة:

كود PHP:

<!-- بسم الله الرحمن الرحيم --> 


ضعه في أول سطر في كل صفحاتك ولن تستغرق منك وقتاً طويلاً بإذن الله تعالى، حتى يكون شرفاً لنا في جميع صفحاتنا

+ الـDocType:
- لعلكم لاحظتموه في أغلب المواقع الأجنبية أو المواقع بشكل عام..
وهذا له فوائد كثيرة، أولها أنه يريح المتصفح من البداية بإخباره عن نوع اللغة المستخدمة في الصفحة هذه: HTML أو XHTML.. وأيضاً يفيدك عند حكم مدقق w3 على موقعك وأخطاءه حيث يعرف اللغة التي تستخدمها ونوعها..
وطالما أن مواقعنا مصنوعة بالفرونت بيج أو أمثاله فهي في الغالب لاتحتوي على دوكتايب وتكون في العادة اللغة المستخدمة هي HTML.. لذلك سنعتمد أننا نتعامل مع الـHTML حالياً..
فسنستخدم الدوكتايبز الخاصة بالـHTML..
- هناك ثلاثة أنواع من الدوكتايب الخاص بلغة الـHTML، ونذكر منه اثنين فقط هنا، هما:
أ- Strict:

كود PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


ب- transitional أو (loose):

كود PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 


+ نأتي لتعريفهم:
- أما عن Strict فمعناه أن هذا الموقع ملتزم بالوسوم القياسية للـHTML وموقعه لايحتوي على شيء غير قياسي أو وسوم مهملة أو أخطاء أخرى فيه.. (لا أنصح به حالياً لعدم توفر هذا الآن لدينا)
- أما transitional فمعناه أن الموقع يستخدم بعض الأكواد المهملة أمثال <font> وغيره وأن لديه بعض الأخطاء فلا يدقّق علينا كثيراً (أنصح به وهو الخيار حالياً)

- وتستطيع إضافة الدوكتايب أسفل البسملة إن كنت وضعت البسملة وإن لم تضعها فيجب أن تضعه في أول سطر فوق كل شيء


++ هذا كل ما أريد تقديمه في هذا اليوم الأول من السلسلة، ولا أريد الاطالة أكثر فأرى أن المقدمة وماكان قبل الدرس قد أخذ حيّزاً كثيراً من الموضوع.. وبإذن الله سأكمل في أحد الأيام القادمة وبعده ستنتظم الدروس أسبوعياً في نفس اليوم القادم من كل أسبوع بإذن الله تعالى


.:: فـائــدة:
- HTML اختصار لجملة: Hypertext Markup Language ومخترعها هو مخترع الإنترنت: Tim Berners-Lee ومعه من معه في منظمة الويب العالمية W3C


وإن أخطأت في شيء فأرجوا من الأخوة الخبراء إعانتي.. فإن أنا إلا إنسان اصيب وأخطئ

تقبلوا فائق احترامي وتقديري للجميع
المبدع العربي ^_^