sesamy
الاداره
  مُشآركاتيّ : 2395
دُعاآء اليومّ : اللهم اكفني بحلالك عن حرامك واغننى بفضلك عن من سواك
نقآطيّ : 10165
السٌّمعَة : 6
ُعُضويتيّ : 28/11/2008
الموقع : anty.banouta.net
الهوايه : 
♔ علمـ بلدي ♔ : 
✿ مزاجِې النـﻬاردهـ ✿ : 
الاضافات
ساعة المنتدى: Digital Clock HI, THE TIME IS
 |  موضوع: تطوير المواقع للمبتدئين ( انشاء مدونتك الشخصية )  السبت يناير 23, 2010 10:36 pm | |
| إنشاء مدونتك الشخصية
في الجزئين السابقين تعلمنا أساسيات HTML وCSS، ولكن هذا لا يكفي إذ
لا بد من وجود تطبيق عملي لما تعلمناه، ولا أرى أفضل من إنشاء مدونة شخصية
لك لتطبيق ما تعلمته، لأنني شخصياً جربت ذلك فقد كانت مدونتي يدوية لمدة
تزيد عن العام، كنت أكتب كل الصفحات بنفسي وأجد الأخطاء وأصححها وأكتسب
خبرة من هذه العملية المتكررة، ليس بالضرورة أن تنشر مدونتك، فقط طبق
عملياً وتعلم.
ما هي المدونة؟
هي نوع من المواقع وغالباً تكون شخصية، وهي تشبه كثيراً المذكرات،
ففي الصفحة الرئيسية من المدونة ترى آخر المواضيع التي نشرت مرتبة من
الأحدث إلى الأقدم، لكل موضوع رابط ثابت في الأرشيف يمكنك أن تعود له،
بينما الصفحة الرئيسية تتجد وتظهر مواضيع جديدة وتزول مواضيع قديمة لكنها
تبقى موجودة في الأرشيف.
المدونات قد تكون مكتوبة، وقد تكون مصورة أي ينشر صاحب المدونة صوراً أو
قد تكون صوتية أو مرئية بالصوت والصورة، بعض المدونات لا تنشر سوى الروابط
مع بعض التعليقات، وبعضها ينشر مقالات طويلة، بعضها منوع وبعضها متخصص.
المدونات الآن لها أشكال وأنواع كثيرة، ومن الصعب وضع تعريف واحد لها.
تخطيط المدونة
لنبدأ في إنشاء مدونة شخصية، هذه المدونة ستكون مختلفة قليلاً عن
المدونات التي تعرفها، فلن ننشر المواضيع في الصفحة الرئيسية مباشرة، بل
الموضوع سينشر مباشرة في الأرشيف، أما الصفحة الرئيسية ستحوي فقط
العناوين، هذا سيوفر عليك الوقت فلا حاجة لكتابة أي موضوع مرتين.
الاختلاف الثاني سيكون بتخصيص صفحة خاصة لكل موضوع، بعض المدونات تقوم
بأرشفة مواضيع شهر كامل في صفحة واحدة، لن نفعل ذلك، لكل موضوع صفحة خاصة،
هذا سيعطيك مرونة كبيرة في تعديل الصفحات وإضافة تصميم خاص للصفحة يتناسب
مع الموضوع المكتوب فيها، وهذا كل شيء.
سنتحتاج لإنشاء:
- صفحة رئيسية.
- ملف CSS لتصميم الموقع.
- مجلد فرعي يحوي ملفات الأرشيف.
لنبدأ العمل!
لنبدأ بالملفات، قم بإنشاء ملف وسمه index.html، وملف للتصميم هو
weblog-style.css،
ومجلد للأرشيف سمه archive، سنبدأ بالعمل أولاً على
الصفحة الرئيسية وهي index.html.
الصفحة الرئيسية ستحوي:
- اسم المدونة.
- قائمة بعناوين آخر خمسة أو عشرة مواضيع كتبتها وأسفل كل عنوان سنضع سطراً يلخص الموضوع.
لكي تفعل ذلك عليك بنقل قالب html الذي استخدمناه في الجزء الأول
ووضعه في ملف index.html، القالب سيكون فارغاً، لذلك ضع اسم المدونة بين
وسمي title، ثم ضع اسم المدونة مرة أخرى كعنوان في جسم الصفحة باستخدام
العنصر h1، اختر أي اسم فهذا مجرد تدريب لن يطلع عليه أحد، إليك هذا
المثال:
< ! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 //EN ”
“http://www.w3.org/TR/html4/strict.dtd” >
< html dir="rtl" >
< title >مدونة ما وراء البحار< /title >
< meta http-equiv="Content-type " content ="text/html; charset=utf-8">
< /head>
< body >
< h1 >مدونة ما وراء البحار< /h1 >
< /body>
< /html >
بدون فواصل ( مسافات )
احفظ الصفحة واستعرضها في المتصفح،
ما ستراه هو عنوان المدونة فقط، لنضع عنواناً لموضوع مع ملخص قصير:
.....
< h1>مدونة ما وراء البحار< /h1>
< a href="archive/2008-05-13.html" >عمالقة البحار< h2>
نظرة على أكبر المخلوقات البحرية.....بدون مسافات
ما فعلته في المثال هو إضافة عنوان لموضوع باستخدام العنصر h2 وجعلت هذاالعنوان رابطاً لموضوع في الأرشيف طبق المثال لديك، بالطبع الموضوع ليس
موجوداً في الأرشيف الآن، لذلك اذهب إلى مجلد الأرشيف وأنشأ ملفاً باسم
2008-05-13.html، الاسم يشير إلى تاريخ اليوم الذي كتب فيه الموضوع، لا بد
أن تضع نظاماً لتسمية ملفات الأرشيف لكي لا يتكرر أي اسم ولكي تستطيع
المحافظة على تنظيم الملفات إذا زاد عددها، نظام تسمية الملفات حسب
التاريخ جيد، لكن يمكنك أن تبتكر النظام المناسب لك.
في الملف ضع قالب html وعدله بالشكل التالي:
< ! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01// EN ”
“http://www.w3.org/TR/html4/strict.dtd” >
< html dir="rtl">
< head >
< title >مدونة ما وراء البحار< / title>
< meta http-equiv="Content-type" content="text/html; charset=utf-8" >
< /head >
< body >
< h1 >مدونة ما وراء البحار
< h2 >عمالقة البحار< /h2 >
< p >ضع هنا العديد من الفقرات .. فقط للتدرب< / p>
< p >ضع هنا العديد من الفقرات .. فقط للتدرب< / p >
< /body >
< / html >
بدون مسافات
....
احفظ الملف ثم اذهب إلى ملف الموضوع
الذي أنشأته قبل قليل، أضف له نفس السطر مع تعديل بسيط:
....
< /title >
< meta http-equiv=" Content-type" content="text/html; charset=utf-8 " >
< link href="../weblog-style.css" type="text/css " >
< /head>
....بدون مسافات
هل لاحظت التغيير؟ وضعنا نقطتين وخط مائل قبل اسم ملف css، لماذا؟ لأن ملف
الموضوع في مجلد فرعي بينما ملف css في المجلد الرئيسي، علينا أن نضع
علامة تخبر المتصفح بأن ملف css ليس موجوداً في نفس المجلد بل عليه أن
يرجع للوراء ويعود للمجلد الرئيسي وهناك سيجد ملف CSS.
الآن عليك أن تضع المزيد من العناوين في الصفحة الرئيسية وتربطها بملفات
للمواضيع في الأرشيف، افعل ذلك كتدريب وطبق كل ما تعلمته في الكتاب.
هناك تعديلات وإضافات مختلفة يمكنك تطبيقها:
- أضف رابطين أسفل كل موضوع، واحد لقراءة موضوع سابق، والآخر لقراءة الموضوع اللاحق.
- ضع قائمة "مواضيع ذات صلة" أسفل بعض المواضيع.
- قد تحتاج لإنشاء أرشيف شهري يحوي روابط كل المواضيع التي كتبتها في شهر
- واحد، كيف ستفعل ذلك؟
- إذا ذهب القارئ إلى موضوع ما فكيف يمكنه أن يعود للصفحة الرئيسية؟ ما هي أفضل طريقة لفعل ذلك ولماذا؟
يمكنك أن تطبق هذه الأشياء بنفسك، زر مدونات مختلفة واطلع على
أفكارها وطبقها لديك كتمرين، فكرة هذه المدونة أخذتها من مدونة شخصية
اسمها SurfTrail، اطلع عليها وحاول أن تقوم بإنشاء مدونة
مماثلة كتدريب رائع سيعلمك الكثير.
| |
|
التسجيل 
