الجمعة، 20 سبتمبر 2013
الأحد، 15 سبتمبر 2013
شرح محرر تيتانيوم استديو - مرئي
السلام عليكم ورحمة الله وبركاته
نتحدث اليوم عن البرنامج المميز و محرر الاكواد الفريد من نوعه الا و هو برنامج تيتانيوم استديو TitanumeStudio
ميزة البرنامج انه مجاني و ايضا يمكنك من عمل حساب و مشاركة المطوريين معك
ايضا البرنامج تستطيع عمل برامج هواتف به .
نحن اليوم سنتكلم فقط عن انشاء اول مشروع برمجي به و كيفية عمل المشاريع (الفكرة العامة)
باذن الله في الايام القادمة يكون دروس اقوى بنفس البرنامج.
أولا البرنامج يشتغل على جميع انظمة التشغيل mac OS windows OS linux OS
و لتحميل البرنامج يجب التسجيل في الموقع
انشئ حساب جديد و اضغط عل كلمة download للتحميل
البرنامج مجاني ..
صور من البرنامج
صور عمل التحديثات
لمتابعة فيديو الشرح
الشرح من تقديمي الخاص - قلت ذلك لانني و جد من نقلها الى مدونته بدون وجه حق و هم كثيير
الى هنا نكون قد انتهينا من اول شرح للبرنامج على مستوى الدروس العربية
انتظرو الشرح القادم لمزيد من خصائص البرنامج.
الخميس، 12 سبتمبر 2013
شرح تصميم قوالب ووردبريس -الجزء التاسع-
كما قلنا فى الدرس الماضي، أننا تبقى لنا برمجة دالة my_comments لكي نعرض التعليقات، ولإنهاء جميع ما يخص التعليقات، ولذلك سنخصص هذا الدرس -بإذن الله- لبرمجة تلك الدالة وبذلك نكون قد إنتهينا من أهم الاجزاء الواجب توافرها بشكل أساسي فى أى قالب ووردبريس.
لدينا فى ووردبريس ثلاثة أنواع من التعليقات، النوع الأول وهو comment وهو التعليق العادي، والنوعين الآخرين هما bingback و trackback، وهما نوعان للتعليقات على شكل روابط، لذلك سنقوم بالتحقق من إن كان التعليق من نوعي الروابط، أو إن كان من النوع الأول العادي لكي نعرض كل نوع فى شكله المناسب، (لاحظ أن طريقة عرض bingback ستكون نفس طريقة عرض trackback)، وأنواع التعليقات تكون بداخل دالة get_comment_type ، الآن سنضيف هذا التحقق كما فى الكود التالي:
لأن دالة get_comment_type تقوم بأخذ نوع التعليق من Global Variable يدعي comment، ولذلك سنقوم بإضافة هذا السطر قبل التحقق مباشرةً:
أما بالنسبة للـDiv الخاص بعرض محتوى التعليق، فسوف نضيف له دالة comment_class فى قيمة خاصية class، لكي يقوم برنامج الووردبريس بإضافة الكلاسات إليه، وإذا كان لديك كلاس تريد إضافته من عندك فما عليك سوى إضافته كبارامتر للدالة، كالتالي:
والآن لعرض اسم الكاتبه مع رابطه إن كان مشتركًا في المدونة، سنقوم بإستخدام دالة comment_author_link، ولعرض تاريخ إنشاء التعليق يمكننا إستخدام دالة comment_date، ولعرض الوقت يمكننا إستخدام دالة comment_time.
ولإستكمال ما بدأناه فى هذا الدرس سأضع لكم هذا الفيديو؛ وذلك لأنني لن أستطيع إستكمال الدرس بسبب إنقطاع الإنترنت المستمر عندى حاليًا لثالث يوم -_-.
الآن لنقم بفتح ملف functions.php، سنجد أننا قمنا بإضافة دالة جديدة وهي my_comments كالتالي:
function my_comments(){
}
الآن سنقوم بإضافة ثلاثة بارامترات، واسماؤها كالتالي: comment و args و depth، مع الأخذ فى الحسبان أن تلك الدالة ستكون لعرض تعليق واحد فقط، أى أنه سيتم إستدعاؤها فى كل تعليق، فمثلاً إذا كان لدينا 20 تعليق، سيتم إستدعاء الدالة 20 مرة متتالية.}
لدينا فى ووردبريس ثلاثة أنواع من التعليقات، النوع الأول وهو comment وهو التعليق العادي، والنوعين الآخرين هما bingback و trackback، وهما نوعان للتعليقات على شكل روابط، لذلك سنقوم بالتحقق من إن كان التعليق من نوعي الروابط، أو إن كان من النوع الأول العادي لكي نعرض كل نوع فى شكله المناسب، (لاحظ أن طريقة عرض bingback ستكون نفس طريقة عرض trackback)، وأنواع التعليقات تكون بداخل دالة get_comment_type ، الآن سنضيف هذا التحقق كما فى الكود التالي:
function my_comments($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
if(get_comment_type() == "bingback" || get_comment_type() == "trackback"){
Bingback or Trackback comment
}elseif(get_comment_type() == "comment"){
Regular Comment
}
}
الآن مكان Regular Comment سيتم عرض التعليقات العادية، لذلك سنقوم بوضع كود HTML مكان تلك الجملة، ولكن سيظهر خطأ فى آية حال، لماذا؟$GLOBALS['comment'] = $comment;
if(get_comment_type() == "bingback" || get_comment_type() == "trackback"){
Bingback or Trackback comment
}elseif(get_comment_type() == "comment"){
Regular Comment
}
}
لأن دالة get_comment_type تقوم بأخذ نوع التعليق من Global Variable يدعي comment، ولذلك سنقوم بإضافة هذا السطر قبل التحقق مباشرةً:
$GLOBALS['comment'] = $comment;
والآن نقوم بوضع كود الـHTML فى مكانها المناسب كما ذكرت، والآن فى عنصر عرض كل تعليق يجب علينا إضافة ID لكل تعليق وذلك لكي تظهر الردود التي على كل تعليق بشكل مناسب، وذلك عبر إضافة كلمة comment ثم نقوم بإضافة دالة comment_ID، كما بالمثال التالي:ولإستكمال ما بدأناه فى هذا الدرس سأضع لكم هذا الفيديو؛ وذلك لأنني لن أستطيع إستكمال الدرس بسبب إنقطاع الإنترنت المستمر عندى حاليًا لثالث يوم -_-.
الأربعاء، 11 سبتمبر 2013
أسهل طريقة لبرمجة تعدد الصفحات فى PHP
تعدد الصفحات، من ضمن الأشياء الأساسية التي جعلت المبرمجين يمقتون لغة PHP بشدة، لكن أعتقد بعد تلك التدوينة لن يسبب تعدد الصفحات آية مشاكل مع أى مبرمج مرة أخرى، وذلك عن طريق دالة وبعض ملفات الـCSS معها؛ لكي لا تكون مضطرًا إلى البرمجة او التصميم !، فما عليك إلا إدراج تلك الملفات، والبدء فى استخدام الدالة فقط، وفى تلك التدوينة سأشرح لكم كل شيء يخص الدالة وكيفية التعامل معها وإختيار الاستايل واللون والعدد وكل شيء.
أولاً: قم بتحميل الملفات التالية: من هنا.
ثانيًا: قم بإتباع التالي:
- ستجد ملف function.php وهو الذي يحتوى على دالة تعدد الصفحات، والآن يجب أن تمتلك الأكواد التالية فى صفحة العرض:
query: هو استعلام SQL الذي ستستخدمه.
per_page: وهو عدد العناصر المعروضة فى كل صفحة.
page: الصفحة الحالية، ونستخدم فيها الكود التالي:
مسار الموقع منتهيا بمتغير ورقم الصفحة مثال: فى حالة استخدام '?' عند الضغط على صفحة رقم واحد ستتحول الى:
اما بالنسبة للألوان والأشكال فستجد الملفات مرقمة بألوانها، حيث يوجد شكلين A و B وكل منهما يحتوى على العديد من الألوان، مثال:
هذا الملف للأستايل B باللون الأحمر !
إذا كان لديكم أى سؤال أو مشكلة يمكنكم وضع تعليق على المدونة وسأقوم بالرد عليكم بالحل -بإذن الله-.
أسهل طريقة لبرمجة تعدد الصفحات فى PHP |
ثانيًا: قم بإتباع التالي:
- ستجد ملف function.php وهو الذي يحتوى على دالة تعدد الصفحات، والآن يجب أن تمتلك الأكواد التالية فى صفحة العرض:
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$limit = 2;
$startpoint = ($page * $limit) - $limit;
حيث أن العدد 2 وهو قيمة المتغير Limit يحتوى على عدد العناصر التي سيتم عرضها فى كل صفحة.$limit = 2;
$startpoint = ($page * $limit) - $limit;
- استخدام الدالة:
تستخدم الدالة كالتالي:echo pagination($query, $per_page = 10,$page = 1, $url = '?')
وشرح البارامترات كالتالي:query: هو استعلام SQL الذي ستستخدمه.
per_page: وهو عدد العناصر المعروضة فى كل صفحة.
page: الصفحة الحالية، ونستخدم فيها الكود التالي:
$_GET["page"]
url:مسار الموقع منتهيا بمتغير ورقم الصفحة مثال: فى حالة استخدام '?' عند الضغط على صفحة رقم واحد ستتحول الى:
?page=1
فى حالة '/news/world/' ، عند الضغط على صفحة رقم واحد ستتحول الى:/news/world/page=1
- الاستايل.
يجب أولاً إضافة الاستايل الأساسي عبر ملف pagination.css:إذا كان لديكم أى سؤال أو مشكلة يمكنكم وضع تعليق على المدونة وسأقوم بالرد عليكم بالحل -بإذن الله-.
الثلاثاء، 10 سبتمبر 2013
أكثر 25 شخصية مؤثرة فى التقنية فى العالم
أحببت أن أشارككم قائمة بأفضل 25 شخصية أثرت فى عالم التقنية، كل شخص بإسمه مع إختراعه الذي قام به دون صور، أتمني أن تنال القائمة إعجابكم.
1. Sir Tim Berners-Lee – World Wide Web
2. Vint Cerf And Bob Kahn – TCP/IP
3. Larry Page and Sergey Brin – Google Inc.
4. David Filo and Jerry Yang – Yahoo! Inc.
5. Bill Gates – Microsoft
6. Steven Paul Jobs – Apple Inc.
7. Mark Zuckerberg – Facebook
8. Chad Hurley and Steve Chen – YouTube
9. Linus Torvalds – Linux
10. Jack Dorsey – Twitter
11. Kevin Rose – Digg
12. Bram Cohen – BitTorrent
13. Mike Morhaime – Blizzard Entertainment
14. Jimmy Wales – Wikipedia
15. Jeff Preston Bezos – Amazon
16. Shawn Fanning – Napster, Rupture
17. Pierre Omidyar – eBay
18. Jack Ma – Alibaba
19. Craig Newmark – Craigslist
20. Matt Mullenweg – WordPress
21. Thomas Anderson – MySpace
22. Garrett Camp – StumbleUpon
23. Jon Postel – Internet Pioneer
24. Caterina Fake – Flickr
25. Marc Andreessen – Netscape
1. Sir Tim Berners-Lee – World Wide Web
2. Vint Cerf And Bob Kahn – TCP/IP
3. Larry Page and Sergey Brin – Google Inc.
4. David Filo and Jerry Yang – Yahoo! Inc.
5. Bill Gates – Microsoft
6. Steven Paul Jobs – Apple Inc.
7. Mark Zuckerberg – Facebook
8. Chad Hurley and Steve Chen – YouTube
9. Linus Torvalds – Linux
10. Jack Dorsey – Twitter
11. Kevin Rose – Digg
12. Bram Cohen – BitTorrent
13. Mike Morhaime – Blizzard Entertainment
14. Jimmy Wales – Wikipedia
15. Jeff Preston Bezos – Amazon
16. Shawn Fanning – Napster, Rupture
17. Pierre Omidyar – eBay
18. Jack Ma – Alibaba
19. Craig Newmark – Craigslist
20. Matt Mullenweg – WordPress
21. Thomas Anderson – MySpace
22. Garrett Camp – StumbleUpon
23. Jon Postel – Internet Pioneer
24. Caterina Fake – Flickr
25. Marc Andreessen – Netscape
الاثنين، 9 سبتمبر 2013
تعرف على ASP.NET بسهولة
ASP.net: هي بيئة عمل لبناء صفحات الويب بالتداخل مع تقنيات كـ HTML, CSS, Javascript والاسكربتات التي تعمل علي السيرفر (Server Scripting).
بيئة العمل هذه تدعم العديد من نماذج التطوير (development models) منها Web Forms و MVC و Web Pages:
منذ سنوات عديدة ومطورين الـ ASP.NET يستخدمون هذا الاسلوب لتطوير وانشاء المواقع الكبيرة في العالم .
الـ ASP.NET افضل من Classic ASP لانها تقدم دعم اكبر للغات البرمجة حيث يمكنك انشاء تطبيقات و User Controls لل ASP.NET باستخدام لغات برمجة مثل C# ، VB.NET ، C++، وايضاً الكود يتم عمل Compile له مما يؤدي الي سرعة عالية في تنفيذ التطبيقات .
وتستخدم ايضاً في طبقات العرض الخاصه بـ MVC.
يمكنك قراءة المزيد عنها من خلال W3Schools علي الرابط التالي : - http://www.w3schools.com/aspnet/razor_intro.asp .
الـ ASPX هو ايضاً View Engine ولكن موجه للتعامل مع النموذج Web Forms والنموذج MVC ولكن في حاله MVC يفضل العمل بـ Razor .
كما نري امامنا فالترتيب كالتالي: Web Application ثم ASP.NET Area ثم .NET Platform ، فالتطبيق (Web Application) يعتمد علي ASP.NET Area والاخيره تعتمد علي الـ .NET Platform ، والنماذج Web Forms و MVC و Web Pages يعتمدون علي ASP.NET ، والتطبيق ايضا يمكنه استخدام مكتبات الـ .NET ويتعامل معها بكل سهوله من خلال الكود.
وكما نلاحظ فالـ ASP.NET Area تحتوي علي النماذج والنماذج تعتمد علي ASP.NET.
ملحوظة : النماذج الثلاثه (Web Pages, MVC , Web Forms) يتم تسميتهم بـ ASP.NET Web Stack.
نحن لم نتطرق إلي آليات عمل النماذج الثلاث في هذه المقاله ، القادم اكثر ان شاء الله :)
الموضوع من طرف: أحمد السيد.
بيئة العمل هذه تدعم العديد من نماذج التطوير (development models) منها Web Forms و MVC و Web Pages:
تعرف على ASP.NET بسهولة |
نموذج التطوير Web Forms:
هذا النموذج هو التقليدي لبيئة العمل ASP.NET يعتمد علي طريقة Event Driven والـ Post Backs بمعني ادارة الاحداث لكل Control او عنصر علي الصفحة بتخصيص حدث معين له والمشرف علي هذه العملية هو الـ post backs .منذ سنوات عديدة ومطورين الـ ASP.NET يستخدمون هذا الاسلوب لتطوير وانشاء المواقع الكبيرة في العالم .
نموذج التطوير MVC:
هذا النموذج هو لتطوير تطبيقات الويب باستخدام نمط التصميم Model-View-Controller اي كما يعرف اختصاراً ب MVC. ونمط التصميم MVC هو طريقة رائعة لتطوير التطبيقات بطريقة منفصله ، بمعني فصل التطبيق ل 3 طبقات ؛ واحدة لطبقة العرض UI وتسمي Views والاخري للتعامل مع قاعدة البيانات وتسمي Models والاخيرة لربط الاثنين ببعض وتسمي Controllers .نموذج التطوير Web Pages :
اذا كنت حديث العهد مع ASP.NET يمكنك اختيار هذا النموذج كبداية . هذا هو اسهل نموذج من نماذج ASP.NET لتصميم المواقع .ماقبل الـ ASP.NET :
الـ ASP.NET جائت بعد تقنية Classic ASP ( كما تُعرف بـ Active Server Pages ) التي تم انشائها عام 1998 وكان اول محرك سكربتات للويب تم انشائه من قبل مايكروسوفت . صيغة الملفات الخاصة بها .asp وغالباً تكون مكتوبة بـ VBScript.الـ ASP.NET افضل من Classic ASP لانها تقدم دعم اكبر للغات البرمجة حيث يمكنك انشاء تطبيقات و User Controls لل ASP.NET باستخدام لغات برمجة مثل C# ، VB.NET ، C++، وايضاً الكود يتم عمل Compile له مما يؤدي الي سرعة عالية في تنفيذ التطبيقات .
الـ Razor و ASPX:
الـ Razor هو View Engine لانشاء server side script بداخل صفحات الـ ASP.NET Web Pages مثل Classic ASP . الـ Razor تستخدم قوة الـ ASP.NET وسهلة التعلم ايضاً .وتستخدم ايضاً في طبقات العرض الخاصه بـ MVC.
يمكنك قراءة المزيد عنها من خلال W3Schools علي الرابط التالي : - http://www.w3schools.com/aspnet/razor_intro.asp .
الـ ASPX هو ايضاً View Engine ولكن موجه للتعامل مع النموذج Web Forms والنموذج MVC ولكن في حاله MVC يفضل العمل بـ Razor .
تكوين الـ ASP.NET :
تعرف على ASP.NET بسهولة |
وكما نلاحظ فالـ ASP.NET Area تحتوي علي النماذج والنماذج تعتمد علي ASP.NET.
ملحوظة : النماذج الثلاثه (Web Pages, MVC , Web Forms) يتم تسميتهم بـ ASP.NET Web Stack.
نحن لم نتطرق إلي آليات عمل النماذج الثلاث في هذه المقاله ، القادم اكثر ان شاء الله :)
الموضوع من طرف: أحمد السيد.
الأحد، 8 سبتمبر 2013
شرح بعض مجلدات ليُنكس/اوبنتو الأساسية والمهمة
المستخدمين الجُدد لنظام لينُكس/أوبنتو، سيجدون صعوبة فى فهم المجلدات الأساسية التى يتم إنشاؤها تلقائيًا مع تثبيت التوزيعة، ولذلك فى تلك التدوينة سأسرد لكم نبذة عن بعض المجلدات الرئيسية التى قد تراها غريبة للوهلة الأولى فى بداية تعاملك مع التوزيعة، فلنبدأ الآن !
- مجلد bin: وهو إختصارًا لـ Binary Applications، وفي هذا المجلد ستجد معظم البرامج الموجودة مع التوزيعة.
- مجلد boot: وموجود به جميع الملفات الخاصة بعمل إقلاع Boot للنظام.
- مجلد dev: وهو موجود به الـDives الموجودة على جهازك.
- مجلد etc: وهو موجود به معظم ملف الإعدادات Configuration الخاص بالنظام.
- مجلد home: ستجد به الملفات الخاصة بكل مستخدم للتوزيعة.
- مجلد lib: وهو مثل مجلد Program Files فى ويندوز.
- مجلد media: وتجد به المجلدات التى قمت بتحميلها أو بمعنى أصح قمت بعمل Mounting لها.
- مجلد opt: وهو المجلد الذي يتم تثبيت برامجك الجديدة فيه.
- مجلد proc: يحتوى على بعض القوائم الخاصة بالنظام.
- مجلد var: يحتوى على بيانات الدخول، وقواعد البيانات الخاصة بالنظام.
- مجلد bin: وهو إختصارًا لـ Binary Applications، وفي هذا المجلد ستجد معظم البرامج الموجودة مع التوزيعة.
- مجلد boot: وموجود به جميع الملفات الخاصة بعمل إقلاع Boot للنظام.
- مجلد dev: وهو موجود به الـDives الموجودة على جهازك.
- مجلد etc: وهو موجود به معظم ملف الإعدادات Configuration الخاص بالنظام.
- مجلد home: ستجد به الملفات الخاصة بكل مستخدم للتوزيعة.
- مجلد lib: وهو مثل مجلد Program Files فى ويندوز.
- مجلد media: وتجد به المجلدات التى قمت بتحميلها أو بمعنى أصح قمت بعمل Mounting لها.
- مجلد opt: وهو المجلد الذي يتم تثبيت برامجك الجديدة فيه.
- مجلد proc: يحتوى على بعض القوائم الخاصة بالنظام.
- مجلد var: يحتوى على بيانات الدخول، وقواعد البيانات الخاصة بالنظام.
كيف تنسخ محتويات جدول من قاعدة بيانات إلى أخرى فى MySQL؟
قد تواجه بعض المشاكل فى برمجياتك ترغمك على إستبدال قاعدة بياناتك الحالية بقاعدة بيانات جديدة، ولكن هل ستقوم بإنشاء الجداول مرة أخرى، ثم تقوم بإدخال جميع البيانات مرة أخرى؟، أو ربما ستكون أكثر سرعة عندما تأخذ نسخة من قاعدة البيانات ثم إستيرادها فى قاعدة البيانات الجديدة، ولكن ماذا إن كنت تُريد نقل بعض الجداول فقط وليست جميع الجداول؟؟؟
الآن قمنا بنسخ الهيئة والشكل للجدول، الآن لنذهب إلى مرحلة نقل محتويات الجدول، وهو عبر الإستعلام التالي:
كيف تنسخ محتويات جدول من قاعدة بيانات إلى أخرى فى MySQL؟ |
لإنشاء جدول جديد بنفس هيئة وشكل جدول سابق موجود على نفس السيرفر، تستطيع كتابة الإستعلام التالي:
CREATE TABLE new_table_name LIKE old_table_name;
حيث أن new_table_name هو اسم الجدول الجديد، و old_table_name هو اسم الجدول الذي نٌريد نسخه.الآن قمنا بنسخ الهيئة والشكل للجدول، الآن لنذهب إلى مرحلة نقل محتويات الجدول، وهو عبر الإستعلام التالي:
INSERT INTO new_table_name SELECT * FROM old_table_name;
مع مراعاة تغيير الأسماء كما ذكرت ! شرح تثبيت السيرفر المحلي Apache2 و PHP5 و MySQL5 على اوبنتو بسهولة
في تدوينة سابقة، شرحت تنصيب واستخدام السيرفر المحلي على ويندوز ولينُكس/اوبنتو، لكنني لم أتدخل فى طريقة التنصيب على أوبنتو، بل اكتفيت بذكر برنامج Xampp، ومن ثم وضعت فيديو يشرح كيفية تثبيت البرنامج على أوبنتو، لكن التثبيت وحده استغرق الكثير من الوقت والأكواد، ولذلك أحببت أن أطرح طريقة سهلة جدًا، لتثبيت السيرفر الوهمي على لينُكس/اوبنتو، تعتمد تلك الطريقة ببساطة على على بعض الأوامر البسيطة التى ستقوم بنسخها ووضعها فى الطرفية Terminal، وسيتم التثبيت بنجاح !
- تثبيت MySQL5.
قم بنسخ الأمر التالي وقم بوضعه فى الطرفية:
sudo apt-get install mysql-server mysql-client
- تثبيت Apache2.
قم بنسخ الأمر التالي وقم بوضعه فى الطرفية:
sudo apt-get install apache2
- تثبيت PHP5.
قم بنسخ الأمر التالي وقم بوضعه فى الطرفية:sudo apt-get install php5 libapache2-mod-php5
طريقة سهلة للبحث عن الخطوط وتحميلها مجانًا
طريقة سهلة للبحث عن الخطوط وتحميلها مجانًا |
- الدخول إلى الموقع: من هنا.
- طريقة البحث:
ببساطة ستجد زر Browse تستطيع من خلاله إختيار الصورة التي تريد البحث عن الخطوط الموجودة بالصورة.أو يمكنك وضع رابط الصورة مباشرة ليقوم الموقع بالبحث عن الخطوط الموجودة بالصورة.
لن يقوم الموقع بذكر اسماء الخطوط فقط، بل سيوفر لك رابطًا لتحميل تلك الخطوط !، ولكن المجاني منها فقط !؛ والخطوط الغير مجانية ستكون غير متوفرة للتحميل.
السبت، 7 سبتمبر 2013
ما الفرق بين HTML و xHTML؟
HTML هذه اللغة التى طالما استخدمناها فى تصميم وتجسيم مواقعنا على الانترنت وفى تعديل القوالب ...إلخ ، بجانب الـhtml ، بلا ادنى شك سمعنا عن xhtml و xml ، وأظن اغلبنا قد تعامل معها وفيما يلى سنوضح الفروقات البسيطه بين اللغتين html ، xhtml ، فى البداية أحب أن أنوه أن الـhtml هى نفسها الـxhtml ، بكل قواعدها ونفس وسومها لكن يمكننا القول أن xhtml ، هى خليط من xml وhtml ، حيث أنها تخضع لقواعد لغة xml ، وهى لغة سهله جدااً يمكنك أخذ نبذه عن قواعدها من هنا ، والآن لنرجع لموضعنا الاساسى وهو الفروقات بين xhtml و html.
1.اعتدنا عند الكتابة بالـhtml ، على وسوم فتح واغلاق ووسوم ذاتية الاغلاق أو (self close) مثل :
هذه المثال لم نراعى فيه ترتيب اغلاق الوسوم حيث بدأنا بالوسم
أنت قد بدأت هكذا
3.عند استخدامنا للـhtml ، كنا نكتب وسم الإيمج هكذا :
Compunet فى xhtml يجب أن نقوم بتعديله ليكون هكذا :
compunet ذكرنى هذا الشرط بقواعد لغة (c++) ^_^-
حسناً، بديهياً عند كتابتك بالـxhtml، يجب كتابة سطر الـDoctype، وهو الخاص بتعريف المتصفح أنك تكتب بالـxhtml ، كما تختلف سطور الـDoctype ، فمنها ماهو يتيح لك استخدام الوسوم الملغية أصلاً فى html ومنها مايتيح لك استخدام كافة الوسوم سواء ملغية او متاحة ، هكذا يكون السطر الافتراضى للـDoctype :
"http://www.w3.org/TR/html5/frameset.dtd">حسناً أنا شخصياً عند التكويد، لا أأهبه بالغة التى أكتب بها سواء أكانت xhtml ، html ، حيث انى لا أجد فرقاً يذكر بينهما وكل الفروق التى ذكرناها بالأعلى هي فروق تافهه ولا تذكر بالمرة لكن أخذناها من باب العلم. ^_^ ,
1.اعتدنا عند الكتابة بالـhtml ، على وسوم فتح واغلاق ووسوم ذاتية الاغلاق أو (self close) مثل :
compunet
لكن فى xhtml ، انت مجبر على إغلاق الوسوم سواء أكانت وسوم عادية أو وسوم ذاتية الاغلاق ، فيجب وضع (سلاش) قبل نهاية الوسم فتصبح هكذا :compunet
compunet
compunet
2.يجب مراعاة الترتيب العكسى فى xhtml ، حيث عند فتح وسوم جديدة يجب مراعاة ان تغلقها وهى مرتبة مثال:compunet
compunet
compunet
، ولكننا انتهينا بوسم ، حسناً . هذا فى الـhtml العادية صحيح لكن فى xhtml خاطئاً لتبسيطها أكثر .
أنت قد بدأت هكذا
، لكن عندما تكتب وسم الاغلاق أعكس الوسمين فتكون هكذا
لذا سيكون التصحيح للكود السابق فى الـxhtml هكذا :
compunet
3.عند استخدامنا للـhtml ، كنا نكتب وسم الإيمج هكذا :
<"img src="compunet.png>
حيث كنا مخيرين بإضافة سمات للوسم كـalt أو لانضعها بجانب وسم الإيمج ، لكم فى xhtml ، أنت مجبر على وضع السمة alt ، بجانب وسم الإيمج فتصبح هكذا : < /"img src="compunet.png" alt="logo >
4.عند كتابتك بالـxhtml يجب مراعاة أن تكون الوسوم مكتوبة بحروف small ، وليست capital مثل هذا الوسم :حسناً، بديهياً عند كتابتك بالـxhtml، يجب كتابة سطر الـDoctype، وهو الخاص بتعريف المتصفح أنك تكتب بالـxhtml ، كما تختلف سطور الـDoctype ، فمنها ماهو يتيح لك استخدام الوسوم الملغية أصلاً فى html ومنها مايتيح لك استخدام كافة الوسوم سواء ملغية او متاحة ، هكذا يكون السطر الافتراضى للـDoctype :
"http://www.w3.org/TR/html5/frameset.dtd">
كيف تقوم بإغلاق مجلد برقم سري بدون برامج؟
الكثير منا يمتلك ملفات خاصة به لا يريد أن يطلع عليها أحدًا من مستخدمي حاسوبه، إن كان حاسوبه يعمل عليه أكثر من شخص، وقد تكون هنالك بعض الملفات السرية التى بسببها قد تتعرض للإختراق من قبل المتطفلين للحصول عليها، قد تكون تلك الملفات مثلاً بيانات موقعك إن كنت تمتلك موقعًا، أو قد تكون برمجياتك المدفوعة إلخ، كل تلك الأسباب تستدعيك أن تقوم بحماية تلك الملفات عبر وضعها فى مجلد لا يستطيع أحد فتحه دون رقم سري، ولذلك قد تلجأ إلى بعض البرامج التى يمكن عن طريقها بسهولة تغيير تلك الأرقام السرية والولوج إلى ملفاتك إن إستطاع أحد إختراق حاسوبك، ولذلك لماذا لا تقم أنت بنفس بحماية ملفاتك والقيام بما يقوم به أى برنامج للحماية؟؟
حسنًا، إتبع الخطوات التالية:
1- قم بفتح محرر النصور Notepad
2- قم بنسخ الكود التالي:
cls
@ECHO OFF
title MyFILES
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST MyFolder goto MDMyFolder
:CONFIRM
echo Are you sure to lock this folder? (Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren MyFolder "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter password to Unlock Your Secure Folder
set/p "pass=>"
if NOT %pass%== MYPASSWORD goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" MyFolder
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDMyFolder
md MyFolder
echo MyFolder created successfully
goto End
:End
@ECHO OFF
title MyFILES
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST MyFolder goto MDMyFolder
:CONFIRM
echo Are you sure to lock this folder? (Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren MyFolder "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter password to Unlock Your Secure Folder
set/p "pass=>"
if NOT %pass%== MYPASSWORD goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" MyFolder
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDMyFolder
md MyFolder
echo MyFolder created successfully
goto End
:End
مع تغيير كلمة MYPASSWORD إلى الباسوورد الذي تريد وضعه للملف.
3- قم بحفظ الملف بصيغة .bat
4- قم بتشغيل الملف الذي تم حفظه، وستجد مجلدًا جديدًا قد تم إنشاؤه
5- قم بإدخالك ملفاتك التى تريد حمايتها إلى هذا المجلد
6- بعد ذلك قم بتشغيل الملف الذي حفظناه منذ قليل مرة أخرى
7- والآن قم بكتابة حرف Y ، ثم قم بالضغط على زر Enter
8- الآن سيختفي الملف، ولإعادة إظهاره ستقوم بتشغيل الملف مرة أخرى، ثم تقوم بإدخال كلمة السر حتى يظهر الملف مرة أخرى
3- قم بحفظ الملف بصيغة .bat
4- قم بتشغيل الملف الذي تم حفظه، وستجد مجلدًا جديدًا قد تم إنشاؤه
5- قم بإدخالك ملفاتك التى تريد حمايتها إلى هذا المجلد
6- بعد ذلك قم بتشغيل الملف الذي حفظناه منذ قليل مرة أخرى
7- والآن قم بكتابة حرف Y ، ثم قم بالضغط على زر Enter
8- الآن سيختفي الملف، ولإعادة إظهاره ستقوم بتشغيل الملف مرة أخرى، ثم تقوم بإدخال كلمة السر حتى يظهر الملف مرة أخرى
شرح تصميم قوالب ووردبريس -الجزء الثامن-
فى الدرس السابق، تعرفنا على طريقة برمجة صفحة عرض التدوينة single.php، وفى هذا الدرس -بإذن الله- سنكمل ما بدأناه الدرس الماضي، وسنتحدث عن الجزء الخاص بعرض معلومات الكاتب، والآن لنبدأ فى العمل الممتع !
الآن لدي بداخل صفحة single.php، لدي جزء خاص بعرض معلومات كاتب التدوينة، وتظهر تلك المعلومات عبر الكود التالي:
Article By
Ahmed Essam, 16 years old web developer, Blogger since 2011
Article By
بدايةً فى ملف comments.php، سنقوم بوضع تحقق لمعرفة ما إذا كان المستخدم له الحق فى تحميل هذا الملف أم لا، وإن لم يكون له تلك الصلاحيات، سيتم إغلاق الملف، لذلك سنضع هذا الكود فى أول الملف:
if (!empty($_SERVER['SCRIPT_FILENAME']) &&
basename($_SERVER['SCRIPT_FILENAME'])=='comments.php'){
die ('Please do not load this page directly. Thanks!');
}
الآن علينا التحقق من إن كانت التدوينة الموجود بها تلك التعليقات محمية بكلمة سر أم لا عبر دالة post_password_required، وإن كانت محمية بكلمة سر فسنعرض رسالة للمستخدم بأنه عليه أن يقوم بإدخال كلمة السر لعرض التعليقات، إذًا فلنضيف هذا الكود أيضًا:basename($_SERVER['SCRIPT_FILENAME'])=='comments.php'){
die ('Please do not load this page directly. Thanks!');
}
if ( post_password_required() ) { ?>
return;
}
الآن سأضع لكم الكود الأساسي، الذي سنعمل عليه، ثم سأقوم بشرحه لكي نفهمه جميعًا:This post is password protected. Enter the password to view comments.
return;
}
if(have_comments()){
?>
Display
}elseif(!comments_open() && !is_page() && post_type_supports(get_post_type(),'comments')){
?>
Comments are closed !
}
?>
والآن قم بوضع كود HTML الخاص بعرض التعليقات بدلاً من كلمة Display، ثم إتبع الآتي لعرض التعليقات:
1- دالة comments_number، وهي تأخذ ثلاثة بارامترات، البارامتر الأول، النص الذي سيتم عرضه فى حالة عدم وجود أى تعليق، والثاني النص الذي سيتم عرضه فى حالة وجود تعليق واحد، والأخير فى حالة وجود أكثر من تعليق، وفي تلك الحالة لعرض عدد التعليقات سيتم إستخدام العلامة المئوية %.
2- دالة wp_list_comments، وهي لعرض التعليقات بشكل إفتراضي، ولكن التعليقات ستظهر بصورة غير متناسقة مع القالب، لذلك سنقوم بإدخال بارامتر لها كالتالي:
wp_list_comments('callback=my_comments');
حيث أن my_comments، ستكون عبارة عن دالة مسئولة عن عرض التعليقات، تلك الدالة بالطبع سنقوم بإنشائها بداخل ملف functions.php، ولذلك سنقوم الآن بفتح ملف functions.php، ومن ثم إنشاء دالة جديدة بذلك الإسم، كالتالي:function my_comments(){
}
ولكن تلك الدالة سنقوم ببرمجتها فى الدرس القادم -بإذن الله-، أما الآن سنترك ذلك، ونقوم ببرمجة نظام صفحات التعليقات، حيث أن التدوينة إذا إحتوت على عدد كبير من التعليقات لا يمكن عرضها جميعها فى صفحة واحدة، ولذلك سنقوم ببرمجة نظام صفحات لها، الآن بداخل ملف comments.php، أسفل دالة wp_list_comments سنقوم بوضع كود HTML الخاص بعرض الصفحات، وسنقوم بإستخدام دالة previous_comments_link لوضع رابط التعليقات الأقدم، وهي دالة تأخذ بارامتر واحد وهو النص الذي سيتم عرضه لهذا الرابط، أما بالنسبة للتعليقات الأحدث، فسيتم عرض رابط لها عن طريق دالة next_comments_link وهي أيضًا تأخذ بارامتر واحد وهو النص الذي سيتم عرضه للرابط.}
ولكن لنجعل هذا الكود أكثر ذكاءًا، حيث يتم إدراج روابط الإنتقال بين صفحات التدوينة تحت هذا الشرط:
if(get_comment_pages_count > 1 && get_option('page_comments')){
}
حيث أننا فى هذا الشرط قمنا بالتحقق من تفعيل إختيار تعدد صفحات التدوينات من لوحة التحكم، ووجود أكثر من صفحة واحدة فى التدوينة ليتم عرض روابط الإنتقال بين الصفحات.}
تبقى لنا الآن شيئان فقط، وهما برمجة دالة my_comments لعرض التعليقات، والشيء الثاني وهو وضع نموذج إنشاء تعليق جديد، وذلك ببساطة يتم عن طريق دالة comment_form فقط، ضعها فى مكانها المناسب وسيتم عرض نموذج إنشاء تعليق جديد.
والآن يتبقى لنا فقط برمجة دالة my_comments لعرض التعليقات؛ لإنهاء جميع ما يخص التعليقات، وذلك ما سنقوم به فى الدرس القادم -بإذن الله-.
كيف تستخدم متصفحك كمحرر للنصوص؟
فى هذه التدوينة السريعة، سأضع لكم طريقة بسيطة جدًا، لإستخدام متصفحك على أنه محرر نصوص عادي، تلك الطريقة يمكنك إستخدامها على متصفح موزيلا فايرفوكس، أو جوجل كروم، والعديد من المتصفحات الأخرى، يمكنك الإستفادة من تلك الطريقة إذا كنت تُريد أعمالك جميعها أن تكون على برنامج واحد دونًا عن فتح برامج محررات أخرى، والآن أترككم مع الطريقة.
قم بإتباع الخطوات التالية:
1- قم بفتح صفحة جديدة على متصفحك.
2- قم بكتابة الجملة التالية بيدك وليس عن طريق النسخ واللصق.
قم بإتباع الخطوات التالية:
1- قم بفتح صفحة جديدة على متصفحك.
2- قم بكتابة الجملة التالية بيدك وليس عن طريق النسخ واللصق.
data:text/html,
والآن إضغط على ذهاب، والآن يمكنك إستخدام تلك الصفحة كمحررًا للنصوص !الجمعة، 6 سبتمبر 2013
خمسة طرق مضمونة للحصول على حساب جوجل آدسنس بدون إمتلاك موقع
الحصول على حساب جوجل آدسنس اليوم أصبح من الأشياء الصعبة جدًا، يجب أن تمتلك موقعًا متميزًا جدًا، ويحتوى على عدد كبير من المقالات والمحتوى المفيد، وأيضًا يجب أن يحتوى على آلاف عديدة من الزوار؛ ولذلك يجد معظم الناس صعوبات بالغة فى الحصول على حساب فى جوجل آدسنس، سبق أن شرحت فى مقالتي عن أفضل 10 طرق للربح عبر الإنترنت، أن برنامج جوجل آدسنس هو أفضل برنامج ربحي من المدونات والمواقع على الإنترنت، ولكن تستطيع الحصول على حساب بدون إمتلاك موقع؟؟؟
1- Flixya.com.
موقع فلكسيا هو موقع مخصص لمشاركة الفيديوهات والصور والتدوينات، تستطيع التسجيل من خلاله ومن ثم رفع 10 صور على الأقل، ثم كتابة تدوينة واحدة، ومن ثم من خلال الموقع يمكنك التسجيل فى برنامج Google AdSense، وسيتم القبول -بإذن الله-.الفكرة هي أن تلك المواقع متفقة مع ادسنس بحيث أن أعضائها تستطيع التسجيل فى ادسنس وعرض إعلاناتها على ما ينشرونه على الموقع ليدر عليهم الربح، للدخول للموقع من هنا.
2- Hubpages.com.
هذا الموقع يقوم الأعضاء عن طريقه كتابة مقالات، يمكنك كتابة مقالين أو ثلاثة، ثم التقديم عن طريق الموقع لحساب آدسنس، للدخول للموقع من هنا.3- Docstoc.com.
موقع دوكستوك يقوم على نشر الملفات المقروئة والكتب الإلكترونية التى تمتلك أنت حقوق نشرها فقط، يمكنك رفع عدد من الملفات، ومن ثم التقديم لحساب آدسنس للبدء فى العمل فى الموقع وجنى أرباحك من زوار ملفاتك على الموقع، للدخول إلى الموقع إضغط هنا.4- IndyaRocks.
هذا الموقع هو عبارة عن شبكة إجتماعية مثل الفيسبوك تمامًا، يمكنك التسجيل به ثم كتابة 5 تدوينات على الأقل، ومن ثم التقديم على حساب جوجل آدسنس عن طريقها ليتم عرض إعلاناتك عليها، للدخول إلى الموقع من هنا.5- Webanswers.
هذا الموقع يختلف تمامًا عن بقية المواقع، فهذا الموقع لمشاركة المعرفة مثل Yahoo Answers، فما عليك إلى الدخول إليه من هنا، ومن ثم التسجيل، والإجابة على 10 أسئلة على الأقل، وستأتيك رسالة على بريدك الذي قمت بالتسجيل به على الموقع، يدعوك فيه برنامج Google AdSense للتسجيل فيه، وإن لم تأتِ لك الرسالة بعد 10 أسئلة استمر فى الإجابة على الأسئلة حتى تأتيك الرسالة.كيف تحمي حساب Gmail من الإختراق؟
تعتمد تلك الطريقة على وجود خطوتان لتسجيل الدخول إلى حسابك فى Gmail، الخطوة الأولى وهي إدخال الإيميل والباسوورد، والخطوة الثانية أن جوجل سوف ترسل إليك رمزًا على هاتفك المحمول، عندها ستقوم بإدخال هذا الرمز لكي يتم تسجيل الدخول إلى حسابك بشكل كامل، وبتلك الطريقة حتى لو تمكن أى شخص من معرفة كلمة سر حسابك على Gmail؛ لن يتمكن من الولوج إلى حسابك؛ لان الرسالة سوف تصلك على هاتفك أنت فقط !
لتفعيل تلك الطريقة ببساطة إتبع الخطوات التالية:
1- قم بتسجيل الدخول إلى حسابك فى Gmail.
2- قم بالضغط على كلمة Account فى أعلى اليمين.
3- قم الضغط على تعديل 2-step verification.
4- الآن إضغط Start Setup.
5- الآن قم بإختيار دولتك ثم قم بإدخال رقم هاتفك.
6- الآن قم بإختيار خيار الـSMS.
7- الآن إضغط على Send Code.
8- الآن سيتم إرسالة كود تفعيل على هاتفك، قم بإدخالخ ثم أكمل الخطوات Next ثم Next.
9- الآن لن تستطيع الدخول إلى حسابك فى Gmail سوى أن يتم إرسالة رسالة تأكيد إلى هاتفك فى كل مرة لتقوم بإدخاله ثم إستكمال تسجيل دخولك !
لتفعيل تلك الطريقة ببساطة إتبع الخطوات التالية:
1- قم بتسجيل الدخول إلى حسابك فى Gmail.
2- قم بالضغط على كلمة Account فى أعلى اليمين.
3- قم الضغط على تعديل 2-step verification.
4- الآن إضغط Start Setup.
5- الآن قم بإختيار دولتك ثم قم بإدخال رقم هاتفك.
6- الآن قم بإختيار خيار الـSMS.
7- الآن إضغط على Send Code.
8- الآن سيتم إرسالة كود تفعيل على هاتفك، قم بإدخالخ ثم أكمل الخطوات Next ثم Next.
9- الآن لن تستطيع الدخول إلى حسابك فى Gmail سوى أن يتم إرسالة رسالة تأكيد إلى هاتفك فى كل مرة لتقوم بإدخاله ثم إستكمال تسجيل دخولك !
كيف تزيد من سرعة الإنترنت 20% بدون برامج
فى جميع إصدارات نظام التشغيل ويندوز تقوم ميكروسوفت بتخصيص 20% من سرعة الإنترنت للأعمال الخاصة به، مثل عمل Update وبعض من تلك الأشياء، وتعتمد فكرتنا فى هذه الخدعة، أن نقوم بتغيير هذا التخصيص إلى 0%؛ لكي نستفيد نحن بالـ20% تلك، وبذلك نستطيع زيادة سرعة الإنترنت لديك بنسبة 20% بدون إستخدام آية برامج إطلاقًا !
فقط إتبع الخطوات التالية:
1- قم بفتح Run، واكتب بداخلها gpedit.msc ، ثم إضغط Ok.
2- ستظهر لك النافذة التالية:
3- من القائمة التي على اليسار، قم بإختيار Administrative Templates، لتتغير القائمة التي على اليسار لتصبح كالتالي:
4- قم بإختيار Network؛ لتظهر لك تلك القائمة:
5- ثم قم بإختيار QoS Packet Scheduler، لتظهر لك تلك القائمة:
6- الآن قم بالضغط مرتين متتاليتين على Limit Reservable Bandwidth؛ لتظهر لك تلك النافذة:
7- قم بتحديد Enabled وستظهر لك إمكانية تحديد Bandwith Limit، قم بجعلها صفر ثم Apply كما بالصورة التالية:
الآن ستلاحظ فرق فى سرعة تصفحك للإنترنت :)
[فيديو]: شرح برمجة متصفح ويب بسيط بلغة Lua
فى هذه التدوينة سأقدم درساً برمجياً فى لغة Lua ، أرى علامات التعجب فوق رؤوسكم .. لم تسمعوا عنها أليس كذلك ؟؟!
حسناً , بكل اختصار لغة Lua مثل أى لغة برمجية وجدت ، تتميز بسهولتها كما تشتهر بأنها اللغة القائم عليها برنامج Autoplay Media Studio ، وهو بيئة عملنا أو بمعنى أصح (بيئة التطوير للغة IDE)، تستطيع تحميله من هنا، وسنحتاج أيضًا فى الشرح إلى برنامج Notepad++ وتستطيع تحميله من هنا، وأيضًا برنامج Bat to EXE وتستطيع تحميله من هنا.
لُوا هي لغة برمجة متعددة النمط، تعني لُوا القمر بالبرتغالية أنشأ هذه اللغة فريق من المبرمجين البرازليين سنة 1993، تم برمجة الكثير من البرامج المتميزة بها فمثلاً قد تم من قبل برمجة نظام تشغيل كامل لسيرفر الميكروتيك عبر لوا.
حسنًا، عنوان درسنا لهذا اليوم هو كيفية عمل متصفح ويب بسيط بلغة Lua ، حتى ولو لم تسمع عنها ستستطيع بكل سهولة أن تطبقه ، دعنا من الثرثرة ولنشاهد الشرح :
الأكواد الموجودة بالشرح:
1- كود التصفح (Go).
2- كود الرجوع للخلف (Back).
3- كود الذهاب للصفحة التاليه (Forward).
4- كود التحديث (Refresh).
5- كود الخصائص (Setting).
الشرح من قِبَل مصطفى محمود.
حسناً , بكل اختصار لغة Lua مثل أى لغة برمجية وجدت ، تتميز بسهولتها كما تشتهر بأنها اللغة القائم عليها برنامج Autoplay Media Studio ، وهو بيئة عملنا أو بمعنى أصح (بيئة التطوير للغة IDE)، تستطيع تحميله من هنا، وسنحتاج أيضًا فى الشرح إلى برنامج Notepad++ وتستطيع تحميله من هنا، وأيضًا برنامج Bat to EXE وتستطيع تحميله من هنا.
لُوا هي لغة برمجة متعددة النمط، تعني لُوا القمر بالبرتغالية أنشأ هذه اللغة فريق من المبرمجين البرازليين سنة 1993، تم برمجة الكثير من البرامج المتميزة بها فمثلاً قد تم من قبل برمجة نظام تشغيل كامل لسيرفر الميكروتيك عبر لوا.
حسنًا، عنوان درسنا لهذا اليوم هو كيفية عمل متصفح ويب بسيط بلغة Lua ، حتى ولو لم تسمع عنها ستستطيع بكل سهولة أن تطبقه ، دعنا من الثرثرة ولنشاهد الشرح :
الأكواد الموجودة بالشرح:
1- كود التصفح (Go).
2- كود الرجوع للخلف (Back).
3- كود الذهاب للصفحة التاليه (Forward).
4- كود التحديث (Refresh).
5- كود الخصائص (Setting).
الشرح من قِبَل مصطفى محمود.
مفهوم هندسة الويب وطبقات صفحة الويب
هندسة الويب، المفهوم الذي يفتقد معرفته الكثير من المبرمجين، ومصممي المواقع ممن يعتقدون حتى الآن أنهم مبرمجين بالفعل !، ليست المشكلة أن المبرمجين لا يريدون إدخال مصممى الويب إلى جماعتهم، بل المشكلة فى طريقة فهم المصممين لهندسة الويب، فلو فهموا هندسة الويب بشكل صحيح، لما أطلقوا على نفسهم مبرمجين، ليس لهذا السبب يجب أن تقرأ تلك المقالة، بل هنالك العديد والعديد من الأسباب الأخرى التى تجعل كل مهتمًا بتطوير الويب إلى فهم هذا المفهوم بشكل جيد، من ضمن تلك الأسباب عدم تمكن عدد كبير من مطوري الويب إلى لغة JavaScript بشكل صحيح.
- ما هي العناصر الأساسية التى تتكون منها صفحة الويب؟
أى صفحة ويب تتكون من ثلاثة نقاط أساسية، أو بمعنى أدق ثلاثة طبقات، وهم كما بالصورة التالية:
نلاحظ من الصورة أن أى صفحة تتكون من ثلاثة طبقات Three Layers، وهي طبقة Content، ثم طبقة Presentation، ثم طبقة Behavior، وسنأخذ نبذة عن كل واحدة منهم كالتالي:
1- Content Layer: وهي الطبقة المسئولة عن هيكلة الصفحة بشكل عام، والتي تكتب بلغة HTML، فإذا مثلنا مثلاً بناء صفحة الويب ببناء بيت، فإن كتابة الصفحة بلغة HTML مثل بناء البيت من الطوب الأحمر فقط، فأنت الآن قمت ببناء هيكل البيت فقط.
2- Presentation Layer: وهي طبقة تزيين البيت، وهي الطبقة التي تكتب بلغة CSS، فبعد أن قمت ببناء البيت من الطوب الأحمر، الآن أنت تقوم بتلوين البيت، وتزيينه.
3- Behavior Layer: وهي ببساطة طبقة الأجهزة الإلكترونية الموجودة بالبيت !، فهي تتحدث مع المستخدم، وتأخذ مدخلاته وتقوم بتطبيقها بداخل المتصفح، وهي الطبقة التى تكتب بلغة JavaScript، وتلك الطبقة لا تتعامل مع السيرفر، ولا تحتاج إلى مترجم أو مفسر سوى المتصفح فقط، فهي تتعامل فقط مع المتصفح، وسنعرف كيف تتعامل معه بعد قليل.
الآن تصميم صفحة الويب يكون على الترتيب باللغات التالية: HTML ثم CSS ثم JavaScript، لاحظ كلمة التصميم !
الآن إذا كنت أنا مثلاً مخترع لغة HTML، وقمت بجعل الرمز التالي يعبر عن شجرة:
ببساطة عن طريق المتصفحات Browsers، ولكن ما هي آلية هذا الفعل؟؟
ببساطة كل متصفح يحتوى على Render Engine، هذا الريندر عبار عن رسام، يرسم على لوحة بيضاء وهي المتصفح، أى أن المتصفح ببساطة ما هو إلا صفحات بيضاء، يقوم الريندر الخاص بكل متصفح برسم العناصر التي تأتيه من الصفحة المُراد الدخول إليها، أى إنه كلما كان الريندر إنجين الخاص بالمتصفح أفضل وأدق وأسرع، كلما كان المتصفح أفضل !
- متصفح Firefox يعمل على Render Engine يدعى Gecko.
- متصفح Internet Explorer يعمل على Render Engine يدعى Trident.
الآن لننتقل إلى موضوع جديد، وهو الـDOM، ما هو الـDOM؟
ببساطة الصورة التالية ستشرح لك مفهوم الـDom
الـParser هو عبارة عن برنامج يقوم بتحويل كود الـHTML إلى شكل شجري كما بالصورة الماضية، كمثال على كود HTML سيتم تحويله:
Welcome
هذا الكود سيتم تحويله إلى شكل شجرة Tree كما بالصورة التالية:
وظيفة الـParser تحويل كود الـHTML إلى هذا الشكل السابق، لأن المتصفح لا يفهم كود HTML، لكن الـParser هو من يفهمه، وهذا الشكل يدعى DOM إختصارًا لـ Document Object Model، وهو ما يقوم الـRender Engine برسمه على الصفحات البيضاء.
الآن سأصل معك إلى آخر نقطة: وهي الـ Refresh : وهي النقطة المهمة من وراء كل هذا الموضوع والتي من خلالها ستفهم جافاسكربت وهي عملية تحديث الصفحة والجميع يعرف انه عندما تريد تحديث الصفحة فإنك تضغط على زر تحديث او F5 ولكن ما أريده منك الآن أن تلاحظ الرسم الموجود بالأعلى عند عملية التحديث فإن العملية التي تحدث هي الرجوع إلى الشجرة و قراءتها وليس الرجوع لبداية الكود ومن ثم رسم الكود من جديد.
أما عن طريق JavaScript يمكنك تحديث عنصر معين بدلاً من إعادة تحميل الصفحة بأكملها من أجل إعادة تحديث عنصر واحد من الصفحة !
تلك هي الأساسيات المطلوبة من كل مطوّر ويب أن يفهمها بخصوص مفهوم هندسة الويب.
- ما هي هندسة الويب Web Engineering؟
هندسة الويب ببساطة هى طريقة تنظيم، أو طريقة تخطيط صفحات الويب بشكل عام، ممَ تتكون؟- ما هي العناصر الأساسية التى تتكون منها صفحة الويب؟
أى صفحة ويب تتكون من ثلاثة نقاط أساسية، أو بمعنى أدق ثلاثة طبقات، وهم كما بالصورة التالية:
نلاحظ من الصورة أن أى صفحة تتكون من ثلاثة طبقات Three Layers، وهي طبقة Content، ثم طبقة Presentation، ثم طبقة Behavior، وسنأخذ نبذة عن كل واحدة منهم كالتالي:
1- Content Layer: وهي الطبقة المسئولة عن هيكلة الصفحة بشكل عام، والتي تكتب بلغة HTML، فإذا مثلنا مثلاً بناء صفحة الويب ببناء بيت، فإن كتابة الصفحة بلغة HTML مثل بناء البيت من الطوب الأحمر فقط، فأنت الآن قمت ببناء هيكل البيت فقط.
2- Presentation Layer: وهي طبقة تزيين البيت، وهي الطبقة التي تكتب بلغة CSS، فبعد أن قمت ببناء البيت من الطوب الأحمر، الآن أنت تقوم بتلوين البيت، وتزيينه.
3- Behavior Layer: وهي ببساطة طبقة الأجهزة الإلكترونية الموجودة بالبيت !، فهي تتحدث مع المستخدم، وتأخذ مدخلاته وتقوم بتطبيقها بداخل المتصفح، وهي الطبقة التى تكتب بلغة JavaScript، وتلك الطبقة لا تتعامل مع السيرفر، ولا تحتاج إلى مترجم أو مفسر سوى المتصفح فقط، فهي تتعامل فقط مع المتصفح، وسنعرف كيف تتعامل معه بعد قليل.
الآن تصميم صفحة الويب يكون على الترتيب باللغات التالية: HTML ثم CSS ثم JavaScript، لاحظ كلمة التصميم !
الآن إذا كنت أنا مثلاً مخترع لغة HTML، وقمت بجعل الرمز التالي يعبر عن شجرة:
T
وقمت بجعل الرمز التالي يعبر عن سيارة:C
فإذا قمت بكتابة الكود التالي سيظهر فى المتصفح شجرة وبجانبها سيارة:TC
ولكن كيف ستتم عملية الإظهار تلك؟ببساطة عن طريق المتصفحات Browsers، ولكن ما هي آلية هذا الفعل؟؟
ببساطة كل متصفح يحتوى على Render Engine، هذا الريندر عبار عن رسام، يرسم على لوحة بيضاء وهي المتصفح، أى أن المتصفح ببساطة ما هو إلا صفحات بيضاء، يقوم الريندر الخاص بكل متصفح برسم العناصر التي تأتيه من الصفحة المُراد الدخول إليها، أى إنه كلما كان الريندر إنجين الخاص بالمتصفح أفضل وأدق وأسرع، كلما كان المتصفح أفضل !
- متصفح Firefox يعمل على Render Engine يدعى Gecko.
- متصفح Internet Explorer يعمل على Render Engine يدعى Trident.
الآن لننتقل إلى موضوع جديد، وهو الـDOM، ما هو الـDOM؟
ببساطة الصورة التالية ستشرح لك مفهوم الـDom
الـParser هو عبارة عن برنامج يقوم بتحويل كود الـHTML إلى شكل شجري كما بالصورة الماضية، كمثال على كود HTML سيتم تحويله:
Hello
PHPGEEKAR.com
وظيفة الـParser تحويل كود الـHTML إلى هذا الشكل السابق، لأن المتصفح لا يفهم كود HTML، لكن الـParser هو من يفهمه، وهذا الشكل يدعى DOM إختصارًا لـ Document Object Model، وهو ما يقوم الـRender Engine برسمه على الصفحات البيضاء.
الآن سأصل معك إلى آخر نقطة: وهي الـ Refresh : وهي النقطة المهمة من وراء كل هذا الموضوع والتي من خلالها ستفهم جافاسكربت وهي عملية تحديث الصفحة والجميع يعرف انه عندما تريد تحديث الصفحة فإنك تضغط على زر تحديث او F5 ولكن ما أريده منك الآن أن تلاحظ الرسم الموجود بالأعلى عند عملية التحديث فإن العملية التي تحدث هي الرجوع إلى الشجرة و قراءتها وليس الرجوع لبداية الكود ومن ثم رسم الكود من جديد.
أما عن طريق JavaScript يمكنك تحديث عنصر معين بدلاً من إعادة تحميل الصفحة بأكملها من أجل إعادة تحديث عنصر واحد من الصفحة !
تلك هي الأساسيات المطلوبة من كل مطوّر ويب أن يفهمها بخصوص مفهوم هندسة الويب.
الخميس، 5 سبتمبر 2013
أفضل 10 طرق للعمل والربح من الإنترنت
مما لا شك فيه، أن الإنترنت الآن أصبح مصدرًا أساسيًا لدخل آلاف البشر حول العالم، ولكن ما يعتقده معظم الناس أن العمل على الإنترنت هو بالشيء السهل، ولكن هذا الإعتقاد هو ما جعل الكثير من الناس الذين أتخدوا قرارًا بالعمل على الإنترنت أن يتراجعوا عن تلك الفكرة، حيث لم يحصلوا على تلك الأموال الطائلة التى اعتقدوا أنهم سيحصلون عليها بتلك السهولة.
يجب أن نعلم جميعًا أن الربح من الإنترنت أو بمعنى أدق العمل على الإنترنت ليس بالشيء السهل إطلاقًا، خصوصًا فى الوطن العربي، ولكنه ليس بالمستحيل بالطبع، لأنك على الإنترنت لست مضطرًا على التعامل مع العرب فقط، بل يمكنك التعامل مع جميع مستخدمي الإنترنت حول العالم، وفى تلك المقالة سأسرد لكم -إن شاء الله- أفضل 10 طرق للعمل على الإنترنت تستطيع من خلالها الإعتماد على الإنترنت ليدر لك دخلاً جيدًا، مع الصبر والمثابرة والعمل بإجتهاد لتصل إلى ما تريده -بإذن الله-.
قد تستطيع عبر فكرة بيع بسيطة أن تحقق أعلى معدلات البيع، فقد قام شخص مصري ببيع عملة الجنية المصري الفضة؛ ولأن شكل العملة مميزة فقد استطاع أن يبيع أعداد كبيرة من العملة حول العالم !
بالطبع سيأتي عبر برنامج Google AdSense، فهو حتى الآن أفضل طريقة للربح من المدونات والمواقع بشكل عام، فكرة البرنامج هو أنك تقوم بوضع كود فى مدونتك، هذا الكود سيقوم بعرض إعلانات بشكل دقيق، تلك الإعلانات عندما يكون هنالك زائر على مدونتك، وضغط على هذا الإعلان فسيقوم بتحويل لك مبلغ من المال، هذا المبلغ يبدأ غالبًا من 0.01$ لكل ضغطة، ولكن كيف سيأتي لك الزوار لمدونتك؟
هنالك خطوات ، الخطوة الأولى وهي الإهتمام بالسيو او ما يسمى Search Engine Organization، وتستطيع التعلم الكثير من دروسه من هنا، والخطوة الثانية وهي الإهتمام بجودة المحتوى وكثرته فى مدونتك لكي تستطيع جذب إهتمام الزائر وجعله يستمر فى تصفح المدونة.
عملية الربح من التدوين قد تأخذ أكثر من سنة أو سنتين لكي تمتلك محتوى جيد وعدد زوار جيد.
نصيحة أخيرة لمن يريد العمل على الإنترنت، لن تستطيع أن تدير عملاً كاملاً يدر لك دخلاً على الإنترنت قبل مرور فترة طويلة، قد تكون أشهرًا او سنة أو اثنين، مع القيام بالكثير من المجهود، ولكنك إذا استمريت فى العمل ستجني ربحًا وفيرًا، وأكثر بكثير من أى وظيفة قد توّد أن تعمل بها، فالعمل على الإنترنت بمثابة مشروع، نجاحه مضمون إذا استمريت فى العمل وكثّفت المجهود وصبرت.
يجب أن نعلم جميعًا أن الربح من الإنترنت أو بمعنى أدق العمل على الإنترنت ليس بالشيء السهل إطلاقًا، خصوصًا فى الوطن العربي، ولكنه ليس بالمستحيل بالطبع، لأنك على الإنترنت لست مضطرًا على التعامل مع العرب فقط، بل يمكنك التعامل مع جميع مستخدمي الإنترنت حول العالم، وفى تلك المقالة سأسرد لكم -إن شاء الله- أفضل 10 طرق للعمل على الإنترنت تستطيع من خلالها الإعتماد على الإنترنت ليدر لك دخلاً جيدًا، مع الصبر والمثابرة والعمل بإجتهاد لتصل إلى ما تريده -بإذن الله-.
1- البيع على الإنترنت.
لست مضطرًا للبيع إلى العرب، بل يمكنك البيع إلى أى شخص يمتلك وصلة إنترنت فى العالم، وذلك عبر العديد من المواقع مثل Ebay و Amazon، وأيضًا يمكنك البيع عبر موقع مصري وهو موقع دوبيزل.قد تستطيع عبر فكرة بيع بسيطة أن تحقق أعلى معدلات البيع، فقد قام شخص مصري ببيع عملة الجنية المصري الفضة؛ ولأن شكل العملة مميزة فقد استطاع أن يبيع أعداد كبيرة من العملة حول العالم !
2- الربح عبر التدوين.
صراحةً من أصعب الطرق، والتي ستحتاج منك الصبر لمدة طويلة، ولكن خطواتها سهلة وواضحة، ما عليك سوى إنشاء مدونة بسيطة من موقع بلوجر، أو ووردبريس، أو تستطيع حجز إستضافة وتركيب سكربت الووردبريس عليها والبدء فى التدوين، ولكن إهتم بالمحتوى ثم المحتوى ثم المحتوى، جودة المحتوى وكثرته من أهم عوامل الربح، ولكن من أين سيأتي الربح؟بالطبع سيأتي عبر برنامج Google AdSense، فهو حتى الآن أفضل طريقة للربح من المدونات والمواقع بشكل عام، فكرة البرنامج هو أنك تقوم بوضع كود فى مدونتك، هذا الكود سيقوم بعرض إعلانات بشكل دقيق، تلك الإعلانات عندما يكون هنالك زائر على مدونتك، وضغط على هذا الإعلان فسيقوم بتحويل لك مبلغ من المال، هذا المبلغ يبدأ غالبًا من 0.01$ لكل ضغطة، ولكن كيف سيأتي لك الزوار لمدونتك؟
هنالك خطوات ، الخطوة الأولى وهي الإهتمام بالسيو او ما يسمى Search Engine Organization، وتستطيع التعلم الكثير من دروسه من هنا، والخطوة الثانية وهي الإهتمام بجودة المحتوى وكثرته فى مدونتك لكي تستطيع جذب إهتمام الزائر وجعله يستمر فى تصفح المدونة.
عملية الربح من التدوين قد تأخذ أكثر من سنة أو سنتين لكي تمتلك محتوى جيد وعدد زوار جيد.
3- تصميم وبيع الـT-Shirts.
إذا كنت تسطيع تصميم الـT-Shirts، فيمكنك تصميمها وعرضها على الإنترنت للبيع، توجد مواقع مثل CafePress، و SpreadShirt، يوفران إمكانية إنشاء متجر إلكتروني لك مختص ببيع الـT-Shits التي تستطيع تصميمها.4- العمل الحر Freelancing.
يعتبر العمل الحر الحل الامثل للمبرمجين والمطورين والمصممين وأيضًا المترجمين والكثير من المهن الأخرى، فالعمل الحر عبر الإنترنت عمل مربح، فتوفر الكثير من المواقع إمكانية العمل الحر من خلالها مثل موقع Freelancer.com، ويوجد موقعان عربيان لهذا الغرض أيضًا وهما موقع خمسات، وموقع خمسة خمسة، وقد يختلف نظام كل موقع عن الآخر، ولكن المواقع الكبيرة العالمية مثل Freelancer ستقوم بعمل إختبار لك فى نظام العمل فى الموقع قبل قبول عضويتك؛ ولذلك يجب دراسة كل موقع قبل الإشتراك فيه.5- تجارة الدومينات.
ظهرت حديثًا تجارة الدومينات، حيث أنك تستطيع شراء بعضًا من النطاقات الرخصية والتي تبدأ سعرها من 10$، وتقوم بيعها بسعر أعلى، وقد تمتلك نطاقًا مطلوبًا من شركة كبيرة، تستطيع عندها طلب مبلغ مالي كبير لشراء النطّاق، لي صديق اشترى نطاقًا من قبل وطُلِب هذا النطاق من شركة كبيرة، وقد باعه بمبلغ حوالى العشرة آلاف دولار !6- الخدمات المالية.
صراحةً ترددت كثيرًا من وضع تلك الطريقة، لأن معظمها يُعتبر ربا، لأنه تجارة فى الأموال، والفكرة هي أنك تستطيع شراء حسابات بنكية إلكترونية بها مثلاً 100$ ولكنك ستقوم بشراءها بسعر 80$ مثلاً، ثم تقوم بإستخدام تلك الأموال الإلكترونية فى بعض الأغراض الأخرى وبيعها جزء بجزء حتى تحصل على الـ100$ كاملة فى يدك مرة أخرى، وبذلك تكون قد كسبت 20$ بسهولة.7- خدمة العملاء.
يعتبر العمل فى خدمة العملاء عبر الإنترنت عملاً سهلاً، ومتوفرًا، ولكن مرتباته ضعيفة نوعًا ما، كما أنها تستهلك الكثير من الوقت تكون فيه مرتبطًا بالكمبيوتر حتى وإن لم يكن هنالك عملاء، ولذلك يمكنك ببساطة العمل فى خدمة العملاء لشركتين فى نفس الوقت ! طالما أن العمل سيكون عبر الإنترنت، فقد تستطيع التوفيق بين العملين بسهولة، ابحث عن تلك الوظائف فى الشركات عبر الإنترنت وستجد فرصتك بسهولة.8- العمل فى إشهار والسيو SEO.
الكثير من أصحاب المواقع والمدونات مستعدون لدفع مبالغ طائلة لك لكي تقوم بمجهود مكثف للإتيان بالزوار لمدوناتهم لكي يتفرغوا لكتابة المحتوى الذي سيحافظ على بقاء الزوار على المدونة للربح من خلالهم !، ولذلك إذا كنت خبيرًا فى السيو، او قد تعلمت السيو وطرق إشهار المواقع لتوك، تستطيع وضع عروضك على بعض المنتديات مثل ترايدنت، وستجد الكثير ممن سيهتمون بإشهارك لموقعهم، ولكن فى البداية لا تطلب أسعارًا عالية، وقم بمجهود مكقف ولا تيأس ابدًا، فقد تستغرق شهور ليصلك أول عميل ! لكن بعدها سيفتح لك باب الرزق من أوسع أبوابه -إن شاء الله-.9- التدريس.
إذا كنت تجد نفسك تستطيع أن تقوم بشرح دروسًا فى مجالك أيًا كان، عبر الدروس المكتوبة الفيديو، تستطيع ببساطة عمل دروس وبيعها على الإنترنت، ولكن من المفضل أن تقوم بعمل كورسات كاملة ثم تقوم ببيعها على الإنترنت، كما توجد مواقع تهتم بكتاباتك للدروس، وستقوم بدفع بعض الأموال لك للقيام بذلك ! مثل موقع Tutor، أيضًا كان يوجد موقع عربي يهتم بكتابة الشروحات والدروس يدعى (درّسني)، لكن لا أعلم لماذا توقف، قد يعود فى أى فترة !10- بيع المنتجات اليدوية.
إذا كنت تقوم بعمل بعض الأعمال اليدوية، او بعض الرسومات والعمال الزخرفية، يمكنك بعض تلك الأعمال عبر المواقع التى تم ذكرها فى الأعلى مثل Ebay و Amazon، أو يمكنك بيعها على بعض المواقع المهتمة بهذا النوع من المنتجات مثل، موقع Esty، وموقع ArtFire.نصيحة أخيرة لمن يريد العمل على الإنترنت، لن تستطيع أن تدير عملاً كاملاً يدر لك دخلاً على الإنترنت قبل مرور فترة طويلة، قد تكون أشهرًا او سنة أو اثنين، مع القيام بالكثير من المجهود، ولكنك إذا استمريت فى العمل ستجني ربحًا وفيرًا، وأكثر بكثير من أى وظيفة قد توّد أن تعمل بها، فالعمل على الإنترنت بمثابة مشروع، نجاحه مضمون إذا استمريت فى العمل وكثّفت المجهود وصبرت.
الاشتراك في:
الرسائل (Atom)