شروحات يوتيوب | Youtube tutorials

شروحات يوتيوب |  Youtube tutorials

- قناة مجلة الملايين على اليويتيوب 
طريقة جدولة فيديوهاتك - لكي تنشر نفسها بشكل تلقائي حسب التاريخ | How To Schedule Your YouTube Videos
Youtube Thumbnails - الصورة المصغرة
- طريقة الحصول على رابط rss لقناة يوتيوب
-
-

فوتوسكيب PhotoScape

شرح تصميم عبارات مصورة ببرنامج | فوتوسكيب | PhotoScape | صور بـ 3 إطارات
تصميم صورة متحركة ببرنامج فوتوسكيب PhotoScape
تصميم بطاقة - كل عام وأنت بخير - بواسطة برنامج فوتوسكيب PhotoScape
وضع إطار حول الصورة - باستخدام برنامج فوتوسكيب PhotoScape
تصوير الشاشة أو أي صورة على الجهاز بواسطة برنامج فوتوسكيب PhotoScape
استخدام أداة الاستنساخ Clone Stamp + أداة القص | دروس وتطبيقات فوتوسكيب PhotoScape
تدوير الصورة بواسطة برنامج فوتوسكيب | Photoscape


-

دروس ووردبريس Wordpress

1- تعلم الوورد بريس من البداية لـ إنشاء موقع من استضافة محلية
2- شرح طريقة تغيير لغة لوحة التحكم Interface Language في مدونة ووردبريس مع الحفاظ على لغة المواضيع العربية
3-كيف أظهر واجهة تحرير عنوان الموقع في وورد بريس

تطبيق تصميم موقع (سما )

هنا محاولات للإجابة على أسئلة التمارين هنا , ولكن تغيير بعض الأسماء كاسم الموقع والصفحات والروابط وغيرها .
الموقع ليس رسمي , بل للتدرب فقط على ما تعلمناه هنا (  Microsoft Expression Web Tutorials )
- نفتح برنامج مايكروسوفت اكسبريشن ويب4
- site - new site -Empty site -
- نسمي الموقع بكتابة الامتداد مثلا :  \sma
- ok


ننشيء الملفات الرئيسية
images - JS - Css

11-هنا نتعلم عن ورقة تنسيق الأنماط css | الربط | التطبيق | أنواع تنسيق css | الوسم | الصنف | الهوية

 فهرس الدروس  ( Microsoft Expression Web )

 الدرس السابق (  Microsoft Web  )

- عليك أن تتعلم css لصياغة المخطط layout
ليست لغة صعبة لكن لابد منها.


الآن ..
- سننشيء صفحة html جديدة ونسيها test.html
- أيضا سننشيء صفحة في ملف css ونسميها styles.css

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

الكود سيكون في قسم الجسم body كالتالي:

<div id="الكتلة الأولى">
<h1>  عناوين الأخبار </h1>
<p>  هنا نص خبري </p>
<h2>  عناوين الصحف </h2>
<p> هنا نص صحفي  </p>

<ul>
<li>  كريم </li>
<li>  أسعد </li>
<li>  مصطفى </li>
</ul>

<a href="http://www.w3schools.com"> أذهب إلى هذاالموقع </a>

<ol> 
<li>  الإمارات </li>
<li>  الكويت </li>
<li>  قطر </li>
</ol>
<img src="../khaleej.jpg" />
</div>


<div id="الكتلة الثانية">
<h1> أخبار عالمية </h1>
<p>   الهند</p>
<h2>  أخبار محلية </h2>
<p>    الرياض</p>

<ul>
<li>  أسماء </li>
<li>  لطيفة </li>
<li>  جيهان </li>
</ul>

<a href="http://www.w3schools.com"> أذهب إلى هذاالموقع </a>

<ol> 
<li>  برتقال </li>
<li>  تفاح </li>
<li> عنب </li>
</ol>
<img src="../fruit.jpg" />
</div>

مالذي يجب معرفته عن لغة css ؟
- يقوم الاختصار css على العبارة  Cascading Style Sheets أي أوراق الأنماط المتتالية .
- لا نفعل كل شيء بـ css ولكن معظم الأشياء تقوم بها css
 - عليك أن تتعلم في css كيف تربط صفحة css بـ صفحة html .
- css مثل html في كونه لا يهتم بوسع المساحات البيضاء أثناء كتابة الكود. يعني لا يهم إن كتبت التنسق هكذا:

{   
 font-size:12px;
 }

أو
هكذا

{  font-size:12px; }

