26‏/02‏/2017

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

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

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

تعديل قوالب بلوجر واضافة اقسام جديدة
اضافة أقسام جديدة لقوالب بلوجر

التعديل على قوالب بلوجر لإضافة أقسام جديدة للأدوات

كود القسم

الكود الخاص بقسم الأدوات يبدو بهذا الشكل:

<b:section id='box1' class='box' maxwidgets='no' showaddelemnts='yes'>
</b:section>


والعناصر المكونة له هي:
يبدأ ب <b:section   وينتهي ب  .</b:section>
يحمل id وهو خاصية متفردة بحيث يجب الا تتكرر مرتين. و class  يمكن ان تتكرر.
maxwidgets تحديد عدد الأدوات، no يمكن اضافة ما لا نهاية أو عدد مثلا 2 أو 3 فقط.
showaddelemnts اظهار رابط اضافة الأدوات.

قواعد css

 للتحكم في التوجيه والطول والعرض، يمكن استعمال هذه القواعد:
width عرض الأداة، ويمكن أن تكون ب px أو النسبة المئوية
height العلو، ويمكن أن تكون بال px أو عدم اضافتها وترك الأدوات تاخذ ما يكفيها من المساحة.
float تعويم القسم بتوجيهه نحو اليمين right أو اليسار left.

يمكنك العودة لدروس لغة css للتعرف على طريقة عمل هذه القواعد.


شرح الطريقة بالفيديو





25‏/02‏/2017

لماذا يجب أن يكون تصميم موقعك متناسقا من حيث الشكل والألوان

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

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

فيس بوك جوجل يوتيوب
المواقع الشهيرة وبساطة التصميم


تأثير التصميم في نجاح أو فشل موقع

يتم إجراء الكثير من التجارب للحصول على الشكل والتصميم المناسب للتحكم فيما يلي:

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

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

أنت بحاجة للون واحد أو لونين فقط

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

جوجل: الموقع الأكثر زيارة يستعمل لون واحد، وهو الأبيض
فيس بوك: الأزرق والأبيض
يوتيوب: الأبيض مع القليل من الأحمر

والمواقع التي ذكرناها أعلاه هي الأكثر زيارة.

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


كيف تختار الوانك واستعمالها

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


تعلم لغة css: التحكم في الصور images

لغة  css توفر العديد من القواعد التي يمكن من خلالها التحكم في الصور، وفي هذا الدرس سنرى:


  • التحكم في حجم الصور
  • توجيه الصور
  • اضافة الصور كخلفية

التحكم في حجم الصور الصور Images Size in CSS

للتحكم في حجم صور يتم استعمال قاعدتي  width و height التي رأيناها سابقا في درس ببببببببب.
لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم  large

وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:

التوجيه  Aligning

توجيه الصور يحتمل خيارين وهما يمين أو يسار باستعمال قاعدة float
لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم  large

وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:

التوسيط    Centring

الصور تعتبر من العناصر التي تتبع قاعدة inline، فإذا وضعت صورة تقوم بأخذ مكانها بجانب فقرة نصية مثلا. لذلك لجعلها في الوسط يجب تحويلها لعنصر block حتى يمكن التحكم فيها وجعلها في الوسط.
كود html
<img src="photo.png" class="mylogo"/>
كود css

img.mylogo{
display: block;
margin: 0 auto;
}

استعمال الصورة كخلفية  Background Images

يمكن استعمال الصور كخلفيات ب css  وإليكم الطريقة:

body {
background-image: url("pattern.gif");
}

الخلفية يمكن التحكم بها بطرق عدة، وأهم القواعد هي:
Background-repeat وتحتمل الخيارات التالية:

repeat إعادة الخلفية
repeat-x أفقيا
repeat-y عموديا
no-repeat عدم إعادة الخلفية

كود css:

body {
background-image: url("pattern.gif");
Background-repeat: repeat;
}

background-attachement وتحتمل الخيارات التالية:
fixed لا تتحرك
scroll تتحرك مع النزول لأسفل الصفحة

كود css:
body {
background-image: url("pattern.gif");
background-attachement: fixed;
}

background-position
left top يسار أعلى
left center يسار وسط
left bottom يسار اسفل
right top يمين أعلى
right center يمين وسط
right bottom يمين اسفل
center top وسط أعلى
center center وسط
center bottom وسط أسفل

كود css:

body {
background-image: url("pattern.gif");
background-position: top left;
}

ويمكن استعمال النسبة المئوية
x% y%  القيمة الأولى افقيا والثانية عموديا

أو البيكسلز px
10px 50px



20‏/02‏/2017

