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

خطوط الرموز او خطوط الأيقونات هي أفضل حل لتعويض الصور والأيقونات الدلالية في موقعك, فأنا مند مدة طويلة وأنا أعتمد في تصاميمي على خطوط الأيقونات مما يضفي عليها رونقا وجمالية مع استيراد أقل لموارد الموقع, حيث أن خطوط الأيقونات تأثرعلى الموقع أقل من الصور بنسبة 14% وأقل بنسبة 90% من ملفات SVG.

وهنا حاولت انتقاء وعزل أفضل 5 خيارات لخطوط الأيقونات التي تلقى شعبية لدى المصممين.

1. Font Awesome: الخط الممتاز, وهو أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من المستعملين, حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp.


2. Fontello: في الواقع الموقع يتيح لك إمكانية عمل خط أيقونات خاص بك, بالاعتماد على مصادر من بعض الخطوط مثل: Font Awesome, Entypo, Iconic والكثير من الخطوط الأخرى.


3. Modern Pictograms: من الخطوط المميزة للرسومات التخطيطية وللصفحات الموجهة نحو الطباعة.


4. Typicons: خط أيقونات قوي وأنا من المعجبين والمستعملين له.


5. Foundation Icon Fonts: الخط المميز من الموقع الرهيب zurb, أنا من متابعي الموقع مند 2010 وأفكارهم كانت ولازالت تبهرني في مجال التصميم. وصفحاتهم لازالت محفوظة في حاسوبي م 2010 ولم أحدفها للآن.


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

أنا متأكد انك تستخدم موقعي الفايسبوك Facebook والجي مايل Gmail, وأضن ان أول شئ صادفك عند تسجيلك الدخول لأول مرة بالموقعين, هي مجموعة من التلميحات التي تعرّف لك التطبيقات الموجودة بالموقع. هذه التلميحات تظهر ايضا كلما تم إضافة تحديث او تطبيق جديد بالموقع. ودورها شرح وتوضيح طريقة عمل التطبيق وكيف تجد مركز المساعدة الخاص بوظائف التطبيق الاساسية.

هذه التلميحات تعرف باسم 'الجولات الإرشادية - Guided tours', وتعتمدها المواقع والشركات الكبيرة والمعروفة, لأنه افضل حل لتعريف تطبيقات الويب والإضافات الجديدة للمستخدمين.

ولتوضيح الفكرة أكثر, هذه صورة للتلميحات:


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

فبعد بحث عميق داخل الانترنت صادفتني إضافة جي كويري jQuery جديدة تحت اسم Guiders.js تم تطويرها بواسطة فريق Optimizely, لذلك قمت بتجريبها مند مدة وفكرة في مشاركتها معكم لتستفيدو منها.

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



شرح تركيب إضافة Guiders.js

بطبيعة الحال من أجل تركيب الاضافة عليك باستدعاء الملفات الخاصة بها:

# استدعات مكتبة الجي كويري
<script src="js/prg4all.jquery.js"></script>
# تضميم ملف الإضافة
<script src="js/prg4all.guiders.js"></script>
# جلب ملف الستايل الخاص بالإضافة
<link href="css/prg4all.guiders.css" rel="stylesheet"/>

وتقوم باضافة ايدي id أو كلاس class معرف للعنصر مثلا:

<a id="prg4allcom" href="http://www.prg4all.com/">Programming for all</a>

تم نضيف الدالة التالية التي تحمل نفس قيمة الإيدي أو الكلاس لتعريف نفس العنصر:

guiders.createGuider({
  attachTo: "#prg4allcom",
  buttons: [{name: "مفهوم!",onclick:guiders.hideAll}],
  title: "موقع البرمجة للجميع",
  description: "هو عبارة عن محفظة تجمع عديد من تطبيقات تقنيات الوب الحديثة مع شرح مفصل لطريقة تركيبها و اضافتها برمجيا عبر الويب.",       
  id: "tip",
  overlay: true,
  position:'bottom',
  autoFocus:true
}).show();

كما رأيتم في المثال فأنا قمت بتعريف العنصر a بالإيدي prg4allcom لذلك وجب علي أن اضع في الدالة نفس الايدي في السطر التالي:

attachTo: "#prg4allcom",

الدالة السابقة الخاصة باضافة التلميحات, تتوفر على مجموعة من الخصائص:
attachTo: قيمتها هي التي تحدد أين سيظهر التلميح.
buttons: مصفوفة الأزرار التي توجد بالتلميح, وتحتوي على بعض القيم الافتراضية ( , guiders.prev guiders.hideAll, guiders.next) والمثال التالي يوضح طريقة الاستعمال:

buttons: [{name: "إغلاق",onclick:guiders.hideAll}],

buttons: [{name: "التالي",onclick:guiders.next}],

buttons: [{name: "السابق",onclick:guiders.prev}],

title: العنوان الذي سيظهر في التلميح.
description: الوصف الخاص بالتلميح.
overlay: يحتوي على قيمتين true أو false, ووظيفته إظهار التضبيب الذي يضهر على الصفحة.
position: تموضع التلميح بالنسبة للعنصر ويأخد القيم كالأتي(top,bottom,bottomLeft ...) أو قيم رقمية مثل 6 ل bottom و11 ل topLeft...

top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, leftTop, leftBottom, right, rightTop, rightBottom

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

مرحبا بكم متابعي موقع البرمجة للجميع programming for all - prg4all. عيدكم مبارك سعيد وكل عام وأنتم بألف خير.
يسرني اليوم ان أضع بين ايديكم أول قالب يطرح بموقع البرمجة للجميع وبطبيعة الحال القالب خاص لمنصات البلوجر ومجاني للتحميل Free Blogger template, لذا أتمنى ان ينال إعجابكم.
قالب بلوجي Bloogi, هو قالب للمدونين يتميز بشكل جميل وألوان ممتعة, وأيضا يتوفر على اغلب الاضافات التي تتطلبها المدونات الخاصة.
هذه صورة عن القالب:
ومن هنا رابط المعاينة المباشرة والتحميل:


بعد التحميل يتوجب عليك القيام بالتعديلات على القالب.
أولا يجب ان تبحث على هذا السطر:

url: "http://prg4all-test.blogspot.com", // رابط موقعك

وتغير الرابط الى رابط موقعك.
أيضا ابحث عن الكود التالي واحدفه او غيره, فهو الذ يحتوي على الاعلان داخل البوست.

<a style='display:inline-block;border: 5px solid #EEE;font-size:0;'>
  &lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
  &lt;!-- nav bar --&gt;
  &lt;ins class=&quot;adsbygoogle&quot;
  style=&quot;display:inline-block;width:300px;height:250px&quot;
  data-ad-client=&quot;ca-pub-6100028314081228&quot;
  data-ad-slot=&quot;6344195754&quot;&gt;&lt;/ins&gt;
  &lt;script&gt;
  (adsbygoogle = window.adsbygoogle || []).push({});
  &lt;/script&gt;
</a>
<a href='http://prg4all.com' style='width:300px;height:250px;background:url(https://scontent-a-fra.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/10298963_524006017729096_1377204959877457587_n.png?oh=81e27af173305b3cbb58a2be4fc1832d&amp;oe=54425C51) no-repeat center -18px;display: inline-block;border: 5px solid #EEE;margin-right: 20px;'/>

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

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/البرمجة-للجميع/523804434415921&amp;width=688&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=247932812060458' style='border:none; overflow:hidden; height: 148px;width: 95%;margin: 10px 20px;'/>

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

<div class="prg4allcom_sidebar_subscribe">
  <h2>ضع إيميلك ليصلك كل جديد عن الموقع. لا تقلق فلن يتم نشر إيميلك.</h2>
  <input type="text" value="ضع ايميلك هنا" />
  <button>إشترك الأن</button>
</div>

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

السلام ليكم ورحمة الله تعالى وبركاته.
يشرفني اليوم أن اضع بين أيديكم عارض المواضيع المنزلقة Slider الخاص بقالب مدونة المحترف th3professional الجديد 2014.
لمن لم يرى عارض المواضيع المنزلقة الخاص بقالب مدونة المحترف th3professional الجديد 2014 فل يقم بزيارة مدونة المحترف عن طريق اللرابط التالي:


إدن ما رأيكم في عارض المواضيع المنزلقة؟
إن أعجبكم فتابعوا معي الشح لطريقة تركيبه على مدونة البلوجر الخاصة بكم.

شرح تركيب عارض المواضيع المنزلقة الخاص بقالب مدونة المحترف th3professional

أولا ندخل الى لوحة تحكم المدونة, تم نضغط على تخطيط -> إضافة أداة (كما بالصورة)


ثانيا نختار HTML/JAVASCRIPT كما بالصورة


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





وهذا هو الكود الذي يجب أن تلصقه بالمحتوى السابق:

<div style="background: #FFF;border: 1px solid #DDD;height: 315px;margin-top: 24px;width:1000px;position:relative;direction:rtl;">
<link rel="stylesheet" href="http://puertokhalid.com//up/blogger/prg4all-th3pro-slider/prg4allcom-slider.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://puertokhalid.com//up/blogger/prg4all-th3pro-slider/prg4allcom-slider.js"></script>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript">
makeSlider({
  url: "http://prg4all-test.blogspot.com", // رابط موقعك
  summaryLength: 260 // عدد الحروف في اهتصار الفقرة
});
</script>
</div>

بعد لصق الكود قم بتغيير الرابط التالي الى رابط مدونتك

url: "http://prg4all-test.blogspot.com", // رابط موقعك

تم اعمل حفظ للكود
وهنيئا لكم عارض المواضيع المنزلقة الخاص بقالب مدونة المحترف th3professional الجديد 2014.
وبهذا يكون موضوعنا قد انتهى والى موضوع أخر بميئة الله.
أي مشكلة أو استفسار فلا تترددو في طرحه.

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

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

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

وعلى فكرة هذه أول تدوينة عربية وأجنبية تقوم بشرح تركيب اضافة ملون الأكواد على منصة البلوجر Blogger, فتابعوني.

أولا سنبدأ بالنتيجة التي سنتوصل اليها في هذا الموضوع:




طريقة تركيب المثال:

يجب عليك في الأول تحميل الملفات ورفعها في استضافة للملفات من أجل التمكن من استدعائها, وهذا رابط لتحميل الملفات مع المثال:




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

قبل الوسم التالي (وسم نهاية رأس الصفحة)

</head>

قم بإضافة الكود التالي الذي يستدعي الملفات الخاصة بالتطبيق:

<script src="http://puertokhalid.com/up/blogger/prg4all-highlight/js/prg4all.jquery.js"></script>
<script src="http://puertokhalid.com/up/blogger/prg4all-highlight/js/prg4all.highlight.js"></script>
<link href="http://puertokhalid.com/up/blogger/prg4all-highlight/css/prg4all.highlight.css" rel="stylesheet"/>

<script type="text/javascript">//<![CDATA[
  $.noConflict();
  jQuery(document).ready(function($) {
     $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol', source:false});
  });
//]]></script>

وهكذا تكون الإضافة قد نصبت بنجاح بمدونتك.


طريقة عمل اللإضافة:

عند إضافتك لمشاركة (تدوينة) جديدة بمنصة البلوجر, نقوم بتغيير التحرير الى HTML عن طريق الضغط على الزر كما في الصورة:



بعد ذلك تلصق الكود التالي:

<pre class="code" lang="html">
   <!-- هنا الكود الذي نود إدراجه -->
</pre>

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

lang="html"

يعني لو كانت اللغة المدرجة تتركها كما في الأعلى. ويمكن أن تغير بين ثلاث لغات: HTML, PHP, CSS.

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

لحل هذه المشكل عليك تحويل الاكواد الى رموز entities, وموقع يوفر لك هذه الخدمة بالمجان من الرابط التالي:



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