أيضا يمكن جعل كل الصفات على سطر واحد هكذا : 

name { property:value;  property:value;  property:value; }

- css ليست حساسة لحالة الأحرف فلايهم إن كتبتها بحروف كبيرة أم صغيرة , لكن هناك استثناء فإسم الاسلوب يجب أن يُطابق الوسم المعني في صفحة html . فمثلا إذا كان اسم الصنف في صفحة html هو soso فيجب أن يكون نفس الاسم في صفحة css .
- عليك أن تعرف أين يُكتب ؟ 1- إما يُكتب في صفحة مستقلة   أو في نفس الصفحة ويكون في قسم الرأس. 
- وعليه فسيكون هناك وسم لربط الصفحتين , هذا الوسم يحتوي على أربعة سمات (خصائص) مختلفة.
الوسم هو :     link    وهو فردي وليس ثنائي .

السمات الأربعة وقيمها هي:

href

وهو كما نعرف للرابط (المسار ) كاسم ملف الصفحة وهنا سيكون ملف صفحة css , فالقيمة مثلا اسم ملف الصفحة التي سأربط بها
css/styles.css

rel

 وهو اختصار relationship أي العلاقة بين ملف css والملف الذي نود ربطه به , فالقيمة مثلا نوع تنسيق الصفحة الأخرى التي سأربط بها
stylesheet

 type

النوع : وهو نوع الورقة التي نستخدمه والتي ستكون ورقة تنسيق الأنماط المتتالية css فتكون القيمة هكذا:
text/css

media

 وهي تعني على ماذا ستكون المخرجات , وهي بالطيع ستكون الشاشة

 لانه هناك ما يسمى screen أو  print وما سنستخدمه هو قيمة screen .

مثال:

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">

انتبه فلقد واجهتني مشكلة في الكود حيث يظهر خطأ في كلمة link , واكتشفت أني وضعته داخل وسم الرأس ثم داخل وسم العنوان , لذا انتبه الصحيح أن تضعه داخل وسم الرأس ولكن ليس بداخل وسم العنوان , ليكون بشكله الصحيح كالتالي : 

<head>
<title>  </title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
</head>

ماذا سأفعل الآن لأطبق ورقة الأنماط css على صفحة html ؟
- سأفتح ورقة الأنماط
- سأكتب فيها الكود التالي :

h1 {
    color:fuchsia;
}

- سأعمل save
- سأذهب إلى ورقة html لأرى أن الخط بـ h1 قد تغير إلى اللون الفوشي (الزهري) لأني وكما ترون في ورقة الأنماط جعلت تنسيق خط h1 يكون دائما باللون الفوشي. بعد هذا ستجد أن أي نص توسمه في ورقة html بخط h1 يصبح بهذا اللون

* لاحظ أنه :
طريقة التنسيق في css :
1- تكتب الوسم مثلا   h1
2- ثم تفتح أقواس متعرجة
3- تكتب السمة , ثم نقطتين رأسيتين , ثم القيمة , ثم الفاصلة المنقوطة

نتيجة ما سبق :

بعد تطبيق css على صفحة html

الآن سنقوم بتغيير بعض الإعدادات : (سنعرف لماذا في الشرح ) ..
tools - Page Editors Options - IntelliSense
نزيل علامة الصح من الخيار :
css selector closing brace

سنحذف التنسيق السابق في ورقة css

هناك 3 أنواع رئيسية من ورقة الأنماط :  (  Cascading Style Sheets  )
1- أسلوب الوسم tag
2- أسلوب الصنف class
3- أسلوب الهوية id

تكتب الأنواع السابقة بنفس الطريقة , لكن طريقة تطبيقهم تختلف من نوع لآخر.

ما الفرق بين أسلوب وسم tag و اسلوب class والهوية id ؟
أسلوب tag يصيغ وسم محدد في ورقة html كما فعلنا في وسم h1 وسينسق أي وسم يقابلة بهذا الاسم .
وإذا عملت حفظ ثم ذهبت لصفحة html ستجده تطبق مباشرة .
أما أسلوب class  سيطبق التنسيق فقط على العنصر (الوسم ) في html الذي فقط يحمل ميزة class .
وإذا عملت حفظ ثم ذهبت لصفحة html سوف ( لن ) تجده قد تطبق حتى تنادي عليه بذكر اسمه في صفحة html . 
أما الهوية id
تشبه class لكن غالبا الهوية id تتعلق بالكتلة   div والقسم   span

