كل ما يجب أن تعرفه لإنشاء موقع ناجح

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

المدون

عصام محيمي

تاريخ النشر

12 دجنبر 2014

التصنيف

البرمجة والتصميم

1إسم النطاق

اختر بعناية إسم نطاق (مناسب) لموقعك بحث يسهل تذكره من طرف الزوار.

2الإستضافة

اختر استضافة موثوقة كـ (Godaddy، Heberjahiz، Genious) على سبيل المثال مع النظر إلى مساحة التخزين التي ستحتاجها لإستضافة موقعك.

3التقنيات

قبل الشروع في إنشاء موقعك يجب أولا تحديد لغات البرمجة التي ستستعملها كـ (PHP، Asp.net) أو أنظمة إدارة المحتوى كـ (Joomla، Wordpress).

4الهدف

حدد الهدف أو الغرض من إنشاء الموقع : موقع ربحي، موقع للأعمال التجارية، موقع لشركة، موقع لبيع منتجات ...

5التخطيط (Layout) والألوان

ألوان الموقع يجب أن تكون متناسبة مع مجاله (مثلا : اللون الأخضر للمواقع الرياضية و البرتقالي للمواقع السياحية)، والتخطيط الأنيق يجعل جميع العناصر واضحة للزائر.

6خريطة الموقع

حدد جميع صفحات موقعك والصفحات الفرعية لتقديم لمحة عامة عن محتوى الموقع.

7الفئة المستهدفة

عليك أن تعرف نوع الزوار الذين تستهدفهم ثم بعد ذلك يمكنك إعداد المحتوى الذي سيجذبهم.

8المحتوى

احرص على توفير محتوى جيد ومفيد لزوار موقعك يتضمن كلمات مفتاحية تحتل مراتب متقدمة في محركات البحث.

9الإعلانات

لا تخصص الكثير من المساحات الإعلانية، فإذا لم تكن ضرورية من الأفضل عدم وضعها في الموقع.

10النوافذ المنبثقة

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

11تصميم جذاب

تصميم الموقع الجيد يتميز بالبساطة والإحترافية.

12الأزرار

إجعل الأزرار كـ (إشترك الآن، شراء الآن، تحميل ...) تلفت أنظار الزوار، ومن الأفضل إستخدام الألوان الزاهية مثل البرتقالي أو الأصفر.

13خلفية الموقع

يمكنك إختيار إما خلفية بلون واحد أو خلفية ملونة أو يمكنك إختيار خلفية منقوشة.

14الصور

اختر صور ذات جودة عالية والتي ستخلق إنطباعا لدى الزوار.

15سهولة التصفح

الزائر بجب أن يجد بسهولة ما يبحث عنه.

16التميز

هناك الكثير من المواقع الجيدة، لكن يجب أن تجعل موقعك يتميز عن الآخرين.

17التحديث

التحديث المستمر لمحتوى الموقع يضمن عودة الزوار والحفاظ عليهم.

18التهيئة لمحركات البحث

الموقع الجيد يجب أن يكون صديقا لمحركات البحث، يعني يسهل العثور عليه في محركات البحث.

19التوافق مع معظم المتصفحات

الموقع الجيد يجب أن يعرض بشكل صحيح في جميع المتصفحات الحديثة كـ (Opera، Safari، Mozilla Firefox، Google Chrome)

20التوافق مع جميع الأجهزة

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

21الشبكات الإجتماعية

دمج الشبكات الإجتماعية مع موقعك أمر مهم للحصول على الزوار و لتسهيل نشر المحتوى.

22خط الكتابة

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

23تسجيل الدخول

إذا وجب على الزوار تسجيل الدخول والإشتراك في موقعك، إمنحهم بعض المزايا عندما يفعلون ذلك.

24تتبع وتحليل إحصائيات الزوار

وذلك لمراقبة كيف ينمو موقعك والعمل على تحسينه.

25توفير الأمن للزوار

الزائر يجب أن يشعر بالأمان عند إدخال معلومات خاصة به في موقعك، خاصة معلومات الإتصال ورقم بطاقة الإئئتمان.

26الفوتر (Footer)

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

المصدر

26 Things to note before you develop a website

تابع القراءة

إضافة جميلة بتقنية jQuery لمدونات بلوجر

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

