الآداة السحرية firebug للتعديل على صفحات الإنترنت Online مباشرتاً


السلام عليكم ورحمة الله وبركاته
اليوم معنا آداة من افضل الآدوات التي يمكنك أن تحصل عليها في عالم تطوير الإنترنت, انها الاداة الافضل firebug لتعديل صفحات الانترنت وهي قيد التشغيل !!
كما أن من فوائد الآداة التي تجعل منك مصمم محترم هي انك تقوم بتجربة ما تقوم بعمله قبل ان تطبق هذا على موقعك او مدونتك
كيف ذلك ؟ هو ما سوف نتناوله الان ,, اولاً الآداة تعمل بمنتهى الإحترافية على متصفح FireFox فقط, لذلك يلزمنا متصفح فاير فوكس يمكنك تحميل الاصدار الاخير من ( هنا )
اما عن تركيب الآداة , ادخل هنا على هذا الرابط  , وتابع الصور ..

ملاحظة هامة : لرؤية صور الشرح بوضوح إضغط على الصورة مرة واحدة فقط.

بعد الدخول على رابط الآداة ستجد الموقع كهذذا
إضغط على Add to Firefox

ثم انتظر حتى يكتمل التحميل

حتى تأتي هذه النافذة و اضغط Install Now

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

ستجد الاداه هكذا في اسفل الموقع
مقسومة نصفين النصف الاكبر هو كتابة الـ HTML و XML
النصف الاصغر هو كتابه CSS
 بقى لنا ان نحدد شئ في المدونة او الموقع و نقوم بالتعديل عليه

انظر لهذا المربع الذي يتخلله سهم صغير, كل شغلنا سيكون من هذا المربع
اضغط عليه وجرب الوقوف على اي شئ في المدونة

انا وقفت على عنوان موضوع انظر ,, تم تحديده بإطار ازرق
اضغط عليه الان وانظر لمكان الاداة

انظر جيداً
1- هو مكان العنوان في صفحة html
2- هو مكان العنوان في صفحة CSS
 وبهذا يمكنك التعديل على اي شئ تريد

انظر هنا ,, ضغطت على فونت حتى اعدل على اي شئ اريده
وانفترض انني اريد تكبير الفونت؟؟ سأقوم بتغيير الرقم 18 الى 30 وننظر في الصورة التاليه

تم تكبير العنوان
 إذا الآداة لها فائدة آخرى جميلة , وهي رؤية ما تقوم بعمله وهل هو مناسب ام لا قبل التطبيق على قالب المدونة
وإذا أردت تطبيق ما فعلته في المدونة فانظر الصورة التالية

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

اترككم في حفظ الله
السلام عليكم

0 التعليقات:

قواعد اساسية لابد منها لتعريف كتابة اوامر الـ CSS

ميني سوفت

السلام عليكم ورحمة الله وبركاته ..

درسنا اليوم من اوائل دروس دورة تعلم الكتابة لغة CSS
يدور حول اساسيات و قواعد لابد من توفرها حتى يتاح لك استخدام هذه الخاصية بنجاح.
بالنسبة للمدونات بلوجر فدائماً هنام قاعدة ثابتة وهي , اكواد CSS تبدأ بوسم وتنتهي بوسم كما التالي:

<b:skin><![CDATA[
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
]]></b:skin>
اما في المواقع والمدونات الآخرى وايضاً بلوجر يتم استخدام الآكواد بالشكل التالي:

<style type='text/css'>
body {
background: #00CCFF;
margin: 0;
padding: 0;
color: #333333;
font: normal normal 14px 'Droid Arabic Naskh',Arial,Tahoma,Sans-Serif;
text-align: center
}
a:link,a:visited {
color: #13A7DA;
text-decoration: none;
outline: none;
}
a:hover,a:active {
color: #292929;
text-decoration: none;
outline: none;
}
</style>
ما هي القاعدة الثابتة  في كتابة أكواد CSS ؟ التالي ..

#outer-wrapper {padding3px;}

سوف نأخذهم بالتدريج من الشمال لليمين ونشرح اسم كل جزء ملون في هذا الكود

# المعرف الذي يوضع في صفحات html والذي يسمى id ويمكن ان يكون مكانه فئة وهي النقطة التي تسمى class , ويمكن استخدام كل شئ في صفحة html من روابط و معرفات وفئات