- الصنف ممكن يُطبق على وسم محدد دون الآخرين وإن كانت الوسم الاخرى مثلة مصاغة بلون واحد. حث يمكن للـ class تغيير ذلك الوسم دون غيره.

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

الصيغة الأساسية

name {

property:value;

}

المعنى بالعربي

الاسم {

الخاصية:القيمة;

}

مثال :

h1 {
    color:fuchsia;
}

يعني الاسلوب بهذا الاسم name  لديه هذه الخصائص مع قيمها.

قد يكون للأسلوب خاصية الخط  أيضا مثلا :

p {   
 font-size:12px;
 }

لننشيء أسلوبا الآن :

سأنسق ترويسة h1 :

سأكتب أسمها وافتح أقواس متعرجة . هكذا:

h1 {

}

سأكتب اسم التنسيق h1 والصفة الخاصة بنوع الخط وهي   font-family

عليك أن تعرف أن بخصوص عائلة الخطوط , يجب أن يكون الخط غالبا معرفا في متصفح الزائر. 

عندما تكتب صفة font-family فإن مايكروسوفت إكسبريشن ويب يعطيك خيارات لعائلة من الخطوط وليس فقط خط واحد. 

لماذا عائلة ؟ احياط لتوافر أكثر من خط على متصفح الزائر.

هكذا: 

font-family:Arial, Helvetica, sans-serif;

ثم سأنسق بـ حجم الخط فتكون الصفة  font-size

بالنسبة للخط ممكن أن يكون بالبكسل   px   أو em
لكننا سنستخدم الـ بكسل , لكن الطابعات لا تتعامل عادة بالبكسل , تستخدم points النقاط.
سيكون التنسيق هكذا :

font-size:36px;

سأكتب تنسيق اللون : 

سأجعل اللون أحمر , وليس أزرق , لان الأزرق غالبا للروابط . مع العلم أن بإمكاننا اختيارهـ . 

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

حيث إن هناك ما يقارب 60 قيمة للألوان. 

سيكون التنسيق هكذا : 

color:#00CC00;

أما التنسيق الخاص بخط الترويسة h1 ككل فسيكون هكذا :

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#00CC00;
}

لنعمل حفظ , ثم نذهب إلى صفحة html لنرى كيف أثر التنسيق عليها : 

النتيجة تغير خط ولون عبارة ( عناوين الأخبار ) , و عبارة ( أخبار عالمية ) 

كيف نكتب أسلوب الصنفclass في ورقة الأنماط css ؟
- يجب أن يبدأ الصنف بنقطة.
- يجب أن يكون له اسم

مثال :
سأسمي الصنف (ريم ) , سجعل صفاته هي :
اللون الأزرق , ونوع الخط المائل
سيكون هكذا :

