تصميم مواقع | خامات تصميم | برمجيات | css |design | vectors

Posts tagged ‘شخص’

كيفية تسريع مدونة الووردبريس – YourColor

 الووردبريس wp

yourcolor.net
yourcolor.net

yourcolor.net1.الاستضافة:

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

2.الاضافات:

من يستطيع الاستغناء عن الاضافات؟ لا أحد ! الاضافات تساعدنا كثيراً وتسهل علينا أشياء كثيرة، ولكن اذا كنت تريد مدونة سريعة عليك الاستغناء عن بعض الاضافات وابقاء اهمها (10 اضافات على الاكثر)
سبق وشرحنا في عنكبوت عن العديد من الاشياء التي تستطيع عملها من دون اضافة كـ
كيفية اظهار المواضيع بشكل عشوائي
كيفية اضافة صورة بارزة للوردبريس
طريقة عمل فورم الاتصال بنا بتقنية الpopup
كيفية ربط مدونة ووردبريس بالفيسبوك

كيف يمكن للإضافات أن تبطيء مدونتك؟
كلما كان عدد الاضافات المفعلة اكثر، كلما زادت ارسال استعلامات (Queries) الى قاعدة البيانات مما قد يشكل عبيء على السيرفر ويعمل على ابطاء سرعة الموقع
تستطيع مشاهدة الاستعلامات المرسلة لقاعدة البيانات في عنكبوت وذلك عن طريق الضغط right click
ومشاهدة الsource code في الأسفل قبل وسم الbody

yourcolor.net

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

لنأخذ كمثال اذا أردت ان تعمل صفحة جديدة، فانك تخلقها عن طريق لوحة التحكم الخاصة بالووردبريس
كلما تفتح المدونة يتم ارسال استعلامات (Queries) الى قاعدة البيانات عن الدالة الخاصة بالصفحات wp_list_pages وبالتالي قاعدة البيانات ترسل الصفحات المستخدمة بالمدونة
لماذا لا نجعلها أبسط؟
اذا كان لديك خلفية ولو بسيطة في الHTML اعمل هذه الصفحات يدوياً

طريقة العمل:

افتح مدونة الووردبريس
اعرض كود المصدر source code
هذا هو الكود الخاص بموقعي

yourcolor.net

سأنسخ هذا الكود من الsource code

نحن نريد الكود الذي ياتي بعد navigation

<div class="menu">
<ul>
<li><a h
ref="http://www.yourcolor.net/" title="صفحة البداية">الرئيسية</a></li>
<li><a href="http://www.yourcolor.net
m/category/%d9%88%d9%88%d8%b1%d8
%af%d8%a8%d8%b1%d9%8a%d8%b3/" title="شاهد جميع التدوينات في تصنيف ووردبريس">ووردبريس</a>
<ul class=´children´>
<li><a href="http://www.yourcolor.net/category/%d9%88%d9%88%d
8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8
%b3/%d8%af%d8%b1%d9%88%d8%b3/" title="شاهد جميع التد
وينات في تصنيف دروس">دروس</a></li>
<li><a href="http://www.yourcolor.net/category/%d9%88%d9%88%
d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/%d
8%af%d8%b9%d9%85-%d9%81%d9%86%d9%8a/" title
="شاهد جميع التدوينات في تصنيف دعم فني">دعم فني</a></li>
 <li><a href="http://www.yourcolor.net/category/%d9%88%d9%88%d
8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3
/%d9%82%d9%88%d8%a7%d9%84%d8%a8/" title="شاهد جميع التدوينات في تصنيف قوالب">قوالب</a></li>
</ul>
<li><a href="http://www.yourcolor.net/category/%d8%aa%d8%b3%d9%88%d9%8a%d9%82/" title
="شاهد جميع التدوينات في تصنيف تسويق">تسويق</a></li>
<li><a href="http://www.yourcolor.net/service/" title="خدماتنا">خدماتنا</a></li>
<li><a href="http://www.yourcolor.net/about-us/" title="نبذة">نبذة عنا</a></li>
<li><a href="#footer_button" title="نبذة">الاتصال بنا</a></li>

وسألصقه في الهيدر :

من لوحة التحكم –> المظهر –> محرر –> الترويسة header.php
نبحث عن الID
Navigation

yourcolor.net

yourcolor.net

اضافة cache

هناك الكثير من الاضافات الخاصة بالكاش وهي تعمل بشكل جيد وفعال بتسريع الموقع
هنا شرح وتنزيل اضافة wp-cache(الدرس مقدم من مجلة الووردبريس)

الاكاديمية العربية لفنون التصميم و الجرافيك

مفهوم قابلية الإستخدام للوورد بريس – yourcolor

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

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

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

خمس أخطاء تدوينية ربما لم تفكر بها من قبل – yourcolor

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

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

نشر عدة مقالات متوالية في نفس الموضوع

yourcolor.net

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

yourcolor.net

عدم استخدام الصور في التدوينات

yourcolor.net

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

yourcolor.net

عدم استخدام العناوين الفرعية

yourcolor.net

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

yourcolor.net

كتابة فقرات طويلة جدا

yourcolor.net

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

yourcolor.net

عدم ادراج الموضوع كاملا في الخلاصات