تعلم المعرفة وقت السلم - الحلقة 5 - مائة طريقة لتحفيز نفسك

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

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

تعلم المعرفة وقت السلم 




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

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

ثم طرأت على ذهن "ريت" فكرة .

حيث سألني : ماذا لو كانت الرميات التي نواجهها في المباراة أبطأ من تلك التي نواجهها في التدريب؟

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

فقال "ريت": أعرف أنه ليس لدينا من يستطيع رمي كرة البيسبول بهذه السرعة ، ولكن ماذا لو لم تكن الكرة كرة بيسبول .

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

وقال لي ريت": هات مضرباً ".

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

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

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

وعندما حل موعد المباراة التالية في الدوري، كنت أنا و"ريت"  قد استعددنا. وفي المباراة بدت الرميات كما لو كانت تأتينا بالتصوير البطيء وكأنها بالونات بيضاء كبيرة .

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

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

وكان لاعب الملاكمة العظيم "محمد علي كلاي"  يستخدم هذا المبدأ في اختيار اللاعب الذي يشاركه في التدريب، وذلك بأن يتحقق من أن يكون هذا اللاعب أفضل من الذي سيلاقيه في المباراة الحقيقية ، وقد لا يكون هذا اللاعب أفضل في جميع النواحي، ولكنه كان يجد واحداً أفضل بشكل أو بآخر من منافسه، وبعد أن يواجه مثل هؤلاء الملاكمين كان يعرف عندما يدخل أي مباراة حقيقية أنه قد واجه مثل هذه المهارات تغلب عليها.

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

ولاحظ مدى تأثير ذلك على درجة تحفيزك عندما تواجهه التحدي الحقيقي.




صوب عينيك نحو الجائزة - الحلقة 4 - مائة طريقة لتحفيز نفسك

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

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

صوب عينيك نحو الجائزة


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

وقد ألقى "جيمي جونسون" - المدرب السابق لفريق دالاس كاوبوي -  كلمة تحفيزية ممتعة ، وذلك للاعبي فريقه قبل إحدى المباريات المهمة عام 1993م .

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

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

وفاز الفريق في المباراة 17 / 52

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

أما عندما نركز على ما نريده، فإنه سيتحقق في حياتنا كل ما نريده.

 وعندما تركز على أن تكون شخصاً سعيداً ومتحفزاً فسوف تكون كذالك.



19‏/02‏/2017

تبن أكذوبة وصدقها mp3 - الحلقة 3 - مائة طريقة لتحفيز نفسك

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

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


تبن أكذوبة وصدقها

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

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

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

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

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


تعلم لغة css: التحكم في تصميم الاستمارات forms

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

في الدرس الماضي رأينا طريقة التحكم في الجداول Tables، ويمكنكم مراجعة  اللائحة الكاملة لدورة تصميم المواقع بلغتي html و css.

طريقة إظهار الاستمارات تختلف من متصفح لآخر، ولكن يمكن جعل الشكل واحد باستعمال لغة css.


مربع ادخال النص Text Input

الطثر من القواعد المستعملة رايناها سابقا وهي كالتالي:
font-size: حجم خط النص
color: لون النص
background-color: لون الخلفية
border: الخط المحيط
border-radius: حجم دوران الرؤوس الجانبية
:focus: شكل المربع عند النقر عليه
:hover: شكل المربع عند المرور عليه بفأرة الحاسوب
background-image: صورة خلفية

كود css:

input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input:focus {
background-color: #ffffff;
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.png");}


تعلم لغة css: التحكم في تصميم الجداول Tables

رأينا في الدرس السابق طريقة التحكم في اللوائح Lists، واليوم سنرى:

كيف يمكنك التحكم في تصميم الجداول html tables عبر تغيير الطول والعرض، الألوان، اتجاه النص...

معظم القواعد التي سنراها اليوم قمنا بشرحها في دروس css سابقة، وسنجمعا اليوم في درس واحد وشرح طريقة تطبيقها على أي جدول:

  • width : عرض الجدول
  • padding: المحيط الداخلي
  •  font-size:  حجم الخط
  • border-top, border-bottom : الحدود (حد علوي، حد سفلي)
  • text-align: اتجاه النص
  • background-color: لون الخلفية
  • :hover: شكل الجدول أو جزء منه عند المرور بفأرة الحاسوب من فوقه.

الفراغ بين المربعات Gaps between cells

كود html :
<table class="one">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

كود css:
td {
background-color: #0088dd;
padding: 15px;
border: 2px solid #000000;}
table.one {
border-spacing: 5px 15px;}
table.two {
border-collapse: collapse;}