المدون

عصام محيمي

تاريخ النشر

6 فبرابر 2014

التصنيف

البرمجة والتصميم

الخطوة 1إستدعاء مكتبة جي كوري

تعريف مكتبة jQuery

jQuery هي أحد مكتبات لغة الجافاسكربت JavaScript حرة مفتوحة المصدر وهي من إبتكارات شركة موزيلا (Mozilla)، هدفها الأساسي هو اختصار العديد من النصوص البرمجية التي كان يكتبها المبرمج سابقا وكذلك تسهيل التعقيد الموجود في كتابة أكواد الجافاسكربت، كما تساعد في عمل التأثيرات الحركية علي موقع الويب.

التقنيات المستعملة لإنشاء تلك الإضافة هي مكتبة jQuery ولغة CSS، لذلك عليك أولا أن تتأكد من وجود رابط مكتبة جي كويري في قالب مدونتك. كيف ؟

- من لوحة التحكم الخاصة بمدونتك، إضغط Template وبعدها إختر Edite HTML
- إبحث عن jQuery بالضغط على Ctrl + F من لوحة المفاتيح.
إذا وجدت إحدى العبارات التالية : jQuery.js، jQuery.min.js، ... فاعلم أن قالب مدونتك يحتوي على مكتبة جي كويري وبالتالي يمكنك تجاهل هذه الخطوة والمرور إلى الخطوة الموالية.
- إذا لم تكن موجودة، إبحث عن الوسم <head> وضع أسفله مباشرة السطر التالي :

 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

الخطوة 2إضافة أداة جديدة

- من لوحة التحكم، إضغط Layout وفي المكان الذي تراه مناسبا للإضافة إضغط Add a Gadget.

- ستظهر لك نافذة تحتوي على أدوات بلوجر الرسمية، إختر HTML/JavaScript لإنشاء أداة جديدة.

الخطوة 3كود الإضافة

- في حقل العنوان Title أكتب "إخترنا لك" على سبيل المثال.

- قم بنسخ الكود التالي وضعه في حقل المحتوى Content :

<script type="text/javascript">
     $(document).ready(function() {
     $('.feature-caption').css("bottom", "-45px");
     $(".featured-posts li").hover(
     function(){
     $(this).find(".feature-caption").animate({bottom:"0"}, "slow");
     },
     function(){
     $(this).find(".feature-caption").animate({bottom:"-45"}, "fast");
     });
     });
</script>

<style>
    .pb-feature
    {
    width: 300px;
    height: 225px;
    }
    
    .feature-caption 
    {
    display:block;
    position:absolute;
    background: #3eb8b4;
    bottom:0px;
    width:100%;
    color: white;
    text-align: center;
    }

    .featured-posts li
    {
    width: 300px;
    height: 225px;
    display:block;
    float: left;
    position:relative;
    overflow:hidden;
    }
    
    .featured-posts p
    {
    padding: 5px;
    font-family: tahoma;
    font-size: 13px;
    text-align: center;
    direction: rtl;
    }
    
    .featured-posts a
    {
    color: white;
    text-decoration: none;
    }
</style>

<div class="pb-feature">
<ul class="featured-posts">
    <li>
        <a href="http://www.th3problogger.com">
        <img src="th3problogger.png" alt="th3problogger" nopin="nopin" height="225" width="300"/>
        </a>
        <div style="bottom: -70px;" class="feature-caption">
            <p><a href="http://www.th3problogger.com">محترف بلوجر - إخترنا لك</a></p>
        </div>
    </li>
</ul>
</div>

- لتغيير طول وعرض الإضافة : قم باستبدال القيم التالية (300، 225) بما يناسبك.
- قيمة لون الشريط السفلي : 3eb8b4
- عنوان التدوينة : محترف بلوجر - إخترنا لك
- رابط الصورة : th3problogger.png
- أبعاد الصورة : نفس أبعاد الإضافة (300، 225)
- رابط التدوينة المختارة : http://www.th3problogger.com

- إضغط على الزر Save لحفظ الإضافة.

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

تابع القراءة

تعرف على قيود بلوجر

معظم الأشخاص فضلوا إختيار منصة بلوجر لعدة أسباب، في حين يعتقد آخرون أن بلوجر لديه الكثير من القيود والتي دفعتهم لإختيار منصات أخرى للتدوين كالووردبريس على سبيل المثال.