yourcolor.net

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

انتهى الدرس

إضافة [ أفضل المعلقين ] للقائمة الجانبية – yourcolor

إضافة [ أفضل المعلقين ] للقائمة الجانبية

yourcolor.net

yourcolor.net

yourcolor.net
هذه اضافة مميزة , تُميز بها انت بالدور زوارك ومعلقيك بمدونتك
فتاتي تكريماً لزوار كٌثر قامو بزيارة مدونتك , ومن ثم التعليق والمشاركة ,,,
وبإمكانك مكافئتهم بوضع اسمائهم بالترتيب العشري او باضافة الرباط المباشر لهم ,,
خصائص في الاضافة ::
*وضع قائمة جانبية لأكثر الزوار تعليقاً ..
* وضع عدد التعليقات لكل شخص ..
* وضع الصورة الرمزية ( مصغرة) لكل زائر ..
* وضع رابط الزائر مع اسمه ..
* امكانية استثناء اشخاص معينين ..
موقع الاضافة الرسمي :
http://wordpress.org/extend/plugins/…t/screenshots/
والاضافة قمت بتعريبها وتوضيح اغلب نقاطها ,, وهي بالمرفقات ..
هنا حمل

10 افضل إضافة لعمل نموذج إتصال – yourcolor

10 افضل إضافة لعمل نموذج إتصال

yourcolor.net

 yourcolor.net

yourcolor.net
كما بعنوان الموضوع هذه هى قائمة بـ 10 أفضل إضافة تساعدك على إنشاء صفحة تمكن زوارك من الإتصال بك من خلال نموذج سهل و بسيط.
لماذا الرقم 10 ؟ ﻻ أعلم ولكن ولماذا أى رقم غير الرقم 10 !؟ ربما لأني حاولت حصر الإضافات حتى لا أقوم بتشتيتكم خصوصاً وأن هذا الموضوع يستهدف المدونين الجُدد في المقام الأول و حالهم كحال أى مبتدئ بيكونوا تائهين بعض الشئ فقلت ولما التشتيت بإضافات كثيرة لتكتفي بذكر أفضل 10 إضافات.

1. Simple Contact Form
إضافة سهلة التحكم بسيطة تعمل بـ AJAX كما إنها تمكنك من وضع نموذج الإتصال بالقائمة الجانبية
التعريب: غير متوفر

2. Contact Form 7
من الإختيارات المُفضلة لدى مستخدمي ووردبريس فإنك تستطيع صنع أكثر من نموذج إتصال بموقع واحد وهو ما لا يوفره أغلب الإضافات. أيضاً تدعم الـ AJAX كما إنك تستطيع إضافة Captcha مصورة من خلالها.
التعريب: غير متوفر
3. Tiny Contact Form
تستطيع وضع نموذج الإتصال بأى صفحة أو تدوينة أو حتى في القائمة الجانبية.
التعريب: غير متوفر

4. WP Contact Form
تستطيع وضع نموذج الإتصال بأى صفحة أو تدوينة.
التعريب: غير متوفر

5. SimpleModal Contact Form (SMCF)
تعمل بالـAJAX ومكتبة الجافاسكريبت Jquery
التعريب: غير متوفر

6. Grunion Contact Form
عند إضافتك هذا النموذج ﻷى تدوينة بسهولة عن طريق الكود

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

7. Enhanced WP Contact Form
نفس مميزات الإضافات السابقة و لكن بها بعض المميزات مثل معرفة إذا كان المتصل بك هو زائر من محركات البحث أم من صحفات محولة … إلخ
التعريب: غير متوفر

8. MM Forms
عن طريق هذه الإضافة تستطيع التحكم و التعديل على الحقول المطلوبة من المرسل و هو ما لا يسمح به كثير من الإضافات في هذا المجال.
التعريب: غير متوفر

 

9. WP-ContactForm
أغلب مميزاتها تقريباً مثل الإضافات السابقة.
التعريب:غير متوفر

 

10. Easy Contact
إضافة سهلة التحكم يتم إدراج النموذج عن طريق الكود التالي

[easy-contact]

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

@import url('../../plugins/easy-contact/sample/econtact-basic.css'); 

التعريب: غير متوفر

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

Widget لإشهار موقعك عن طريق زوارك – yourcolor

Widget لإشهار موقعك عن طريق زوارك

yourcolor.net

 yourcolor.net

yourcolor.net
اليوم أثناء تصفحى و جدت آداه جميله تجعل زوار موقعك المشتركين فى موقع تويتر بإخبار من يتابعهم عن موقعك
فلنفرض مثلاً أن 1000 زائر من زوار موقعك مشترك فى تويتر
كل منهم يتابعه فى المتوسط 100 فرد
إستخدم منهم 500 فرد الآداه
إذاً فقد ظهر إسم موقعك ل 500*100 فرد = 50,000 شخص
كما يمكنك أنت أيضاً إستخدام الآداه فى إرسال جديد موقعك لتويتر
الآداه بسيطه جداً و الكود فى المرفقات
يمكنك بسهوله و ضعها فى widget و الإستمتاع بخصائصها]
مثال : http://crazy-eng.com/blog
تحميل
twitter_tool

معرض الوسوم