.reem {color: #6699FF; font-style:italic; }

سأذهب إلى صفحة html لأجد النتيجة :

سوف لن يكون هناك أي أثر لانه اسلوب صنف وليس اسلوب وسم 

(كيف أطبقه إذا ؟)

بالذهاب إلى صفحة html  ومناداته باسمه ووضعه كـ سمة في الوسم الذي أريد أن أطبقة عليه 

مثلا أريده أن يتطبق على ما وسم بـ h2

إذهب إلى هذا الوسم , واكتب فيه اسم الصنف لكي أناديه من صفحة css .

كنا في صفحة css قد بدأناه بنقطة 

لكن في صفحة html سنذكر كلمة class ثم علامة مساواة والقيمة بداخل التنصيص هي اسم الصنف وكما اسميناه (ريم )

هكذا : 

<h2 class="reem">  عناوين الصحف </h2>

وبما أن الصنف لا يطبق إلا بمناداته فسأطبقه أيضا على أحد , وليس (كل) بل أحد فقرات التعداد غير الرقمي ,
هكذا:

<li class="reem">  قطر </li>

وسأطبقه على النص في الكتلة الثانية بنفس الطريقة
هكذا :

<p class="reem">    هنا نص مقالي</p>

سأقوم الآن بتنسيق الكتلة div :
سأنسق في صفحة css خلفية الكتل كلها .
هكذا :

div {background-color:#FF9966; }

سأذهب إلى صفحة html لأرى النتيجة : 

بتلك الطريقة تم التطبيق على كل الكتل, لكن ماذا إن أردت استهداف فقط خلفية الكلتة الثانية ؟

أها ..

هنا يأتي عمل الهوية id

- في ورقة css نقوم بتنسيق هوية يتم تطبيقها هلى الكتلة الثانية فقط

- لتطبيق الهوية يجب أن آخذ نفس اسم الكتلة الثانية 

وكنت قد كتبت اسمها بالعربية ( الكتلة الثانية ) في صفحى html سأجعل اسمها بالانجليزية حتى لا يتلخبط الكود سأسميها 

block2

- ثم سأعود إلى صفحة css والطريقة الصحيحة لكتابة اسم الهوية هو أن تبدأ بـ هاشتاق ثم الاسم المطابق 

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

هكذا :

#block2 {background-color:#FF9966; }

النتيجة في صفحة html : 

لاحظ أن الكتلة الأولى باللون الأبيض كما هي , والكتلة الثانية أصبحت ملونة لأننا طبقنا عليها الهوية. 

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

هكذا في css : 

#jojo { color:#990099; }

ونناديها في html , هكذا :

<h2 id="jojo">  أخبار محلية </h2>

ستكون النتيجة أن أحد العناوين أصبح باللون البنفسجي.

10- ملئ محتويات الكتل div | صورة الشعار | صور أزرارالمواقع الاجتماعية | الشريط الأعلى والفرعي والجانبي | الفوتر | محتوى المقالات - #ExpressionWeb

 فهرس الدروس  ( Microsoft Expression Web )

 الدرس السابق (  Microsoft Web  )

في الدرس السابق قمنا بعمل الأقسام باستخدام الوسم الثنائي div بـ سمة الهوية التي تعرف كل قسم.

نقوم هنا بمليء الأقسام بالمحتويات من الصور :

لاحظ أننا سنحتاج وبشدة وسم التعداد غير الرقمي لأنه يُساعد على صف المعلومات ..

الأدوات : 

أولا علينا نجد من الانترنت صور لتحميل وجعلها في ملف والصور التي سنحاجها هي :

1- صورة شعار الموقع مثلا بعض 200 و طول 75 بكسل

2- صور المواقع الإجتماعية سأختار 3 (يوتيوب , تويتر, فيسبوك )

هذه الصورة التي استخدمتها, يمكنكم حفظها والتطبيق بها : 

طريقة العمل: 

1- نضيف الشعار داخل قسم logo :

<div id="wrapper">  
              <div id="top">    
              <div id="logo">    <img src="../ويب/Logo.jpg" />     </div>

              <div id="social-media">    </div>
              </div>
<div id="topnav">    </div>
<div id="banner">    </div>
<div id="subbanner">    </div>
<div id="content">    </div>
<div id="rightside">    </div>
<div id="footer">   
</div>

لو ضغطت على مشهد design فستكون النتيجة بهذا الشكل: 

 لا تقلق حول شكل الصيغة , فنحن نطبق الأساسيات أولا. 

2- نصيف أزرار المواقع الاجتماعية داخل social-media مع جدنا على المواقع الاجتماعية : 

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

- على الأرجح أننا سنحتاج إلى css للتنسيق ولكن دعك من هذا الآن ..

سنحتاج إلى وسم قائمة غير مرتبة وهو ul وللعناصر بداخلة il والسبب أننا سندرج أزرار المواقع الاجتماعية على شكل قائمة. 

وبما أنها 3 أزرار فسيكون كود القائمة بهذا الشكل : 

  <ul> 
<li>   </li>
<li>   </li>
<li>   </li>
 </ul>

في كل وسم il سنضيف صورة خاصة بالموقع الاجتماعي المعني وهذه الصورة هي (الزر) .

ليكون شكل الكود هكذا:

  <ul> 
<li> <img src="../ويب/مواقع اجتماعية/facebook.jpg" />   </li>
<li> <img src="../ويب/مواقع اجتماعية/Youtube.jpg" />  </li>
<li> <img src="../ويب/مواقع اجتماعية/twitter.jpg" /> </li>
<li>   </li>
 </ul>

سأكتب تحت قائمة الازرار اتصل بنا على الرقم 0000000

 لذا سأستخدم وسم p 

ليكون بهذا الشكل :

  <ul> 
<li> <img src="../ويب/مواقع اجتماعية/facebook.jpg" />   </li>
<li> <img src="../ويب/مواقع اجتماعية/Youtube.jpg" />  </li>
<li> <img src="../ويب/مواقع اجتماعية/twitter.jpg" /> </li>

<p> اتصل بنا على الرقم 000000 </p>
<li>   </li>
 </ul>

سأحول على مشهد التصميم لأرى النتيجة. ستكون بهذا الشكل : 

 3- سنملئ كتلة الـ شريط العلوي top navgation : 

سنحتاج أيضا إلى وسم القائمة غير الرقمية وبما أن الشريط يحتوي على روابط نصية فإننا سنحتاج إلى وسم a و السمة الجالبة للرابط href سواء ربطناه بصفحة من صفحات الموقع أو رابط خارجي

الروابط النصية هي ( أهلا , عن الموقع , المنتجات , الخدمات , اتصل ) 

سيكون الكود هكذا : 

<div id="topnav">  
<ul> 
<li><a href="index.html">  أهلا وسهلا </a>   </li>
<li><a href="about.html">  عن موقعنا </a>   </li>
<li><a href="products.html">  المنتجات </a>   </li>
<li><a href="services.html">  الخدمات </a>   </li>
<li><a href="contact.html"> اتصل بنا  </a>   </li>

 </ul>

أما إذا حولت على مشهد التصميم فسنجده أصبح هكذا : 

 4- سنملئ كتلة العنوان banner :

سنحتاج إلى صورة , الصورة التي لدي هي بعرض 700 في 200 طول إنش. 

الكود بعد إضافة الصورة هو : 

<div id="banner">
<li> <img src="../ويب/صورة العنوان/Banner.jpg" />   </li>
   </div>

النتيجة بعد إضافة صورة لـ كتلة البانر banner :

5- سنملأ كتلة الـ العنوان الفرعي: 

كل ما احتاجه هنا هو فقط كتابة نص. 

سأكتب النص بداخل وسم الترويسة الثنائي وهو h2 أو إن شئت h3

الكود : 

<div id="subbanner">  
<h3>  العلم نـور وفي الأجواء منتشر والفخر بالعلم لا بالمال نفتخـرُ   </h3>
 </div>

شكل النص في مشهد التصميم : 

6- سنملأ كتلة المحتويات content وهي عادة تخص المقالات والمواضيع والصور  :

للعنوان سأحتاج الوسم h2

للمقال أو أي نص سأحتاج الوسم p

للصورة سأحتاج الوسم  img

لن نستخدم وسم التعداد كما استخدمناه في أزرار المواقع الاجتماعية. 

سأضيف نصا أخر له عنوان : أيضا سأستخدم الوسمين السابقين h2 و  p 

كود كتلة المحتويات هكذا : 

<div id="content"> 
<h2>  فوائد القراءة </h2>
<p>  إن القراءة ترفع الجهل, وتطرد الحزن والهم , وتنور العقل, وتُكسب القارئ التجارب.</p>

<img src="book%201.jpg" />
<img src="book%202.jpg" />
<img src="book%203.jpg" />

<h2> من أقوال الدكتور سوس عن القراءة  </h2>
<p>  كلما قرأت أكثر كلما عرفت أشياء أكثر،كلما تعلمت أكثر كلما حققت إنجازات أكثر </p>
  </div>

بعد  التحويل إلى مشهد التصميم : 

7- سنملأ كتلة الشريط الأيمن الجانبي rightsidebar : 

عادة في المواقع تجد في الشريط الجانبي كالندر (التقويم ) , آخر المقالات, حكم.. الخ. 

سنستخدم وسم ترويسة كما فعلنا وهو h2 , وسم نص p , ووسم صورة img

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

شكل الكود : 

<div id="rightside"> 
<h2 class="auto-style1">  حكمة اليوم </h2>
<p> العلم نور والجهل ظلام </p>
<img src="صورة%20تقويم.jpg" />

  </div>

بعد التحويل إلى مشهد التصميم : 

8- وضع نص في قسم الأسفل من الصفحة footer: 

 غالبا يُكتب في الـ footer حقوق الموقع كتاريخ الإنشاء واسمه ..الخ

رمز كتابة الحقوق هو دائرة بداخلها حرف الـ c والكود الخاص به هو

 علامة حرف الواو ثم كلمة copy ثم فاصلة منقوطة

&copy;

 سيكون الكود هكذا :

<div id="footer">   
<p>&copy; copyright 2016  </p>

</div>

الشكل بعد التحويل إلى مشهد التصميم : 

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

لكن لحظة .. نسينا أن نربط أزرار المواقع الاجتماعية بروابط..

الحل هو أن نضع وسم الصورة داخل وسم a الخاص بالروابط مع سمته href

سيكون كود أحد الأزرار هكذا :

<li> <a href="https://twitter.com/millionmagazine">  

         <img src="images/twitter.jpg" />  

         </a> 

</li>

 حيث حصرت كود صورة تويتر بداخل كود الرابط a