في تدوينة اليوم سنتعرف على القيود المفروضة على أصحاب مدونات بلوجر.

المدون

عصام محيمي

تاريخ النشر

2 يناير 2016

التصنيف

البرمجة والتصميم

1عدد المدونات

يمكنك إنشاء إلى حدود 100 مدونة لكل حساب.

2عدد المشاركات

ليس هناك حد لعدد المشاركات التي يمكنك إضافتها إلى مدونة واحدة. سيتم حفظها جميعًا في حسابك (إلا إذا تم حذفها يدويًا) بغض النظر عن ما إذا كنت تنشر أرشيفات أم لا.

3عدد الصفحات الثابتة

يمكنك إنشاء إلى حدود 20 صفحة ثابتة لكل مدونة.

4حجم المشاركات

لا يتم تقييد المشاركات الفردية بحجم معين، ولكن قد يؤدي إرسال مشاركات كبيرة جدًا إلى تجاوز قيود حجم الصفحة.

5حجم الصفحات

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

6عدد التعليقات

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

7عدد الصور

يصل إلى 1 جيغابايت من إجمالي السعة التخزينية، وتتم مشاركتها مع ألبومات الويب بيكاسا.

8حجم الصور

إذا كنت تنشر صورًا من خلال Blogger للجوال، فإن هناك حد للحجم يصل إلى 250 كيلوبايت لكل صورة.

9أعضاء الفريق

يمكنك دعوة إلى حدود 100 عضو لكل مدونة.

10عدد التصنيفات

يصل إلى 2000 تصنيف فريد لكل مدونة و20 لكل مشاركة.

11وصف المدونة

عدد الحروف المسموح بها في وصف المدونة هو 500 حرف. وقد تؤدي إضافة أحرف إضافية أو HTML إلى الرجوع إلى إعداد سابق.

12معلومات الملف الشخصي "من أنا"

1200 حرف بحد أقصى.

13اهتمامات الملف الشخصي والمفضلة

2000 حرف بحد أقصى في كل حقل.

المصدر

دعم بلوجر - ما القيود على حسابي في Blogger ؟

تابع القراءة

خدعة لإنشاء أكثر من 20 صفحة ثابتة في بلوجر

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

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

المدون

عصام محيمي

تاريخ النشر

11 يناير 2014

التصنيف

نصائح وخدع بلوجر

إذا حاولت إنشاء الصفحة الـ 21 في مدونتك ستظهر لك رسالة تخبرك بأنه قد قمت بإنشاء الحد الأقصى من الصفحات الثابتة أي (20) صفحة كما هو مبين في الصورة :

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

الخطوة 1

- قم أولا بإنشاء 20 صفحة في مدونتك ثم إنتقل بعدها إلى الخطوة الموالية.

الخطوة 2

- إضغط على الرابط Edit لأي صفحة وكأنك تريد تعديلها.

الخطوة 3

- أنسخ رابط التعديل الخاص بتلك الصفحة من شريط العناوين Address bar كما هو مبين في الصورة :

الخطوة 4

- إحتفظ بهذا الرابط في المفكرة Bloc-notes أو أي محرر نصوص. إذا فقدت الرابط لا يمكنك إسترجاع الصفحة.

الخطوة 5

- عليك الآن بحذف تلك الصفحة بالضغط على الرابط Delete. لا تخف، يمكنك استرجعها ثانية.
الآن أصبح لديك 19 صفحة في مدونتك، يعني أنه بإمكنك إنشاء صفحة واحدة إضافية (الصفحة رقم 21) لأنك قمت بحذف (الصفحة رقم 1). تذكر أنني قلت لك في الأول "ركز معي جيدا".

الخطوة 6

- قم بإنشاء صفحة جديدة (الصفحة رقم 21).

الخطوة 7

- لديك الآن 20 صفحة ثابثة في مدونتك (من 2 إلى 21)، وقد حان الوقت لإسترجاع الصفحة التي قمت بحذفها في الخطوة الخامسة (الصفحة رقم 1).
لعمل ذلك إفتح علامة تبويب جديدة New tab في متصفحك وإلصق الرابط الذي قمت بالإحتفاظ به في الخطوة الرابعة ثم إضغط Enter من لوحة المفاتيح.