outer-wrapper يسمى في الكود Selector  او المُحدد ولا يشترط ان يكون outer-wrapper, بل المقصود الموضع نفسه في الكود

} بداية كتابة الكود

padding  هي من ضمن الخصائص التي تتحكم في تصميم الموقع او المدونة , وليس المقصود هنا padding بل المقصود المكان نفسه في الكود وينتهي دائماً ب نقطتين فوق بعضهم هكذا

3px هذا المكان في الكود يُسمى value او القيمة المعطاه للخاصية المحددة

; الفاصلة المنقوطة تكون فاصل بين كل كود والاخر مثال الكود هذا 

#outer-wrapper {padding: 3px; margin: 0px;}


{ نهاية مجموعة الأكواد كما في الكود السابق هذا 

وبهذا نكون قد اطلعنا على اساس وضع اكواد هذه التقنية الجميلة
اترككم في رعاية الله إلى درساً جديد من دروس الدورة

0 التعليقات:

ما هو id وما هو class والفرق بينهم

ميني سوفت


السلام عليكم ورحمة الله وبركاته
درسنا اليوم من دروس دورة تعلم تقنية CSS وهو التعرف على الفئات والمعرفات id و class والفرق بينهم
الـ id و الـ class هما المعرفات الاساسية التي توضع داخل وسوم  HTML و XML لتتعرف عليها تقنية الـ CSS ويتاح لك التعديل على كل كبيرة وصغيرة بالموقع من خلفية للموقع واطارت و الوان للخطوط و الوان لكل شئ و خلفيات للصور و تحديد حجم الصور و الخطوط ايضاً وشكلها
باختصار تستطيع ان تقول ان تقنية الـ CSS مسئولة عن كل شئ مرتبط بشكل وتنسيق وتصميم الموقع.

إجابة سؤالنا, ما هو id وما هو class والفرق بينهم، التالي :
id يسمى مُعرف .. class يسمى فئة
id يمكن أن يندرج تحته فئات كثيرة ولا يمكن ان يتكرر اسمه .. class يمكن ان يتكرر اسمه مرات ومرات على عكس id
id يكتب قبله #  .. class يكتب قبله دائماً . نقطة ,, ودعونا نأخذ مثال عملي :

-id مكتوب في صفحة HTML:
<div id='welcome'>to MiniSoft</div>
-id مكتوب في صفحة CSS
  #welcome {
    color: #000000 ;
    font: normal normal 12px Tahoma, Geneva, sans-serif;
  } 
نلاحظ أن id اصبح ( # ) وكتبت بجانبه welcome لأنها مكتوبة بجانب id في صفحة HTML

-class مكتوب في صحفحة HTML
<div class='mini'>soft</div>
-class مكتوب في صفحة CSS
  .mini {
    background-color: #CC0000;
    text-align: center;
  }
نلاحظ أن class اصبح نقطة ( . )  و كتبت بجانبها mini لأنها مكتوبة بجانب class في صفحة HTML

نأخذ مثال آخر على كيفية تكرار الفئة class :
<div class='mini'>ميني سوفت على تويتر</div>
<div class='mini'>ميني سوفت على جوجل كروم</div>
<div class='mini'>ميني سوفت ع الفيس بوك</div>
 كل هذه الوسوم المتشابهه تكتب في صفحة CSS هكذا:
  .mini {
    background-color: #CC0000;
    text-align: center;
  }
.إذاً فهمنا أن الوسم هو الملون و الذي يوجد بداخله كلمات كما رأينا, هذا بعكس المعرف id لا يمكن ان يتكرر نفس الوسم في نفس الصفحة او القالب كاملاً,,,

اتمنى ان تكون وصلت المعلومة والى اللقاء ان شاء الله في درس آخر من دروس الدورة 
السلام عليكم 

2 التعليقات:

جديد : الطريقة المضمونة جداً لإضافة تعليقات الفيس بوك للمدونة و تحديد صورة خاصة بموقعك لعرضها مع مشاركاتك ع الفيس بوك



السلام عليكم ورحمة الله وبركاته

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

إذهب إلى هذا الرابط ( هنا ) ثم تابع الصور.

بمجرد دخولك للموقع ستجد هذه النافذة
1- اكتب مثلاً تعليقات الفيس بوك
2- اكتب اي شئ بالانجليزية
3- اتركها اخرى
4- اضغط متابعة
اكتب ما تراه امامك في هذا المربع ثم إضغط متابعه 
ستنتقل الى هذه الصفحة إضغط على Edit App

بعد ذلك تنتقل الى هذه الصفحة وهي المهمة
1- أكتب دومين بلوجرblogspot.com إن كنت صاحب موقع واسمه مثلاً ahmad فأكتب ahmad.com
2- اجعل هذه معطلة
3- اضغط هنا ثم اكتب في الخانه رقم 4 اسم موقعك كاملاً
5- اضغط حفظ التغييرات
ثم إحفظ الرقم الذي تجده في هذا المكان لأننا سوف نحتاجه
 إلى هنا انتهى دور الفيس بوك في شرحنا , بقى فقط التعديل على قالب المدونة , اتبع التالي:

من لوحة تحكم مدونتك إختر قالب
ثم إختر تحرير HTML
في أول القالب ستجد هذا الوسم 
<HTML
ستجد بجواره روابط او تجده فارغاً المهم سوف نضع بجانبه التالي 
 prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'
ليبقى هكذا
<HTML  prefix='og: http://ogp.me/ns#' xmls:fb='http://ogp.me/ns/fb#'
ثم ابحث عن الوسم 
</body>
وضع فوقه مباشرتاً هذا الكود 
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({xfbml: true, appId: كود الفيس بوك });};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + 
'//connect.facebook.net/ar_AR/all.js'
document.getElementById('fb-root').appendChild(e);}());
</script>
 الان ابحث عن هذا الوسم و لسهولة البحث ابحث تحديداً عن كلمة comments ثم قارن شكل الوسم بالوسم الذي تحصل عليه
