[size=24]مدونة الويب 2.0 الرئيسية تعريف بالمدونة المصادر تواصل معي أخبار المدونة أفكار استبيان برمجة تصميم تطوير كتب مدونات عربية مهمات مواقع كيف يكون موقعي من مواقع الويب 2.0
9 April 2009 - الخميس 14 ربيع الثاني 1430 | 7 تعليق | التصنيف: تصميم
بسم الله الرحمن الرحيم،
آخر تدوينة من سلسلة تحدي البداية القوية
هذه التدوينة شاركت بها أيضاً بمسابقة المدون الكبير محمد سعيد أحجيوج
كيف يكون موقعي من مواقع الويب 2.0
ماهو الويب 2.0؟
يعتبر الجيل الثاني من المواقع الإلكترونية التي ظهرت في منتصف التسعينات، وهو مصطلح يطلق على المواقع الإلكترونية التي تحتوي على الميزات التالية:
1- التفاعل مع الزوار وأشهر أمثلتها تعليقات الزوار في المنتديات ومشاركات المستخدمين في المنتديات.
2- تتمتع مواقع الويب 2.0 بحجم خفيف ومظهر جميل يعتمد في تصميمه بشكل كامل على الـ CSS.
3- التقيد بالمعايير العالمية في تصميم الموقع (W3C)1 لضمان توافقية عالية مع كل المتصفحات.
4- من الناحية التقنية يعتمد على تقنيات حديثة أهمها الأجاكس (AJAX) و (RSS).
بدأ ظهور مفهوم الويب 2.0 في بدايات الـ 2004 وسرعان ما انتشر هذا المفهوم انتشار النار في الهشيم وبدأت مواقع الويب 2.0 بالظهور بشكل ملفت للنظر، وهنا يجب التنويه إلى أن عالمنا العربي نادراً ماتجد فيه هذا النوع من المواقع (نستثني من هذا الأنظمة الجاهزة كالمدونات والمنتديات وأنظمة إدارة المحتوى).
إذن ما هي الخطوات الواجب اتباعها لكي أجعل موقعي من مواقع الويب 2.0؟
يوجد محوريين رئيسيين للتغيير بهما وهما التصميم والبرمجة:
<!--[if !supportLists]-->· <!--[endif]-->من ناحية التصميم:
ستحتاج لإعادة تصميم موقعك من الصفر !! … طبعاً المحتويات لن تتأثر ولكن هيكل الموقع سيتغير تغييراً جذرياً. المواقع القديمة كانت تعتمد في التصميم على الجداول، طبعاً هذا الاستخدام الخاطىء للجداول مازال أثره حتى اليوم في المواقع الإلكترونية. فالجداول تستخدم لعرض جدول ما مثل قائمة بالمنتجات ولكن المطورين أساؤوا استخدامه وأصبحوا يستخدمونه في بناء الهيكل العام للموقع.
ستحتاج لقراءة كتاب أو أكثر عن CSS حتى تتعلم أساسياتها. ومن ثم تعمل على تحويل الجداول وخلاياها لحاويات تسمى div. طبعاً على المدى القريب ستعاني كثيراً وربما ستفكر بالتخلي عن الويب 2.0 لكن عندما تنظر لحسناته ستعيد التفكير في هذا الأمر وبعد مدة سيصبح مستواك جيداً في الـ CSS وستعتاد عليه ولن تفكر بالرجوع أبداً للجداول.
أيضاً حاول التقليل قدر الإمكان من استعمال الصور، فالصور التي تحتوي على لون واحد وتستخدم عادة للخلفيات يمكن الاستعاضة عنها بتلوين هذا الجزء بالـ CSS. فلا تستخدم الصور بشكل مفرط ولكن استخدمها عند الحاجة.
أيضاً عليك بتجريب موقعك على أشهر المتصفحات للتأكد من أنه التصميم واحد في كل المتصفحات. الاختبار الأصعب هو تجريبه على Internet Explorer نظراً لعدم احترامه للمعايير العالمية، حاول قدر الإمكان أن تجعله يعطي تصميماً صحيحاً فجمهورك يستخدم جميع المتصفحات ولايمكنك إهمال أيٍ منها.
دعونا نأخذ بعض الأمثلة التصميمية:
1- الزوايا الدائرية2
الزوايا الدائرية
<!--[if !vml]--><!--[endif]-->
2- مستطيل الطلب المنسق3
المستطيل المنسق
<!--[if !vml]--><!--[endif]-->
3- الجداول المتناوبة الألوان4
<!--[if !vml]--><!--[endif]-->
الجداول المتناوبة الألوان
<!--[if !supportLists]-->· <!--[endif]-->من ناحية البرمجة:
البرمجة لا تقل أهمية عن التصميم … لكن بما أنها الجانب الغير مرئي من الموقع لذلك لايتم الانتباه إليها كثيراً.
موقعك يجب أن يكون مبرمجاً بشكل جيد وخالٍ من الأخطاء، أيضاً استخدم الجافا سكربت ولكن بحذر فبعض المستخدمين يوقفون عملها خوفاً من الفايروسات. الـ RSS أصبحت ركناً أساسياً في كل موقع فالكثير من الأشخاص يستخدمونها لسهولة جديد الموقع بدون الحاجة لزيارته.
استخدم الـ AJAX عند إضافة تعليق مثلاً، فبدل أن تحدث الصفحة كلها عند إضافة المستخدم لتعليق، يقوم الأجاكس بهذه المهمة بهدوء وسرعة وبدون الاضطرار لتحديث الصفحة.
هذه كانت جولة سريعة في تقنيات الويب 2.0 ولايمكن حصر هذا الموضوع بمقال أو كتاب فهو موضوع كبير وينمو بشكل سريع كل يوم. فالأفضل البقاء مطلعاً على هذه التقنيات من مصادر مختلفة5.
http://w3c.org
1.
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
2.
http://www.noupe.com/css/47-excellent-ajax-css-forms.html
3.
http://validweb.nl/artikelen/javascript/better-zebra-tables/
4.
http://cssbit.com , http://noupe.com
5.
الوسوم: برمجة, تصميم, تكتيك, نصائح
أخطاء يرتكبها مطوروا المواقع
9 April 2009 - الخميس 14 ربيع الثاني 1430 | 9 تعليق | التصنيف: تصميم
1- العناوين الفظيعة
كان ومازال بعض المطورين يضعون عناوين فظيعة للصفحات مثل:
-&&-##موقع الصفحات الفظيعة##-&&-
هذه الرموز لاتفيد بشيء ضع بدلاً عنها عنوان مفيد يساعدك بترقية الرانك.
2- قوائم التصفح بالجافا سكربت
لماذا تستخدمهم إذا وجدت البديل السهل؟؟ وهو قوائم css (سأتحدث عن قوائم css بوقت لاحق)
أيضاً أغلب محركات البحث لاتستطيع التعامل مع قوائم الجافا سكربت
3- المسارات المولدة عشوائياً
مازال هناك الكثير من المواقع التي تستخدم عناوين مولدة عشوائياً … فترى عشرات الأرقام والأحرف ولاتفهم منهم شيئاً … مثل:
www.example.com/2121,4334,3213dsadsa,weq
4- عدم استعمال وسوم العناوين (h1 … h6)
كثيراً ما ترى مواقع تضع عناوينها داخل وسوم عادية وتكبر الخط كثيراً حتى يبدو كعنوان !!! لماذا استخدم وسوم العناوين (h1 … h6) فوظيفتها هي كتابة العناوين … وبإمكانك تعديلها بال css وأيضاً هي من أساسيات SEO أي ترفع لك الرانك.
5- عناوين الصفحات المتشابهة
لا تستخدم نفس العنوان (title) لكل الصفحات بموقعك … استخدم لكل صفحة عنواناً مختلفاً
6- لا تكرر الكلمات في وسم (meta keywords)
لن يفيدك شيء تكرار الكلمات فمحركات البحث ليست بهذا الغباء الذي كانت عليه قبل عشرة سنوات، حتى تحتسبها أكثر من مرة
7- ضغط المحتويات قبل إرسالها
من الأخ Qniq:
8- عدم استعمال Reobots file
9- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Ajax
أي الاعتماد على الأجاكس بكامل الموقع وهذا خطأ كبير … فبعض المستخدمين يعطلوا الجافاسكربت لديهم وبذلك سيظهر موقعك بشكل عبيط
10- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Flash
فبعض الناس مثلي يلغوا الفلاش كله من متصفحهم
11- عدم استخدام Caching بشكل احترافي
إذا لم تعرف كيفية استخدامه فلا تستخدمه
الوسوم: برمجة, تصميم, تكتيك, نصائح
اختصارات ال CSS
9 April 2009 - الخميس 14 ربيع الثاني 1430 | 6 تعليق | التصنيف: تصميم
مجموعة اختصارات عند كتابتك لملف css
1- اختصار ال margin وال padding
بدلاً من كتابة:
div {
margin-top: 5px;
margin-right: 8px;
margin-bottom: 3px;
margin-left: 4px;
}
div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 3px;
padding-left: 4px;
}
نكتب التالي:
div {
margin: 5px 8px 3px 4px;
}
div {
padding: 5px 8px 3px 4px;
}
حيث الاختصار يكون دائماً بالترتيب التالي: Top - Right - Bottom - Left
2- الإطار:
بدلاً من:
div {
border-width: 3px;
border-style: solid;
border-color: #c00;
}
نكتب:
div { border: 3px solid #c00; }
3- الخلفية:
بدلاً من:
div {
background-color: #fff;
background-image: url(../images/bg.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center;
}
نكتب:
div { background: #fff url(../img/bg.gif) repeat-y fixed top center; }
4- الخط:
بدلاً من:
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: small;
line-height: 1.2em;
font-family: Helvetica, Arial, sans-serif;
}
نكتب:
p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }
الوسوم: css, تصميم, تكتيك, نصائح
تشكيلة مواقع للقوالب المجانية
9 April 2009 - الخميس 14 ربيع الثاني 1430 | لا تعليقات | التصنيف: تصميم
تشكيلة كبيرة من المواقع التي تقدم قوالب مجانية وأغلبها متوافق مع الويب 2.0
1- StyleHoust
2- CssTemps
3- Open Source Templates
4- Free CSS Templates
5- Open Designs
6- OSWD
7- Open Web Design
8- Studio 7 Designs
9- Template Yes
10- TriStar Webdesign
11- Free Layouts
12- Free Css Templates
13- Free Templates Online
14- Theme Base
الوسوم: css, تصميم
أسرار نجاح المدونات العربية
9 April 2009 - الخميس 14 ربيع الثاني 1430 | 20 تعليق | التصنيف: مدونات عربية
هذه التدوينة شاركت بها في مسابقة الأخ المدون الكبير محمد سعيد أحجيوج
وبالفعل أود أن أشكره من صميم قلبي على هذه الفكرة الجميلة.
أسرار نجاح المدونات العربية
سأقدم في هذه المقال دليلاً سريعاً وبسيطاً لمدونة عربية ناجحة بجميع النواحي، وسأسرد عدة نقاط مع شرح بسيط عن كل واحدة بحيث كل من يقرأ هذا المقال لن يجد صعوبة فيه مهما كانت خبرته التقنية ضعيفة.
إذاً ماهي أهم أسرار نجاح المدونة:
1- هدف المدونة: الكثير من الناس يعتقدون أنهم بمجرد امتلاك مدونة ستأتيهم أفكار المقالات فوراً لهذه المدونة، طبعاً هذا التفكير خاطىء وازداد مع انتشار المدونات وسعرها الرخيص وقد تكون مجانية، فأصبح حلم الكثير منا على بعد دقائق معدودة فقط. فما عليك سوى التسجيل لدى إحدى مواقع المدونات المشهورة1 والحصول على مدونة كاملة خلال دقائق مع نطاق فرعي مجاني أو شراء نطاق وتثبيت مدونة مجانية عليه، كل هذا وأنت جالس في مكانك لم تتحرك قيد أنملة عدا أصابعك.
هذا التقدم السريع أدى إلى ظهور طفرة بالمدونات ونقص بالتميز، فتجد أمامك آلاف المدونات العربية الفارغة ولكن قلما تجد مدونة متميزة بمواضيع معينة أو تعتني بأخبار مجال تخصصي، ولتفادي انتشار هذه الظاهرة السيئة:
1- مجال المدونة يجب أن يكون مجالاً تبرع فيه أو تحب متابعته أو تعمل به.
2- تأكد من هذا المجال له شعبية لا بأس بها فمالفائدة من مدونة لايزورها أحد !!
3- عدم وجود مدونة آخرى تنافسك يضمن لك انتشاراً واسعاً وسريعاً، طبعاً ممكن أن تنشيء مدونة موجودٌ مثلها من قبل ولكن عليك أن تكون متميزاً بشيء عنها أي أن تقدم شيئاً جديداً تستطيع أن تنافسها به.
ثم بعد ذلك تنشىء مدونة تتكلم عن المجال الذي اخترته، فمثلاً أنا أحب متابعة أخبار الدراسة في الخارج وأعلم أن هذا الشيء منتشراً في العالم العربي، أضف إلى ذلك أنه لايوجد مدونة عربية تهتم بهذا المجال (في الوقت الحالي) إذاً فرص نجاح مدونتي كبيرة.
2- التصميم الجيد: كم عدد المرات التي زرت فيها موقعاً ووجدته سيء التصميم وبشع المظهر وتمنيت لو أنك لم تدخل إليه، للأسف هذا منتشر جداً في عالمنا العربي، حاول أن يكون أن تصنع تصميماً جميلاً إذا كان ذوقك الفني عالياً أو استخدم تصميماً جاهزاً فهنالك المئات من التصاميم الجاهزة والمجانية للمدونات2 واختر ألواناً تعكس طبيعة المدونة3
3- المحتوى: حسناً مدونتك أصبحت جاهزة للعمل ولكن ينقصها شيء مهم ألا وهو المحتوى. قم بتجميع بعض المقالات السابقة التي كتبتها أو اكتب بعض المقالات وقم بنشرها تباعاً ولاتنشرها دفعة واحدة لسببين:
1- في جلسة واحدة سيمل القارىء من متابعة المواضيع الأخيرة بعد أن قرأ مواضيعك الأولى.
2- عليك أن تخبىء بعض المقالات للأيام القادمة فإن نشرتهم دفعة واحدة ستفقد مخزونك كله.
أيضاً لاتجعل المقالات طويلة بل حاول الاختصار قدر الإمكان ولكن ليس على حساب المعلومة. أي لاتختصر الأجزاء المهمة بل اختصر الأجزاء المملة والمعروفة للقارىء. أيضىاً بدل أن تشرح مصطلحاً ما قم بوضع رابط عليه يقود لموضوع منفصل عن هذا المصطلح في مدونتك، فهذا يثري مدونتك ويقلل من حجم المقال.
4- اللغة السليمة: نقطة مهمة جداً خاصة لنا نحن العرب، فدائماً مانشاهد أخطاء المدونين اللغوية، حاول قدرالإمكان أن تكون لغتك سليمة وأن تكتب بالفصحى فأبناء المغرب لايفهمون عامية أهل المشرق والعكس صحيح أما الفصحى فالكل يفهمها. وأقرأ ماكتبته مرتين أو أكثر للتأكد من خلو هذا المقال من الأخطاء اللغوية.
5- المقال الجميل: هل يوجد مقال جميل وآخر قبيح؟ نعم يوجد وإليك بعض النصائح لكي يبقى مقالك جميلاً:
1- عند وضعك لصور في مقالة ما استخدم صوراً صغيرة ولكن واضحة واجعل الصورة الكبيرة تظهر فقط عندما يضغط الزائر على الصورة الصغيرة. فبهذه الطريقة تسرع تحميل الصفحات للزوار وتخفف من استهلاك تبادل معطايتك الشهري.
2- ابقي روابطك دوماً فعالة وحدث أو احذف المتعطل منها إما بالتحقق منهم يدوياً كل فترة أو باستخدام بعض الأدوات للتحقق منهم بطريقة آلية ومريحة4
3- حاول دوماً استخدام الهوامش أو تذييل الصفحة في وضع مصادرك التي استقيت منها معلوماتك الموجودة في هذا المقال. وخاصة المصطلحات فالكثير من زوارك قد لايعرفون معناها.
4- حاول ترقيم الأشياء التي تحتاج إلى تعداد ولاتقم بسردها في نسق واحد فالترقيم يسهل الفهم والتذكر.
4- المتابعة والتحديث: مدونتك أصبحت منتشرة والعديد من أصدقاؤك الجدد من متابعي المدونة أصبحوا معتادين على زيارة المدونة. وهنا يكمن الجزء الأصعب من رحلة المدون ألا وهو توقف المدون أو المدونة عن طرح مواضيع جديدة. وإذا حدث هذا سيتركك المتابعون وسيعاتبك الأصحاب وهنا تكمن اهمية النقطة الأولى فإن كنت فعلاً محباً لهذا المجال فلن تتوقف عن تحديث المدونة إلا لظروف خاصة ولفترات قصيرة.
5- التواصل: تواصل مع زوار مدونتك بالتعليقات التي يكتبونها في مقالاتك أو بالرسائل التي تصلك عن طريق البريد الإلكتروني الذي وضعته في الصفحة الرئيسية أو في صفحة آخرى ظاهرة للعيان. الكثير من الناس يفضل التواصل عبر البريد الإلكتروني لعدة أسباب منها الخصوصية أو للتبليغ عن أخطاء بالمدونة أو لحديث شخصي مع المدون. لذلك وجود بريدك الإلكتروني بمكان ظاهر مهم جداً.
http://Blogger.com , http://wordpress.com
1.
http://www.ar-wp.com , http://themes.wordpress.net
2.
http://www.abacusdesign.com.au/articles/how-to-choose-your-website-colours.htm
3.
http://www.google.com/webmasters/tools
4.
الوسوم: css, تصميم, تكتيك, نصائح, وورد بريس
مقدمة في CSS
9 April 2009 - الخميس 14 ربيع الثاني 1430 | 9 تعليق | التصنيف: تصميم
ملاحظة: يجب أن يكون مستواك بالـ HTML جيداً قبل البدء.
1- ما هي الـ CSS؟
هي اختصار لـ Cascading Style Sheets وليس لها تعريب على حد علمي
2- ما هي وظيفتها؟
مسؤولة عن شكل صفحات الويب أي الإظهار فكل ما تراه في هذه المدونة من ألوان وأحجام خطوط هي من أفعال الـ CSS.
3- ما هي مكوناته؟
لقاعدة الـ CSS ثلاثة مكونات وهي على الشكل:
selector {property: value}
حيث:
selector هو العنصر الذي ستطبق عليه التأثيرات.
property هي خاصية من خواص هذا العنصر سنعطيها قيمة ما.
value القيمة الجديدة لهذا العنصر.
وبالمثال يتوضح الأمر:
div {color: blue;}
في البداية اخترنا العنصر الذي ستطبق علي خصائصه القيم الجديدة وهو حاوية الـ div، ثم اخترنا خاصية color لهذا العنصر أي لون النص داخله وأعطيناها لون ازرق.
4- كيف نربط ملف css مع الصفحة؟
نضعه في وسم head وتأكد من مسار href أنه صحيح، هنا وضعته داخل مجلد اسمه css واسم الملف هو style.css
5- ما أنواع الـ selector؟
له ثلاثة أنواع:
- وسم HTML: أي نضع وسماً من وسوم الـ HTML المعروفة (مثلاً div, p, span, a).
مثال:
div {color: blue;}
هنا سيطبق هذا التأثير (لون الخط الأزرق) على كل div اكتبها في صفحة HTML بعد ربطه بالتأكيد كما في الخطوة 4.
- المعرف (id): هنا نضع selector ليس من وسوم الـ HTML نعطيه اسماً من عندنا ونضع قبله # بحيث يصبح:
مثال:
#id-selector {color: red;}
هنا سيطبق على كل وسم له معرف id-selector مثال:
سيظهر النص هنا باللون الأحمر
- الصنف (class): أيضاً نضع selector اسمه من اختيارنا ولكن نضع قبله نقطة . أي:
.class-selector {color: black;}
كيف نحصل على تأثيره داخل صفحة الـ HTML … نقوم بإعطاء وسم الـ HTML قيمة لصنفه:
سيظهر هذا النص باللون الأسود
6- ما الفرق بين “المعرف” و “الصنف” أي متى استخدم هذا ومتى استخدم ذاك؟
استخدم المعرف عندما تريد تأثيراً لعنصر واحد … أي المعرف لا يجب أن يوضع لأكثر من وسم، لماذا؟ لأنه من خصائص وسوم HTML أن كل واحداً منها له معرفه الخاص لذلك لايجب تكرير المعرف لوسمين أو أكثر.
أما الصنف فاستخدمه لعدة وسوم أياً كان عددهم وهذا هو الفرق بينهم بكل اختصار وبدون تعقيدات.
7- إذا هل لك أن تشرح باختصار كل ماذكرت؟
طبعاً، الـ CSS تستخدم لإعطاء صفحة HTML التأثيرات المرئية أي الإظهارات، يتم ربط الملف كما في الخطوة 4 بالمناسبة ملف الـ CSS هو ملف عادي ولكن حولت لاحقته لـ css بدلاً من txt. ولدينا ثلاثة أنواع من selector (راجع الخطوة 5) واحد لوسم HTML موجود والأخر هو المعرف لإعطائه لوسم HTML واحد والأخير هو الصنف حيث يعطى لأكثر من وسم.
أسئلة للمستوى المتقدم:
8- كيف أعطي وسم يحتوي على خاصية محددة تأثيراً ما، مثلاً لدي الوسمان:
نص
نص آخر
أريد أن أعطي الوسم الذي يحتوي على خاصية الـ title تأثيراً أي الوسم الأول فكيف أحصل على ذلك؟
لا مشكلة، تستطيع ذلك بكتابة التالي في ملف css:
h1[title] {color: blue;}
هكذا سيحصل وسم h1 الذي يحتوي على خاصية title تأثيراً خاصاً به.
9- شيء جميل لكن هل يوجد تطبيق آخر له؟
نعم، أستطيع إعطاء وسم a الخاص بالإيميل تأثيراً معيناً، لاحظ معي:
a[href^="mailto"] { color: blue; }
هنا أخبرته أنه سيجد في بداية خاصية href كلمة mailto الخاصة بالبريد والـ (^) تعني بالبداية.
والسلام عليكم.
]
