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;}

18‏/02‏/2017

تعلم لغة css: التحكم في تصميم اللوائح Lists

توجد العديد من قواعد css التي تم انشاءها للتحكم خصيصا في بعض عناصر html محددة، مثل اللوائح، الجداول، والإستمارات.
في هذا الدرس ستتعلم كيف يتم التحكم في لوائح html lists ب:

تحدد نوع النقط أو الأرقام الذي تظهر بجانب اللوائح.


شكل نقط اللوائح

اللوائح الترتيبية Ordered Lists

يمكن اظهارها بهذه الخيارات:
decimal
1 2 3
decimal-leading-zero
01 02 03
lower-alpha
a b c
upper-alpha
A B C
lower-roman
i. ii. iii.
upper-roman
I II III

الكود
ol {
list-style-type: lower-roman;}

اللوائح الغير ترتيبية Unordered Lists

يمكن استعمال هذه القيم:

none : عدم اظهار نقط اللائحة
disc : قرص
circle : دائرة
square : مربع

الكود
ul {
list-style-type: square;}

استعمال صورة

يمكن استعمال الصورة عوض النقط أو الأرقام كما رأينا أعلاه كما يلي:
ul {
list-style-image: url("images/star.png");}
li {
margin: 10px 0px 0px 0px;}



وضعية النقط Bullets Positions


داخلية أو خارجية

يتم وضع نقط اللوائح إلى الداخل أو الخارج:

ul {
width: 150px;}
li {
margin: 10px;}
ul.illuminations {
list-style-position: outside;}
ul.season {
list-style-position: inside;}



17‏/02‏/2017

تلعم لغة css: نظام الصندوق CSS Boxes (درس مهم جدا)

في هذا الدرس سنرى طريقة التحكم في الصناديق باستعمال css  ب:

  • التحكم في الحجم
  • عمل خطوط محيطة
  • اختيار المساحات الداخلية والخارجية
  • اظهار واخفاء المربعات

الطول والعرض

يمكن التحكم في طول وعرض أي مربع باستعمال خاصيتين
الطول  width
العرض height
<div class="box">
<p>يمكنك تعلم أي شيء، ما دمت ترغب في ذلك وتعمل لتحقيق الأمر.</p>
</div>
باضافة كود css

div.box {
height: 300px;
width: 300px;
background-color: #bbbbaa;}
p {
height: 75%;
width: 75%;
background-color: #0088dd;}

المربع باللون الرمادي يحمل class اسمها box وهو بعرض 300 بيكسل على 300 طول. وداخله فقرة تحتل 75 في المائة من المساحة طولا وعرضا.

سنحصل على النتيجة التالية :


يمكن كذلك التحكم في الطول والعرض بطريقة أخرى، وذلك باستعمال خاصيتين أخريين وهما:
Max-width
Max-height
Min-width
Min-height
Max  يجب أن يكون الحجم اقل من هذا المحدد وأن لا يتجاوزه.
Min يجب أن يكون الحجم أكبر من هذا وأن لا يكون اقل منه


Overflow

يحتمل قيمتين
Hidden  إذا تجاوز الصندوق الحد المحدد قم باخفاءه
Scroll إذا تجاوز الصندوق الحجم المحدد قم بإظهار خط النزول للأسفل

نظام الصندوق

من القواعد التي تتطلب القليل من الإنتباه لفهمها. وهي تتألف من القواعد التالية:

Margin  :  الهامش الذي يفصل بين الصندوق ومحيطه من الخارج
Padding :  الهامش من داخل الصندوق
Boder    :  الحد المحيط بالعنصر

شكل نظام الصندوق CSS BOX MODEL
نظام الصندوق CSS BOX MODEL

الحد Border

.box{
border: 1px #000000 solid;
}

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

المحيط الداخلي Padding

.box{
padding: 10px  0px 5px 30px;
}

المحيط الداخلي هنا يحمل أربعة قيم وهي على التوالي أعلى يمين اسفل يسار:
10px في الأعلى
0px عل اليمين
5px في الأسفل
30px على اليسار
.box{
padding: 10px;
}

هنا 10px من جميع الجهات

.box{
padding: 10px 0px;
}

هنا 10px  أعلى وأسفل، ثم 0px يمين ويسار

المحيط الخارجي Margin

يعمل بنفس طريقة padding اي المحيط الداخلي

التوسيط Centring

لجعل أي مربع في الوسط يكفي استعمال قاعدة المحيط الخارجي من اليمين واليسار مثلا:

.box{
margin-right: auto;
margin-left: auto;
}

أو بكل بساطة:
.box{
margin: 0px auto;
}

التوجيه Float
يمكن توجيه أي عنصر إلى اليمين أو اليسار باستعمال قاعدة float والتي تحتمل قيمتين: يسار right  أو يمين left

.box { 
float: right;
}

الإظهار Display

تحتمل أربع خيارات
Inline  يظهر الصنادق بجانب بعضها البعض
Inline-block يلعب نفس الدور بالنسبة ل inline  إلا أنه يمكن تحديد الطول والعرض.
Block يظهر الصنادق لوحدها
None اخفاء الصندوق

الرؤوس الدائرية

لجعل الرؤوس الخاصة بأي صندوق دائرية، يكفي اضافة قاعدة border-radius كما يلي:

.box {
border-radius: 5px;
}

كلما زادت قيمة القاعدة كلما أصبحت الرؤوس أكثر دائرية.

16‏/02‏/2017

تعلم لغة css: النصوص Texts

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

  • حجم الخط ونوعه
  • الخط العريض، المائل
  • الفراغ بين السطور، الكلمات والحروف


تحديد نوع الخط وحجمه

Font-family هي الخاصية التي تستعمل لتحديد نوع الخط المستعمل.

هنا اخترنا الخط نوع Arial لتطبيقه على الفقرة p

p{
font-family: Arial;
}

استعمال أكثر من خط واحد:
هنا يقوم المتصفح بتجربة خط Arial، إذا لم يكن موجودا في حاسوب المستعمل يقوم بالمرور للخط الثاني وهو Times New Roman
p{
font-family: Arial, Times New Roman;
}


حجم الخط Font-size

أما حجم الخط فالخاصية هي font-size
ويمكن تحديد قيمة الخط بثلاث طرق وهي:

Pixels:

 يتم اختيار القيمة كرقم متبوعة ب px  كما يلي:
h1{
font-size: 20px;
}

Percentages :

 يتم استعمال النسبة المئوية، فحجم الخط العشوائي على المتصفح عندما لا يتم تحديد الخط هو 75 في المائة  وهو ما يعادل  12px
h1{
font-size: 100%;
}
طريقة عمل النسبة المئوية يرتبط بحجم خط body. لنفترض أن حجم خط body هو 16px  فلو اخترنا نسبة 100% مثلا للعناوين h1 h2 ... سيكون الخط هو  16px كذلك. أكبر من مائة في المائة يزداد حجم الخط وأصغر ينقص.

Ems :

 تعادل عرض الحرف إم m

هذه الشارة ستساعدكم لفهم العلاقة بين مختلف طرق قياس الخط

طرق قياس حجم الخط


استيراد الخطوط

الخطوط التي يتم اختيارها يجب أن تتوفر في الحاسوب الخاص بالمتصفح، لكن يمكن تحميل خط غير موجود باستعمال قاعدة  @font-face
والتي تتكون من العناصر التالية
font-family
Src
format

الكود
@font-face {
font-family: 'ChunkFiveRegular';
src: url('fonts/chunkfive.eot');}
h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}

في الجزء الأول تم استيراد الخط وتم تطبيقه على العناوين في الجزء الثاني.

شكل النص Font-weight

يحتمل قيمتين  Bold  أو Normal

p{
font-weight: bold;
}

p{
font-weight: normal;
}

تزيين الخط Text Decoration

يمكن اختيار قيمة لهذه الخصوصية كما يلي:

p{
text-decoration: underline;
}

none

لا يتم استعمال أي تزيين

underline

اضافة خط تحت النص

overline

اضافة خط فوق النص

line-through

خط عبر النص

أسلوب النص Font-style

يحتمل ثلاث قيم Normal Italic Oblique

p{
font-style: normal;
}

Line-height

p{
line-height: 1.5em;
}

اتجاه النص Text-align

يحتمل ثلاث قيم 
right اليمين
left اليسار 
center الوسط

p{
text-align: right;
}

المساحة بين الحروف والكلمات

Letter-spacing  و word-spacing

p{
letter-spacing: 1em;
word-spacing: 2em;
}

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

فراغ بداية الفقرة Text-indent

هذه القاعدة تساعد في اضافة فراغ أو مساحة في بداية السطر الأول من الفقرة.

p{
text-indent: 10px;
}

الروابط Links

يمكن التحكم في مظهر وشكل الروابط عبر عدة خيارات وذلك باستعمال.
link :
التحكم في الروابط التي لم يتم زيارتها بعد
visited:
الروابط التي تم النقر عليها
hover:
عنما يتم تمرير فأرة الحاسوب على الرابط
focus:
عندما تحديد رابط أو استمارة (مثلا مربع بحث عند النقر داخله يتم اضافة اسلوب له)
active:
عنما يتم البقاء في صفحة الرابط