<div class='comments' id='comments'>
 ثم ضع تحته هذا الكود مع تغيير الرقم 600 ليتناسب مع عرض مدونتك او اتركه ثم نفذ الخطوات وغيره فيما بعد
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/><fb:comments width='600' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>
 الآن ابحث عن الوسم <head> ثم ضع تحته هذا الكود

<!--Start Metadata Facebook -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='اسم المدونة مع وصف قصير ' property='og:site_name'/>
<meta content='صورة 256×256 تعبر عن مدونتك' property='og:image'/>
<meta content='كود الفيسبوك' property='fb:app_id'/>
<meta content='معرف حسابك ع الفيسبوك' property='fb:admins'/>
<meta content='website' property='og:type'/>
<meta content='article' property='og:type'/>
<!-- Metadata Facebook End -->

ضع اسم المدونة مع وصف قصير : ميني سوفت للشروحات والبلوجر
صورة تحمل شعار مدونتك
كود الفيس بوك الذي احتفظنا من قبل
معرف حسابك على الفيس بوك كيف تأتي به ؟ افتح الرابط التالي
https://graph.facebook.com/Min0oSoft
اكتب بدلاً من الاسم الاحمر اسمك انت ع الفيسبوك ,, كيف تأتي به .؟؟ أنظر الصورة التالية 
1- اضغط على اسم حسابك كما بالصورة
2- ستجد الاسم هكذا 
بعد فتح الرابط المتبوع بأسمك ستجد كود مثل هذا
{
   "id": "100004490551583",
   "name": "\u0645\u064a\u0646\u064a \u0633\u0648\u0641\u062a",
   "first_name": "\u0645\u064a\u0646\u064a",
   "last_name": "\u0633\u0648\u0641\u062a",
   "link": "http://www.facebook.com/Min0oSoft",
   "username": "Min0oSoft",
   "gender": "male",
   "locale": "ar_AR"
}
ما يهمنا هو هذا الكود الملون بالاحمر وهو معرف حسابك , ضعه في مكانه الذي اشرنا اليه ثم انتقل الى هذا الرابط ( هنا ) واتبع التالي:
سيفتح معك الرابط صفحة بها كلمة الإعدادات كما ترى
تفتح امامك هذه النافذة فاتبع التالي
1- اذا كان اسمك على الفيسبوك عربي او انجليزي اكتب اول حرف فقط وسيظهر قائمة بأسمك واسماء اصدقاءك اختر اسمك
2- لتجده في الخانه رقم 2 كما هو موضح
3- ضع اشارة هنا
4- اختر بالتوقيت الزمني
5- اضغط حفظ
وبهذا ينتهي الشرح وشكراً لكم لحسن المتابعه

0 التعليقات: