2013-07-29

شريط أدوات ألوان الويب متاح حاليًا بإضافات مميزة

بسم الله الرحمن الرحيم

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

اليوم أقدم لكم شريط أدوات موقع  الوان الويب  Toolbar  لتكونوا على إتصال دائم بالموقع
 يمكن تثبيته على معظم  المتصفحات فهو متوافق مع جوجل كروم وفايرفوكس والإنترنت إكسبلور.
browser-icon

مميزات شريط ادوات الوان الويب:

يحتوى على بعض الروابط التى تهم المصممين وأصحاب المواقع وهى:

toolbar
1.  الفوتوشوب أون لاين فى حالة التحرير السريع لأى صورة
2. محرر الأكواد  Html Editor الذى يستخدمه مصممى المواقع وأصحاب المدونات
3.صانع الأزرار Button maker css3  لصنع الأزرار الخاصة بموقعك
5.متابعة دائمة لأحدث الموضوعات والدروس والدورات من خلال خدمة Rss
6.يمكن البحث السريع فى الموقع من خلال محرك البحث السريع الموجود بشريط الأدوات
7. متابعة لجديد الموقع على المواقع الإجتماعية صفحة الفيس بوك ، تويتر ، جوجل بلس
8. يمكن معرفة تقييم ترتيب أى موقع فى Alexa

تحميل شريط ادوات الوان الويب

 Get our toolbar!

كيفية اضافة مشغل موسيقى بلغة HTML على مدونة بلوجر

بسم الله الرحمن الرحيم


music blog



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


الطريقة الاولى : اضافة اداة مشغل الموسيقى بلغة  HTML

 1- قم بفتح المدونة الخاصة بك ثم اذهب الى ( قالب ) ثم قم بالضغط على كلمة ( تحرير HTML )
 ثم قم بعمل  Ctrl + fوابحث عن كلمة <head/> ثم قم بوضع هذا الكود
اعلى كلمة <head/> وقم بالحفظ بعد ادخال الكود

                          


<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>



<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>



<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>


2- اذهب الى التخطيط فى مدونتك ثم اختار كلمة > اضافة اداة < واختار منها HTML/Javascript
بعد ذلك قم بتسمية مشغل الموسيقى كما تشاء وقم بوضع هذا الكود داخل الصفحة

                      

 <div class="mbl"> <div class="mbl_player" id="mnplp"> <div class="mbl_art_bg"></div> <img class="mbl_cover" src="" alt=""/> <span class="mnpl_title"></span> <span class="mnpl_author"></span> <div class="mnpl_volume_min"></div> <div class="mnpl_volume"></div> <div class="mbl_volume_max"></div> <div class="mnpl_toolbar"> <div class="mnpl_tlb_prev"></div> <div class="mnpl_tlb_stop"></div> <div class="mnpl_tlb_next"></div> <div class="mnpl_current"></div> <div class="mnpl_long"></div> <div class="mnpl_all"></div> </div> <div class="mbl_playlist"> </div> </div> </div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
] }); }); </script>




يوجد بهذا الكود ميزة جميلة جدا فا من الممكن التحكم الكامل بشكل مشغل الموسيقى وتكتب هذه العناصر وتغير محتوها مكان الاسماء
الموجودة بالكود وهذا الكود يضم 5 اغانى تعمل اسفل بعضها باستمرار
ملحوظة : لابد ان تكون الاغانى المحلمة بصيغة mp3

title : يمثل العنوان من الموسيقى الخاصة بك أو أغنية. 
mfile : وهو يمثل ملف الموسيقى في الامتداد MP3. 
author : اسم الشخص الذي لحن الموسيقى.
cover : الغلاف صورة الإبهام الذي يظهر عند تشغيل الأغنية.
 background : الصورة التي تظهر في خلفية مشغل الموسيقى




الطريقة الثانية : وهيا عبارة عن موقع تقوم بالاشتراك فية وهو يقوم باضافة أداة مشغل الموسيقى على موقعك او مدونتك

اسم الموقع : http://scmplayer.net
قم بالدخول الى الموقع

اختار الشكل والون الذى تريد وضعة فى المدونة من خلال التحديد علية ثم اضغط Next



music blog1

 قوم بملئ الخانات من خلال فتح موقع www.youtube.com واختار منه الايات القرانية او الاغانى او الموسيقى وقم بنسخ
الرابط وضعة فى خانة SONG URL ثم اضغط NEXT

music bloog

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


music blog2


سوف يظهر كود لك فى النهاية قم باخذ الكود كوبى واذهب الى مدونتك وقوم بفتح القالب الخاص بك
وقم بعمل CTRL +F واكتب بداخلها < body >  ثم ضع الكود الذى حصلت علية اسفل الكود السابق
وبعد وضعه قم بالحفظ وسوف تجد مشغل الموسيقى يعمل بأذن الله


اتمنى ان يكون نال الشرح اعجابكم



2013-07-27

إصنع أزرار لموقعك أون لاين بتقنية css

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته
يحتاج أصحاب المواقع والمدونات دائمًا إلى تصميم أزرار وقوائم تتضمن الروابط التى تحتويها موضوعاتهم ، فمن الممكن الإستعانة بصانع الأزرار Botton maker الذى يتميز بسهولة التصميم وإضافة الرموز وتدرجات الألوان وإختيار الأشكال المناسبة بل وعمل تأثيرات مرور الماوس وغيرها.
css-icon

2013-07-24

تطبيقات الفوتوشوب للهواتف الذكية والأندرويد

بسم الله الرحمن الرحيم

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

كثير من المصممين يحتاجون إلى برامج التصميم تكون برفقتهم بأى مكان وخصوصًا برنامج الفوتوشوب لذلك فى هذا الموضوع نستعرض تطبيقات الفوتوشوب لمعرفة إمكانياتها.

1. تطبيق شركة أدوبى Adope photoshop touch  

أطلقت شركة Adope تطبيق الفوتوشوب للهواتف الذكية التى تعمل بنظام الأندرويد

وهذا التطبيق يتميز بالعديد من الإمكانيات التى يحتاجها المصمم وهى:
1.خاصية الطبقات التى تميز برنامج الفوتوشوب Layer control
2.به أدوات المزج والخط Blending Modes
3. التحكم بالإنحناءات Curves Adjustment
4.إمكانية إستخدام الكاميرا للدمج بين الصور
5.مساحة تخزين سحابية 2G ـ creative storage

هذا التطبيق غير مجانى وسعره 4.99$ ويمكن شراؤه من متجر تطبيقات الاندرويد App store من هــنا

2.تطبيق الفوتوشوب المجانىAdobe Photoshop Express

 تطبيق مجانى يستخدم للتعديل البسيط على الصور للهواتف والأجهزة التى تعمل بنظام الاندرويد

android-psd

من مميزات هذا التطبيق: 
1.امكانية التعديل على الصور وإضافة التأثيرات إليها
2. يتميز بواجهة بسيطة وسهلة التحكم بها
3.التحكم بألوان الصور ودرجات التباين
4.إمكانية نشر الصور ومشاركتها مع الأصدقاء

2013-07-21

تسجيل كافة المكالمات على هاتفك الاندرويد


بسم الله الرحمن الرحيم


تسجيل المكالمات


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

برنامج : Call Recorder 

call record1
برنامج :  Automatic Call Recorder


call record2



call record3

 تعتبر البرامج المعروضة افضل البرامج على الاطلاق فى تسجيل المكالمات ويوجد 
مميزات فى كل برنامج عن الاخر يمكنك التحكم بتسجيل اى من المكالمات الواردة اليك 
ان كانت من ارقام غريبة عنك او كل ارقامك او ارقام معينة
لتحميل اى من البرامج المعروضة اضغط على اسمها 
نتمنى ينال الموضوع اعجابكم 





كيف تعرف تفاصيل هاتفك الاندرويد


بسم الله الرحمن الرحيم


android-options


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

اسم البرنامج : CPU - Z

يعتبر هذا البرنامج من افضل البرامج لمعرفة خصائص هاتفك فهو يعرض لك كل شى كما موضح فى الصورة



android-options1

android-options2

android-options3

اسم البرنامج  :  Trickster MOD Kernel Settings


android-options4

android-options5

android-options6

android-options7

 نرجوا ان يكون نال الموضوع اعجابكم



2013-07-18

دورة تعلم لغة css من البداية حتى الإحتراف

بسم الله الرحمن الرحيم

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

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

ماذا تعنى لغة Css؟

Css هى إختصار لكلمة Cascading Style Sheets أى صفحات الأنماط الإنسيابية ، وقد تم إختراعها عام 1995 ثم تطورت إلى عدة إصدارات وهى Css1,Css2,Css3

فهى بإختصار تعمل على تحديد تنسيق وشكل صفحة الويب (مثل نوع الخط ، الخلفيات ، الألوان،.......) وحفظه فى صفحة واحدة مستقلة ، ثم تطبيق هذا التنسيق على عدد لانهائى من صفحات Html .
فملفات Css تعمل على فصل محتويات الموقع عن التصميم فإذا إحتجنا إلى تغيير التنسيق فيكون الأمر بسيطًا عندما يتم التعديل على ملف CSS فيتم تطبيق التعديل على جميع صفحات HTML مرة واحدة .
css-icon

لماذا يجب إستخدام لغة CSS؟

1. سهولة التحكم فى مظهر الموقع:

 فيمكن تغيير أنماط الخطوط وألوان الخلفيات وغير ذلك من التنسيقات فى جميع صفحات الموقع من خلال التعديل فى ملف واحد بإمتداد Css

2. إمكانية تغيير طريقة العرض: 

فمحتويات صفحة الويب تختلف فى عرضها فى المتصفحات أو جهاز الكمبيوتر أو عرضها للطباعة ، فإذا كنت تستهدف طريقة معينة للعرض فمن السهولة أن تغير طريقة العرض بدلا من تغيير محتويات صفحات Html.

3.تقليل مساحة الملفات وسرعة تحميلها:

إذا إعتمدت فقط على أكواد Html فى تنسيق صفحات الويب من أنماط الخط والجداول والصور والخلفيات فإنك ستحتاج إلى إستخدام أكواد كثيرة جدا ، ولكن يمكن تقليل حجم الملفات بإستخدام ملف واحد بإمتداد CSS وبالتالى يؤدى إلى تسريع تحميل صفحات الموقع.

4. سهولة تنسيق النصوص:

 يمكن التحكم بتنسيق النصوص بشكل أكثر إحترافية من خلال ملفات CSS كأنماط الخطوط وحجمها وألوانها وأيضًا التحكم بالفراغات بين السطور والحروف والكلمات

2013-07-15

اسرار وخفايا الاندرويد واكواد لمعرفة خصائص الهاتف



بسم الله الرحمن الرحيم



code-android


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

code-android1

code-android2


اكواد اخرى مميزة جدا


هذا الصور تحتوى على مجموعة كبيرة من أكواد الإختصارات و الشفرات لجميع أنواع أجهزة المحمول و الموبايلات التى تعمل بنظام تشغيل اندرويد تسهل عليك التعامل مع الموبايل.


code-android3
code android 4
code android 5
code android 6




نرجوا ان يكون نال الموضوع اعجابكم 
















2013-07-13

افضل مواقع العاب الاندرويد

بسم الله الرحمن الرحيم 



android



كثير منا يستخدم فى تنزيل الالعاب الخاصة بالهواتف التى تعمل بنظام الاندرويد Play store
 لتنزيل الالعاب من خلالة ولكن توجد العاب كثيرة فى غاية الجمال والروعة
تكون غير مرئية عن اعيننا ولا نستطيع الوصول لها من خلال Play store


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









 

2013-07-11

تعليم كيفيه تصميم موقع بلغه (HTML) الدرس الثانى

بسم الله الرحمن الرحيم


design-web


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

اولا: نبدا بحجم الخطوط الكود الخاص بها لتغير احجام الخطوط



<html>
<head>
<title>
صفحتي الأولى
</title>
<head/>
<body>
<center>
<h1/> ھذا ھو خط 1 <h1>
<h2/> ھذا ھو خط 2 <h2>
<h3/> ھذا ھو خط 3 <h3>
<h4/> ھذا ھو خط 4 <h4>
<h5/> ھذا ھو خط 5 <h5>
<h6/> ھذا ھو خط 6 <h6>
<center/>
<body/>
<html/>


<h1/> هنا اكتب ما تشاء على حسب الحجم الذى تريدة  <h1>

design-web1



 ثانيا : كتابة النصوص 

يدخل بها خصائص عديدة فا الكود الخاص بكتابة النص هو <p/> هنا يكتب النص <p>

اذا كنت تريد ان تكتب نص بخط مائل فا الكود الخاص به هو <em/>  الكلام يصبح مائل <em> وهناك كود اخر 
يقوم بميل الخطوط وهو    <i/>  كود اخر يصبح من خلالة الكلام مائل  <i> 

 اذا كنت تريد ان يوجد اسفل الكلام خط فا الكود الخاص بة هو <strike/> يصبح اسفل الكلام خط <strike
ويوجد كود اخر وهو <U/>   اسفل الكلام خط  <U> 
 
اذا كنت تريد ان يوجد كلمة مميزة غامقة اللون فا الكود الخاص بها هو <b/> تصبح الكلمة غامقة الون <b> ويوجد كود
اخر لتغميق الون وهو <strong>  يصبح لون الكلمة اغمق   </strong>

 هيا نستعرض الخطوات السابقة ونرها على الطبيعة



 <html>
