السبت، 31 أغسطس 2013

شرح تصميم قوالب ووردبريس -الجزء الثالث-


شرح تصميم قوالب ووردبريس -الجزء الثالث-
سنتعرف فى هذا الدرس -بإذن الله- على كيفية عمل القوائم، التي ذكرت فى الدرس السابق أننا سنقوم بعمل القوائم بشكل مميز يجهله الكثير من مطوريّ الووردبريس، فمنذ إصدار Wordpress 3.0.0 تم إضافة خاصية تُدعى Menus وهي خاصية للقوائم فى الووردبريس، كان قديمًا يقوم القالب بتحديد مكان عرض الصفحات، ومكان عرض التصنيفات، أما فكرة تلك الخاصية هي أن مستخدم الووردبريس بإمكانه أن يقوم بتحديد مكان كل تصنيف او صفحة فى مكان معين، فمثلاً يمكنه أن يضع التصنيفات جميعها فى قائمة وان يضع فى نفس القائمة صفحة أو أكثر، فبذلك تلك الخاصية أضافت المزيد من التحكم لمستخدم الووردبريس، ولكن معظم مطوّري ووردبريس يقومون بتحديد أماكن محدد للصفحات، وأماكن محددة للتصنيفات، ولكن لماذا نفعل ذلك إن كانت لدينا طريقة أفضل؟!
حسنًا، كيف نستطيع إضافة تلك الخاصية إلى القوائم الموجودة فى الهيدر مثلاً؟ .. فقط إتبع الخطوات الآتية:
1- قم بفتح ملف functions.php.
2- قم بكتابة دالة جديدة، سأسميها مثلاً register_my_menus، وبداخل تلك الدالة (التي ستقوم أنت بإنشاؤها) سنضع دالة جاهزة فى الووردبريس وهي دالة register_nav_menu، وهي تأخذ بارامترين، البارامتر الأول وهو الاسم الكودي للقائمة (أىّ الذي ستستخدمه أثناء التكويد للوصول إلى تلك القائمة)، والبارامتر الثاني وهو اسم القائمة الذي يظهر للمستخدم فى لوحة تحكم الووردبريس.
/*
Registering Menus
*/
function register_my_menus(){
register_nav_menu( 'pages-menu', 'Pages Menu');
register_nav_menu( 'top-menu', 'Top Menu');
}
فى المثال السابق قمت بتسجيل قائمتين لديّ فى القالب.
بعد ذلك سأقوم بإضافة الدالة التي قمت بكتابتها بداخل دالة تُدعى add_action كالتالي:
add_action('init','register_my_menus');
لاحظ أن البارامتر الثاني هو عبارة عن اسم الدالة التى قمت بإنشاءها، فبذلك يصبح الشكل الكامل لملف functions.php كالتالي:
/*
Defeining Constants
*/
define("THEMEROOT", get_stylesheet_directory_uri());
define("IMAGES", THEMEROOT."/images");

/*
Registering Menus
*/
function register_my_menus(){
register_nav_menu( 'pages-menu', 'Pages Menu');
register_nav_menu( 'top-menu', 'Top Menu');
}
add_action('init','register_my_menus');
الآن إنتهينا من ملف functions.php، وبذلك أيضًا انتهينا من تسجيل القوائم التي لدينا لدى الووردبريس، لكن تبّقى تحديد أماكن عرضها، ولذلك سنقوم بفتح ملف header.php، أو ملف footer.php وهما الملفات اللذان غالبًا ما ستكون القوائم بهما، ثم نقوم بتحديد أماكن تلك القوائم، فمثلاً انا لدي تلك القائمة فى ملف header.php:
كل ما عليك الآن هو حذف قائمة الـUL وجميع ما بداخلها، ثم ستستبدلها بدالة تُدعى wp_nav_menu، تأخذ بارامتر واحد وهو عبارة عن مصفوفة بها Key واحد لقيمة واحدة، هذا الـKey هو كلمة theme_location، وتلك القيمة هي الاسم الكودي للقائمة التى تريد عرضها هنا ! ... فيصبح الكود كالتالي:


wp_nav_menu(array("theme_location"=>"pages-menu"));
?>
ولعرض القائمة الثانية التي كانت تُدعى top-menu ببساطة سأقوم بفعل ما فعلته مع pages-menu بالظبط، حيث سيكون الكود كالتالي:


wp_nav_menu(array("theme_location"=>"top-menu"));
?>
الآن إذا قمت بتفعيل القالب من لوحة تحكم الووردبريس، ستجد أنه تم إضافة خاصية Menus فى لوحة التحكم، عندها يمكنك تحديد الصفحات والتصنيفات والروابط التي يتم عرضها فى كل قائمة، وسيتم عرض كل قائمة فى مكانها بدون أى مشاكل :)
فى الدرس القادم بإذن الله سنتحدث عن صفحة index.php وكيفية عرض التدوينات والقائمة الجانبية إلخ إلخ.

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

5 نصائح لكتابة الكود بشكل أفضل

يجب عليك كمبرمج أو كمطوّر أن تهتم بطريقة كتابة أكوادك، لكي تكون سهلة الفهم وواضحة لك ولغيرك، أو على الأقل لك أنت لكي تستطيع تعديلها أو إصلاح أخطائها بسهولة بعد ذلك، وبعيدًا عن تلك النصائح سأقدم لكم معلومة فريدة من نوعها، إذا كُنت تحب أن يُطلق عليك لقب مبرمج، فأنت تحب كتابة الكود بكثرة ولكن لست منظمًا فى كتاباتك، وإن كنت تحت أن يُطلق عليك لقب مطوّر فأنت منظم بالفعل في طريقة كتابتك للأكود، ولهذا تلك التدوينة مقدمة فقط للمبرمجين !
لا أخفى عليكم أننى مبرمجًا، ولست مطوّرًا ، فهمتم الآن ما أعنيه؟ :D ... أترككم مع تلك النصائح الخمس.
1- التعليقات والمستندات.
تلك هي الحقيقة التي لا يُريد أى مبرمج الإعتراف بها، وهي أن التعليقات هي شيء أساسي لا يُمكن الإستغناء عنه لجعل الكود نظيفًا وسهلاً فى التعامل، وحتى وإن كانت مجرد كلمات سريعة تفي بالغرض، المهم أن نترك بعض الكلمات التي تشرح وظيفة كل سطر، أما بالنسبة للمستندات الخاصة بالدوال والكلاسات، فإنه لشيء رائع أن تقوم بذلك !
2- أعطي المتغيرات، الدوال والكلاسات أسماءًا ذات معنى.
من الصعب تخمين قيمة متغير ما إن كان اسمه مثلاً var1 ، ولكن من السهل جدًا تخمين قيمة متغير ما إن كان اسمه site_name، أليس كذلك؟!
وأيضًا من السهل تخمين وظيفة الدالة التى تحمل اسم add_article، عن دالة تحمل اسم do_art، أليس كذلك؟!
لذلك ولتجعل من الكود أسهل فى الفهم يجب عليك أن تُعطي المتغيرات والثوابت والدوال والكلاسات اسماءًا ذات معنى ومعبرة عن وظيفتها أو القيمة التي تحملها.
3- المساحات البيضاء.
5 نصائح لكتابة الكود بشكل أفضل
كما ترى فى تلك الصورة، القليل من المساحات البيضاء قد تجعل الحياة أكثر سهولة !
4- لا تحذف تعليقًا ابدًا.
لنتخيل أنك واجعت خطأ فى كود مكون من 100 سطر، والمائة سطر يحتوون على تعليقات، وانت قمت بالمرور على جميع تلك الأسطر وقمت بإصلاح كل الأخطاء التي بتلك السطور، وفى أثناء ذلك تخيل أنك قمت بحذف التعليقات الموجودة فى تلك السطور، وعند تجربة البرنامج وجدت أن هنالك خطأً ما قد أرتكبته أنت أثناء إصلاحك لتلك الأخطاء، فما الحل الآن؟
سيصعب عليك فعليًا فهم كل تلك الأكواد مرة أخرى بدون تعليقات، لذلك لا تحذف ابدًا آية تعليقات.
5- استخدم الـBraces.
الـBraces هي تلك الأقواس  {} ، فهي بطبيعة الحال أفضل من كثير من الطرق البديلة، لكن الـBraces ستكون أكثر إفادةً وأكثر جمالاً فى الكود إن قمت بتنظيم الكود بشكل جيد، حسنًا لتستوعب تلك النقطة سأعطيك مثالاً على كود مزعج وكود نظيف ومنظم.


/* Examples of annoying code */
if ( $coder === 'Silly' ) bang_head();
while ( $coder === 'Silly' )
bang_head();
endwhile;

/* Examples of good code*/
if ( $coder !== 'Silly' ){ Drink_Beer(); }
while ( $coder !== 'Silly' ){
Drink_Beer();
}
?>
هل ستهتم بتلك النصائح الآن؟ أم ستهملها كحال معظم المبرمجين العرب؟؟!

شرح تصميم قوالب ووردبريس -الجزء الثاني-



شرح تصميم قوالب ووردبريس -الجزء الثاني-
فى الدرس السابق، تعرفنا على كيفية البدء فى تقسيم الملفات، وتعرفنا على كيفية البدء فى ملف functions.php، وأيضًا ملف index.php، وفى هذا الدرس بإذن الله سنتعرف على كيفية برمجة الـHeader و الـFooter، وسأحاول بقدر الإمكان تغطية جميع المواضيع التي قد تواجهك فى برمجتهما -بإذن الله-، والآن لنبدأ.
كما قلنا فى الدرس السابق فإننا سنقوم فى ملف index.php بإضافة دالتين وهما get_header و get_footer، وكما قلنا وظيفتهما إستدعاء الـHeader والـFooter، ولكن كيف سنقوم نحن ببرمجتهما؟
ببساطة سنقوم بإنشاء ملف بجوار ملف الإندكس ونقوم بتسميته header.php، وسيقوم البرنامج بإستدعاء الشيفرات التي بداخل ملف header.php إلى مكان دالة get_header فى ملف index.php.
أى أن كل ما سنقوم بكتابته فى header.php سيمثل الجزء العلوي من القالب، والآن سنقوم ببعض الخطوات وهي كالتالي:
1- نسخ كود HTML للهيدر ووضعه فى ملف header.php
2- التعديل على الملف لجعله ديناميكيًا عبر إضافة بعض الدوال له.
فلنشرح الآن كل خطوة على حدى !
- الخطوة الأولى: ببساطة ستقوم بنسخ ملف html وملفات الـCSS ومجلد الصور الخاص بقالبك الذي قمت بتصميمه سابقًا لتحويله إلى قالب ووردبريس، ثم ستقوم بوضع تلك الملفات بجوار ملف header.php، بشرط أن تكون ملفات CSS للقالب فى مجلد مستقل يُدعي CSS، والصور أيضًا فى مجلد مستقل يٌدعى images !
ولتبسيط الصورة ستكون لدينا تلك القائمة من الملفات بداخل مجلد قالب الووردبريس:
index.php
header.php
design.html
style.css
/css
/images
حيث أن design.html هو الملف الذي يحتوى على أكواد الـHTML الخاص بالقالب الذي قمت بتصميمه مسبقًا (المُراد تحويله إلى ووردبريس)، ومجلد CSS يحتوى على ملفات الـCSS الخاصة بالقالب (بملف design.html)، أما مجلد images فهو يحتوى على الصورة الخاصة بالقالب (بملف design.html).
نلاحظ أننا لدينا ملف يُدعى style.css ليس فيه أى اكواد CSS !، ولذلك سنحتاج إلى إستيراد محتوى ملفات مجلد CSS إلى هذا الملف، ولذلك سنقوم بملف style.css ونقوم بإدارج الملفات الموجودة داخل مجلد CSS؛ لأن تلك هي أولى خطوات التحويل من القالب العادي إلى قالب ووردبريس، وهي خطوة إستيراد أكواد السي اس اس.
فمثلاً إن كان عندى فى مجلد CSS ملف يُدعى master.css ، سأقوم بفتح ملف style.css وسأقوم بكتابة الجملة التالية:
@import url("css/master.css");
والآن نحن نجحنا فى أولى خطوات التحويل، وهي إستيراد ملفات الـCSS!
ملحوظة: إذا كان يوجد أكثر من ملف بداخل مجلد CSS قم بإستيرادها بنفس الطريقة.
والآن سنقوم بفتح ملف design.html وسنقوم بتحديد كل الأكواد من اول فتح وسم HTML إلى نهاية الهيدر وهو الجزء العلوي والذي غالبًا سيحتوى على بيانات الميتا وقوائم افقية وعنوان الموقع إلخ إلخ إلخ، المهم أننا سنقوم بنسخ الكود الخاص بجزء الهيدر فقط، وسنقوم بوضعه بداخل ملف header.php.
الآن إذا قمت بحفظ الملفات، وقمت بتفعيل قالبك من لوحة تحكم الووردبريس ستجد أن ما قمت بوضعه فى ملف header.php قد ظهر فى قالبك !
-الخطوة الثانية:
والآن مهمتنا هي إستبدال بعض البيانات الموجودة فى كود الـHTML الموجود فى ملف header.php ببعض من الدوال الجاهزة فى الووردبريس لجعل الهيدر يعمل بشكل ديناميكي، فمثلاً بدلاً من ان يعرض اسم مُحدد، سيقوم بعرض اسم المدونة، وعندما يقوم المستخدم من لوحة تحكم الووردبريس بتغيير اسم المدونة سيتم عرض اسم المدونة الجديد !
لا تخف، فإنك لست بحاجة إلى خبرة عميقة فى الـPHP، فكل تلك المهمام ستقوم بها دوال بسيطة جدًا !!!
الآن سأشرح لك الدوال التى ستحتاجها فى الهيدر، وما عليك إلا وضعها فى مكانها المناسب فى header.php
- دالة language_attributes() وهي لوضع خواص لغة المدونة، ويتم وضعها بداخل وسم html كالمثال التالي:
>
- دالة bloginfo("charset") وهي لطباعة ترميز المدونة، ويتم وضعها كالمثال التالي:
" />
- لعرض العنوان سنحتاج إلى شقين، الشق الأول دالة wp_title وسنقوم عن طريقها بتحديد الفواصل بين العنواين، ثم نقوم بتحديد ما إذا كان سيتم الطباعة فى العنوان أو لا، ثم سيتم تحديد مكان الفواصل على اليمين أو اليسار، ثم سنقوم بطباعة اسم المدونة، كما فى المثال التالي:
<?php wp_title('|', true, 'right')?><?php bloginfo('name'); ?>
حيث أن | هي الفاصلة ، و true معناها سيتم الطباعة، و right معناها ان الفواصل ستكون على الجهة اليُمنى، ولكن لنفهم عمل كل البارامترات تلك ونتائجها بشكل تفصيلي.
مثلاً إذا كان المستخدم بداخل تدوينة او صفحةً ما بداخل المدونة، عن طريق wp_title سيتم عرض عنوان الصفحة او التدوينة؛ سيتم عرضها لأننا قمنا بإختيار True، أما إذا اختارنا False فمعناها اننا لن نقوم بطباعتها، ثم بعد ذلك ستجد علامة | على يمين عنوان الصفحة او التدوينة، وذلك لأننا اخترنا | كفاصلة، ثم اختارنا right ليتم وضع الفاصلة على يمين عنوان الصفحة او التدوينة، ولكن لماذا سيتم وضع تلك الفاصلة؟؟؟
ببساطة لأننا سنقوم بعدها بكتابة اسم المدونة، وقم كتبنا بالفعل اسم المدونة عبر دالة bloginfo والتي قمنا بكتابة name فى بارامترها، دائمًا ما تستخدم تلك الدالة فى عرض بيانات أساسية فى المدونة، ولكن بإختلاف قيمة البارامتر تختلف القيمة التى يتم طباعتها، فمثلاً إذا كانت القيمة name سيتم عرض اسم المدونة، اما اذا كانت القيمة charset سيتم عرض ترميز المدونة.
ملاحظة: دالة bloginfo مشابهة لدالة تُدعي get_bloginfo، ولكن الفرق أن bloginfo تقوم بطباعة البيانات، اما get_bloginfo تقوم بإسترجاع القيمة فقط دون طباعتها، فمثلاً إذا أردت عرض عنوان المدونة عبر get_bloginfo ستكتب التالي:
<?php wp_title('|', true, 'right')?><?php echo get_bloginfo('name'); ?>
مع العلم أن دالة get_bloginfo تستخدم نفس بارامترات دالة bloginfo بدون أى تغييرات !
- لعرض وصف المدونة سنستخدم بارامتر description فى دالة bloginfo، كما فى المثال التالي:
- بالنسبة للربط مع ملفات الـCSS، كما قلنا سابقًا اننا قمنا بإستيراد جميع اكواد الـCSS بداخل ملف style.css الموجود بجوار header.php، والآن فى header.php سنقوم بإدراج ملف style.css والذي بالدور بداخله جميع الأكواد بعد عملية الإستيراد.
ولكن تلافيًا للأخطاء، سنقوم بجعل هذا الربط بشكل ديناميكي وذلك عبر استخدام بارامتر stylesheet_url الموجود فى دالة bloginfo وسيتم عبر الدالة طباعة style.css مباشرةً، كما فى المثال التالي:
- بالنسبة لمسار ملف الصور، بدلاً من كتابتها مباشرةً images/pic.png، يمكنك كتابة الثابت IMAGES الذي قمنا بتعريفه فى ملف functions.php مكان كلمة images فى المسار، كالتالي:
- قبل نهاية وسم head مباشرةً، يجب أن نضيف دالة wp_head وهي دالة مهمة جدًا، لأن الكثير من إضافات الووردبريس تقوم بإضافة بعض التعريفات فى هذا الجزء، فحتى يكون قالبك متوافقًا مع تلك  الإضافات يجب عليك إضافة دالة wp_head كالتالي:

- بالنسبة لطباعة رابط المدونة، تستطيع القيام بذلك عبر طباعة دالة home_url، فمثلاً إذا كان لديك مكانًا فى الهيدر لوضع اسم المدونة، والاسم يكون عبارة عن رابط للصفحة الرئيسية للمدونة، يمكنك ببساطة القيام بتلك العلمية عبر التالي:




بالنسبة للقوائم الأفقية مثل الصفحات والتصنيفات إلخ، والتي تكون غالبًا فى الهيدر سنتعرف على كيفية عملها بطريقة رائعة ويجهلها معظم المطوّرين، ولكن فى دروسٍ قادمة.
أما بالنسبة للفوتر، فببساطة سنقوم بعمل ملف جديد يُدعى footer.php، بجوار ملف header.php، لتصبح قائمة ملفاتنا كما بالشكل التالي:
index.php
header.php
footer.php
design.html
style.css
/css
/images
بعد إنشاء الملف، سنقوم بفتح ملف design.html، وسنقوم بنسخ جميع أكواد HTML الخاصة بالفووتر، ثم سنقوم بوضعها فى ملف footer.php، والآن لنبدأ بجعلها ديناميكية، تمامًا كما فعلنا مع الهيدر.
أعتقد أنك لن تحتاج فى الفوتر إلا معرفة كيفية طباعة رابط الصفحة الرئيسية للمدونة، وطباعة اسم المدونة، وهذا ما تعرفنا عليه فى الهيدر، أما بالنسبة لطباعة السنة الميلادية، فلا داعي إلا كتبابتها مباشرة، فيمكنك كتابة السطر التالي:
وسيقوم هذا السطر بطباعة السنة الميلادية مباشرةً دون الحاجة إلى تجديدها كل سنة، وفى الأخير عليك بوضع دالة wp_footer قبل نهاية وسم body مباشرةً؛ وذلك لأن أيضًا توجد بعض الإضافات تقوم ببعض التعريفات فى الجزء السٌفلي من المدونة، ولذلك يجب كتابة تلك الدالة لكي يكون قالبك متوافقًا مع الإضافات، كما فى المثال التالي:


ملاحظة: إذا كان لديك فى الفووتر بعض القوائم، سنتعرف على كيفية برمجتها فى الدروس القادمة -بإذن الله-.

الجمعة، 30 أغسطس 2013

شرح تصميم قوالب ووردبريس -الجزء الأول-


شرح تصميم قوالب ووردبريس -الجزء الأول-
تطوير الووردبريس الآن يُضيف للمطوّر الكثير من الفرص للعمل فى الشركات، كما توفر له فرص تجارية حرة تتمثل فى عرض قوالبه وبيعها على الإنترنت، ولذلك إن كنت تعليم أساسيات لغة PHP يمكنك العمل عن طريقها من خلال تطوير الووردبريس ببساطة، فأنت الآن لن تحتاج إلى معرفة العديد من اللغات والتقنيات للعمل التجاري، بل يمكنك البدء فى عملك التجاري عبر تطوير تطوير الووردبريس بالقليل من المعرفة فى لغة PHP.
لا تتوقع أنني سأقوم بشرح كيفية التصميم، لأنني أصلاً أكره التصميم ولا أجيده، ولكنني سأذكر لك بعضًا من الخطوات التي يجب أن تتوفر لديك قبل البدء فى تطوير الووردبريس.
- المتطلبات: بدايةً يجب أن تكون على دراية كاملة وإحترافية بلغتي HTML و CSS، وأن تعلم أساسيات الـSyntax للغة PHP، وأن تكون على دراية بسيطة فى إستخدام برنامج الووردبريس.
يجب أن يكون لديك قالب HTML , CSS جاهز، أو قد قمت بتصميمه خصيصًا لتطويره على ووردبريس، يمكنك التصميم مباشرةً عبر HTML و CSS أو يمكنك التصميم عبر الفوتوشوب أولاً ومن ثم تحويله إلى HTML و CSS؛ لكي تقوم بتطويره على ووردبريس.
الآن ما عليك فعله هو تحميل نسخة من برنامج الووردبريس من هنا، ثم تثبيتها على السيرفر المحلي الذي تعمل عليه.
سيكون مسار برنامج الووردبريس على السيرفر المحلي كالتالي: http://localhost/wordpress ، الآن ستقوم بالدخول إلى مجلد wp-content ثم تقوم بالدخول إلى مجلد themes ، وبداخل هذا المجلد ستقوم بعمل مجلد جديد سنقوم بتسميته مثلاً MyTheme أو أى اسم آخر تقوم بتسميته لقالبك الذي سوف تقوم بتطويره.
الآن بداخل مجلد قالبك (MyTheme) ستقوم بعمل ملفين مبدئيًا وهما style.css و index.php.
الآن إذا قمت بالدخول إلى لوحة تحكم الووردبريس الموجود على سيرفرك المحلي ستجد قالبك موجود ضمن القوالب المثبتة، ولكن لا يوجد Screenshot لقالبك؟!
تستطيع الإتيان بملف تقوم بتسميته screenshot.png (يجب أن يسمّى screenshot ويجب أن تكون صيغته png ومقاساته 300×225) وتقوم بوضعه بداخل مجلد قالبك، والآن قم بالرجوع إلى القوالب المثبتة على برنامج الووردبريس ستجد الـScreenshot لقالبك موجودًا !
الآن ستقوم بإنشاء ملف جديد تقوم بتسميته functions.php، هذا الملف سيحتوى على بعض الثوابت الرئيسية التي سنحتاجها طوال تطوير القالب، الثابت الأول وهو لمسار مجلد القالب، وسنستخدم فيه دالة من دوال الووردبريس تسمّى get_stylesheet_directory_uri، والثابت الثاني هو لتحديد مسار مجلد الصور images والذي سيكون عبارة عن مسار مجلد القالب ثم /images، وبالتالي سيصبح الملف يحتوى على تلك الشيفرات:

/*
Defeining Constants
*/
define("THEMEROOT", get_stylesheet_directory_uri());
define("IMAGES", THEMEROOT."/images");
?>
كما تستطيع فى هذا الملف إضافة بعض من الثوابت التي تظن أنك سوف تحتاجها، كإسمك مثلاً كمصمم للقالب، او اى شيء آخر قد توّد أن يكون له ثابت معين فى القالب.
مبدئيًا سنقوم بالتعديل على ملف index.php؛ لكي يقوم القالب بتحميل الـHeader و الـFooter، وهما ملفان سنقوم ببرمجتهما فى الدرس القادم -إن شاء الله-، ولإستدعاء تلك الملفات سنستخدم دالتين وهما get_header و get_footer، ليصبح شكل ملف الـIndex.php كالتالي:

لاحظ أننى قمت بالفصل بين الدالتين، لأننا سنقوم بكتابة بعض الأكواد بينهما فى الدروس المتقدمة !
فى الجزء القادم -بإذن الله- سنتعرف على كيفية برمجة الـHeader و الـFooter.

الخميس، 29 أغسطس 2013

كيف تكون مبرمج ومطور ويب؟ (من الصفر للإحتراف)

كيف تكون مبرمج ومطور ويب؟
الكثير من محبي الويب، دائمًا ما يسألونني عن البداية، كيف هي البداية لكي يصبحوا مطوّرين للويب، لذلك تلك التدوينة -بإذن الله- ستكون بمثابة مرجع، أو فهرس أساسي لكل من لا يعلمون كيف تكون البداية فى عالم تطوير الويب، سأقوم بالتركيز على لغة PHP ، ونظام قواعد البيانات MySQL.
- الخطوة الاولى: يجب أن تكون الخطوة الأولى فى عالم تطوير الويب هو معرفة بعض الأساسيات عن الويب والسيرفرات والمتصفحات، وأخذ فكرة عامة الـRender Engines للمتصفحات، وتستطيع إيجاد تلك المعلومات عبر البحث عن مفهوم هندسة الويب، يمكنك أن تجد تلك المعلومات عبر هذه الروابط التالية: الرابط الأول، الرابط الثاني، الرابط الثالث، الرابط الرابع.
- الخطوة الثانية: يجب أن تدرس لغة HTML ، ومن ثم CSS ، ومن ثم CSS3، وتلك بعض من المصادر التي يمكنك الإعتماد عليها فى دراسة تلك اللغات.
HTML & CSS - دورة HTML5.
- الخطوة الثالثة: وهي لتعلّم لغة JavaScript، ومكتباتها مثل Ajax و jQuery ؛ وذلك لإضافة بعض الجماليات التفاعلية لموقعك، لكن بشكل مبدأي يمكنك دراسة لغة JavaScript كأساسيات فقط، ومن ثم تقوم بتأجيل تعلّمك للـjQuery و Ajax لفترة، وسأعطيك هنا بعض المصادر لتعلم الـJavaScript و jQuery و Ajax.
دورة JavaScript - دورة jQuery - دورة Ajax
- الخطوة الرابعة: وهي لتعلّم لغة البرمجة التي ستستخدمها فى برمجة الويب، وعلى سبيل المثال فى حالتنا سنتحدث عن PHP، طبعًا عربيًا موجود الكثير من الدورات فى لغة الـPHP، يمكنك أيضًا تعلم لغة Python، وتستطيع تعلمها من هنا.
- الخطوة الخامسة: وهى مرحلة إختيار نظام قواعد البيانات او ما يسمى بالـDatabase Management Server، وتوجد العديد من أنظمة إدارة قواعد البيانات، من ضمنها مثلاً: MySQL , Oracle، وفى حالتا هذه سنقوم بإستخدام MySQL وهو النظام الذي أعتاد المبرمجين على إستخدامه مع لغة PHP، ولكنه ليس جزءًا من لغة الـPHP، فمثلاً يمكنك إستخدام MySQL مع لغة Python، أو يمكنك استخدام Oracle مع لغة  PHP، ويمكنك تعلم نظام MySQL من هنا، اما عن طريقة ربط MySQL بلغة Python يمكنك معرفة كيف من هنا، أما عن طريقة ربط MySQL مع لغة PHP يمكنك معرفة كيف من هنا.
- الخطوة السادسة: وهو خطوة التدريب، وهو ببساطة التدريب على ربط جميع اللغات السابقة مع بعضها البعض فى برنامج وواحد، وذلك تستطيع تعلمه من هنا.
- الخطوة السابعة: أبدأ بصنع أعمالك !

فيلم وثائقي عن قصة مؤسس الفيسبوك مارك زوكربرج Mark Zuckerberg


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

برنامج PHP Lock It لتشفير الأكواد وملفات الـPHP


بعد الكثير من البحث، وجدت أن كثير من مبرمجي الـPHP، يحتاجون إلى برامج لتشفير شيفراتهم وملفات الـPHP الخاصة بهم، وجدت العديد من البرامج، مثل Zend Studio والكثير والكثير من البرامج، ولكن للأسف معظم تلك البرامج إما يكون تشفيرها مُكتشف كيفية فكّه من قبل الهاكرز، أو حجمه كبير جدًا.
فمثلاً Zend Studio تشفيره يمكن فكّه من الكثير من الهاكرز، وفى نفس الوقت حجمه كبير ! ، أما البرنامج الذي أنا بصدد سرده لكم هو برنامج له طريقة مختلفة فى التشفير، غير مدروسة من قبل الهاكرز، ولذلك يستحيل فعليًا فك تشفير هذا البرنامج.
ولكن الخبر السيء أن هذا البرنامج غير مجاني، ولا أدري إن كان له كراك على الإنترنت ام لا، لم اهتم بتلك الجزئية اصلاً، ولكن الخبر السعيد أنه متوفر للتجربة المجانية، مما قد يتيح لك القيام بتشفير بعض الملفات لك مجانًا ;)
الموقع الرسمي للبرنامج: من هنا.
تحميل النسخة التجريبية من البرنامج: من هنا.

الاثنين، 12 أغسطس 2013

بناء الأجهزة الإلكترونية بإستخدام dot NET Micro Framework

بناء الأجهزة الإلكترونية بإستخدام  dot NET Micro Framework

في الغالب انت لم تسمع من قبل عنها والسبب يرجع الي انها حديثة العهد !
اذاً لنتعرف عليها علي شكل سؤال وجواب (س و ج)
س : ماهي .NET Micro Framework ؟
ج : هي نسخة مصغره من اطار عمل الــ .NET مفتوحة المصدر تعمل ع اي جهاز بدون الحاجة الي نظام تشغيل ,يمكنها العمل علي قطع اليكترونية صغيره مثل Netduino و GHI Electronics والمزيد من الشركات قامت بصُنع قطع جاهزة يمكنك نقل تطبيقاتك اليها مباشرتاً بدون بذل مجهود في نقل المنصة الي القطع الاليكترونية .
س : من هو مؤسس/مطور الــ .NET Micro Framework ؟
ج : Microsoft .
س : كيف تعمل ال .NET Micro Framework ؟
ج : بداية من عملية ترجمة تطبيقك ( Compiling ) يوجد عمليتين
العملية الاولي : يتم تحويل الكود الخاص بك سواء سي# او VB.NET الي لغة وسيطة تسمي MSIL وهذه العملية تتم علي جهاز المطور/المبرمج
العملية الثانية : هذه العملية تتم في وقت تشغيل التطبيق حيث تتولي المنصة ترجمة اللغة الوسيطة الي لغة الاّلة وقت تشغيل التطبيق علي القطعة الاليكترونية وتسمي هذه العملية ب (Jitting) اختصار ل Just in Time Compiling
منصة ال .NET Micro Framework مع انها صغيره ولكن يمكنها القيام بهذه العملية بدون الحاجة الي نظام تشغيل.
س : هل يوجد قطع اليكترونية تحمل منصة .NET Micro Framework متوفرة في السوق المصري ؟
ج : نعم متوفرة الوحة ال Netduino تفضل هذه نسختين بسعر لا بأس به يمكنك طلبها Online وتصلك الي منزلك http://bit.ly/PEZ66l
س : اكثر ما قلت عنه كلام اين المصادر أريد ان انطلق ؟
ج : تفضل انطلق بالدخول ع هذه المواقع وقرائه المقالات
الشفيره المصدرية http://netmf.codeplex.com/ لاننا تحدثنا في الاعلي انها مفتوحة المصدر
http://en.wikipedia.org/wiki/.NET_Micro_Framework
http://www.netmf.com/
http://www.hanselman.com/blog/TheNETMicroFrameworkHardwareForSoftwarePeople.aspx
http://www.codeproject.com/Articles/144365/A-Leap-In-Embedded-Programming-NET-Micro-Framework

الجمعة، 9 أغسطس 2013

شرح إنشاء كلمة سر عشوائية عبر PHP


شرح إنشاء كلمة سر عشوائية عبر PHP

أحيانًا تحتاج فى برنامجك إلى إنشاء صفحة لإستعادة كلمة سر المستخدم، أمامك خيارين عندئذٍ، الأول هو ان تجعل المستخدم يقوم بتغيير كلمة السر بنفسه بعد التأكيد على البريد الإلكتروني، والثاني هو أن تقوم بإنشاء كلمة سر عشوائية ثم تقوم بإرسالها له على بريده الإلكتروني، لذلك ستحتاج إلى إنشاء كلمة السر بطريقة مختلفة.
سنقوم بالخطوات الآتية:
1- إستخدام دالة SubStr لتحديد طول الكلمة من 3 إلى 10 أحرف فقط.
2- سنستخدم دالة MD5 للتشفير.
3- سنستخدم دالة uniqid لتوليد نص عشوائي؛ ولزيادة العشوائية سنقوم بوضع دالة rand فى البارامتر الأول للدالة.
لتصبح الشيفرة كالتالي:

$pass = substr(md5(uniqid(rand(), true)),3,10);
echo $pass;
?>

الأحد، 4 أغسطس 2013

دالة لحذف الملفات عبر PHP

إذا كان يوجد ملف برنامجك وانت لست فى حاجة إليه، تستطيع حذفه حذفه عبر دالة تسمّى unlink ، وهي دالة سهلة وبسيطة تأخذ بارامتر واحد ألا وهو مسار الملف، كما في المثال التالي:
$filename = "dir/picture.jpg";
unlink($filename);
لاحظ مسار الملف مع إمتداده ايضًا.

السبت، 3 أغسطس 2013

كتاب تعليم لغة Objective-C وبرمجة الماكينتوش


هذا الكتاب موجه بصفة عامة إلى مستخدمي نظام ماكينتوش Mac OS، حيث أن الكاتب يشرح فى هذا الكتاب كيفية البرمجة مع نظام ماكينتوش عبر لغة Objective-C، حيث أن هذا الكتاب يعتبر أساس ممتاز لكل مستخدم ماكينتوش يُريد أن يبدأ فى البرمجة عبر Objective-C، وايضًا أساس جيد لكل من يدفعه الفضول من مستخدمي أنظمة التشغيل الأخري كـويندوز أو لينُكس أو Free BSD إلخ إلى زيادة المعرفة عن لغة Objective-C وعن بعض من اساسياتها واستخداماتها المتعددة، أترككم مع الكتاب.
تحميل الكتاب: من هنا.
باسوورد فك الضغط: phpgeekar.com