الخطوة 8

- سترى أن الصفحة مازالت موجودة. إضغط على الزر Publish لنشرها.

الخطوة 9

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

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

تابع القراءة

أفضل طريقة لإضافة وصف المدونة

الوصف Meta description مهم للغاية لجلب الزوار عن طريق محركات البحث. وبفضل واجهة بلوجر الجديدة أصبح بإمكانك إضافة وصف لمدونتك دون الحاجة إلى تعديل كود HTML في قالب المدونة.
إليك في هذه التدوينة أفضل طريقة لإضافة وصف المدونة في بلوجر.

المدون

عصام محيمي

تاريخ النشر

9 يناير 2014

التصنيف

دروس بلوجر

تعريف الوسم Meta

يستخدم الوسم <Meta> لإخبار محركات البحث عن مضمون الموقع (كالوصف والكلمات المفتاحية)، ويتم كتابته داخل الوسم <head> حيث لا يتم عرض محتوياته للزائر لأنه خاص بمحركات البحث.

1أهمية الوصف Meta description

يعتبر الوصف Meta description مهم جدا لأن محركات البحث تقوم بعرضه في نتائج البحث وبالتالي فهو العامل الأساس الذي يحدد ما إذا كان الباحث سيزور مدونتك أم لا.

2خطوات إضافة وصف المدونة

- من لوحة التحكم إضغط على Settings ثم إختر Search preferences
- ستلاحظ أن خاصية الوصف Description غير مفعلة Disabled، إضغط الآن على الرابط Edit
- قم بتفعيل خاصية البحث وذلك باختيار الأمر Yes
- في المربع الأبيض الفارغ، أكتب الوصف الخاص بمدونتك ثم إظغط على الزر Save changes لحفظ التغييرات كما هو مبين في الصورة أسفله :
يمكنك تعديل وصف مدونتك في أي وقت تشاء وذلك باتباع نفس الخطوات السابقة.

3نصائح

- من الأفضل أن يكون الوصف Meta description يتركب من جملة واحدة أو جملتان تعكسان محتوى المدونة
- وصف المدونة يجب أن لا يتعدى ثلات كلمات مفتاحية
- خذ وقتك الكافي في إختيار وصف المدونة وحاول أن يكون دقيقا ومعبرا

تابع القراءة

تقنيات CSS - الجزء الأول

لغة CSS أصبحت أكثر أهمية في مجال تصميم المواقع خاصة مع ظهور الإصدار الثالث (CSS3) في سنة 2003 مما أدى إلى التقليل من إستعمال الفلاش والصور.

اليوم سأشارك معكم بعض التقنيات الهامة في لغة CSS والتي إكتسبتها من خلال تجربتي الشخصية.

المدون

عصام محيمي

تاريخ النشر

12 ديسمبر 2013

التصنيف

البرمجة والتصميم

1صور دائرية باستخدام border-radius :

خاصية border-radius تمكنك من إضافة حواف دائرية على عناصر الصفحة كالصور مثلا، ويمكن استغلال هذه الخاصية لإنشاء صور دائرية وذلك بإعطائها القيمة %50.
- تطبيق :
في هذا التطبيق سأقوم بإستدعاء مجموعة من الصور (الطول = العرض)، كل صورة سأعطيها قيمة مختلفة في خاصية border-radius حتى تتضح لك الفكرة :

- النتيجة :

2أيقونات بجانب العناوين

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

 
محترف بلوجر

الحل الأمثل والأذكى هو إزاحة العنوان قليلا نحو اليسار ثم إعطائه الأيقونة كخلفية على اليمين بدون تكرار كما يلي :

 h3
 {
     padding-right: 40px;
     background-image: url(blogger.png);
     background-position: right center;
     background-repeat: no-repeat;  
 }

- النتيجة :

3الأزرار

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

 محترف بلوجر

الخاصيات المسؤولة عن تصميم الزر هي padding و background، وللمزيد من الجمالية سأستعمل خاصية border-radius لإضافة الحواف الدائرية كما يلي :

 a
 {
     padding: 10px;
     background: #3A4755;
     border-radius: 5px;
     text-decoration: none;
 }

- النتيجة :

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

تابع القراءة