<head>
<title>
صفحتي الأولى
<title/>
<head/>
<body>
<center>
<h/> السلام علیكم ورحمة الله وبركاته <h4>
أھلا وسھلا بكم في موقعي الوان الويب
<br>
<em/> تصميم <em>
<p/> یمكنك في ھذا الموقع ان تجد كل ما هو جديد فى عالم التصميم والابداع  <p>
      <u/> فوتوشوب <u> 
<center/>
<body/>
<html/>



design-web2


 ثالثا : ادخال الوان على النصوص وعلى خلفية الصفحة 

بالنسبة للون الصفحة فهيا تكتب مع الامر <body>  فى اول التصميم للصفحة. كتابة الون تاخذ شكلان اما بالارقام او باسم اللون 
يكون الامر 
<body bgcolor="اسم أو رمز اللون">





 
 <html>
<head>
<title>
صفحتي الأولى
<title/>
<head/>
<body bgcolor="#990000">
<center>
<h4/> السلام علیكم ورحمة الله وبركاته <h4>
أھلا وسھلا بكم في موقعي الوان الويب
<br>
<em/> تصميم <em>
<p/> یمكنك في ھذا الموقع ان تجد كل ما هو جديد فى عالم التصميم والابداع  <p>
      <u/> فوتوشوب <u> 
<center/>
<body/>
<html/>

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


<body bgcolor="red">




design-web3





لتغيير لون أو حجم أو نوع الخط , نستخدم الأمر font( والذي له وسمين للبداية والنهاية ) وذلك من خلال الأوامر:
color .. للون
size .. للحجم
face .. لنوع الخط
وهذه الأوامر الثلاثة تكون داخل وسم البداية للأمر font 


<html>
<head>
<title>
صفحتي الأولى
<title/>
<head/>
<body>
<center>
 <font face="andalus" color="#EB0202" size="6">
السلام علیكم ورحمة الله وبركاته
<font/>
<br>
أھلا وسھلا بكم في موقعي الوان الويب
<br>
<em/> تصميم <em>
<p/> یمكنك في ھذا الموقع ان تجد كل ما هو جديد فى عالم التصميم والابداع  <p>
      <u/> فوتوشوب <u>
<center/>
<body/>
<html/>
 



design-web4

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








2013-07-09

تعلم كيفية إظهار زوار مدونتك وبلد كل زائر اون لاين

بسم الله الرحمن الرحيم 


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



who-online

اولا :- قم بالدخول الى هذا الموقع http://www.99counters.com

قم بالاشتراك فى الموقع بالاميل الخاص بيك من Log In
بعد الدخول بالميل الخاص بك قم باختيار البلد التى انت منها كما مبين فى الصورة




who-online1


بعد الدخول الى Create Counter سوف يظهر لك هذه القائمة كما مبين فى الصورة اختر من theme الوان الذى تفضلة
ثم اكتب اسم بلد ثم تبدا بالعمل عندما يكون كم عدد الزوار المتواجدون ثم وقت البلد


who-online2



يوجد فى الاعلى كلمة My Themes لو كنت ترغب فى تصميم الموضوع بطريقتك والتحكم فى المقاسات ولون الخط
والاطار الخارجى


who-online3


بعد الانتهاء من التصميم ارجع لكلمة My Counters  ثم ادخل على كلمة Theme سوف تجد الاسم الذى قمت تسجيل
العمل بة موجود اضغط علية وتاكد باكتمال البيانات اسم البلد والوقت ثم اضغط Save سوف يظهر لك كود


who-online4

ثم ادخل الى المدونة الخاصة بك اذهب الى كلمة تخطيط ثم اختر أداة لابد من ان تكون الأداة HTML/JAVASCRIPT
ثم قم بتنزيل الكود بداخل الأداة واذهب الى مدونتك وشاهد عدد زوار الصفحة ومن اين بلادهم اونلاين





نسال الله ان يكون نال الموضوع اعجابكم وشكرا لمتابعتكم لنا

2013-07-06

اصنع من صور بروفايلك انت واصدقائك فديو على الفيس بوك

بسم الله الرحمن الرحيم

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




photo-fb



يعد تبادل الصور بين الاصدقاء على الفيسبوك من الامور المستحبة بين الاصدقاء وبعضها الموقع التالى :- http://www.pixable.com 

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


photo-fb1



 وايضا يتيح لك الموقع استعراض كافة صور اصدقائك بدون الدخول لبروفايل كل منهم على حد
فالصور تظهر من الموقع منسدلة اسفل بعضها 



photo-fb2


الاشتراك فى الموقع يستحق التجربة لان يوجد بة تقسيمات لك فترات الصور والفديو الخاصة بك انتا واصدقائك وامور اخرى كثيرة