tag:blogger.com,1999:blog-14216998154413628662024-03-09T18:10:46.771+03:00كودكسايت | CodexAITمدونة تقنية تهتم بتصميم وتطوير مواقع الويب , البرمجة , قواعد البيانات, أنظمة التشغيل , الشبكات , الأمن والحماية الإلكترونية ، وكل ما هو جديد ومفيد في تقنية المعلومات.Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comBlogger94125tag:blogger.com,1999:blog-1421699815441362866.post-6219641735611779002022-03-06T01:58:00.007+03:002022-03-09T23:55:20.542+03:00تعرف على المميزات الجديدة في فيجوال استوديو 2022 Visual Studioأصدرت شركة ميكروسوفت الإصدار الجديد من بيئة التطوير الرائعة Visual Studio 2022، رسميا في أغسطس 2021، حيث ينصب التركيز الأساسي على إنتاجية المطورين وتحسين جودة الحياة.<div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiRRrB3JOdSu9XHiDqFYI0a7VLWor-kScZdO9badduNVEEx6CVEDV5bz9cvlA3deuR7lYEz5x9dQN4PhClxno-u4l9cZ9n33ddyDmnc1SOAwPT0ghP5RKNktgXuMDmOsh6GCCqyjCD5GGUHX8gIa3JlFMq4w_A8MkSs9oEhvHN9aQFpdt6mxNejM_eC=s955" style="margin-left: 1em; margin-right: 1em;"><img alt="تعرف على المميزات الجديدة في 2022 Visual Studio" border="0" data-original-height="539" data-original-width="955" height="362" src="https://blogger.googleusercontent.com/img/a/AVvXsEiRRrB3JOdSu9XHiDqFYI0a7VLWor-kScZdO9badduNVEEx6CVEDV5bz9cvlA3deuR7lYEz5x9dQN4PhClxno-u4l9cZ9n33ddyDmnc1SOAwPT0ghP5RKNktgXuMDmOsh6GCCqyjCD5GGUHX8gIa3JlFMq4w_A8MkSs9oEhvHN9aQFpdt6mxNejM_eC=w640-h362" title="تعرف على المميزات الجديدة في 2022 Visual Studio" width="640" /></a></div><div><br /></div><h2 style="text-align: right;">اهم المميزات في Visual Studio 2022</h2><h3 style="text-align: right;">بيئة التطوير 64 بت</h3><div>كتطبيق x64 جعل البرنامج يتمتع بسرعة كبيرة، حيث يمكنك رؤية تحسن كبير في تحميل المشروع وتنفيذه مقارنة بالإصدارات السابقة، يمكنك الآن العمل على مشاريع كبيرة مهما كان حجمها تعقيدها.</div><div>ستلاحظ في الصورة الآتية مدى تحسن سرعة التحميل، في تحميل 1،601 مشروعًا مع 298326 ملفًا على Visual Studio 2022.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhY5RFvY9z7LcBdRCxTCknQb7VbFK_DRSOo2vkJqSyxv-mKUK1LXmcIqsTqKrJQM3pgB4zgnpSB2aHyfcUaxzpMNW1imnwaZZltK87Bh5cHV1F37eSWcMzk46hA93fwNxfsbH6ZvTrnCK5I12TiDb5hr_mcfUcTrsaS0nJ4su9MgRST5Pndl8D4geeQ=s640" style="margin-left: 1em; margin-right: 1em;"><img alt="سرعة تحميل وتنفيذ Visual Sudio 2022" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEhY5RFvY9z7LcBdRCxTCknQb7VbFK_DRSOo2vkJqSyxv-mKUK1LXmcIqsTqKrJQM3pgB4zgnpSB2aHyfcUaxzpMNW1imnwaZZltK87Bh5cHV1F37eSWcMzk46hA93fwNxfsbH6ZvTrnCK5I12TiDb5hr_mcfUcTrsaS0nJ4su9MgRST5Pndl8D4geeQ=s16000" title="سرعة تحميل وتنفيذ Visual Sudio 2022" /></a></div><br /><h3 style="text-align: right;">تطوير وتحسين IntelliCode</h3><div>يتميز الإصدار الجديد من فيجوال استوديو 2022 بتحسين الذكاء الاصطناعي في <a href="https://ar.codexait.com/2016/11/free-code-editors.html">محرر الأكواد</a>، حيث صار يتميز بإكمال تلقائي للكود </div><div>البرمجي بناءاَ على سياق الكود كالمتغيرات والدوال والكلاسات وغيرها، الذي يصل الى سطر كامل او اكثر مرة واحدة حسب تنبؤات الذكاء الاصطناعي.</div><div>بالإضافة الى ذلك، عند القيام بمهمة شائعة يتم اكتشافها من الذكاء الاصطناعي ويعطيك توصيات سريعة على الإجراءات الصحيحة.</div><div>يمكنك ملاحظة ذلك في الصورة الآتية:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh3eVKoy9oBUxaeABD5R1FVhHeC6yxRTfRI67NWODxulK8XWZ512eG37U1H5IHfOtbkbHzEhkGH4SNCTJuzo9v912RXOxGRXo0VI0bjrIUuPhZF3hnd4bfXTmPqPDaWVEzy3Y-FiCuVAXeOGVtM-iwBKq_-JloDiu6e7ZNEo2BgnyfHJUGqrIEmz4-G=s600" style="margin-left: 1em; margin-right: 1em;"><img alt="تطوير الذكاء الإصطناعي في محرر الأكواد" border="0" data-original-height="313" data-original-width="600" src="https://blogger.googleusercontent.com/img/a/AVvXsEh3eVKoy9oBUxaeABD5R1FVhHeC6yxRTfRI67NWODxulK8XWZ512eG37U1H5IHfOtbkbHzEhkGH4SNCTJuzo9v912RXOxGRXo0VI0bjrIUuPhZF3hnd4bfXTmPqPDaWVEzy3Y-FiCuVAXeOGVtM-iwBKq_-JloDiu6e7ZNEo2BgnyfHJUGqrIEmz4-G=s16000" title="تطوير الذكاء الإصطناعي في محرر الأكواد" /></a></div><br /><div><br /></div><h3 style="text-align: right;">دعم .NET 6 بشكل كامل</h3><div>الدعم الكامل لإطار العمل الموحد .NET 6، حيث يدعم تطوير برامج سطح المكتب وتطبيقات الويب والجوال على كل من نظامي التشغيل ويندوز وماك.</div><div><br /></div><h3 style="text-align: right;">إعادة التحميل الساخنة Hot Reload</h3><div>تتيح ميزة إعادة التحميل السريع للمستخدمين تسريع تطويرهم، حيث يقلل من الوقت اللازم لإعادة إنشاء التطبيق ونشره لكل تغيير يتم اجراؤه في الكود.</div><div><br /></div><div><h3 style="text-align: right;">البحث في الملفات أسرع</h3></div><div>تم تطوير عملية البحث في ملفات المشروع، حيث يمكنك ملاحظة سرعة البحث بشكل كبير مقارنة بالإصدارات السابقة، حيث زادت السرعة بثلاثة اضعاف.</div><div><br /></div><h3 style="text-align: right;">تحسين واجهات بيئة التطوير</h3><div>هناك تحسينات في <a href="https://ar.codexait.com/2021/12/top-free-flat-icons-packs.html">الأيقونات </a>التي جعلت الواجهات اكثر عصرية وحداثة، ايضاً تم تغيير <a href="https://ar.codexait.com/2016/10/best-arabic-fonts-2017.html">خط </a>الأكواد بخط جديد cascadia-code.</div><div>حيث يمكنك الان تغيير واجهة التطوير بما يناسب طابعك الشخصي.</div><div><br /></div><h2 style="text-align: right;">الخاتمة</h2><div>كانت هذه المميزات الجديدة في Visual Studio 2022 والتي أهمها السرعة الفائقة وذلك بدعم نظام التشغيل X64 أيضا تطوير الذكاء الاصطناعي في محرر الأكواد والتي جعلت إنتاجية التطوير تتحسن كثيراَ، هنالك ايضاً مميزات أخرى في التصميم والدعم الكامل لإطار العمل الموحد .NET 6، وسرعة البحث في الملفات.</div><div>يمكنك الأن تحميل <a href="https://visualstudio.microsoft.com/downloads/" rel="nofollow" target="_blank">فيجوال استوديو 2022 Visual Studio</a>.</div></div>Codex AIThttp://www.blogger.com/profile/15646728619579743282noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-28304959469101774022022-02-25T22:47:00.003+03:002022-02-26T02:27:01.203+03:00اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويبتعتبر البيانات المصدر الأساسي للمعلومات التي تساعد اصحاب القرار على اتخاذ القرارات المناسبة والصحيحة على اسس واضحة في اعمالهم، والحصول على المعرفة الكافية من هذه المعلومات المعروضة.<div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويب" border="0" data-original-height="533" data-original-width="800" height="266" src="https://blogger.googleusercontent.com/img/a/AVvXsEi-HUTLKkU213kT8ulKaKULo-e10MluPXvoKBw8_c1gCLAIRIo7nZ687rQVG6ZkjHKxk4Rghuv9q8WpkQoQby9ae-nTL5WOXX26ojWfzrWIU8A_fXhzEUSNFLjdtgr1wP2heL0aDudM3tsIb349VZ7DVkyjjzW_mrfLKcHyZ4DgQBy-02P0twuQ2RG4=w400-h266" title="اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويب" width="400" /></div><div><br /><div>مع تطور الحوسبة السحابية ، تحولت او انتقلت الكثير من الأنظمة المعلوماتية سواء الإدارية او المحاسبية الى الشبكة العنكبوتية حيث يمكن الدخول اليها من اي مكان، مخزنة على سيرفرات ضخمة.</div><div><br /></div><div>لهذا صار استعراض جداول البيانات على مواقع الويب شيء اساسي ، والتعديل عليها مع العديد من الوظائف مثل البحث والفرز والتنقل ، سنقدم لكم اليوم افضل واضخم اضافة لأداء هذه المهمة والتي يستخدمها ملايين المبرمجين في اعمالهم على مواقع الويب وهي اضافة جي كويري JQuery DataTables Plug-ins.</div><div><br /></div><div>DataTables Plug-ins هي عبارة عن اضافة حديثة مبنية بمكتبة الجي كويري تعمل على اضافة <b>جداول بيانات تفاعلية</b> - على شكل اعمدة وصفوف - مع ادوات تحكم متقدمة على صفحات الويب، ولديها العديد من المميزات والوظائف في استعراض البيانات على صفحات الويب.</div><div><br /></div><h2 style="text-align: right;"><span>مميزات اضافة جداول البيانات </span>DataTables Plugin</h2><div><ol style="text-align: right;"><li>سهولة الإعداد والتثبيت على صفحات الويب.</li><li>المرونة وتعدد الخيارات، التي تمكنك من تخصيص الأدوات وتغييرها.</li><li>يدعم الاتجاه من اليمين الى اليسار واللغة العربية.</li><li>يدعم جميع <a href="https://ar.codexait.com/2016/10/best-10-web-design-frameworks.html">اطارات عمل تصميم مواقع الويب</a> ، كالبوتستراب وماتريال ديزين و foundation وغيرها، حيث يحتوي على ملف CSS لكل اطار لتطابق التصميم مع تصميم موقع الويب، وذلك لما تتمتع به الإضافة من تصميم مميز.</li><li>يحتوي على العديد من الأدوات المتقدمة كالبحث والفلتره في الوقت الحقيقي Real Time Searcher ، والترتيب او الفرز المتعدد على حسب العمود المختار واداة التنقل وتضمين عناصر HTML في جدول البيانات.</li><li>التعامل مع لغات البرمجة في جهة الخادم Server-Side كلغة PHP والبايثون وغيرها.</li><li>امكانية جلب البيانات والتعامل معها بواسطة تقنية الأجاكس.</li><li>قابلية التوسع والتطوير حيث توجد العديد من الإضافات المطورة من هذه الإضافة والتي منها اضافة wpDataTables للوردبرس، وايضا حزم Packages عديدة للعمل في <a href="https://ar.codexait.com/2016/11/laravel-php-framework.html">اطار العمل لارافيل Laravel</a> والذي يعتبر الأكثر شهرة واستخداما في المواقع الخدمية على الويب.</li><li>يحتوي على العديد من الملحقات التي يمكن اضافتها لزيادة امكانيات الإضافة. </li><li>يوجد على شبكة توصيل المحتوى CDN لتضمينه مباشرة في موقعك.</li></ol></div></div><h2 style="text-align: right;">كيفية تثبيت اضافة DataTables في صفحة الويب</h2><div>بما أن الإضافة مبنية بواسطة مكتبة <a href="https://ar.codexait.com/2016/06/best-jquery-arabic-course.html">الجي كويري jQuery</a> يجب استدعاء المكتبة اذا لم تكن مستخدمة في الموقع كالتالي:</div>
<pre><code><script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script></code></pre>
<div>اسدعاء ملف الـ CSS:</div>
<pre><code><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
</code></pre>
<div><br /></div><div>استدعاء ملف الجافا سكربت JS:</div>
<pre><code><script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script></code></pre>
<div>اضافة اكواد HTML في صفحة الويب :</div>
<pre><code><table id="table_data" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table></code></pre>
<div>اضافة كود الجافاسكربت لتطبيق وتشغيل الإضافة:</div>
<pre><code><script>
$(document).ready( function () {
$('#table_data').DataTable();
} );
</script></code></pre>
<div>ايضاَ توجد إضافة DataTables على NPM يمكن تثبيها بالاعدادات الافتراضية بالكود التالي:</div>
<pre><code>npm install datatables.net # Core library
npm install datatables.net-dt # Styling</code></pre>
<div>كما ايضاَ يمكن تثبيتها من خلال Bower كالتالي:</div>
<pre><code>bower install --save datatables.net
bower install --save datatables.net-dt</code></pre>
<div>تعتبر الإضافة من الإضافات الاساسية التي يعتمد عليها الكثير من المطورين في استعراض البيانات وفلترتها على الويب، والتي عادةَ ما تأتي مضمنة في كثير من <a href="https://ar.codexait.com/2021/12/web-design-template-free-download.html">قوالب لوحات التحكم Admin Dashboard</a>.</div><div><br /></div><div><div>فالإضافة تحتوي على العديد من الخيارات التي يمكن تخصيصها حسب احتياجات عملك ومتطلباته، لذا يمكنك الدخول الى الموقع الخاص بالإضافة <a href="https://datatables.net" rel="nofollow">datatables.net</a> لتتعرف اكثر على اعدادات وتخصيص الإضافة، ومعرفة مصادر البيانات المدعومة التي يمكن جلب البيانات منها وكيف يتم ذلك.</div><div><br /></div><div>كانت هذه <b><span style="color: #990000;">اضافة رائعة لإستعراض جداول البيانات على مواقع الويب</span></b> يجب على كل مطور ويب معرفتها واستخدامها، والى اضافة اخرى بإذن الله، دمتم بخير.</div></div>
</div>Codex AIThttp://www.blogger.com/profile/15646728619579743282noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-16051819611292463432022-01-31T17:53:00.013+03:002022-05-13T03:37:12.087+03:00بحث في امن المعلومات و التهديدات الأمنية والهجمات الالكترونية<p></p><div class="separator" style="clear: both; text-align: center;"><img alt="بحث في امن المعلومات والتهديدات الأمنية والهجمات الالكترونية وكيفية الحماية منها" border="0" data-original-height="601" data-original-width="960" height="250" src="https://blogger.googleusercontent.com/img/a/AVvXsEi-mu-8RVpRJXK3vt9xWvQ6QRKQLwnxcFTCQZLbwPmfH0rQ8GdKKU42j5PWINrU_Quru0FPF7oRUbU67Bb4601-2hyGPFB4YfG2rmx2GWrDRj4p2vM7xGSWlUqOhVX6CR94UYLeLS7cS-EW-XrRiV8zs2nF2F4azxwEQgvZa25QGM67q5ktW4Lf-ebS=w400-h250" title="التهديدات الأمنية والهجمات الالكترونية وكيفية الحماية منها" width="400" /></div><br /> <p></p><p>صارت الاعتمادية على الحلول التقنية تتزايد يوما بعد يوم في تسيير المنشآت الصغيرة والكبيرة على حد سواء، بل تعدى الأمر ذلك الى المستوى الفردي، فكل شخص اليوم صار لديه هاتف ذكي او كمبيوتر لأداء اعماله المختلفة وتصفح الشبكة العنكبوتية.</p><p>لذا ظهرت العديد من <b>التهديدات الأمنية</b>، فصارت الحاجة لأمن المعلومات ملحة جدا، لحماية وتأمين المعلومات الحرجة من الضياع والخراب والسرقة، وخصوصية بياناتنا..</p><div><h2 style="text-align: right;">تعريف أمن المعلومات</h2><div>هو العلم الذي يُعنى بحماية المعلومات من المخاطر التي تتعرض لها، ويمكن تعريف امن المعلومات بشكل مختصر هو: (<b>حماية المعلومات من الوصول الغير مسموح به</b>).</div><div>أيضا يمكن تعريف امن المعلومات بشكل من التفصيل على انه المفاهيم والتقنيات والتدابير التقنية والإدارية المستخدمة لحماية أصول المعلومات من الوصول غير المأذون به.</div><div>سواء عمداً او سهواً او حيازتها او الإضرار بها، او كشفها، او التلاعب بها، او تعديلها او فقدها او إساءة استخدامها.</div></div><div><br /></div><h2 style="text-align: right;">اهمية امن المعلومات</h2><div>تتمثل اهمية امن المعلومات في النقاط الاتية:</div><div><ol style="text-align: right;"><li>حماية معلومات الأفراد وخصوصيتهم من الاستغلال والسرقة.</li><li><b>حماية الأصول المعلوماتية الحرجة</b>، كمراكز البيانات وقواعد البيانات والخوادم وانظمة التشغيل والشبكات والبرامج التطبيقية ووسائط تخزين المعلومات والمواقع الالكترونية.</li><li>مواجهة الهجمات الالكترونية والتصدي لها.</li><li>حماية معلومات المؤسسات والشركات من السرقة والتلف.</li><li>حماية سلامة المعلومات وسريتها بشكل عام.</li><li>الحد من الوصول الغير مصرح به للمعلومات الخاصة.</li><li>تقليل الخسائر في المنظمات والمؤسسات والشركات.</li></ol></div><h2 style="text-align: right;">التهديدات الأمنية والهجمات الإلكترونية</h2><div style="text-align: right;"><b><span style="color: #073763;">1. الفيروسات</span></b></div><div>هي عبارة عن برمجيات خبيثة صغيرة الحجم، تقوم بالتضاعف بنسخ وتكرار نفسها بين وسائط اجهزة الكمبيوتر، وتنفيذ نفسها بشكل تلقائي، ويقوم بالإضرار بأنظمة الكمبيوتر ، والتحكم فيها ، ويعمل على اتلاف البيانات وتخريبها او سرقتها.</div><div>يعمل الفيروس بمجرد انتقاله الى جهاز الكمبيوتر، او يتم تشغيله فور تشغيل البرنامج او الملف المصاب بالفيروس، بالإضافة الى ذلك توجد فيروسات متقدمة ، تقوم بإعادة بناء نفسها ، وتنشئ نسخ متعددة تقوم بمهام تخريبية متعددة.</div><div>تنتشر <a href="https://ar.codexait.com/2016/01/batch-file-programming.html">الفيروسات</a> عبر البريد الإلكتروني ضمن الملفات المرفقة ، والروابط، او عن طريق مواقع مصابة بالفيروسات، او عبر البرامج والملفات المصابة ، او عن طريق الأقراص المحمولة كالفلاشات والذواكر الخارجية.</div><div>تأتي الفيروسات بأشكال متعددة والتي منها المرتبطة ببرامج اخرى، وفيروسات متعددة المهام ، والفيروسات التي تقوم بالكتابة فوق الملفات ، وفيروسات تسرق البيانات من المتصفح، وفيروسات مضمنة كأكواد خبيثة داخل صفحات الويب وغيرها.</div><div style="text-align: right;"><b><span style="color: #073763;">2. هجمات الأبواب الخلفية (Back Door Attacks)</span></b></div><div>في بعض الأحيان يترك المبرمجون طرقاً خفية، تسمى الأبواب الخلفية، للوصول للشبكات والأنظمة من اجل تطويرها لاحقاً، وصيانتها عن بعد، ويستغل المهاجمون هذه الأبوب الخلفية للإضرار بالأجهزة والشبكة وما الى ذلك.</div><div style="text-align: right;"><b><span style="color: #073763;">3. كسر كلمات المرور (Passwords Cracks)</span></b></div><div>وهي عملية إعادة حساب كلمات المرور من البصمات الرقمية (Hash Values) لهذه الكلمات التي تحفظ عادة في ملفات خاصة، ويتم تنفيذ ذلك عبر طرق رياضية معقدة، مع المقارنة بكلمات سر القاموس، وهي مجموعة من الكلمات المتوقعة. </div><div style="text-align: right;"><b><span style="color: #073763;">4. الهجوم الأعمى(الاستقصائي) Brute Force Attacks</span></b></div><div>وهو عبارة عن تجريب جميع كلمات السر المحتملة او المتوقعة، او اي معلومة يحتاجها المهاجم في عملية الهجوم، وسمي بالهجوم الأعمى لأنه لا يعتمد على اي عملية حسابية.</div><div style="text-align: right;"><b><span style="color: #073763;">5. هجمات المعجم (Dictionary Attacks)</span></b></div><div>تعتبر هجمات المعجم من انواع الهجوم الأعمى ، لأنها بنفس الطريقة تتم عن تجربة كلمات من المعجم اي كلمات ذات معنى بدلاً عن كلمات عشوائية، لتضييق نطاق المحاولات.</div><div><div><div style="text-align: right;"><b><span style="color: #073763;">6. هجمات الرجل في الوسط (Man-In-The-Middle Attacks)</span></b></div></div><div>يطلق على هذا الهجوم ايضا اختطاف <a href="https://ar.codexait.com/2016/01/tcp.html">بروتوكول النقل</a> (TCP Hijacking) (TCP Attack)، ويحدث في هذا الهجوم التقاط حزم البيانات(Data Packets) المارة في الشبكة.</div><div>ثم تغييرها او الحذف منها او التعديل عليها، ثم اعادتها الى الشبكة لتكمل مسارها، ولكن بشمل، ويمكن ايضا تزويرها او توجيهها الى جهاز اخر.</div><div style="text-align: right;"><span style="color: #073763;"><b>7. هجمات الخداع(Spoofing Attacks)</b></span></div><div>هي طريقة للتمكن من الوصول الى الأجهزة بطريقة غير شرعية عن طريق خداع الأجهزة، بإرسال رسالة مزيفة تحتوي على <a href="https://ar.codexait.com/2015/12/blog-post.html" rel="" target="">عنوان الانترنت (IP)</a>، يجعل الرسالة كأنها تبدو من جهة موثوقة.</div><div>ولإتمام هذا النوع من الهجوم يجب على المهاجم استخدام طرق وأدوات للحصول على عنوان الانترنت المناسب الذي من خلال يستطيع خداع الجهاز الضحية.</div><div style="text-align: right;"><b><span style="color: #073763;">8. الرسائل الغير مرغوب فيها (او المزعجة) Spam</span></b></div><div>يرد الكثير من الرسائل المزعجة الى البريد الإلكتروني، وغالبا ما تكون هذه عبارة عن هجمات الكترونية، وتحتوي هذه الرسائل على ملفات او روابط ضارة.</div><div>لهذا يجب تفعيل عملية الفلترة في خوادم البريد الإلكتروني، وكذلك ننصح بعدم فتح هذه الرسائل الإلكترونية.</div></div><div style="text-align: right;"><b><span style="color: #073763;">9. تفجير البريد الإلكتروني (Mail Bombing)</span></b></div><div>وهو ايضا هجوم على البريد الإلكتروني، حيث يقوم المهاجم يإرسال كم هائل من الرسائل الى البريد الإلكتروني الضحية ، عن طريق استخدام اوامر بروتوكول ال نقل البريد الإلكتروني (Simple Mail Transport Protocol).</div><div>او عن طرق الهندسة الإجتماعية، و التي يمكن من خلالها إغراق البريد الإلكتروني بكم هائل من الرسائل حتى الوصول الى درجة عدم القدرة على معالجتها ومن ثم يدخل في مرحلة تعطيل الخدمة.</div><div style="text-align: right;"><b><span style="color: #073763;">10. هجمات التشمم او الالتقاط (ٍSniffer Attacks)</span></b></div><div>المتشمم هو برنامج او يراقب البيانات المارة عبر الشبكة ويلتقطها، ويمكن ان يكون هناك تشمم او التقاط شرعي لمراقبة الشبكة وإدارتها، ويمكن ان يكون غير شرعي لسرقة البيانات.</div><div>ويعد هذا الهجوم خطير جدا على الشبكة لأنه يمكن وضعه في اي مكان ولا يمكن اكتشافه بسهولة.</div><div style="text-align: right;"><b><span style="color: #073763;">11. هجمات الهندسة العكسية (Social Engineering Attacks)</span></b></div><div>يخلط هذا النوع من الهجوم بين النواحي الاجتماعية واهتمامات الناس وبين المهارات الفنية في خداع الضحايا وكسب ثقتهم للإدلاء، بمعلومات سرية يتم استغلالها لسرقة المعلومات والأموال الكترونيا.</div><div>وقد انتشر هذا النوع من الهجوم مؤخراً، لانه لا يعتمد على قوة الحماية او ضعفها، وانما يعتمد على كسب ثقة الضحايا وخداعهم، ومن الأمثلة الشهيرة على هذا النوع من الهجوم هو هجمات الاصطياد الإلكتروني.</div><div style="text-align: right;"><b><span style="color: #073763;">12. هجمات المعلومات الجانبية (Side channel Attacks)</span></b></div><div>ظهر هذا النوع مؤخراً ويعد خطير جداً، يعتمد هذا النوع من الهجوم على المعلومات الجانبية التي يجمعها الهاكر من أجهزة التشفير التي تعمل بأنظمة التشفير بالمفتاح العام، ثم يحللها للحصول على المعلومات السرية كمفاتيح التشفير.</div><div> وما يحدث ليس كسر الأنظمة بشكل مباشر، وانما جمع المعلومات الجانبية مثل الوقت المستغرق واستهلاك الطاقة الكهربائية، ومن هنا ظهر هجوم الوقت، الذي يعتمد على حساب الوقت المستهلك في عملية التشفير وفك التشفير، ومعرفة طول المقتاح.</div><div style="text-align: right;"><b><span style="color: #073763;">13. هجوم تصفح الكتف (Shoulder Surfing Attack)</span></b></div><div>في هذا الهجوم من خلال اطلاع المهاجم من خلف كتف الضحية وينظر ما يضغط من ازرار على لوحة المفاتيح، وما يعرض من معلومات على الشاشة.</div><div><h2 style="text-align: right;">عناصر امن المعلومات </h2><div>وهي مجموعة العناصر الواجب توافرها لحماية المعلومات الثابتة والمنقولة، بحيث يغطي كل عنصر من هذه العناصر جانبا من جوانب الحماية، المطلوبة، ومعنى ذلك ان تتكامل هذه العناصر حتى توفر الحماية المطلوب.</div><div>ويمكن سرد عناصر امن المعلومات كالتالي:</div><h3 style="text-align: right;">التحقق من الهوية (Authentication) </h3><div>تعني الخدمة التي يمكن من خلالها التحقق من الشخص او الجهة وأنه الشخص المعني ولا غيره، فعند اتصال شخصين او جهتين، فلابد من ان يتعرف كل منهما الى الاخر، لضمان ان يتخاطب كل منهما مع الشخص او الجهة المعنية وليس مع غيرها.</div><div>حيث تبدأ عملية التحقق من الهوية بالتعريف بالهوية (Identification)، ويمكن ذلك من خلال اسم المستخدم او رقم الحساب، لذا يجب ان تتوافر في طريقة تحديد الهوية المعايير الاتية:</div><div><ul style="text-align: right;"><li>ان تكون الهوية فريدة</li><li>ان تكون غير مفصحة عن معلومات المستخدم ووظيفته والغرض من وصوله للمعلومة.</li><li>استخدام طريقة التسمية المعتمدة عند المنشأة عند انشاء الحسابات</li></ul></div><h3 style="text-align: right;">التحكم بالوصول (Access Control)</h3><div>ويأتي التحكم بالوصول بعد التحقق من هوية المستخدم والتصريح له بالدخول يأتي دور التحكم بوصول المستخدم للموارد المحددة سواء التصريح له للوصول لموارد معينة او منع الوصول لبعض الموارد.</div><div>ويشمل ذلك منع الاستخدام غير المرخص به لأي معلومة، وكذلك تحديد صلاحيات محددة للأشخاص المصرح لهم بالوصول للمعلومات، لاستخدامها والاطلاع عليها او تحت شروط معينة، سواء كان قراءة او طباعة او تعديل او حذف.</div><div>وتتكون عملية التحكم بالوصول من ثلاث مراحل:</div><div><ul style="text-align: right;"><li>التحقق من الهوية (Authentication).</li><li>التخويل او الترخيص (Authorization).</li><li>التدقيق والمتابعة (Auditing).</li></ul></div><h3 style="text-align: right;">السرية (Confidentiality).</h3><div>يمكن ان يطلق على هذا العنصر أيضا الخصوصية (Privacy)، وتعني الحفاظ على المعلومات من ان يُطلع عليها (يقرأها ويفهمها)، غير الأشخاص المصرح لهم، او منع الكشف غير المصرح به.</div><h3 style="text-align: right;">سلامة المعلومة وتكاملها (Data Integrity)</h3><div>وهي الخدمة التي من خلالها يمكن الحفاظ على سلامة المعلومة من التعديل والحذف او الإضافة او إعادة التركيب، او إعادة التوجيه، وهذا امر مهم جدا لضمان الثقة بالمعلومة.</div><div><br /></div><h3 style="text-align: right;">عدم الإنكار (Non-Repudiation)</h3><div>هي الخدمة التي من خلالها يمكلن منع أي شخص أو جهة من انكار أي عملية قاموا بها وكشفهم.</div><div>ويتم ذلك من خلال توفير سجل احداث آلي لجميع العمليات التي تتم في النظام، بالتاريخ والوقت، وتتبع كافة المستخدمين بكل عملية يقوموا بها.</div></div><div><br /></div><h3 style="text-align: right;">توافر المعلومة (Availability)</h3><div>ان تكون المعلومة قابلة للوصول واستخدامها حين الطلب من قبل اي شخص مصرح به وفي اي وقت، وهذا يعني ان يكون النظام محمي من الهجمات التي تؤدي الى حجب الخدمة (Denial of Service-DoS).</div><div>الهدف العام من هذا عنصر توافر من توافر المعلومة هو ان تكون الشبكة والأجهزة، والأنظمة والبرامج والخدمات متاحة في جميع الأوقات التي يحتاجها المستخدم.</div><h3 style="text-align: right;">المتابعة (أو التدقيق) (Auditing)</h3><div>تهدف المتابعة الى مراقبة عمليات المستخدمين والتحقق من فرض سياسات امن المعلومات، وانها تطبق بشكل صحيح ودقيق.</div><div><br /></div><h2 style="text-align: right;">كيفية تحقيق عناصر امن المعلومات</h2><div>تتم <b>الحماية من التهديدات الأمنية، والهجمات الإلكترونية</b> من خلال تحقيق عناصر امن المعلومات المذكورة سابقا.</div><div>ويتم تحقيقها عادة من خلال تطبيق <b>تقنيات التشفير</b> والبصمة الرقمية، وانظمة كشف الهجمات والتطفل والتصدي لها، وغيرها من تقنيات الأمن والحماية، والتي سيتم تناولها في السياق الآتي:</div><h3 style="text-align: right;">تحقيق عنصري التحقق من الهوية وعدم الإنكار</h3><div>يستخدم التشفير الغير متناظر مع التصديق الرقمي لتحقيق عنصري التحقق من الهوية وعدم الانكار، ويتم ذلك من خلال انتاج التوقيع الرقمي باستخدام الرقم السري للمستخدم، وبهذا يتم تحقيق عنصر التحقق من الهوية.</div><div>كذلك يتم تحقيق عنصر عدم الانكار حيث لا يستطيع المستخدم انكار انه ارسل الرسالة لانه وقع عليها برقمه السري الذي لا يملكه غيره.</div><h3 style="text-align: right;">تحقيق عنصر التحكم بالوصول</h3><div>يتم تحقيق عنصر التحكم من الوصول من خلال النقاط الآتية:</div><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">1. تسجيل الدخول الواحد (Single Sign-on)</span></div><div>ويتم ذلك من خلال عمل حساب واحد بكلمة مرور واحدة، لتسجيل الدخول لجميع الموارد المتاحة لك في المنشأة او الشركة.</div><div> سواء الخوادم او الشبكة او انظمة قواعد البيانات، سيتم حفظ وتذكر كلمة المرور بعكس وجود حساب مخصص لكل خدمة.</div><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">2. مصفوفة التحكم بالوصول (Access Control Matrix)</span></div><div>وهي عبارة عن جدول يحتوي المستخدمين كصفوف، والموارد كأعمدة، ويحدد ما لعمليات الممكنة لكل مستخدم على كل مورد، يحتوي كل صف امكانات المستخدم كتحكم كامل او قراءة وكتابة او قراءة فقط اولا يوجد، ومثال ذلك نظام الصلاحيات.</div><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">3. انظمة كشف الوصول (Intrusion Detection Systems-IDSs)</span></div><div>تقوم انظمة كشف الوصول بالكشف عن الوصول غير الشرعي او الهجوم على الأجهزة والشبكات وانظمة الإتصالات، ومهمتها الأساسية هي التقاط اي شيء مريب او مشكوك فيه يحدث داخل الشبكة.</div><div>والعمل على اشعار الإدارة بذلك من خلال اشعار على جهاز المدير او ارسال رسالة نصية او بريد الكتروني.</div><div>ويتم ذلك بتتبع سيل البيانات وسجلات الأحداث وكشف اي بيانات غير طبيعية والتنبيه عليها، حيث تتكون انظمة التطفل من خلال الحساسات وادوات التحليل وواجهات التواصل مع مديري الأنظمة.</div><div>يوجد نوعان من اجهزة كشف التطفل وهما:</div><div><ul style="text-align: right;"><li>انظمة كشف التطفل الشبكية: وهو عبارة عن جهاز يتم ربطة بالشبكة من خلال كرت الشبكة الذي يلتقط جميع البيانات المارة في الوسط الناقل، وارسالها الى ادوات التحليل لتحليلها وكتشاف التطفل ومن ثم ارسال التنبيه عند وجوده.</li><li>انظمة كشف الكذب على الأجهزة وذلك يتم من خلال برامج توضع على اجهزة الكمبيوتر او السيرفر لمراقبة اي شيء مريب يحدث.</li></ul><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">4. انظمة منع التطفل (Intrusion Prevention Systems-IPSs)</span></div></div><div>تقوم انظمة منع التطفل بالكشف عن الأنشطة المريبة التي تتم خلال الشبكة ثم بعد ذلك تقوم بمنع او قطع الاتصال عن المهاجم عن الشبكة، حيث يقوم بتعديل قوائم التحكم بالوصول (ACLs) لجدار الحماية.</div><h3 style="text-align: right;">تحقيق عنصر السرية</h3><div>لتحقيق هذا العنصر يمكن استخدام تقنيات التشفير سواء المتناظر او غير المتناظر، وسيتحقق هذا العنصر بدرجة تتناسب مع قوة نظام التشفير المستخدم.</div><h3 style="text-align: right;">تحقيق عنصر سلامة المعلومة وتكاملها</h3><div>يمكن التحقق من المعلومات وخلوها من اي تعديل او حذف او اضافة من خلال تطبيق البصمة الرقمية فبمجرد تحقيق ذلك سيتم كشف اي تعديل او حذف او اضافة وبذلك يتم تحقيق عنصر سلامة المعلومة وتكاملها.</div><h3 style="text-align: right;">تحقيق عنصر توفر المعلومة</h3><div>بعد ظهور هجمات تعطيل الخدمة (DOS) اصبح عنصر توفر المعلومات عنصراً اساسياً، في امن المعلومات، ومع تقدم استخدام الانترنت وانتشاؤها اصبح توافر مواقع الخدمات امراً ضرورياَ.</div><div>وهناك وسائل اساسية لتحقيق عنصر توفر المعلومات، وهي:</div><div><ol style="text-align: right;"><li>ان يكون هناك كافية في الشبكة والخوادم ووسائط التخزين ومركز البيانات.</li><li>القدرة على العودة بعد حدوث الأعطال او الوقفات بطريقة سريعة وآمنة.</li><li>اخذ نسخة احتياطية من البيانات والأنظمة والبرامج.</li><li>توفير اجهزة وانظمة وتقنيات احتياطية تعمل الى جنباً الى جنب الأجهزة والأنظمة والتقنيات الأساسية، حسب الحاجة.</li><li>الحماية من التأثيرات الطبيعية كالحرارة والرطوبة والغبار والكهرباء الساكنة.</li><li>توفير مركز بيانات احتياطي (Disaster Recovery Data Center)، لإستخدامه عند وقوع الكوارث.</li><li>تدريب الجيد المستخدمين على التعامل مع الأعطال، والتحويل الى الأجهزة الإحتياطية.</li><li>استخدام مكافحات الفيروسات.</li><li>استخدام انظمة كشف هجمات تعطيل الخدمة (DOS) ومكافحتها.</li></ol><h3 style="text-align: right;">تحقيق عنصر المتابعة</h3></div><div>يمكن تحقيق عنصر المتابعة والتدقيق على عدة مستويات، من مستوى الأجهزة الشخصية الى مستوى مراكز البيانات، حيث توجد وسائل تدقيق ومتابعة وتدقيق لكل مستوى، منها:</div><div><ol style="text-align: right;"><li>سجلات احداث النظام (Operating System Events Log).</li><li>سجلات احداث الشبكة (Network Events log).</li><li>سجلات احداث قواعد البيانات (Database Events Log).</li><li>إجراء عملية تدقيق ومتابعة تاريخية.</li><li>إجراء عملية تدقيق ومتابعة حية مباشرة.</li><li>إجراء عملية تدقيق وقائية.</li></ol></div><div><br /></div><h2 style="text-align: right;">الخلاصة</h2><div>صار لأمن المعلومات اهمية كبيرة في عالم الثورة التقنية، حيث ان امن المعلومات تعني حماية المعلومات من الوصول الغير المصرح به.</div><div>توجد العديد من التهديدات الأمنية والهجمات الإلكترونية التي علينا مكافحتها كالفيروسات، والهجمات الالكترونية بأنواعها والتصيد والاحتيال وهجمات الهندسة العكسية.</div><div>عناصر امن المعلومات هي التحقق من الهوية والتحقق من الوصول وعدم الانكار والسرية وسلامة المعلومة وتكاملها والتوفر والتدقيق والمتابعة.</div><div>يتم تحقيق عناصر امن المعلومات من خلال التشفير والبصمة الرقمية وانظمة كشف التطفل ومنعها، وانظمة كشف هجوم تعطيل الخدمة ومكافحتها، وانظمة مكافحات الفيروسات، والنسخ الاحتياطي للبينات وتوفير منظومة احتياطية الى جنب المنظومة الأساسية.</div><div><br /></div><div>كان هذا <b>بحث في أمن المعلومات</b>، حيث تناولنا تعريق امن المعلومات، وتطرقنا الى اهم <b>التهديدات الأمنية والهجمات الالكترونية وكيفية الحماية منها؟</b> الى مقال جديد في أمن المعلومات والأمن السيبراني.</div>Codex AIThttp://www.blogger.com/profile/15646728619579743282noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-14332066073585722542021-12-30T23:57:00.014+03:002022-04-28T07:49:14.270+03:00أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف<p> </p><div class="separator" style="clear: both; text-align: center;"><img alt="أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف" border="0" data-original-height="464" data-original-width="850" height="219" src="https://blogger.googleusercontent.com/img/a/AVvXsEilRNqnoTIbAbuaEeTj-hrnVYRyiYDNhyxotKTGzs-8de5wXm82C4g_N2MnVnj5T7MzL5JlQYPb4_3tnLPEOis1lpO1ksV7tLlmnC9sV-Fdknngy2O7kAxsYxS0VgOo6xxSthOFqx0zP-eL9_bjQFtpVUif6J0fb4RkSO7t-yULfCvkJeLYcnUaSaxa=w400-h219" title="أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف" width="400" /></div><br /><p></p><p></p><p>هل انت مصمم واجهات UI Design ؟ اذا مالذي تنتظره ، دعنا نتعرف على افضل <b>حزم الأيقونات المجانية</b> لنستخدمها في مواقع تصميم الواجهات ، سواء كنت مصمم مواقع اومصمم واجهات للهاتف المحمول او واجهات لتطبيقات سطح المكتب ، بالتأكيد ستحتاج لهذه الأيقونات ، ايقونات متنوعة بعدة اشكال وبأنماط متعددة.</p><p>هذه مجموعة من افضل حزم الأيقونات المجانية :</p><h2><a href="https://icons8.com/line-awesome" rel="nofollow" target="_blank"><span style="color: #0b5394;">Line Awesome Icon Font</span></a></h2><p>من افضل حزم <b>الأيقونات الفلاتية Flat Icons</b> التي تستخدم بعدة مجالات ، تعتبر البديل المجاني لآخر اصدار من Fontawesome 5.11.2، حيث يحتوي على 1380 ايقونة فلاتية ، والذي يغطي معظم تصنيفات ايقونات fontawesome.</p><p>يأتي بصيغة خط وايضا بصغة SVG ، مصمم من قبل Icons8 بنمط او ستايل windows 10 والذي يحتوي على حوالي 40000 ايقونة ، يأتي بثلاثة استايلات regular, solid or brand .</p><h2><a href="https://github.com/kenangundogan/fontisto" rel="nofollow" target="_blank"><span style="color: #0b5394;">Fontisto</span> </a></h2><p>يقدملك ايقونات متجهة يمكن تخصيصها وتعديلها بشكل آني بواسطة CSS ، حيث يحتوي على اكثر من 616 ايقونة فلاتية لجميع المجالات وخصوصا الماركات والتقنيات الحديثة ولغات البرمجة.</p><p>تأتي حزمة الأيقونات بصيغة خط icon font وايضا ملفات SVG ،تتميز الحزمة بسهولة التعامل معها بواسطة اكواد CSS ، وتعتبر مجانية ومفتوحة المصدر ، ايقونات متجهة قابلة للتطوير ، تبدو رائعة وجميلة بكافة الأحجام.</p><h2><a href="https://ionic.io/ionicons" rel="nofollow" target="_blank"><span style="color: #0b5394;">Ionicons</span></a> </h2><p>ايقونات Ionicons هي الأيقونات الخاصة بإطار العمل ايونيك Ionic Framework ، تعتبر حزمة متكاملة وتحتوي على اكثر من 1100 من الأيقونات الخاصة بتصميم واجهات مواقع الويب والهواتف الذكية.</p><p> فهناك ايقونات التحرير والمقالات وايقونات مواقع التواصل الإجتماعي والشركات الشهيرة وغيرها ، حيث بإمكانك استخدامها مع اي موقع ويب منفصلة عن الإطار المخصص له.</p><p>وتأتي بصيغة SVG , Iconfont ، ايضا تحتوي على ثلاث انماط رئيسية للتصميم هي ممتلئ Filled ، وحاد sharp و outline.</p><p><br /></p><h2><a href="https://tablericons.com/" rel="nofollow" target="_blank"><span style="color: #0b5394;">Tabler Icons</span></a></h2><p>ايقونات مجانية مفتوحة المصدر لتطبيقات الويب والموبايل ، وهي ألأيقونات الأساسية المستخدمة في تطبيق انستجرام ، تحتوي الجزمة على 1424 ايقونة بصيغة SVG قابلة للتعديل والتخصيص بشكل كامل.</p><h2 style="text-align: right;"><a href="https://akveo.github.io/eva-icons/" rel="nofollow" target="_blank"><span style="color: #0b5394;">Eva Icons</span></a></h2><p>هي حزمة تحتوي على اكثر من 480 أيقونة رائعة مفتوحة المصدر للعديد من أنشطة التصميم الشائعة ، تأتي بصيغتين PNG و SVG يمكنك استخدامها لتصميم مواقع الويب او لتطبيقات الأندرويد والأيفون ، كما يمكنك من استخدامها لتصميم واجهات سطح المكتب.</p><p><br /></p><h2 style="text-align: right;"><a href="https://useiconic.com/open/" rel="nofollow" target="_blank"><span style="color: #0b5394;">OPEN ICONIC</span></a></h2><p>تتميز ايقونات open ionic بجمالها الرائع وتصميمها الفلاتي ، حيث يمكن استخدامها في العديد من المجالات في التصميم لتوفيرها بالعديد من الصيغ مثل SVG, PNG, WebP, EOT, OTF, TTF, WOFF.</p><p> حيث تحتوي على نسخة بشكل خط icon fonts يمكنك تضمينها في موقعك بكل سهولة ، حجمها الصغير ايضا يجعلها اكثر قبولا، وتتكون من 223 ايقونة جميلة.</p><h2 style="text-align: right;"><a href="https://icons.getbootstrap.com/" rel="nofollow" target="_blank"><span style="color: #0b5394;">Bootstrap Icons</span></a></h2><div>تقدم لك بوتستراب ايقونات مجانية ومفتوحة المصدر ،تحتوي على اكثر من 1500 ايقونة عالية الجودة ، تأتي بصيغة خط webfont ، و صيغة SVG ، يمكنك استخدامها مع او بدون البوتستراب.</div><div><br /></div><h2 style="text-align: right;"><a href="https://fonts.google.com/icons?selected=Material+Icons" rel="nofollow" target="_blank"><span style="color: #0b5394;">Google Material Icons Font</span></a></h2><div>تقدم لك جوجل ايقونات ماتريال Material عالية الجودة تأتي بصيغ متعددة مثل :SVG,webfont,png ، الأيقونات الأكثر انتشارا على هواتف الأندرويد ومواقع جوجل.</div><div>فهي مجانية ومفتوحة المصدر يمكنك استخدامها مباشرة من التخزين السحابي لجوجل CDN ، تأتي بخمسة انماط Styles كالتالي Outlined, Filled, Rounded, sharp, Two Tone ، ايقونات مصممة على مبادئ التصميم المادي Material Design.</div><div><br /></div><div></div><blockquote><div>اقرأ ايضا:</div><div><div><a href="https://ar.codexait.com/2016/09/download-icons-free-resources.html">افضل المصادر لتحميل الأيقونات المجاني</a></div></div><div><div><a href="https://ar.codexait.com/2016/08/using-svg-icons.html">كيفية استخدام ايقونات svg في صفحات الويب </a></div></div><div><div><a href="https://ar.codexait.com/2015/12/font-icons.html">اضف ايقونات رائعة الى موقعك بواسطة Font-Awesome</a></div></div></blockquote><div><div><a href="https://ar.codexait.com/2015/12/font-icons.html"></a></div></div><div>كانت هذه مجموعة مميزة من افضل حزم <b>الأيقونات </b>المستخدمة في تصميم مواقع الويب وتطبيقات الهواتف الذكية ، بانماط واشكال متعددة ، اتمنى ان تنال اعجابكم.</div><div><br /></div><div><br /></div>Codex AIThttp://www.blogger.com/profile/15646728619579743282noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-31204823688815590872021-12-06T06:18:00.007+03:002022-04-28T07:48:23.246+03:00افضل الأدوات لتحسين وتكبير الصور دون فقدان جودتها اونلاين<p> </p><div class="separator" style="clear: both; text-align: center;"><img alt="افضل المواقع لتحسين الصور وتكبيرها دون فقدان الجودة" border="0" data-original-height="517" data-original-width="800" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHQSXZhl4ULI7Mb3lebmxWfoQvPEEgQtdV1TZHwvtSZa2h-wZBGOZuj7RVYhTTYg9KfkZ7JFpaoOkoZLBW7hTifqERDnM41MvfUc8mm0m1wBgUTpBOEXBOBFk4ON35K95pNgNTb-qoV8/s640-rw/enlarge+Image.jpg" title="افضل المواقع لتحسين الصور وتكبيرها دون فقدان الجودة" width="400" /></div><br /><p></p><p>عادة مانحتاج لتحسين جودة الصور الضعيفة او الصور التي تم تصويرها باحد الهواتف القديمة ، لهذا الغرض ظهرت العديد من الأدوات على الأنترنت التي تساعدك بتوضيح الصور الضعيفة او الصغيرة مجانا.</p><p> تستخدم هذه الأدوات تقنيات الذكاء الإصطناعي لمعالجة الصور بفصل البكسلات عن بعضها البعض ثم يتم مضاعفة كل بكسل من الصورة واعادة دمجها من جديد لانشاء صورة مكبره من الصورة الأصلية بدون فقدان الجودة.</p><p> فبعض الأدوات تقدم لك عدة صور مجانا والتي ستنجز بها مهمتك ، والبعض الأخر مجانا ولكن توجد خدمات متطوره مدفوعة او تحتاج لإنشاء حساب في الموقع ، هذه قائمة بالمواقع التي تحتوي على <b>ادوات </b>توضيح جودة الصور وتكبيرها بدون فقدان وضوح الصورة وجودتها</p><h2 style="text-align: right;">موقع <a href="https://bigjpg.com/" rel="nofollow" target="_blank">Big Jpg</a></h2><p>يحتوي على اداة تتميز بواجهة سهلة الإستخدام كل ماعليك فعله فقط رفع الصورة واختيار حجم <b>التكبير</b> نسبة او بالبكسل والتي تصل 8 اضعاف الصورة الأصلية ،والضغط على زر البدء لبدء عملية تكبير الصورة.</p><p> يستخدم الموقع خوارزميات الشبكات العصبية والذكاء الإصطناعي، كما يحتوي الموقع على تطبيقات خاصة بالويندوز والماك والأندرويد.</p><p><br /></p><h2>موقع <a href="https://imglarger.com/" rel="nofollow" target="_blank">AI Image Enlarger</a></h2><div>يقدم الموقع العديد من الأدوات الخاصة <b>بتحسين الصور</b> والتي في مقدمتها <b>تكبير الصورالصغيرة</b> وترقيتها دون فقدان جودة الصورة يكبر بنسبة 200% ،400% ، 800% ، بالإضافة الى ذلك تنميق الوجوه وإزالة الخلفية و!زالة التشويش في الصورة .</div><div><br /></div><div><h2>موقع <a href="https://upscalepics.com/" rel="nofollow" target="_blank">upscalepics</a></h2><div>موقع متميز <b>لتوضيح الصور</b> ويحتوي على العديد الخيارات مثل تحسين جودة الصورة وخيار ازالة التشويش من الصورة ايضا يوفر تقنية ضغط الصورة مع المحافظة على جودة الصورة.</div></div><div><br /></div><div><h2>موقع <a href="https://www.posterburner.com/makecustomposters" rel="nofollow" target="_blank">posterburner</a></h2><p>موقع رائع يساعدك على<b> تحسين جودة الصور</b> يتميز بسهولة الاستخدام ، تعتبر أداة مجانية ولكن لديه خيارات متطورة مدفوعة.</p><p><br /></p><h2 style="text-align: right;">موقع <a href="https://www.resizepixel.com" rel="nofollow" target="_blank">Resize Pixel</a></h2><p>يقدملك اداة بسيطه <b>لتكبير الصور</b> بكل سهولة ، فقط اختار الصورة التي تريد تكبيرها وحدد الحجم الذي تريدة وابدأ عملية المعالجة .</p><p><br /></p></div><h2 style="text-align: right;">موقع <a href="https://deep-image.ai" rel="nofollow" target="_blank">Deep Image</a></h2><p>موقع رائع متخصص بأدوات <b>ترقية الصور</b> وإزالة القطع الأثرية و<b>تحسين جودة الصورة</b> ، ولكن يوفر لك فقط خمس صور لتحسينها وتكبيرها مجانا، واذا اردت المزيد من الصور عليك الدفع على ذلك.</p><p><br /></p><h2 style="text-align: right;">موقع <a href="https://enhance.pho.to/" rel="nofollow" target="_blank">EnhancePho</a></h2><div>موقع يحتوي على العديد من الأدوات <b>لتحسين جودة الصورة</b> وازالة التشويش والعين الحمراء مع <b>تكبيرها</b> ولكن ليس بنسبة كبيره كالمواقع السابقة .</div><div><br /></div><div>تتنوع المواقع التي تحتوي على أدوات معالجة الصور والذكاء الإصطناعي لتحسين جودة الصور وتكبيرها ، ولكن التنتائج متقاربة نوعا ما ، الإختلاف يكون في تجربة المستخدم ، واتاحة الخدمة كمجاني او جزء من الخدمة مدفوع.</div><div><br /></div><div>كانت هذه مجموعة من ادوات <span style="color: #741b47;">تكبير الصور الضعيفة او الصغيرة بدون فقدان جودتها اونلاين</span> ، حيث تعتمد هذه العملية على تقنيات متقدمة في الذكاء الاصطناعي وعلم معالجة الصور Image Processing، دمتم في حفظ الله ورعايته.</div>Codex AIThttp://www.blogger.com/profile/15646728619579743282noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-64659070129507991762021-12-05T04:18:00.011+03:002022-02-01T00:04:29.083+03:00اضافة جدول التنقل او المحتوى في مقالات بلوجر بثلاث طرق<div class="separator" style="clear: both; text-align: center;"><img alt="جدول التنقل المحتوى لبلوجر" border="0" data-original-height="500" data-original-width="800" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5eM_5peK-pmzC7JJ-oMhyePFNSi2Uv3H4wkb5s4yhS14wFujqyzqZ3Dy6PTD7aaYcOuxCuZir7rh78ySJUNXWD0xCo16FfUlfOMzOyr-obQVuO9I_sxuMa5Y5aTzvnVTg7dbRHIEq1TA/s640-rw/Content-Of-Table.jpg" title="اضافة جدول التنقل او المحتوى لبلوجر" width="400" /></div><h2 style="text-align: right;">ماهو جدول التنقل Table Of content؟</h2><p><b>جدول التنقل او المحتوى</b> Table Of content للمقال هو عباره عن <b>فهرس </b>او قائمة تحتوي على العناوين الفرعية التي يتضمنها مقالك ، الذي يمكن الزائر من قراءة عناوين محتويات المقال والانتقال مباشرة الى الفقرة المطلوبة التي تبحث عنها ..</p><h2 style="text-align: right;">ما أهمية جدول التنقل في المحتوى لبلوجر؟</h2><p></p><ul style="text-align: right;"><li>تحسين <b>تجرية المستخدم </b>، حيث يمكن الزائر من تصفح محتويات المقال بسهولة.</li><li>تحسين <b>السيو </b>، يقدم لجوجل موجز لمقالك يدل على التنظيم وخصوصا مع امكانية التنقل في محتوى المقال بسهولة وهذا مايفضلة جوجل وكافة محركات البحث.</li><li>الأرشفة المثلى للمقال عند ارشفة مقالتك جوجل تضع العناوين دائما في الإعتبار لهذا يكون مقالك جاهز.</li></ul><h2 style="text-align: right;">تركيب جدول المحتويات او التنقل لبلوجر بثلات طرق</h2><h3 style="text-align: right;">1. اضافة جدول المحتوى بشكل يدوي </h3><div>ويكون كود محتويات الجدول بالشكل التالي</div><div><br /></div><div>
</div>
<pre><code>
<div class="toc">
<summary>محتويات المقال:</summary>
<ul>
<li><a href="<span style="color: red;">#<span>head1</span></span>"> العنوان الاول </a></li>
<li><a href="<span style="color: red;">#<span>head2</span></span>"> العنوان الثاني</a></li>
<li><a href="<span style="color: red;">#<span>head3</span></span>"> العنوان الثالث</a></li>
<li><a href="<span style="color: red;">#<span>head4</span></span>"> العنوان الرابع</a></li>
</ul>
</div>
</code></pre>في كل عنوان اضفته في جدول المحتويات يجب ان يحتوي على عنوان ال id المحدد باللون الاحمر كالتالي:
<pre><code><h2 <span style="color: red;">id</span>="<span style="color: #93c47d;">head1</span>">العنوان الأول</h2>
<h2 <span style="color: red;">id</span>="<span style="color: #93c47d;">head2</span>">العنوان الثاني</h2>
<h2 <span style="color: red;">id</span>="<span style="color: #6aa84f;">head3</span>">العنوان الثالث</h2>
<h2 <span style="color: red;">id</span>="<span style="color: #6aa84f;">head4</span>">العنوان الرابع</h2></code></pre>
<h3 style="text-align: right;">2. استخدام اداة انشاء جدول المحتويات لمقالك بشكل تلقائي</h3><div>هذه الطريقة المثلى لإنشاء <b>جدول التنقل للمحتوى</b> بضغطة زر مع تفادي الأخطاء فقط كل ماعليك فعله بعد الانتهاء من كتابتك لمشاركتك هو تحويل عرض محرر المشاركات الى عرض HTML وتحديد كافة محتويات المقال ونسخه بالكامل والدخول الى <b><a href="https://ar.codexait.com/p/table-of-content-creator.html">اداة انشاء جدول التنقل في المحتوى</a> </b>ولصق محتويات مقالتك واضغط على زر انشاء جدول التنقل ... بعد ذلك انسخ المحتويات والصقها في مدونتك واحفظ المشاركة .</div><div><br /></div><h4 style="text-align: right;">مالذي يميز اداة انشاء جدول المحتوى عن الاضافة التلقائية في بلوجر؟</h4>
<div>
<ol style="text-align: right;"><li>توفير بعض السرعة على مدونتك ، وذلك بتوفير في حجم التحميل وعمل الجافاسكريبت بعد التحميل، وبهذا يتم تخفيض قيمة CLS.</li><li>جدول المحتوى يكون منشأ مسبقا ضمن المحتوى وكأنه انشئ بلغات في جهة السيرفر كالوردبرس.</li><li>يساعد محرك البحث بالتعرف على جدول المحتوى بشكل تلقائي بدون تأخير وانتظار الجافا سكربت لكي تنشئة.</li><li>يمكنك من القدرة على تحديد المقال الذي تريد انشاء جدول تنقل في المحتوى له خصوصا المحتوى الطويل.</li></ol></div>
<div><br /></div><div>وبالأخير اذا اردت تنسيق شكل جدول المحتوى ادخل للقالب تحرير HTML وابحث عن الكود التالي </div>
<pre><code>]]></b:skin></code></pre>
<div>واضف قبله الكود التالي قبله مباشره:</div>
<pre><code>ol#tocList {
padding: 10px 30px 0;
margin-top: 0;
}
ol#tocList li:before {
display: none;
}
ol#tocList li a {
color: #333;
}
ol#tocList li {
list-style: decimal;
font-size: 15px;
line-height: 1.7;
margin-bottom: 5px;
padding-bottom: 5px;
color: #3c4041;
}
ol#tocList li:hover,
ol#tocList li a:hover {
color: rgb(0, 140, 255);
}</code></pre>
<div><br /></div><div>ومن مميزات الطريقتين السابقتين هو ان جدول التنقل يكون اساسا مدمج مسبقا في مشاركتك مما يجعل محركات البحث تتعرف عليه تلقائيا كما في مدونات وردبرس الذي يتم انشاءه مسبقا في جهة السيرفر.</div><div><br /></div><h3 style="text-align: right;">3.اضافة جدول التنقل او المحتوى التلقائي في بلوجر </h3><div>من مميزات هذه الطريقة انك لن تحتاج لعمل اي شيء عند كتابة المشاركة غير اضافة كود بسيط لايتعدى سطر .. ستقوم الاضافة بعد اضافتها لقالبك من انشاء جدول التقل بشكل تلقائي ، ايضا من عيوب جدول التنقل التلقائي انها ستنظاف اكواد الإضافة للقالب وتزيد من حجم القالب ، ولكن لاتقلق احظرت لك اكواد مختصره وخفيفة ، ايضا سيتم انشاء الجدول بعد تحميل المقالة للمتصفح.</div><h4 style="text-align: right;">تركيب اضافة جدول المحتويات الى قالبك</h4><div>1.إضافة اكواد ال CSS ، افتح محرر HTML لقالبك وابحث عن الكود التالي:</div>
<pre><code>]]></b:skin></code></pre>
<div>واضف الكود التالي قبله مباشره:</div>
<pre><code>.toctitle:before{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22list%22%20class%3D%22svg-inline--fa%20fa-list%20fa-w-16%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M80%20368H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm0-320H16A16%2016%200%200%200%200%2064v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16zm0%20160H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm416%20176H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0-320H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16V80a16%2016%200%200%200-16-16zm0%20160H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat center}
.toctitle:after{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22chevron-down%22%20class%3D%22svg-inline--fa%20fa-chevron-down%20fa-w-14%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M207%20381%2013%20187c-10-9-10-24%200-34l22-22c10-10%2025-10%2034-1l155%20155%20155-155c9-9%2024-9%2034%201l22%2022c10%2010%2010%2025%200%2034L241%20381c-9%2010-25%2010-34%200z%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center}
.tocHolder{display:inline-block;background:#f7f8fa;border:1px solid #dce0e1;margin:15px 0}
div#tocHolder{width:100%;clear:both;margin-bottom:15px}
.toctitle{position:relative;height:38px;background-color:#f7f9fa;font-size:16px;color:#333;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;margin:0;min-width:250px;width:300px}
ol#tocList{display:none}
.tocHolder.closed ol#tocList{display:block}
.toctitle:before{content:"";transform:revert;margin-left:10px;right:15px;text-align:center;line-height:26px;background-size:17px;height:24px;width:27px;border-radius:3px;border:1px solid #dce0e1;padding:4px;background-color:#eee}
.toctitle:after{content:"";float:left;margin-right:10px;position:absolute;left:15px;text-align:center;line-height:26px;background-size:12px;height:12px;width:12px}
ol#tocList{padding:15px 30px 0}
ol#tocList li:before{display:none}
ol#tocList li a{color:#333}
ol#tocList li{list-style:decimal;font-size:15px;line-height:1.7;margin-bottom:5px;padding-bottom:5px;color:#3c4041}
ol#tocList li:hover,ol#tocList li a:hover{color:#008cff}</code></pre>
<div>2.اضافة اكواد الجافا سكربت قبل اغلاق وسم body ، ابحث عن الكود التالي في قالبك :</div>
<pre><code></body></code></pre>
<div>والصق الكود التالي قبله مباشرة </div>
<pre><code><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script>
//<![CDATA[
if(document.querySelector("#tocHolder")){var t=null,a=null,html="",e=0;document.querySelectorAll(".post-amp h2").forEach(function(t){t.setAttribute("id","point"+e);var o=t.innerText;html+="<li><a class='ScrolingTopoint' href='#point"+e+"'>"+o+"</a></li>",e++});var tochtml="<div class='tocHolder'><div class='toctitle'>جدول التنقل</div><ol id='tocList'>"+html+"</ol></div>";document.querySelector("#tocHolder").innerHTML=tochtml,document.querySelectorAll(".ScrolingTopoint").forEach(function(e){e.addEventListener("click",function(t){t.preventDefault(),document.querySelector(e.getAttribute("href")).scrollIntoView({behavior:"smooth"})})}),0==document.querySelectorAll(".post-amp h2").length&&(document.querySelector("#tocList").innerHTML="<div class='no3nwen'>لا يوجد عناوين</div>"),document.querySelector(".toctitle").addEventListener("click",function(e){document.querySelector(".tocHolder").classList.toggle("closed")})}
//]]>
</script>
</b:if>
</code></pre>
<div>وأخيرا اضافة كود HTML في بدابة المشاركة التي تريد اظهار جدول التقل اليها، افضل اضافته في المشاركة عند الحاجة لإضافة جدول التنقل للمقالة ... وليس اجباريا لكل المقالات ... </div><div><br /></div>
<pre><code><div id="tocHolder"></div>
</code></pre>
<div><br /></div><div>ولكن اذا اردته اظهاره في كافة المقالات ابحث عن الكود التالي في القالب واضفته قبله مباشره</div><div><br /></div>
<pre><code></data:post.body></code></pre>
<div>كانت هذه ثلاث طرق لإضافة <b>جدول التنقل في المحتوى لمدونات بلوجر</b> ، وأتمنى ان تستفيد من الشرح دمتم في رعاية الله وحفظه.</div>
<br />Codex AIThttp://www.blogger.com/profile/15646728619579743282noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-69780835864272846552021-12-02T09:08:00.030+03:002022-04-28T07:46:46.989+03:00افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا<div class="separator" style="clear: both; text-align: center;"><img alt="افضل المواقع لتحميل قوالب وثيمات مواقع الويب مجانا" border="0" data-original-height="533" data-original-width="800" height="426" src="https://blogger.googleusercontent.com/img/a/AVvXsEg6L3_QXQlgZYZcsZSnsukoqLLcX37U8Ewfwb1CDzuASP2oMk3jGwAtAkUpGEvxFFOIb8itYxkrfzzZYEi1lPqnNFPWv3LFj202qnAlQb5m7HEW-p69hukjMvj8-MmRaK6_E0LSZh76jQyAsDvTsqPBMIMukuoJvkrMyUkxJ2YdVD8WSXMIAuI6_GC6=w640-h426" title="top htm css web templates and themes free download" width="640" /></div><div><br /></div><p style="text-align: right;">هل انت مصمم او مطور مواقع؟ او تتعلم ذلك ؟ بالتأكيد ستحتاج لهذه القوالب والتصميمات، هناك آلاف القوالب والصفحات الجاهزة والمجانية لمواقع الويب على الانترنت ، صفحات مصممة بواسطة <em class="emcode">HTML5, CSS3, JAVASCRIPT</em> .</p><p style="text-align: right;">سنقدم لكم اليوم مجموعة رائعة من المواقع للحصول على قوالب <b>وثيمات</b> وصفحات <b>ولوحات التحكم Admin Dashboard</b> لمواقع الويب يمكنك تحميلها مجانا، بالتأكيد يمكنك استخدام هذه القوالب ، سواء كلي او جزئي ، خصوصا اذا كنت مطور مواقع Back-End بالتأكيد ستحتاج الى استخدامك لمثل هذه القوالب.</p><p style="text-align: right;">يمكنك أيضا اخذ الالهام من هذه التصميمات وهذه افضل الطرق للإبداع ، نعم عند الاطلاع على تصاميم لمواقع الويب وترتيب افكارك ستخرج بالأخير بأفكار إبداعية وجمالية بتصاميم جذابة من خيالك.</p><div><br /></div><h2 style="text-align: right;"><span style="font-weight: normal;">اليك افضل المواقع لتحميل قوالب وصفحات المواقع HTML5 وCSS3 مجانية</span></h2><h3 style="text-align: right;"><span style="color: #990000;"><span>Free CSS</span></span></h3><p style="text-align: right;">يحتوي موقع FreeCSS على ما يقارب <span>3275 قالب مجاني مصممة بواسطة <b>HTML5 CSS3</b> ، في شتى المجالات سواء كانت صفحات هبوط او مدونات او قوالب خاصة بمجال معين.</span></p><p style="text-align: right;"><span>بالإضافة الى ذلك يحتوي الموقع على أدوات ومصادر وأكواد لبناء صفحات الويب ، الموقع متميز جدا وذلك لاحتوائه على قوالب متعددة الاستخدام ، أفكار بسيطة وصفحات رائعة الجمال. </span></p><div style="text-align: center;"><span><a href="https://www.free-css.com/free-css-templates" rel="nofollow" target="_blank">www.free-css.com</a></span></div><div style="text-align: center;"><span><br /></span></div><h3 style="text-align: right;"><span style="color: #990000;"><span>Templatemo</span></span></h3><p style="text-align: right;">موقع رائع يحتوي على آلاف القوالب المجانية بشتى أنواعها<b> قوالب للشركات وقوالب التطبيقات وصفحات الهبوط والمدونات</b> ، ستتعلم منها وتفيدك كثيرا ، يتميز بقوالب الصفحات الشخصية والمنمقة.</p><div style="text-align: center;"><a href="https://templatemo.com" rel="nofollow" target="_blank">templatemo.com</a></div><div style="text-align: center;"><span style="text-align: left;"><br /></span></div><h3 style="text-align: right;"><span style="color: #990000;"><span>w3layouts</span></span></h3><p>يحتوي الموقع على كمية ضخمة من تصاميم مواقع الويب المجانية ، <b>مواقع مصممة بواسطة البوتستراب متعددة الاستخدام</b> ،ويحتوي على اكثر من 4000 قالب مصمم بواسطة الورد برس ، وقوالب خاصة بالتجارة الالكترونية.</p><p>كما يتميز الموقع بتخصصه الفريد ، حيث يحتوي على قوالب لعرض الألعاب ، والفيديو ، وقوالب لعرض الصور ، وقوالب خاصة بالرياضة ، وقوالب للشركات بكافة أنواعها كشركات الاستضافة وغيرها.</p><p style="text-align: center;"><a href="https://w3layouts.com" rel="nofollow" target="_blank">w3layouts.com</a></p><p style="text-align: center;"><br /></p><h3 style="text-align: right;"><span style="color: #990000;"><span>Html5Up</span></span></h3><p>يقدم الموقع تصاميم مواقع ويب متجاوبة 100% ، مصممة بواسطة بأحدث تقنيات الويب HTML5 و CSS3 و Javascript بالتأكيد لا يوجد موقع يخلو من الجافا سكريبت.</p><p>ما يميزه سهولة تصفحه ، فالقوالب قابلة للتعديل بكل سهولة ويرجع ذلك لترتيب الكود ونقاوته من الأكواد الغير ضرورية وغير المستخدمة فهي مجانية بشكل كامل.</p><p style="text-align: center;"><a href="https://html5up.net" rel="nofollow" target="_blank">html5up.net</a></p><p style="text-align: center;"><br /></p><h3 style="text-align: right;"><span style="color: #990000;"><span>UIdeck</span> </span></h3><p>موقع UIdeck موقع بسيط ستجد فيه صفحات هبوط رائعة ومجانية مصممة بواسطة البوتستراب ، وقوالب ريكت React ، ايضا يحتوي على UI Components جاهزة لإضافتها في موقعك او تصاميمك يوجد منها المدفوع والمجاني.</p><p style="text-align: center;"><a href="https://uideck.com" rel="nofollow" target="_blank">uideck.com</a></p><p style="text-align: center;"><br /></p><h3 style="text-align: right;"><span style="color: #990000;"><span>One Page Love</span></span></h3><p>يحتوي الموقع على اكثر من 80 قالب متجاوب على كافة الشاشات والأجهزة ، يحتوي الموقع على قوالب عصرية مصممة بأحدث مبادئ التصميم ، تصاميم فلاتيه وتصاميم على مبدأ التصميم المادي Material Design.</p><p style="text-align: center;"><a href="https://onepagelove.com/templates/free-templates" rel="nofollow" target="_blank">onepagelove.com</a></p><p style="text-align: center;"><br /></p><h3 style="text-align: right;"><span style="color: #990000;"><span>Creative Tim</span></span></h3><p>موقع رائع جدا يقدم تصاميم خرافية وخصوصا في <b>لوحات التحكم Dashboard</b> ومشاريع جاهزة في تطوير الويب، يستخدم في تصميماته العديد من المكاتب واطارات عمل التصميم كالبوتستراب وال Vue.JS و React و AnjularJS والعديد.</p><p> بالإضافة الى ذلك أيضا يحتوي على العديد من أدوات ومكونات وإضافات جاهزة للاستخدام في تصاميمك وإضافات رائعة للمواقع ... فقط كل ما عليك هو انشاء حساب والذهاب الى قسم التصاميم المجانية ، أيضا بإمكانك مشاهدة التصاميم المدفوعة وأخذ الإلهام منها.</p><p style="text-align: center;"><a href="https://www.creative-tim.com" rel="nofollow" target="_blank">www.creative-tim.com</a></p><p style="text-align: center;"><br /></p><h3 style="text-align: right;"><span style="color: #990000;"><span>Themes For App</span></span></h3><p>هل لديك مشروع تطبيق <b>اندرويد</b> او تطبيق IOS ؟ او تريد <b>تصميم موقع لتطبيقك</b> ؟ موقع Themes For App يقدم لك مجموعة مختاره من صفحات الهبوط الجاهزة مخصصة لعرض تطبيقات الهواتف، يمكنك أخذ اإلهام منها او تستخدمها لعرض منتجك او تطبيقك...</p><p style="text-align: center;"><a href="https://themesfor.app/all-themes/" rel="nofollow" target="_blank">themesfor.app</a></p><p style="text-align: center;"><br /></p><blockquote><p>اقرأ ايضا:</p><p><a href="https://ar.codexait.com/2017/01/open-source-codes-and-projects.html">افضل المواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة</a></p><p> <a href="https://ar.codexait.com/2016/09/download-icons-free-resources.html">افضل المصادر لتحميل الأيقونات المجانية</a></p></blockquote>
<p></p><h3 style="text-align: right;"><span style="color: #990000;"><span>FreeHtml5</span></span></h3><p>موقع يحتوي على العديد من التصميمات وقوالب مواقع الويب الجاهزة والمجانية وأيضا توجد تصاميم مدفوعة ، قوالب مصممة بواسطة البوتستراب وال HTML5 ،باللإضافة الى لغة CSS3.</p><p>يقدم مواقع جاهزة لمصممي ومطوري المواقع يمكنهم تعديلها واستخدامها في أعمالهم.</p><p style="text-align: center;"><a href="https://freehtml5.co" rel="nofollow" target="_blank">freehtml5.co</a></p><p><br /></p><h3 style="text-align: right;"><span style="color: #990000;"><span>Tooplate</span></span></h3><p>يقدم الموقع مجموعة من <b>القوالب المجانية</b> الخاصة بالتجارة والتسويق الإلكتروني والصفحات الشخصية ، قوالب مصممة بواسطة ال CSS3 والبوتستراب ، يمكنك تعديلها بكل سهولة بأي <a href="https://ar.codexait.com/2016/11/free-code-editors.html">محرر اكواد</a> واستخدامها حسب متطلباتك.</p><p style="text-align: center;"><a href="https://www.tooplate.com" rel="nofollow" target="_blank">www.tooplate.com</a></p><p><br /></p><h3 style="text-align: right;"><span style="color: #990000;">Colorlib</span></h3><p>يعتبر من المواقع الشائعة لتحميل قوالب مجانية لكافة أنواع المواقع ، فهو يحتوي على قائمة من الأعمال المجانية في تصميم مواقع الويب.</p><p> بإمكانك الحصول على مجموعة نادرة من تصنيفات او أنواع قوالب مواقع الويب كقوالب خاصة بالسفر وقوالب خاصة بالعقارات وأخرى بالمصورين وأيضا الفنادق وغيرها.</p><p>يحتوي الموقع على قوالب مصممة بـ HTML CSS وقوالب خاصة بالورد برس ، فالموقع يقدم لك مجموعة مميزة من القوالب المجانبة ، يمكنك أيضا معاينة القوالب على شاشات متعددة.</p><p style="text-align: center;"><a href="https://colorlib.com/wp/templates/" rel="nofollow" target="_blank"><b>colorlib.com</b></a></p><h3 style="text-align: right;"><span style="color: #990000;">Theme Wagon</span></h3><p>من المواقع المميزة بتقديم قوالب عصرية مجانية في شتى المجالات مصممة بالبوتستراب و HTML5، قوالب متجاوبة مع كافة الشاشات.</p><p> أيضا يحتوي على لوحات تحكم Admin Dashboard مميزة ورائعة يمكنك استخدامها في موقعك بكل سهولة.</p><p style="text-align: center;"><a href="https://themewagon.com/theme-price/free/" rel="nofollow" target="_blank">themewagon.com</a></p><p style="text-align: center;"><br /></p><h3 style="text-align: right;"><span style="color: #990000;">Bootstrap Thames</span></h3><p>كذلك هذا الموقع يعتبر جيد جداً للحصول على قوالب مجانية جميلة وعصرية مصممة بواسطة <a href="https://ar.codexait.com/2016/10/best-bootstrap-arabic-course.html">البوتستراب</a>، يحتوي على العديد من أنواع الثيمات لمختلف أصناف المواقع، قوالب متجاوبة، وكود نظيف ومنظم، أيضا بإمكانك معاينة الموقع ومشاهدته واختبار تجاوبه قبل البدء بتحميله.</p><p>بالإضافة الى ذلك يحتوي الموقع على العديد من مصادر تصميم واجهات مواقع الويب كالأزرار والقوائم وجداول الأسعار وغيرها الكثير.</p><p style="text-align: center;"><a href="https://bootstrapthemes.co/items/free-bootstrap-templates/" rel="nofollow" target="_blank">bootstrapthemes.co</a></p><p style="text-align: center;"><br /></p><h2 style="text-align: right;">الخاتمة</h2><p>من المرجح اذا كنت مصمم او مطور مواقع ، ومهما كان خيالك وابداعك ، لكن لا يمكنك الاستغناء عن مشاهدة قوالب جاهزة او تنزيلها والتعديل عليها لما يلبي احتياجاتك واستخدامها في اعمالك،</p><p>لأن بعض الأعمال لا تعطي أهمية كبيرة للتصميم وخصوصا في اعمال مطوري الويب <span style="background-color: white; color: #222222; font-family: "Noto Naskh Arabic", "Open Sans", serif; font-size: 17px; white-space: pre-wrap;">BackEnd Developer</span>، تكون الأهمية لإنجاز مهام برمجية والتعامل مع قواعد البيانات والجلسات والكعكات والعمليات البرمجية الخاصة بالسيرفر وغيرها ، لهذا يجب استغلال وقتك ، <b>وتنزيل قالب جاهز</b> والتعديل عليه واستخدامه في عملك.</p><p>بالتأكيد اذا كنت مصمم مواقع ويب لن تستخدم من هذه القوالب الجاهزة لأن هذا تخصصك ويجب ان تبدع فيه، ولكن عليك خلق أفكار جديدة، غذي خيالك بمشاهدة تصاميم وقوالب جديدة، استفد أفكار وطرق جديدة للتصميم، وهذا ما سيمنحك ابداع بشكل لن تتصوره.</p><p><br /></p><p>كانت هذه <b>مجموعة مميزة من المصادر لتحميل قوالب وصفحات الويب المجانية</b> واذا كانت لديك مصادر مجانية أخرى لتحميل القوالب والثيمات المجانية الرجاء شاركها معنا بالتعليقات.</p><p></p>Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-76740239508131711412019-12-31T23:17:00.011+03:002022-04-28T09:24:18.815+03:00تأمين وحماية المواقع المطورة بلغة PHP<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img alt="تأمين وحماية المواقع المطورة بلغة PHP" border="0" data-original-height="840" data-original-width="1600" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_8TQUkbj7ouSpByyCgTurdOHANDgeNHE05XMn-mYvtPEOh1LjP3cRQqIsUknNLaI0c3vNSJkvn-Rz8uvfLISjT_kJapr-BMtGVHpxJp4DiX8vQvo-fFUrQAApfL1L6x-svE8d5DR2M4/w640-h336/post-1540205838-image_file-user_id_65.jpg" title="تأمين وحماية المواقع المطورة بلغة PHP" width="640" /></div>
<br />
كثير من المواقع المطورة بلغة PHP يتم اختراقها بسهولة وذلك لكثرة المبتدئين الذين يطوروا مواقع الويب بلغة PHP وذلك لسهولتها وامكانية تطوير موقع بتعلم الاساسيات بدون التعرف على الأساليب والطرق البرمجية الصحيحة لبناء موقع ويب خالي من الثغرات .<br />
ومع التطور التقني في شتى المجالات وخصوصا في مجال الهاكر والقرصنة انتشرت كثير من البرمجيات المجانية والتي مكنت الكثير من الهاويين استخدامها في اختراق المواقع لأجل المتعة والتباهي ، وبذلك صار لابد من بناء طرق حديثة وقوية <b>لتطوير مواقع خالية من الثغرات</b>.<br />
<div>
<br /></div>
<div>
سيتم في هذا المقال دراسة الثغرات الامنية والحد من انتشارها وتواجدها في المواقع الصغيرة والكبيرة ، واستخدام شتى المعارف والطرق الحديثة والمتطورة في <b>تأمين وحماية المواقع المطورة بلغة PHP</b>، وبناء مواقع قوية خالية من الثغرات.</div>
<div>
<br /></div>
<h2 style="text-align: right;">
مجموعة من الثغرات الامنية في مواقع الويب وكيفية الحد من انتشارها</h2>
<h3 style="text-align: right;">الحد من ثغرات الــ <a href="https://ar.codexait.com/2015/12/xss.html">xss</a></h3><div>وذلك بالتحقق من المدخلات او فلترتها في جهة المستخدم عن طريق الجافا سكريبت او مكتبة الجي كويري ايضا توجد العديد من الإضافات الجاهزة التي يمكن استخدامها بسهولة ،</div><div>ايضا تعتبر جهة الخادم هي المكان الأساسي للتنفيذ لهذا يجب عليك استخدام دوال الفلترة والتحقق التي توفرها لغة PHP .</div><div><br /><h3 style="text-align: right;">الحد من ثغرات حقن البيانات <a href="https://ar.codexait.com/2016/10/sql-injection.html">SQL Injection</a></h3></div><div> وذلك باستخدام الكلاس PDO للتعامل مع قواعد البيانات وذلك بالطريقة المثلى و المعيارية للتعامل مع قواعد البيانات والتي تمر بالمراحل التالية الاتصال والاعداد واضافة البارامترات واخيرا اضافة البيانات والتنفيذ ، وبهذه الطريقة يتم الحد من ثغرة حقن البيانات والتحقق من الاكواد المضمنة بشكل آلي.<h3 style="text-align: right;">الحد من ثغرات <a href="https://ar.codexait.com/2016/02/file-include.html">File Remote Inclusion</a> في لغة PHP</h3> وذلك عن طريق اضافة مصفوفة تحتوي على الصفحات المسموح بها عمل تضمين داخل السكريبت وتعمل تحقق من وجود هذه الصفحة في المصفوة فبل تضمينها او استدعائها من خلال الدالة include(); ، </div><div>الطريقة الثانية وهي ايقاف عملية استدعاء ملفات خارجية داخل اكواد الــ php وذلك بتحويل قيمة المتغير allow_url في ملف php.ini على السيرفر الى OFF ، وبهذا سيتم منع تنفيذ كود التضمين بشكل نهائي .<br /><ol>
<div>
<br /></div>
</ol><h3 style="text-align: right;">تشفير كلمات السر في قاعدة البيانات</h3></div><div>يجب تشفير كلمة السر باستخدام احدى خوارزميات الهاش مثل md5 او sha2 وافضل استخدام sha2 لأنها تعتبر اخر اصدار من خوارزميات الهاش ، والتشفير بالهاش يتم من جهة واحدة فقط تشفير ولا يمكن ارجاعها لأصلها.</div><div>ولكن يجب ايضا استخدام كلمة سر معقدة ، تحتوي على الرموز والأرقام والحروف الكبيرة والصغيرة ، لأنه هناك بعض الأدوات تقوم باستعادة كلمة المرور الأصلية اذا كانت كلمة السر سهلة ومعتادة ، ففي لغة الـ PHP نستخدم الدالة:
<br /><pre><code>password_hash($password,$hash algorithm);</code></pre><div><br /></div>
:ايضا استخدم الدالة التالية للمقارنة بين الهاش وكلمة السر الأصلية للتحقق من ذلك
<pre><code>password_verify($password , $hash);</code></pre><ol>
<div>
<br /></div>
</ol><h3 style="text-align: right;">يجب كتابة الدلة exit(); بعد استخدام دالة التوجيه header(); </h3></div><div>لأنه في حال عدم استخدامها يعمل على طباعة جميع التعليقات المضافة بعدها.</div><div><br /></div><h3 style="text-align: right;">تعطيل امكانية تنفيذ الملفات على السيرفر التي يرفعها المستخدم</h3><div>وذلك عن طريق ملف الـ .htaccess ويتم ذلك من خلال الكود التالي:
<br /><pre><code><filesMatch "\.{php|rb|py|inc|txt}$">
Order allow, deny
Deny from all
</filesMatch> </code></pre><h3 style="text-align: right;">تعطيل خاصية عرض الاخطاء من السيرفر</h3></div><div> لانها تمكن الهاكر من استنتاج اكوادك البرمجية وقواعد البيانات من تحليل الأخطاء وذلك من خلال جعل قيمة عرض الأخطاء تساوي صفر كالتالي:
<div><br /></div><pre><code>error_reporting(0);</code></pre><div><br />
او عن طريقة تغييره من ملف اعدادات php باسم php.ini كالتالي:
</div><pre><code>display_errors : Off</code></pre><h3 style="text-align: right;">منع المستخدم من دخول المجلدات الفرعية للموقع التي تستخدم لتخزين الصور والملفات بشكل مباشر</h3></div><div>وذلك عن طريق اضافة الكود التالي في ملف <a href="https://ar.codexait.com/2016/08/remove-php-ext-with-htaccess.html">htaccess</a> :
<div><br /></div><pre><code>IndexIgnore *
</code></pre><ol>
<li>استخدام استضافة قوية وذات امنية عالية.</li>
<li>استخدام بروتوكول HTTPS.</li>
<li>حذف الملفات الهامشية وملفات التثبيت من المشروع.</li>
<li>تحديث اصدار PHP لآخر اصدار.</li>
</ol>
<h2 style="text-align: right;">
<span><span style="color: #990000;">دور استخدام اطار عمل في PHP لتطوير تطبيقات الويب في امن وحماية الموقع.</span></span></h2>
</div>
<div>
يعتبر استخدام <a href="https://ar.codexait.com/2016/02/build-your-php-mvc.html">اطار عمل php framework</a> من اكثر الادوات التي توفر عليك الكثير من الاكواد البرمجية التي يجب ان تستخدمها في الفلتره والحد من ثغرات الحقن Sql Injection و file Remote Inclusion وغيرها الكثير من الكلاسات الجاهزة لتوفير الحماية والتشفير.</div><div> ومن اهم اطارات العمل والاكثر شهرة ودعما في يومنا هذه <a href="https://ar.codexait.com/2016/11/laravel-php-framework.html">اطار العمل لارافيل PHP Laravel Framework</a> ، لهذا تعتبر من اسهل الطرق <b>لبناء مواقع بلغة PHP ذات امنية وحماية عالية</b>.</div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
كانت هذه مقاله جديده للمهتمين بتطوير مواقع php خالية من الثغرات ... واذا كانت لديكم اضافات اخرى اتركوها في التعليقات لتعم الفائدة للجميع ... تابعونا على مواقع التواصل الاجتماعي للمزيد من المقالات .... دمتم في رعاية الله وحفظة.</div>
</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-10005440393774174402017-01-29T02:24:00.011+03:002022-04-28T07:52:22.685+03:00افضل المواقع لتحميل الكتب المجانية في البرمجة وتقنية المعلومات<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img alt="تحميل كتب مجانية في البرمجة وتقنية المعلومات" border="0" height="391" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgkeW8lVpCbpJaFc6QZSZqf2wWK7vD5KEeo4fqqycKXUT7idxlyFMInqBgmZ-vRhBawLRjYG7l3PYOyJAggmLed2GzaNlQwmgI1tU_ETctDB5bgUxPTgFDCt1loVNrYQUnN7PQ3anrn0/w640-h391/itbooks.jpg" title="تحميل كتب مجانية في البرمجة وتقنية المعلومات" width="640" /></div>
</div>
الكتاب من اهم وسائل التعليم الاساسية سواء في العصر الحجري او عصر التقنية ، فقط تطورت وسائل العرض والقراءة ، فالكتاب يظل خير صديق ، وافضل مرجع ، نعم انه الكتاب الذي لاغنى عنه ومن يستغني عن الكتاب فهو فاشل.</div><div dir="rtl" style="text-align: right;" trbidi="on">لهذا في هذا المقال سنستعرض مجموعة من المواقع او المكتبات الالكترونية لتحميلها ، التي توفر مجموعة هائلة من <b>الكتب الالكترونية المجانية في البرمجة وتقنية المعلومات</b> ، في اللغة العربية والانجليزية .<br />
<br />
<h2><a href="https://books-library.net/t-Programming-best-download" rel="nofollow" target="_blank">مكتبة الكتب</a></h2>
اذا تكلمنا عن الكتب في اللغة العربية فهي تفتقد للكثير وخاصة في المجال التقني ، ولكن في السنوات الأخيرة تحرك بعض الشباب بتأليف وترجمة وتجميع بعض الكتب الرائعة.</div><div dir="rtl" style="text-align: right;" trbidi="on">وتأتي في المقدمة اكاديمية حسوب التي قدمت كتب رائعة في مجال <b>البرمجة وتقنية المعلومات</b> وبشكل مجاني.</div><div dir="rtl" style="text-align: right;" trbidi="on">لهذا يجب الإطلاع على الكتب االمتوفرة في مجال البرمجة وتقنية المعلومات باللغة العربية من هذا الموقع ، والذي يعتبر مكتبة شاملة وخاصة للمجال التقني.<br />
<br />
<h2><a href="https://www.kutub.info/library/category/1" rel="nofollow" target="_blank">موقع كتب</a></h2>
موقع عربي اخر ، ويعتبر من المواقع المميزة لتحميل كتب لغات البرمجة وتقنية المعلومات بشكل خاص ، وجميع الجوانب الاخرى سواءا العلمية او الثقافية.<br />
<br />
<h2><a href="https://ebooks-it.org/" rel="nofollow" target="_blank">ebooks-IT</a></h2>
يعتبر الموقع الاول في هذا المجال ويوفر عدد هائل من الكتب الرائعة والمجانية ، ويتميز بمحرك بحث رائع ، يمنحك القدرة على البحث وفلترة النتائج على حسب المؤلف او تاريخ الاصدار.</div><div dir="rtl" style="text-align: right;" trbidi="on"> ويحتوي على عدة اقسام في البرمجة وتقنية المعلومات ، من لغات البرمجة وهندسة البرمجيات الى الشبكات وامن المعلومات وانظمة التشغيل ، بالاضافة الى تصميم وتطوير المواقع و <a href="https://ar.codexait.com/2016/08/learn-android-development.html" target="_blank">كتب في برمجة تطبيقات الهاتف</a> ، وغيرها من مجالات تقنية المعلومات.<br />
<br />
<h2><a href="https://www.freebookcentre.net/" rel="nofollow" target="_blank">freebookcentre.net</a></h2>
موقع هو الأخر يحتوي على مجموعة من الكتب في عدة لغات برمجة وقواعد البيانات ، بالاضافة الى اللينكس والشبكات، و يمنحك تحميل الكتب بصيغة PDF او استعراضها وقراءتها على الموقع.<br />
<br />
<h2><a href="https://itbookshub.com/" rel="nofollow" target="_blank">itbokshub.com</a></h2>
يعتبر مكتبة ضخمة تشمل مجموعة كبيرة من الكتب في عدة لغات برمجة وقواعد البيانات ،تصميم وتطوير مواقع الويب ، ايضا برمجة تطبيقات الموبايل ،الخوارزميات والذكاء الاصطناعي والجرافيكس ، بالاضافة الى اللينكس والشبكات ، وكل مايخص التقنية وامن المعلومات.<br />
<br />
<blockquote>
اقرأ ايضا: <a href="https://ar.codexait.com/2017/01/open-source-codes-and-projects.html" target="_blank"> 7 مواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة</a></blockquote><p> <a href="https://ar.codexait.com/2021/12/web-design-template-free-download.html">افضل 10 مصادر لتحميل قوالب و صفحات مواقع (HTML+CSS+JS) جاهزة مجانا</a></p>
<br />
كانت هذه مجموعة من المواقع المميزة التي تقدم مجموعة هائلة من <b>الكتب المجانية للتحميل في البرمجة وتقنية المعلومات</b> ، واذا كانت هناك مواقع اخرى استفدت منها شاركها معنا في التعليق اسفله، دمتم في رعاية الله وحفظه!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-2329856227420632602017-01-12T02:10:00.062+03:002022-06-30T02:02:53.066+03:00افضل المواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة<div class="separator" style="clear: both; text-align: center;"><img alt="7 مواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة" border="0" data-original-height="376" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vXwAXXXg8_mGrZurdxQ9046Ltjf5X9QxZFY5T82bFCR54aqaJPVHhEV6Zw8CgI4V0XpFpmw77kc5RP3N0ry2n8QHpHv1XLltE9G7KnmFhfOD2P3qNxxw27O6-XjaajJ2-j8oOl6jh4k/s640-rw/Open+Source+Code.png" title="7 مواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة" /></div><div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
من الاعتيادي كمبرمج ان تبحث عن <b>اكواد ومشاريع مفتوحة المصدر</b> لتستفيد منها في <b>برمجة</b> مشاريعك او تتعلم منها أداء بعض المهام المتقدمة والتي لا تتواجد شروحات لها بشكل مباشر.</div><div>وبالتأكيد انك قد حاولت البحث في محرك البحث جوجل عن مشاريع معينة او اكواد محددة ، وبنسبة كبيرة لن تجد ما تريده بالضبط ، ولكن لا تقلق هناك مصادر خاصة ستقدم لك العديد من <b><span style="color: #073763;">المشاريع والاكواد مفتوحة المصدر</span></b>، لتستفيد منها وتوظفها حسب احتياجاتك.</div><div>في هذا المقال سنقدم لك مجموعة مميزة من المواقع التي توفر عنك الكثير من الوقت والجهد في البحث عن مشاريع واكواد مفتوحة المصدر.<br />
<br /><h2 style="text-align: right;">افضل المصادر للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة</h2>
<h3 style="text-align: right;"><span style="color: maroon;"><span>Github</span></span></h3>
بالتأكيد ان موقع github ليس بالجديد عليك ، او قد سمعت به سابقا فهو موقع يتيح للمبرمجين والمطورين مشاركة مشاريعهم في الموقع <b>مفتوحة المصدر.</b></div><div>ويتواجد ملايين المطورين على هذا المجتمع ، حيث بإمكانك البحث في الموقع عن <b>مشاريع واكواد جاهزة</b> ، وبإمكانك تنزيلها او إضافة نسخة خاصة بك من أي مشروع على الموقع والتعديل عليها كما تريد.</div><div> بالإضافة الى ذلك اذا كان لديك مشروع لامع ، يمكنك انشاء صفحة خاصة به بدومين فرعي من الموقع ، ومشاركته مع العالم ، والكثير الكثير.</div><div>أيضا من الخدمات الرائعة الأخرى على الموقع كمحرر الاكواد لتحرير اكوادك مباشرة على الموقع ، وغيرها.</div><div style="text-align: center;"><a href="https://github.com" rel="nofollow" target="_blank">github.com</a></div><div style="text-align: center;"><br /></div><h3 style="text-align: right;"><span style="color: maroon;">searchcode</span></h3><div>
هو عبارة عن محرك بحث عن <b>الأكواد البرمجية</b> في معظم لغات البرمجة ، حيث يحتوي على اكثر من 20 بليون سطر برمجي في 7 ملايين مشروع ، لذا فهو كنز ضخم لكل مبرمج.</div><div> فهو يوفر عنك الجهد في البحث عن اكواد والتنقل بين عدة مواقع ، في مكان واحد.</div><div style="text-align: center;"><a href="https://searchcode.com" rel="nofollow" target="_blank">searchcode.com</a></div><div style="text-align: center;"><br /></div><div>
<h3 style="text-align: right;"><span style="color: maroon;"><span>Open Hub</span></span></h3>
هو ايضا محرك بحث خاص بالأكواد <b>البرمجية</b> ويحتوي على كمية ضخمة من <b>الأكواد </b>مفتوحة المصدر ما يعادل 35 بليون سطر برمجي.</div><div style="text-align: center;"><a href="https://www.openhub.net" rel="nofollow" target="_blank">www.openhub.net</a></div><div style="text-align: center;"><br /></div><div>
<h3 style="text-align: right;"><span style="color: maroon;"><span>CodeProject</span></span></h3>
من افضل المواقع التي تقدم <b>مشاريع متكاملة في عدة لغات برمجة</b> ، فهو عبارة عن مجتمع تابع لشركة ميكروسوفت للمبرمجين لهذا معظم حلول لغات الدوت نت DotNet ستجدها في هذا الموقع، حيث يحتوي على ملايين المطورين من جميع انحاء العالم.</div><div>يتميز أيضا بكونه مرجع للأسئلة ، أيضا يحتوي على مقالات لحل معظم المشاكل البرمجية يتضمن في هذه المقالة مثال تطبيقي لتحميله مع السورس كود.</div><div>يمكنك التسجيل في الموقع وتحميل <b>مشاريع مجانية Open Source</b> ، أيضا يمكنك الاستفادة من خبرات المطورين في المجتمع بطرح استفساراتك.</div><div style="text-align: center;"><a href="https://www.codeproject.com" rel="nofollow" target="_blank">www.codeproject.com</a></div><div style="text-align: center;"><br /></div><div><h3 style="text-align: right;"><span style="color: maroon;"><span>Codota</span></span></h3>
في حال كنت مطور تطبيقات الاندرويد فهذا الموقع هو غايتك ، يقدملك كمية ضخمة من <b>الأكواد المجانية</b> لأداء المهام البرمجية الأساسية والمتقدمة ، مع صندوق بحث متميز للبحث عن الاكواد الجاهزة والكلاسات.</div><div><div style="text-align: center;"><a href="https://www.codota.com" rel="nofollow" target="_blank">www.codota.com</a></div><div><div style="text-align: center;"><br /></div>
<blockquote>
اقرأ أيضا:
<a href="https://ar.codexait.com/2016/08/learn-android-development.html">دورات ومصادر تعلم برمجة تطبيقات الاندرويد من الصفر للإحتراف</a>
</blockquote>
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><span>CodePen</span></span></h3>
هو عبارة عن موقع شبيه بشبكة تواصل ، خاص بمصممي مواقع الويب ، اذا كنت مصمم مواقع فهذا الموقع هو مبتغاك ، حيث يمكنك من <b>مشاركة اكوادك</b> ومعاينتها ونشرها في الموقع والاستفادة من تصاميم الأخرين.</div><div>يحتوي الموقع على كمية ضخمة من المصممين ، لهذا ستجد أفكار مذهلة وجديدة في تصميم المواقع ، وستستفيد كثير جدا من خلال انضمامك لهذا الموقع الرائع ، أيضا يحتوي على محرر اكواد Real Time Editor رائع يمكنك من تحرير اكواد
<em class="emcode">HTML/CSS/JS</em>
، وعرض النتيجة بشكل مباشر.</div><div>ايضا يمكنك ان تحصل على تقييم وانتقادات بناءة على مشروعك لتحسين مهاراتك ،وللمزيد يمكن الاطلاع على <a href="https://ar.codexait.com/2021/12/web-design-template-free-download.html">افضل المواقع لتحميل قوالب وتصاميم مواقع html5 و css3 جاهزة مجانا</a> ، قوالب مصممة بالبوتستراب، ولوحات تحكم احترافية لإدارة المواقع والكثير غير ذلك.</div><div style="text-align: center;"><a href="https://CodePen.io" rel="nofollow" target="_blank">CodePen.io</a></div><div style="text-align: center;"><br /></div><div>
<h3 style="text-align: right;"><span style="color: maroon;"><span>CodeAnyWhere</span></span></h3>
هذا الموقع يعتبر نسخة مطورة من الموقع السابق CodePen حيث يتميز عليه بمجموعة من المميزات ، كدعمه للغات تصميم وتطوير المواقع الاتية HTML/CSS/JS/PHP/PYTHON//RUBY/java<br />
ويحتوي على اكثر من 362 مليون ملف من<b> الاكواد الجاهزة </b>، لهذا بالتأكيد ستحصل على <b>اكواد ومشاريع</b> مفيدة.</div><div style="text-align: center;"><a href="https://codeanywhere.com" rel="nofollow" target="_blank">codeanywhere.com</a></div><div style="text-align: center;"><br /></div><div>
<blockquote style="text-align: right;">اقرأ أيضا:<br />
<a href="https://ar.codexait.com/2016/03/code-compilers-online.html" target="_blank">نفذ اكوادك على الانترنت بدون تثبيت أي تطبيقات</a><br />
<a href="https://ar.codexait.com/2017/01/free-programming-books.html" target="_blank">افضل المواقع لتحميل الكتب المجانية في البرمجة وتقنية المعلومات</a>
</blockquote>
<h3 style="text-align: right;"><span style="color: #990000;">Stack Overflow</span></h3>يعتبر الموقع الأول الذي يلجأ اليه كافة المبرمجين عند مواجهة أي مشكلة برمجية ، لاسيما مطوري تطبيقات سطح المكتب ولكن أيضا مطوري الويب وتطبيقات الهاتف المحمول وبكافة اللغات البرمجية ...</div><div dir="rtl" style="text-align: right;" trbidi="on">الموقع مجاني بشكل كامل أنشئ حسابك شارك مشاكلك لحلها ، او ابحث عن مشكلتك البرمجية التي تواجهها في الموقع فبالتأكيد ستجد لها الحل المناسب ، الموقع سهل الاستخدام ومهيكل بشكل يسهل استخدامه.</div><div dir="rtl" style="text-align: center;" trbidi="on"><a href="http://stackoverflow.com" rel="nofollow" target="_blank">stackoverflow.com</a></div><div dir="rtl" style="text-align: center;" trbidi="on"><br /></div>
<h3 style="text-align: right;"><span style="color: #660000;">SourceForge</span></h3>
<p>موقع يدعم ويساعد المطورين على جعل مشاريعهم مفتوحة المصدر مشاريع ناجحة ومتداولة ، يحتوي الموقع على اكثر من 502.000 مشروع مفتوح المصدر ومجاني للتحميل من قبل 2.1 مليون مطور.</p><p style="text-align: center;"><a href="https://sourceforge.net" rel="nofollow" target="_blank">sourceforge.net</a></p></div>
<div><div style="text-align: right;" trbidi="on"><h3 style="text-align: right;"><span style="color: #990000;">FossHub</span></h3><div>يعتبر من المواقع الهامة والمميزة، تم اطلاقه في عام 2007، والذي جعله مكانا موثوقا للمستخدمين لتحميل البرمجيات مفتوحة المصدر والمشاريع مفتوحة المصدر.</div><div>الموقع مزود بسيرفرات او خوادم عالمية عالية السرعة، لتحميل صفحات الموقع بسرعة عالية وتنزيل البرمجيات مفتوحة المصدر بسرعة عالية، وهي تأتي بروابط مباشرة للتحميل، فلا حاجة للانتظار لتحويل الروابط.</div><div>تحتوي قائمة البرمجيات مفتوحة المصدر على عدد التحميلات لكل عنصر ونظام التشغيل المدعوم ، FossHub يعتبر مكانك المفضل لتحميل البرمجيات مفتوحة المصدر.</div><div style="text-align: center;"><a href="https://www.fosshub.com" rel="nofollow" target="_blank">www.fosshub.com</a></div><div style="text-align: center;"><br /></div><h2 style="text-align: right;">الخاتمة</h2>
</div>
<p>
كانت هذه مجموعة مميزة من المواقع التي تقدم <b>اكواد ومشاريع جاهزة ومجانية</b> في جميع مجالات البرمجة، التي ستفيدك كمطور ومصمم مواقع ، او كمبرمج في مختلف الإطارات البرمجية.</p><p>وأتمنى اني وفقت بطرح هذه المواقع ، واذا كانت هناك مواقع أخرى استفدت منها لا تتردد بمشاركتها في تعليق ليستفيد منها الجميع، دمتم في رعاية الله وحفظه!</p>
</div>Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-73137780770257149552016-12-20T02:10:00.005+03:002021-12-27T03:43:51.467+03:00اضافة زر الصعود الى اعلى لمدونات بلوجر مع امكانية التخصيص<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nAdFVnV3g0Cd_pcWRrFG1ShOVtWT0lqze3W-Xo0yAFUy1rjVjntDFaE0FDU4jTZb-LpMcCStYCkLUsC8KjA64bxkxk2q5QBXIExujB1ZuEjbcOE_97CwjlAGrvJLGDrJ3NaMSqVMnVE/s1600-rw/top+scroll.png" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة زر الصعود الى اعلى لمدونات بلوجر" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nAdFVnV3g0Cd_pcWRrFG1ShOVtWT0lqze3W-Xo0yAFUy1rjVjntDFaE0FDU4jTZb-LpMcCStYCkLUsC8KjA64bxkxk2q5QBXIExujB1ZuEjbcOE_97CwjlAGrvJLGDrJ3NaMSqVMnVE/s640-rw/top+scroll.png" title="اضافة زر الصعود الى اعلى لمدونات بلوجر" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<b>اضافة زر الصعود الى اعلى</b> من الاضافات الثانوية <b>لمدونات بلوجر</b> ، ولكن تعتبر ذات اهمية كبيرة وخاصة اذا كنت تنشر محتوى طويل او اذا كان لديك تعليقات كثيرة.</div><div dir="rtl" style="text-align: right;" trbidi="on"> فهي من الاضافات التي ترفع تجربة المستخدم ، لهذا اقدم لكم اليوم اضافة زر <b>الصعود </b>الى اعلى لمدونات بلوجر ، بطريقة سهلة جدا مع امكانية التخصيص لما يتناسب مع لون مدونتك.</div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;">تركيب اضافة زر الصعود على قالب بلوجر كمايلي</h2>
1 - ابحث عن الكود <span class="code">]]></b:skin></span> في محرر HTML من لوحة تحكم بلوجر واضف الكود التالي قبله :<code>
</code><br />
<pre><code>#scroll-top{
overflow: hidden;
position: fixed;
z-index: 9999;
right: 30px;
bottom: 15px;
width: 40px;
height: 40px;
color: #EEE;
background-color: #<span style="color: red;">059fc5</span>;
font-size: 20px;
text-indent: 0px;
cursor: pointer;
text-align: center;
border-radius: 50% !important;
transition: all 0.5s ease 0s;
}
#scroll-top i{
height:40px;
line-height: 36px;
}</code></pre>
<br />
<br />
للتعديل غير لون الخلفية المحدد بالون الأحمر مع مايتناسب مع لون مدونتك :<br />
<br />
2 - ابحث عن الكود <span class="code"></body></span> واضف قبله الكود التالي :<br />
<pre><code><div id="scroll-top" style="display:none;">
<i class="fa fa-angle-up"></i>
</div>
<span style="color: red;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/></span>
<script type="text/javascript">
/*<![CDATA[*/
var scrollbtn = $("#scroll-top");
$(window).scroll(function(){
$(this).scrollTop() >= 700 ? scrollbtn.show(): scrollbtn.hide();
});
scrollbtn.click(function()
{
$("html,body").animate({scrollTop : 0},600 );
});
//]]>
</script></code></pre>
بالنسبة لمكتبة jquery المحددة باللون الأحمر اذا كانت موجودة سابقا في مدونتك ، احذفها ، ايضا خط font Awesome يجب ان يتواجد على مدونتك مالم اضف هذا الكود قبل الوسم التالي <span class="code"></head></span>:<br />
<pre><code><link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
</code></pre>
<br />
وبهذا تكون اضفت <b>زر الصعود الى اعلى على مدونتك</b> بنجاح ، واذا واجهت اي مشكلة في التركيب لاتتردد بتركها في تعليق ، دمتم في رعاية الله وحفظه!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-21757064355831000442016-12-18T02:31:00.008+03:002022-04-28T08:00:19.917+03:00افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKI-oMl4m-_043Eni41c7iOqplgT59TFzAu0SmJ1VGSc2mvISMRkMkQUqduhnRAJg02WdrcOyb7wVhGwFPAoEEdD0Bq2z5ZTqK9PM5CzxPtNjK5K_pC6HfHII5DNS8ZziPKoqwuZjolqM/s640-rw/Css+Animation+Library.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب" border="0" data-original-height="177" data-original-width="284" height="399" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKI-oMl4m-_043Eni41c7iOqplgT59TFzAu0SmJ1VGSc2mvISMRkMkQUqduhnRAJg02WdrcOyb7wVhGwFPAoEEdD0Bq2z5ZTqK9PM5CzxPtNjK5K_pC6HfHII5DNS8ZziPKoqwuZjolqM/w640-h399-rw/Css+Animation+Library.jpg" title="افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
</div>
<b>التأثيرات الحركية او الــ Animation</b> يعتبر من التقنيات الحديثة في عالم الويب ، التي تعتمد على <b>CSS3 </b>، وبهذه التقنية تجعل الموقع اكثر تفاعلا واشراقا لدى الزائر.</div><div dir="rtl" style="text-align: right;" trbidi="on">حيث كان سابقا يتم الاعتماد على ادوب فلاش لصناعة التأثيرات والحركات ، ولكن مع ظهور تقنية CSS3 مكنت مصممي المواقع من عمل تأثيرات رائعة، مع توفير الجهد والمصادر.</div><div dir="rtl" style="text-align: right;" trbidi="on">ايضا توفرت العديد من مكتبات الـ Animation المجانية التي يمكن استخدامها في تصميم مواقع الويب لعمل العديد من التأثيرات الجميلة وهذه مجموعة مميزة من المكتبات الشهيرة.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;"><b>افضل مكتبات الـ Animation المبنية بواسطة CSS3</b></h2>
<h3 style="text-align: right;"><a href="https://daneden.github.io/animate.css/" rel="nofollow" target="_blank">Animate.css</a></h3>
Animate.css واحدة من <b>افضل مكتبات الـ Animation المبنية بواسطة CSS3</b> والأكثر استخداما، ايضا تحتوي على عدد كبير من التأثيرات الحركي.</div><div dir="rtl" style="text-align: right;" trbidi="on">وتقدم افضل اداء للمستخدم وخاصة مع الهاتف مع امكانية ضغط اكوادها التي تبلغ 55 كيلو بت ، وتعتبر سهلة الاستخدام مع امكانية استدعاء كلاسات الـ CSS بواسطة الجي كويري.<br />
<br />
<h3 style="text-align: right;"><a href="https://ianlunn.github.io/Hover/" rel="nofollow" target="_blank">Hover.css</a></h3>
مجموعة ضخمة من <b>اكواد CSS3 Animation</b> لعمل تأثيرات ثنائية الأبعاد عند مرور الماوس على الأزرار والروابط والصور والعديد من العناصر ، وهي مكتبة مفتوحة المصدر ويمكن التعديل عليها.</div><div dir="rtl" style="text-align: right;" trbidi="on"> حيث توجد نسخة مع التوثيق الكامل بالتعليقات على كلاسات CSS3 ، يمكنك ايضا اخذ التأثيرات المناسبة لمشروعك في ملف مستقل لتوفير المصادر ، حيث حجمها 108 كيلو بت تقريبا ، وهي بحد ذاتها مكتبة متكاملة لعمل تأثيرات مذهلة.<br />
<br />
<h3 style="text-align: right;"><a href="https://www.minimamente.com/example/magic_animations/" rel="nofollow" target="_blank">Magic Animations</a></h3>
واحدة من اكثر مكتبات الـ Animation اذهالا ، حيث تتميز بتأثيرات فريدة ورائعة جدا ، وتتميز بحجمها الصغير مقارنة بالمكتبات السابقة ، الذي يبلغ 36 كيلو بت.</div><div dir="rtl" style="text-align: right;" trbidi="on">وبنفس الوقت تعتمد على CSS3 مع امكانية استدعاء التأثيرات عند حدث ما بواسطة الجي كويري.<br />
<br />
<h3 style="text-align: right;"><a href="https://github.com/vzaccaria/DynCSS" rel="nofollow" target="_blank">DynCSS</a></h3>
مكتبة بسيطة وصغيرة الحجم -اقل من 20 كيلو بت - لعمل Animation وتأثيرات حركية خاصة بها ، وتعتبر من الأدوات الحديثة ، ولكن تحتاج هذه الأداة الى مكتبة <a href="https://ar.codexait.com/2016/06/best-jquery-arabic-course.html">jquery</a>.<br />
<br />
<h3 style="text-align: right;"><a href="http://bouncejs.com/" rel="nofollow" target="_blank">Bounce.js</a></h3>
مكتبة جافا سكريبت لعمل تأثيرات CSS3 Animation ، وتحتوي على 10 تأثيرات معدة مسبقا ، ايضا صغيرة الحجم 16 كيلو بت.<br />
<br />
<blockquote>
اقرأ ايضا: <br />
<a href="https://ar.codexait.com/2016/12/wysiwyg-html-editors.html" target="_blank"> افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب </a>
<a href="https://ar.codexait.com/2016/12/top-5-slider-show.html" target="_blank"> اشهر 5 اضافات سلايد شو لمواقع الويب </a>
</blockquote>
</div>
<br />
كانت هذه مجموعة مميزة من <b>المكتبات </b>لعمل<b> تأثيرات حركية</b> متنوعة<b> CSS3 Animation</b> على مواقع الويب.</div><div dir="rtl" style="text-align: right;" trbidi="on">واذا كانت هناك مكتبة او مكتبات اخرى تستخدمها شاركها معنا في تعليق ، دمتم في رعاية الله وحفظه.</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-3177306485512065682016-12-16T04:11:00.009+03:002022-04-28T09:22:19.340+03:00اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRUijHgfsQmy0TKA7ZHbfGRdBUD9If_SgmWlb7jggwlgZ3U8DBew92u1apTUdWyp9HrBm4rFxCtiB-I7Tn0o7Gb3MzbOQSWPU-NXsMFfdU-rvKLTIVhHQ8NCBCqPSJRKuMZcR8Pl08SM/s640-rw/relatedposts.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر" border="0" data-original-height="400" data-original-width="640" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRUijHgfsQmy0TKA7ZHbfGRdBUD9If_SgmWlb7jggwlgZ3U8DBew92u1apTUdWyp9HrBm4rFxCtiB-I7Tn0o7Gb3MzbOQSWPU-NXsMFfdU-rvKLTIVhHQ8NCBCqPSJRKuMZcR8Pl08SM/s640-rw/relatedposts.jpg" title="اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر" width="400" /></a></div><br />من اهم الإضافات التي تعتمد على تغذية RSS هي <b>إضافة مواضيع ذات صلة</b> التي تعتبر من اهم إضافات بلوجر لجعل الزائر يتصفح ويقرأ مقالاتك التي تتحدث حول نفس السياق او الموضوع الذي دخل لقراءته، لهذا سنتكلم اليوم عن ثلاث طرق احترافية لإضافة مواضيع ذات صلة الى مدونتك.</div><div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<br />
<h2 class="r" style="text-align: right;">
<span style="color: #660000;">
الطريقة الأولى :إضافة مواضيع ذات صلة على شكل سلايد شو
</span></h2>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeGcRcdqWgMh62tPGZ_xI7XPwqevXsTO_vh67GiYezuc2lyCxI2RJGY7wDzejUZzvxycjgEsn6MvVjGCgHNZke7wqrR-GQkUFZxb5x0mOFymXP7AUUi4guJz3py09poXogcoFDGWKTdM/s645-rw/slider+related+post+for+blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="slider related post for blogger" border="0" data-original-height="189" data-original-width="645" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeGcRcdqWgMh62tPGZ_xI7XPwqevXsTO_vh67GiYezuc2lyCxI2RJGY7wDzejUZzvxycjgEsn6MvVjGCgHNZke7wqrR-GQkUFZxb5x0mOFymXP7AUUi4guJz3py09poXogcoFDGWKTdM/s16000-rw/slider+related+post+for+blogger.jpg" title="slider related post for blogger" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
إضافة مواضيع ذات صلة على شكل سلايدر شو او صور متحركة تعتبر من الإضافات الاحترافية لمدونات بلوجر .
للمعاينة :<br />
<a class="fdownload demo" href="http://devwebtechno.blogspot.com/2016/11/blog-post_76.html" rel="nofollow" target="_blank">
معاينة
</a>
<br />
<div style="text-align: right;"><b>
طريقة التركيب :
</b></div>
1 – ابحث عن الكود
<span class="code">
</head>
</span>
في محرر HTML واضف الكود التالي قبله:
<br />
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px,0px,0px)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;top:15px;right:15px;}
.grabbing,.grabbing a,.grabbing *{cursor:e-resize!important}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-prev,.owl-next{width:28px;height:22px;background-color:transparent;text-align:center;line-height:22px;font-size:12px;margin-top:5px;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.3);display:inline-block}
.owl-next:before{font-family:fontawesome}
.owl-prev:before{font-family:fontawesome}
.owl-carousel .owl-item{float:right}
.owl-next:before{content:"\f053";font-family:fontawesome;font-size:25px;background:transparent;}
.owl-prev:before{content:"\f054";font-family:fontawesome;font-size:25px;background:transparent;}
.related{
border-bottom:1px solid #ecf0f1;
}
.related h2{
border-bottom:1px solid #ecf0f1;
border-top:1px solid #ecf0f1;
font-size:17px;
font-family:dev-techno,"Droid Arabic Naskh",tahoma;
tex-align:right;
background:#ecf0f1;
color:#777;
height:40px;
line-height:40px;;
text-indent:10px;
}
#related-posts{display:block;width:auto;margin:auto;position:relative;padding:5px;height:200px}
#related-posts ul{list-style-type:none;}
.related-thumb{display:block;height:200px;position:reltive;}
.related-thumb img{width:100%;height:100%;}
.related-title-thumb{transition:all .5s ease-in-out;position:absolute;bottom:0;right:0;width:100%;color:#eee;height:auto;text-align:center;margin:0 0;font:lighter 12px Kreon,,tahoma;font-weight:lighter;line-height:27px;padding:7px 0;;background-image:-webkit-linear-gradient(transparent,rgba(100,100,100,0.5));background-image:-moz-linear-gradient(transparent,rgba(100,100,100,0.5));background-image:linear-gradient(transparent,rgba(100,100,100,0.5));}
.related-title-thumb:hover{padding-bottom:15px;}
</style>
<script type="text/javascript">
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();
function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]= d.replace(/\/s[0-9]+(\-c)?/,"/s540");}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGnbxafmJvjB8K4REKeYw7EJG4d9Y-rL3H5MlveWrAORWx8E2J2T7w-frgFS2k_DVafnSDkNZBCLdG4az6PstVURHpAy08mh_EhpOGsI8YsUemxZ5ttxwqWw-R7X7pZ452DD7xobCqKI/s640/picture_not_available.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum] = entry.link[k].href;relatedTitlesNum++}}}}
function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}
function printRelatedLabels_thumbs(){document.write('<ul>');
for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){
relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());
var i=0;if(relatedTitles.length>0)while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li class="related-thumb"><a ');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/><br/><div class="related-title-thumb">'+relatedTitles[r]+'</div></a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length);document.write('</ul>');}
//]]>
</script>
</b:if></code></pre>
2 – ابحث عن الكود
<span class="code">
</body>
</span>
وأضف الكود التالي قبله :
<br />
<a class="redirect" href="https://www.dropbox.com/s/8okc9zkxj7r5j3i/relsted%20slider%20post%20dev-techno.com.zip" rel="nofollow" target="_blank">
حمل الكود من هنا
</a>
<br />
<br />
3 – ابحث عن الكود
<span class="code">
<div class='post-footer'>
</span>
وأضف الكود التالي بعده :
<br />
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="related">
<h2>
مواضيع ذات صلة
</h2>
<div id="related-posts">
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;
var maxresults=15;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</div>
</b:if></code></pre>
<br />
<br />
<h2 class="r" style="text-align: right;">
<span style="color: #660000;">
الطريقة الثانية :إضافة مواضيع ذات صلة بصورة المقالة وعنوانها
</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5qTSVgAq7rZ-kn6kFVTkeTIH5WKLTHBcB6kppCg_lPPxEAmZJXqhtBPV3mYjEo5sWyFNHrYHMYaslKm4Aui33jNmIVmNC5QND2X5df60FCFLYoPbOEVVV15IPRklFGvJAgLRCtUmjVI/s1600-rw/related+posts-2.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="إضافة مواضيع ذات صلة بصورة المقالة وعنوانها" border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5qTSVgAq7rZ-kn6kFVTkeTIH5WKLTHBcB6kppCg_lPPxEAmZJXqhtBPV3mYjEo5sWyFNHrYHMYaslKm4Aui33jNmIVmNC5QND2X5df60FCFLYoPbOEVVV15IPRklFGvJAgLRCtUmjVI/s400-rw/related+posts-2.PNG" title="إضافة مواضيع ذات صلة بصورة المقالة وعنوانها" width="400" /></a></div>
هذه الطريقة التي افضلها واستخدمها حاليا في مدونتي لخفتها وعرض صورة مصغرة للمقالة وعنوانها .
<br />
<div style="text-align: right;"><b>
تركيب الإضافة :
</b></div>
1 – ابحث عن الكود
<span class="code">
</head>
</span>
في محرر HTML واضف الكود التالي قبله:
<br />
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.related h2{
border-bottom: 1px solid #ecf0f1;
font-size: 17px;
font-family: arial;
background: #fff;
color: #777;
height: 40px;
line-height: 40px;
text-indent: 10px;
margin-bottom: 0;
}
.relate span{margin-right:10px;margin-left:10px;}
.related-post{display:inline;width:auto;margin:auto;position:relative;}
.related-post .related_img:hover{opacity:0.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;}
.related-thumb{
display: block;
height: 155px;
width: 17%;
min-width: 120px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: right;
padding: 5px;
margin-right: 5px;
background: #fff;
border: 1px solid #e5e5e5;
margin-bottom: 7px;
}
.related-thumb img{width:100%;height:80px;}
.related-title-thumb{
width: 100%;
padding: 0 0;
color: #333;
height: 15px;
text-align: center;
margin: 0 0;
font: lighter 12px tahoma;
font-weight: lighter;
line-height: 20px;
}
.related-title-thumb:hover{color:#057fa5;transition:all 0.8s;}
#related-posts{
margin-left: auto;
margin-right: auto;
font: 12px devt2,devt3,sans-serif;
margin-bottom: 10px;
padding: 10px;
overflow: hidden;
padding-bottom: 10px;
background: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
//<![CDATA[
var relatedTitles=new Array();
var relatedTitlesNum=0;
var relatedUrls=new Array();
var thumburl=new Array();
function related_results_labels_thumbs(json) {
for(var i=0;
i<json.feed.entry.length;
i++) {
var entry=json.feed.entry[i];
relatedTitles[relatedTitlesNum]=entry.title.$t;
try {
thumburl[relatedTitlesNum]=entry.gform_foot.url
}
catch(error) {
s=entry.content.$t;
a=s.indexOf("<img");
b=s.indexOf("src=\"", a);
c=s.indexOf("\"", b+5);
d=s.substr(b+5, c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
thumburl[relatedTitlesNum]=d.replace(/\/s[0-9]+(\-c)?/, "/s540");
}
else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGnbxafmJvjB8K4REKeYw7EJG4d9Y-rL3H5MlveWrAORWx8E2J2T7w-frgFS2k_DVafnSDkNZBCLdG4az6PstVURHpAy08mh_EhpOGsI8YsUemxZ5ttxwqWw-R7X7pZ452DD7xobCqKI/s640/picture_not_available.png'
}
if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 55)+"...";
for(var k=0;
k<entry.link.length;
k++) {
if(entry.link[k].rel=='alternate') {
relatedUrls[relatedTitlesNum]=entry.link[k].href;
relatedTitlesNum++
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp=new Array(0);
var tmp2=new Array(0);
var tmp3=new Array(0);
for(var i=0;
i<relatedUrls.length;
i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length+=1;
tmp[tmp.length-1]=relatedUrls[i];
tmp2.length+=1;
tmp3.length+=1;
tmp2[tmp2.length-1]=relatedTitles[i];
tmp3[tmp3.length-1]=thumburl[i]
}
}
relatedTitles=tmp2;
relatedUrls=tmp;
thumburl=tmp3
}
function contains_thumbs(a, e) {
for(var j=0;
j<a.length;
j++)if(a[j]==e)return true;
return false
}
function printRelatedLabels_thumbs() {
for(var i=0;
i<relatedUrls.length;
i++) {
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i, 1);
relatedTitles.splice(i, 1);
thumburl.splice(i, 1);
i--;
}
}
var r=Math.floor((relatedTitles.length-1)*Math.random());
var i=0;
if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');
document.write('<div style="clear: both;"/>');
while(i<relatedTitles.length&&i<20&&i<maxresults) {
document.write('<a class="related-thumb');
if(i!=0)document.write('"');
else document.write('"');
document.write(' href="'+relatedUrls[r]+'"><img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/><br/><div class="related-title-thumb">'+relatedTitles[r]+'</div></a>');
if(r<relatedTitles.length-1) {
r++;
}
else {
r=0;
}
i++;
}
document.write('</div>');
relatedUrls.splice(0, relatedUrls.length);
thumburl.splice(0, thumburl.length);
relatedTitles.splice(0, relatedTitles.length)
}
//]]>
</script>
</b:if>
</code></pre>
<br />
2 – ابحث عن الكود
<span class="code">
<div class='post-footer'>
</span>
وأضف الكود التالي بعده :
<br />
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="related">
<h2>
مواضيع ذات صلة
</h2>
<div id="related-posts">
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='data:blog.homepageUrl + &quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;
var maxresults=15;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</div>
</b:if></code></pre>
<br />
<h2 class="r" style="text-align: right;">
<span style="color: #660000;">
الطريقة الثالثة : إضافة مواضيع ذات صلة بعنوان المقالة فقط.
</span></h2>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoWQWmGYNT5rmLy7QjnK54i45YeWcRLwwbrV1SmnFibw2qHNtXWKy-Ki9uZb4Cp16Xply4lssvNKDHAFvaX-WrKzYaTcsEtTDQAvA4Fuf0ADb2LzlvIDEfTDkzUvg6rkaVeMdEgAL7-Y/s499-rw/simple-related-posts.png" style="margin-left: 1em; margin-right: 1em;"><img alt="simple related post" border="0" data-original-height="303" data-original-width="499" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoWQWmGYNT5rmLy7QjnK54i45YeWcRLwwbrV1SmnFibw2qHNtXWKy-Ki9uZb4Cp16Xply4lssvNKDHAFvaX-WrKzYaTcsEtTDQAvA4Fuf0ADb2LzlvIDEfTDkzUvg6rkaVeMdEgAL7-Y/s16000-rw/simple-related-posts.png" title="مقالات ذات صلة خفيفة" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
هذه الطريقة شكلها جيد جدا ومفيدة اذا كان لديك كم هائل من المقالات وتريد استعراض اكبر قدر من المقالات :<br />
<div style="text-align: right;"><b>
تركيب الإضافة:
</b></div>
1 – ابحث عن الكود
<span class="code">
</head>
</span>
في محرر HTML واضف الكود التالي قبله:
<br />
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
.related{
border-bottom:1px solid #ecf0f1;
}
.related h2{
border-bottom:2px solid #ecf0f1;
font-size:17px;
font-family:"Droid Arabic Naskh",tahoma;
tex-align-right;
background:#fff;
color:#777;
height:40px;
line-height:40px;;
text-indent:10px;
}
#related-posts{width:100%;margin-left:auto;margin-right:auto;font:12px devt2,devt3,sans-serif;margin-bottom:10px;}
#related-posts a{text-decoration:none;color:#07a8c0;font-family:tahoma , sans-serif;}
#related-posts a:hover{color:#2a5e79;transition:all .8s ease;}
#related-posts ul{background:#fff no-repeat 0 0;padding:0;}
#related-posts ul li{display:block;color:#0088b8;background:#fff;margin-right:15px;padding-top:0;padding-right:15px;padding-bottom:1px;padding-left:10px;margin-left:10px;line-height:35px;border-bottom:1px dotted #ccc;position:relative;}
#related-posts ul li a{font-size:14px;color:#07a8c0;margin-right:5px;}
#related-posts ul li::before{content:"\f104";display:inline-block;position:absolute;right:0;top:0;height:100%;background:transpatent;color:#999;font-family:fontawesome;font-size:20px;line-height:35px;}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+ relatedUrls[r]+'">'+ relatedTitles[r]+'</a></li>');if(r<relatedTitles.length- 1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write('<a href="" target="_blank"><font size="1" color="black"></font></a>');}
/*]]>*/
</script>
</b:if></code></pre>
<br />
2 – ابحث عن الكود
<span class="code">
<div class='post-footer'>
</span>
وأضف الكود التالي بعده :
<br />
<pre><code><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="related">
<h2>
مواضيع ذات صلة
</h2>
<div id="related-posts">
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</div>
</b:if></code></pre>
<br />
<br />
كانت هذه ثلاث طرق احترافية <b>لإضافة مواضيع ذات صلة</b> لمدونات <b>بلوجر</b> ، ونترك لك الخيار لتختار الطريقة التي تناسبك ، واي مشكلة تواجهها اثناء تركيب الإضافة لاتتردد بتركها في تعليق دمتم بخير!
<br />
<br /></div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-40521193836716110122016-12-15T03:39:00.011+03:002022-04-28T08:02:59.715+03:00افضل 10 استضافات مجانية لمواقع الويب <div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76Pxm7aqxkf7WuGzC53it8e0GZdNum4M5PfhF9bwUdfqJ_zk_TpQemJfS5T2uPN0cRaoXL_PTUBiJ1BI8PqtyF5Yd0omwFiSebD0N08ltlzdQdGOS5BbBsVp5T7XfNL59kpBtDeaZU3M/s640-rw/12.png" style="margin-left: 1em; margin-right: 1em;"><img alt="افضل 10 استضافات مجانية لمواقع الويب" border="0" data-original-height="400" data-original-width="640" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76Pxm7aqxkf7WuGzC53it8e0GZdNum4M5PfhF9bwUdfqJ_zk_TpQemJfS5T2uPN0cRaoXL_PTUBiJ1BI8PqtyF5Yd0omwFiSebD0N08ltlzdQdGOS5BbBsVp5T7XfNL59kpBtDeaZU3M/s640-rw/12.png" title="افضل 10 استضافات مجانية لمواقع الويب" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
</div>
في حال كنت مطور مواقع ، بالتأكيد ستحتاج الى <b>استضافة مجانية</b> لإختبار مشاريعك ، او لعرضها عليه ، هناك العديد من الإستضافات المجانية ، رغم تفاوت امكانياتها واختلاف عروضها.</div><div dir="rtl" style="text-align: right;" trbidi="on"> فمنها ماهو مجاني لفترة محدودة ومنها ماهو غير محدود ، والبعض الأخر يعرض اعلان على موقعك ، ايضا تختلف مساحة القرص والباندويدث من استضافة الى اخرى.</div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;">مجموعة مميزة من افضل <b>الاستضافات المجانية</b> بمختلف مميزاتها وعروضها </h2>
<h3 style="text-align: right;"><a href="http://hostinger.ae/" rel="nofollow" target="_blank">Hostinger.ae </a></h3>
من اشهر الاستضافات المجانية ايضا تعتبر استضافة عالمية وتدعم اللغة العربية وتستضيف اكثر من 5 مليون موقع، مع امكانيات رائعة جدا ، وتوفر خطة مجانية بالمميزات الاتية :<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>2جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>100 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>نطاقات فرعية</td>
<td>2</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>2</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>2</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>2</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<h3 style="text-align: right;"><a href="https://www.000webhost.com/" rel="nofollow" target="_blank">000webhosting.com</a></h3>
استضافة مجانية تقدم خدمات استضافة المواقع منذ 2007 ، تمتلك مايقارب 14 مليون مستخدم ، والجدول التالي يوضح الخدمات المقدمة للخطة المجانية :<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>1.5جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>100 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>2</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>5</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;"><a href="https://www.freehostia.com/" rel="nofollow" target="_blank">Freehostia</a></h3>
هذه الاستضافة ضعيفة نوعا ما ، ولكن في حال كان لديك موقع للتجربة والعرض فهي مناسبة جدا ، وهذه مميزات خطة الاستضافة المجانية :<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>250 ميجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>6 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>1</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>3</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;">5GBfree.com</h3>
استضافة مجانية مع خدمات كويسة جدا ، مع مساحة تخزين 5 جيجابت.</div><div dir="rtl" style="text-align: right;" trbidi="on">ولكن المشكلة في معدل نقل البيانات ضعيف نوعا ما ،ولكن الرائع فيها انها تمنحك انشاء 3 قواعد بيانات، وهذه امكانيات الخطة المجانية:<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>5 جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>20 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>3</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>لايوجد</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<h3 style="text-align: right;"><a href="https://www.freehosting.com/client/cart.php" rel="nofollow" target="_blank">FreeHosting.com</a></h3>
استضافة مجانية مع مساحة تخزين عالية ومعدل نقل البيانات خيالي جدا واتمنى ان يكون فعلي.</div><div dir="rtl" style="text-align: right;" trbidi="on">والجدول التالي يوضح امكانيات الخطة المجانية :<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>10 جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>250 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>1</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>لايوجد</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;">Zymic</h3>
استضافة شبيهة بالسابقة حيث توفر لك انشاء 5 قواعد بيانات على نفس الاستضافة.</div><div dir="rtl" style="text-align: right;" trbidi="on"> مع امكانيات رائعة في التخزين والباندويدث ، هذه مواصفات الخطة المجانية :<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>6 جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>50 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>5</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>لايوجد</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;"><a href="https://byet.host/free-hosting" rel="nofollow" target="_blank">Byethost</a></h3>
استضافة مجانية بخدمات مقبولة جدا ، وهذه مواصفات الخطة المجانية :<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>1 جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>50 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>5</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>5</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;">Awardspace</h3>
الخطة المجانية لللإستضافة تقدم الامكانيات الاتية:<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>1 جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>5 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>1</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>1</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;"><a href="https://www.freehostingeu.com/web-hosting-page.php" rel="nofollow" target="_blank">FreeHostingEU</a></h3>
استضافة تقدم في خطتها المجانية الامكانيات الاتية:<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>200 ميجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>4 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>1</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>1</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>1</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<h3 style="text-align: right;"><a href="http://freehostingnoads.net/webhosting.php" rel="nofollow" target="_blank">Free Web Hosting No Ads</a></h3>
استضافة مجانية بمساحة تخزينية ومعدل نقل بيانات عالي جدا ولكن معدل الزيارات اليومية 1000 زيارة ، وهذه مميزات الخطة المجانية:<br />
<table style="width: 400px;">
<tbody>
<tr>
<td>مساحة تخزينية</td>
<td>20 جيجا بت</td>
</tr>
<tr>
<td>معدل نقل البيانات</td>
<td>200 جيجا بت</td>
</tr>
<tr>
<td>الدعم</td>
<td>PHP/MYSQL</td>
</tr>
<tr>
<td>عدد قواعد البيانات MYSQL</td>
<td>3</td>
</tr>
<tr>
<td>مستخدمي FTP</td>
<td>3</td>
</tr>
<tr>
<td>حسابات بريد الكتروني</td>
<td>3</td>
</tr>
<tr>
<td>اعلانات</td>
<td>لاتوجد</td>
</tr>
</tbody>
</table>
<br />
<br />
<blockquote class="tr_bq">
اقرأ ايضا: <a href="https://ar.codexait.com/2016/12/get-website-info.html" target="_blank">موقع رائع يعطيك معلومات هامة عن اي موقع (الدوماين + الاستضافة)</a></blockquote>
<br />
كانت هذه مجموعة مميزة من <b>الأستضافات</b> التي تقدم خطة <b>مجانية </b>وخالية من الاعلانات ، والتي تتفاوت امكانياتها بين ومميزاتها.</div><div dir="rtl" style="text-align: right;" trbidi="on">ايضا يمكنك ترقية حسابك الى خطة مدفوعة على نفس الاستضافة في حالة ارتفاع عدد الزوار ، واتمنى ان اكون افدتكم.</div><div dir="rtl" style="text-align: right;" trbidi="on">واذا كانت لديكم تجارب مع الاستضافات المجانية لاتترددوا بمشاركتها معنا في تعليق ، دمتم في رعاية الله وحفظه!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-14297427896703660132016-12-14T03:19:00.008+03:002022-05-10T23:17:53.711+03:00موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjJSDGHkHojgoFuqPY07xTonVMLMdkHOJ0o9uDSUR8bjplDkR6HkQYgnXh6W-Nuxn1R-mIW6hKkf1jrRvsNCGPJnFBy1epyRwpb4OVIS-ljQcFCPkAr4KEolfkoj9L2R26gK12rszkK0/s1340-rw/Any+Website+information.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)" border="0" data-original-height="653" data-original-width="1340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjJSDGHkHojgoFuqPY07xTonVMLMdkHOJ0o9uDSUR8bjplDkR6HkQYgnXh6W-Nuxn1R-mIW6hKkf1jrRvsNCGPJnFBy1epyRwpb4OVIS-ljQcFCPkAr4KEolfkoj9L2R26gK12rszkK0/s640-rw/Any+Website+information.PNG" title="موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
</div>
توجد العديد من المواقع التي توفر خدمة لمعرفة <b>معلومات عن اي موقع ويب</b> ،وبغض النظر عن الهدف الذي يدفعك لمعرفة معلومات الموقع او <b>الدوماين</b> سواءا كنت تريد التأكد من موقع ستشتريه او كنت مدير موقع تريد معرفة معلومات اكثر عن موقعك او غير ذلك ، وما سأقدمه لكم اليوم موقع رائع جدا يوفر لك العديد من المعلومات حول أي موقع ويب سوآءا <b>الدومين </b>او <b>الاستضافة.</b></div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;"> اهم المعلومات التي يمكن الحصول عليها عن الدومين والاستضافة</h2>
<ol>
<li dir="rtl">معلومات عن صاحب الموقع الاسم والايميل ورقم الهاتف والبلد ...الخ.</li>
<li dir="rtl">ملخص عن اهتمام الموقع وصورة مصغرة للموقع</li>
<li dir="rtl">عمر الموقع ، وتاريخ التسجيل والتجديد ووقت الانتهاء.</li>
<li dir="rtl">الشركة التي تقدم اسم النطاق Domain name</li>
<li dir="rtl">الشركة التي تقدم الاستضافة.</li>
<li dir="rtl">احصائيات لعدد الزيارات اليومية مع ترتيب اليكسا.</li>
<li dir="rtl">رقم الايبي.</li>
<li dir="rtl">ايضا يعرض مواقع شبيهة بالموقع.</li>
</ol>
وكما نعرف ان الخدمة المقدمة تسمى <b>whios </b>وهذا عبارة عن بروتوكول يعرض معلومات عن الـ DNS ، وهذا ماتقدمه معظم المواقع ولكن مايقدمه لك هذا الموقع معلومات اكثر من ذلك ، في مكان واحد، بالاضافة الى سهولة استخدامه ، رابط الموقع <a href="http://website.informer.com/" rel="nofollow" target="_blank">website.informer.com</a><br />
<br />
<blockquote>
اقرأ ايضا: <br />
<a href="https://ar.codexait.com/2016/12/free-web-hosting.html" target="_blank"> افضل 10 استضافات مجانية لمواقع الويب </a>
</blockquote>
<br />
كان هذا <b>موقع </b>رائع لعرض <b>معلومات </b>عن اي موقع تريد ، او <b>دوماين </b>تبحث عنه ، اذا كان لديك موقع يقدم خدمات افضل شاركه معنا في تعليق، دمتم في رعاية الله وحفظه!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-73676528599807663472016-12-14T03:11:00.003+03:002021-12-27T03:26:46.741+03:00اضافة ازرار مواقع التواصل الاجتماعي لمدونات بلوجر بطريقتين احترافيتين<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUWY4qH2jFMzuMrgjYubIWLtdLn1-blhGpL8__-VYG_PbbWHcz8EchoWFfTvwj119QHXAoUm6Q7s3d8KqZFNZV3nuy4LFINhJs9SsnsTn8TJd0NJE7vP-kLZiWHKdCvqj_m7ns9vHNQ4/s640-rw/social+icons.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="ازرار الشبكات الاجتماعية لبلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUWY4qH2jFMzuMrgjYubIWLtdLn1-blhGpL8__-VYG_PbbWHcz8EchoWFfTvwj119QHXAoUm6Q7s3d8KqZFNZV3nuy4LFINhJs9SsnsTn8TJd0NJE7vP-kLZiWHKdCvqj_m7ns9vHNQ4/s640-rw/social+icons.PNG" title="ازرار الشبكات الاجتماعية لبلوجر" /></a></div>
</div>
<b>اضافة ازرار مواقع التواصل الاجتماعي</b> يجب توافرها على كل موقع ، لإعتبارها اهم طريقة لإشهار موقعك على الشبكة العنكبوتية ، وايضا الشبكات الاجتماعية تعتبر مصدر رئيسي للزوار في بداية كل موقع او مدونة ، لهذا سأقدم لكم اليوم افضل اضافتين بربط مدونات <b>بلوجر </b>بمواقع التواصل الاجتماعي بتأثيرات احترافية.<br />
<br />
<h2 style="text-align: right;">
الطريقة الأولى : اضافة ازرار مواقع التواصل الاجتماعي مع العداد بشكل رائع</h2>
توفر هذه الاضافة الأزرار الشائعة لمواقع التواصل الاجنماعي مع عدد المتابعين اوالمشتركين في كل منها ، مع امكانية تعديل هذا العدد ،كما هو موضح بالصورة ،<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoqO8z09gL46gTU0gG54KBsO1BH9XMfxbpctq9Vcis9HS0uXQrhVuPgXLmYpw4XUGSjWqFtoFfI36A1vzAUTHY56iGw9tk8IwEsLKE0CoRKOLmoOlYAzOaCrnCvlifOFXrW3g2K1bxu8o/s1600/social+counter.png" style="margin-left: 1em; margin-right: 1em;"><img alt="ازرار التواصل الاجتماعي مع عداد المتابعين لبلوجر" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoqO8z09gL46gTU0gG54KBsO1BH9XMfxbpctq9Vcis9HS0uXQrhVuPgXLmYpw4XUGSjWqFtoFfI36A1vzAUTHY56iGw9tk8IwEsLKE0CoRKOLmoOlYAzOaCrnCvlifOFXrW3g2K1bxu8o/s320/social+counter.png" title="ازرار التواصل الاجتماعي مع عداد المتابعين لبلوجر" width="265" /></a></div>
لتركيب الاضافة اتبع الخطوات التالية :<br />
1 - افتح تحرير HTML وابحث عن الكود <span class="code">]]></b:skin></span> وأضف كود CSS التالي قبله :<br />
<pre><code>.social-counter ul{list-style-type:none;}
.social-counter.col1 li{width:100%;border:0 none !important;}
.social-counter.col2 li, .social-counter.col4 li{width: 153px;border-width:0 0 1px 0 !important;}
.social-counter.col2 li:nth-child(2n+2) , .social-counter.col4 li:nth-child(2n+2){border-left:1px solid #DDD !important;}
.social-counter li{
line-height:15px;
float:left;
width:102px;
padding:7px 0;
border-bottom:1px solid #ddd;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
}
.social-counter.col2 li:nth-child(6n) ,.social-counter.col2 li:nth-child(6n-1){
border-bottom:0px;
}
.social-counter li:nth-child(3n-1) { border-right:1px solid #DDD; border-left:1px solid #DDD;}
.social-counter li a{display:block;text-align:center;}
.social-counter li a strong{opacity:0.9;display:block; height:51px; margin-bottom:5px;
-webkit-transition: all ease-in-out 0.2s;
-moz-transition: all ease-in-out 0.2s;
-o-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
font-size: 28px;
margin: 8px auto;
width: 50px;
color: #FFF;
height: 50px;
display: block;
text-align: center;
background: #183f4e;
-webkit-border-radius: 50px;
moz-border-radius: 50px;
border-radius: 50px;
}
.social-counter li a strong:before{height: 50px;width: 50px;font-size: 26px;line-height: 50px;}
.social-counter li a:hover strong{opacity:1;}
.social-counter li:hover{ background-color:#F8F8F8;}
.social-counter li:hover a{text-decoration: none;}
.social-counter li.rss-subscribers a:hover strong{ background: #f8bc2e; }
.social-counter li.facebook-fans a:hover strong {background: #39599f;}
.social-counter li.twitter-followers a:hover strong{ background: #45b0e3;}
.social-counter li.youtube-subs a:hover strong{ background: #cc181e; }
.social-counter li.google-subs a:hover strong{ background: #bc282e; }
.social-counter li.instagram-followers a:hover strong{ background: #517fa4;}
.social-counter li span{display:block;font-size:21px;}
.social-counter li a small{color:#777;}
</code></pre>
2 - من التخطيط اضف اداة html/javascript جديدة في المكان المناسب لك والأفضل ان يكون في السيدبار واضف الكود التالي فيه :<br />
<pre><code><div class="social-counter col2">
<ul>
<li class="twitter-followers">
<a href="<span style="color: lime;">#</span>" target="_blank">
<strong class="fa fa-twitter"></strong>
<span><span style="color: red;">28</span></span>
<small>متابعون</small>
</a>
</li>
<li class="facebook-fans">
<a href="<span style="color: lime;">#</span>" target="_blank">
<strong class="fa fa-facebook"></strong>
<span><span style="color: red;">1,145</span></span>
<small>معجب</small>
</a>
</li>
<li class="google-subs">
<a href="<span style="color: lime;">#</span>" target="_blank">
<strong class="fa fa-google-plus"></strong>
<span><span style="color: red;">500</span></span>
<small>متابع</small>
</a>
</li>
<li class="youtube-subs">
<a href="<span style="color: lime;">#</span>" target="_blank">
<strong class="fa fa-youtube"></strong>
<span><span style="color: red;">2100</span></span>
<small>مشترك</small>
</a>
</li>
<li class="instagram-followers">
<a href="<span style="color: lime;">#</span>" target="_blank">
<strong class="fa fa-instagram"></strong>
<span><span style="color: red;">208</span></span>
<small>متابع</small>
</a>
</li>
<li class="rss-subscribers">
<a href="<span style="color: lime;">#</span>" target="_blank">
<strong class="fa fa-rss"></strong>
<span><span style="color: red;">28</span></span>
<small>مشترك</small>
</a>
</li>
</ul>
</div></code></pre>
مع تغيير الهاش # باللون الأخضر برابط شبكتك الاجتماعية ، وايضا عدد المتابعين للشبكات الاجتماعية باللون الأحمر<br />
<br />
<h2 style="text-align: right;">
الطريقة الثانية : اضافة ازرار 16 من مواقع التواصل الاجتماعي ومواقع اخرى هامة لمدونتك.</h2><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DHdlX0OKqmvnM6XrqbrGuFyhR8kfjqvAbTqYtBHPSeuiI2ew1QKt1RO8f0vrsFXlGyDXZLpdpSM5zO0KRxIOOEq-RkLv5TvM_dZLv_D6lgEca9u56z1e2w03C4eEVjUoo2k1us9lpnY/s1600/16+social+icons.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="16 ازرار التواصل الاجتماعي لبلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DHdlX0OKqmvnM6XrqbrGuFyhR8kfjqvAbTqYtBHPSeuiI2ew1QKt1RO8f0vrsFXlGyDXZLpdpSM5zO0KRxIOOEq-RkLv5TvM_dZLv_D6lgEca9u56z1e2w03C4eEVjUoo2k1us9lpnY/s1600/16+social+icons.PNG" title="16 ازرار التواصل الاجتماعي لبلوجر" /></a></div>
تتوفر هذه الاضافة على اهم مواقع التواصل الاجتماعي ومواقع اخرى هامة لمدونتك ، بشكل جميل وجذاب جدا ، كما في الصورة ، يمكنك اختيار الشبكات التي تناسبك وحذف الشبكات الأخرى كل شبكة في سطر.<br />
لتركيب الإضافة اتبع الخطوات التالية:<br />
1 - افتح تحرير HTML وابحث عن الكود <span class="code">]]></b:skin></span> وأضف كود CSS التالي قبله :<br />
<pre><code>/* social icon by dev-techno.com ---------*/
.social-icons {
text-align: center;
}
.social-icons a {
margin: 2px;
position: relative;
text-shadow: none;
display: inline-block;
}
.social-icons i:before {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
font-size: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.social-icons a {
color: #555 !important;
}
.social-icons.social-colored a {
color: #FFF !important;
}
.social-icons.social-colored a i{
-moz-transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
transition:all 0.4s ease-in-out;
}
.social-icons.social-colored a:hover{
opacity: 0.7;
}
.social-icons.social-colored .fa-delicious:before{
background: #2567ee;
}
.social-icons.social-colored .fa-digg:before {
background: #b2b2b2
}
.social-icons.social-colored .fa-reddit:before {
background: #ff915c
}
.social-icons.social-colored .fa-play:before {
background: #a0b532
}
.social-icons.social-colored .fa-github:before {
background: #666666
}
.social-icons.social-colored .fa-dribbble:before{
background: #d875a2
}
.social-icons.social-colored .fa-rss:before{
background: #f8bc2e
}
.social-icons.social-colored .fa-facebook:before {
background: #39599f
}
.social-icons.social-colored .fa-twitter:before {
background: #45b0e3
}
.social-icons.social-colored .fa-google-plus:before{
background: #fa0101
}
.social-icons.social-colored .fa-linkedin:before {
background: #65b7d2
}
.social-icons.social-colored .fa-pinterest:before{
background: #E00707
}
.social-icons.social-colored .fa-youtube:before {
background: #cc181e
}
.social-icons.social-colored .fa-instagram:before{
background: #517fa4
}
.social-icons.social-colored .fa-behance:before {
background: #1769ff
}
.social-icons.social-colored .fa-flickr:before {
background: #ff0084
}
.social-icons.social-colored a i:hover{
-ms-transform: scale(1.2, 1.2); /* IE 9 */
-webkit-transform: scale(1.2, 1.2); /* Safari */
-moz-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}</code></pre>
2 - من التخطيط اضف اداة html/javascript جديدة في المكان المناسب لك والأفضل ان يكون في السيدبار او الفوتر واضف الكود التالي فيه :<br />
<pre><code><div class="social-icons social-colored">
<a class="ttip-none" title="Rss" href="#" target="_blank"><i class="fa fa-rss"></i></a>
<a class="ttip-none" title="Google+" href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="ttip-none" title="Facebook" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="ttip-none" title="Twitter" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="ttip-none" title="Youtube" href="#" target="_blank"><i class="fa fa-youtube"></i></a>
<a class="ttip-none" title="Google Play" href="#" target="_blank"><i class="fa fa-play"></i></a>
<a class="ttip-none" title="linkedin" href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
<a class="ttip-none" title="Delicious" href="#" target="_blank"><i class="fa fa-delicious"></i></a>
<a class="ttip-none" title="pinterest" href="#" target="_blank"><i class="fa fa-pinterest"></i></a>
<a class="ttip-none" title="behance" href="#" target="_blank"><i class="fa fa-behance"></i></a>
<a class="ttip-none" title="flickr" href="#" target="_blank"><i class="fa fa-flickr"></i></a>
<a class="ttip-none" title="instagram" href="#" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="ttip-none" title="dribbble" href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="ttip-none" title="github" href="#" target="_blank"><i class="fa fa-github"></i></a>
<a class="ttip-none" title="reddit" href="#" target="_blank"><i class="fa fa-reddit"></i></a>
<a class="ttip-none" title="digg" href="#" target="_blank"><i class="fa fa-digg"></i></a>
</div></code></pre>
استبدل الهاش # برابط صفحتك او حسابك على الشبكة الاجتماعية التي اخترتها مع حذف ايقون الشبكة التي لم تناسبك.<br />
<br />
كانت هذه اضافتين رائعتين <b>لأزرار مواقع التواصل الاجتماعي</b> لمدونات <b>بلوجر </b>، مع العلم انه يمكنك استخدام هذه الايقونات على اي موقع اخر غير بلوجر ، لمتابعتنا على بلوجر من <a href="https://www.blogger.com/follow-blog.g?blogID=1421699815441362866" rel="nofollow" target="_blank">هنـــا </a>، دمتم بخير!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-66772895605235843592016-12-12T00:49:00.009+03:002022-05-13T03:24:04.599+03:00افضل 8 ادوات لاختبار اختراق الشبكات اللاسلكية واي فاي على الكالي لينكس<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img alt="افضل ادوات اختبار اختراق الواي فاي على الكالي لينكس" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFMB2jtdi70oNiwb0V6uKaA3AqfzGpGZf6LRXRFtZ1yF2koM0U2VLWJZOFl-ysM4ysS0nA3QcKvVH3EJpLKbMN0yNq3BFj8D4njK6bx6rs2lk0592V826hyphenhyphenUNctCUheAmm3eXVOpCwUM/s640-rw/wifi+hacking.JPG" title="افضل ادوات اختبار اختراق الواي فاي على الكالي لينكس" /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
لاشك ان الشبكات اللاسلكية وعلى وجه التخصيص الواي فاي صارت جزء اساسي من حياتنا اليومية فهي تتواجد في كل مكان ، وعادة مانستخدمها على اجهزة الكمبيوتر والهاتف المحمول للإتصال بشبكة الانترنت ، ولهذا العديد منا يمتلك نقطة وصول Access Point في منزله لتوزيع الانترنت ، لهذا هل فكرنا في حماية هذا الجهاز من الوصول غير المصرح او بالأصح اختراقه ،لهذا سنقدم لكم اليوم افضل مجموعة من الأدوات لإختبار<b> اختراق شبكات الواي فاي</b> من نظام الكالي لينكس.<br />
<br /><h2 style="text-align: right;">افضل الأدوات لاختبار اختراق الشبكات اللاسلكية واي فاي على الكالي لينكس</h2>
<h3 style="text-align: right;"><span style="color: maroon;"><a href="http://www.aircrack-ng.org/" rel="nofollow" target="_blank">AirCrack-ng</a></span></h3>
هي مجموعة متكاملة من <b>الأدوات الخاصة بإختراق الشبكات اللاسلكية واي فاي</b> وهي تتخصص بمراقبة مرور البيانات على الشبكات اللاسلكية واي فاي ، وفحص امكانيات كرت الشبكة ونوع التشفير المستخدم في الشبكة ، ثم الهجوم على الشبكة .</div><div dir="rtl" style="text-align: right;" trbidi="on">ويمكنك ايضا من انشاء نقطة وصول Access Point مزيفة لجلب الضحية للارتباط بها بدلا عن الشبكة الأصلية وجلب كلمة السر للشبكة الأصلية بهذه الطريقة، تتوفر هذه <b>الأداة </b>على <b>الكالي لينكس</b> وايضا توجد نسخ خاصة بالويندوز وماكينتوش.</div><div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://code.google.com/archive/p/reaver-wps/" rel="nofollow" target="_blank">Reaver </a></span></h3>
من الأدوات الشائعة في اختبار اختراق شبكات الواي فاي ،حيث تهاجم الروترات المفعلة خاصية WPS والتي عادة ماتكون مفعلة بالإعدادات الافتراضية في معظم الرواتر.</div><div dir="rtl" style="text-align: right;" trbidi="on"> وتعتمد على اختبار العديد من كلمات السر المخزنة مسبقا في القاموس ، وهذا الهجوم يعرف ب Brute force ، لهذا تحتاج هذه الأداة للكثير من الوقت مايقارب من 4-10 ساعات على حسب قوة كلمة السر.<br />
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/wiire/pixiewps/" rel="nofollow" target="_blank">pixiewps </a></span></h3>
اداة جديدة على الكالي لينكس مكتوبة بلغة السي ، وهي ايضا تستهدف الروترات المصابة بثغرات <b>WPS </b>وتستخدم الهجوم ب <b>Brute force</b> ، ولكن تستخدم هذه الأداة للأغراص التعليمية فقط وتعمل من دون اتصال بالانترنت offline.<br />
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/derv82/wifite" rel="nofollow" target="_blank">Wifite </a></span></h3>
اداة رائعة على الكالي لينكس لاختبار <b>اختراق عدة انواع من الشبكات اللاسلكية المشفرة</b> بإحدى التشفيرات الاتية WEP/WPA/WPA2/WPS .<br />
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://www.wireshark.org/download.html" rel="nofollow" target="_blank">WireShark </a></span></h3>
من اهم الأدوات على الكالي لينكس لتحليل برتكولات الشبكات او البيانات المنقولة عبر الشبكة بشكل دقيق، ولكن لكي تستخدمة يجب ان يكون لديك معرفة تامة في الشبكات وخاصة بمكونات برتوكولات الشبكات ومالغرض من كل جزء فيها.</div><div dir="rtl" style="text-align: right;" trbidi="on"> وهي اداة ذات واجهة رسومية ، تتوافر هذه الأداة على نظام الكالي لينكس وايضا على الويندوز وماكينتوش.</div><div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/savio-code/fern-wifi-cracker" rel="nofollow" target="_blank">Fern Wifi Cracker</a></span></h3>
اداة ذات واجهة رسومية ومكتوبة بلغة بايثون ، تستخدم للهجوم على شبكات الواي فاي.<br />
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/sophron/wifiphisher" rel="nofollow" target="_blank">WifiPhisher </a></span></h3>
اداة رائعة<b> لاختراق شبكات الواي فاي</b> عن طريق الاحتيال بحيث تقوم بإنشاء نقطة اتصال مزيفة شبيهة بالأصلية ، وجعل المستخدمين يرتبطوا بها بدلا من الشبكة الأصلية ومن ثم جلب <b>كلمة السر</b> لنقطة الوصول الأصلية .<br />
<br />
<h3 style="text-align: right;"><span style="color: maroon;"><a href="https://hashcat.net/hashcat/" rel="nofollow" target="_blank">oclHashcat </a></span></h3>
هذه الأداة من افضل الأدوات لإختراق كلمات السر بواسطة <b>هجوم brute force </b>، بشكل عام ، وذلك لاستخدامها معالج الرسومات والفيديو والصور GPU بدلا عن وحدة المعالجة المركزية CPU.</div><div dir="rtl" style="text-align: right;" trbidi="on"> لهذا هي سريعة جدا ، ويمكن ايضا استخدامها مع شبكات الوي فاي ، وهي ايضا لاتأتي بشكل افتراضي مع الكالي لينكس ولكن يمكن اضافتها.<br />
<br />
<blockquote>
اقرأايضا:<br />
<a href="https://ar.codexait.com/2016/03/top-web-tools-in-kali-linux.html" target="_blank">اهم الأدوات على نظام كالي لينكس لإختبار إختراق مواقع الويب</a></blockquote>
<br />
كانت هذه مجموعة من الأدوات المستخدمة في اختبار <b>اختراق الشبكات اللاسلكية واي فاي</b> على الكالي لينكس ،لهذا لكي <span style="color: red;"><b>تحمي شبكتك</b></span> من الاختراق يجب الغاء تفعيل خاصية WPS قبل استخدام الروتر او Access point.</div><div dir="rtl" style="text-align: right;" trbidi="on">وايضا استخدام كلمات سر معقدة مكونة من العديد من الحروف الصغيرة والكبيرة والأرقام والرموز كهذه الكلمة
<span class="code">
Z248he*iw#18H3@7120
</span>
وسيكون من الصعب اختراقها وخاصة من قبل المتطفلين ، اذا كانت لديك ادوات اخرى لاتتردد بوضعها في تعليق، دمتم بخير!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-80844830504207926142016-12-09T02:00:00.014+03:002022-04-28T09:19:23.197+03:00افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"><br /></div>
اضافات <b>محرر النصوص</b> او بالأصح محرر محتوى صفحات الويب التي تعتمد على HTML تدعى <b>WYSIWYG </b>وهي اختصار للعبارة What You See Is What You Get وتعني ما انت تراه تحصل عليه ، وبالتأكيد اذا كنت مطور مواقع ستصادف الكثير من المواقع التي تعمل على نشر المحتوى .</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_1ODHsa69rakvkL4kbmfNK8QhHaQpxWwmRpfJCR94JM3dx3x2XYWRYwgS3zOMaWInETjKEBN3C_e7DekDACYEiD7UhmYjqCaa1VsYgpaJOTf63So-OsvvZW7S1LEPrLTpA-IxrCWHbg/s640-rw/WYSIWYG.png" style="margin-left: 1em; margin-right: 1em;"><img alt="افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب" border="0" data-original-height="538" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_1ODHsa69rakvkL4kbmfNK8QhHaQpxWwmRpfJCR94JM3dx3x2XYWRYwgS3zOMaWInETjKEBN3C_e7DekDACYEiD7UhmYjqCaa1VsYgpaJOTf63So-OsvvZW7S1LEPrLTpA-IxrCWHbg/s640-rw/WYSIWYG.png" title="افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب" /></a></div><br /><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h2 style="text-align: right;">افضل الإضافات لمحررات النصوص WYSIWYG لمواقع الويب</h2><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">لهذا ستحتاج لمثل هذه الإضافات الجاهزة ، لتوفير كثيرا من الوقت والجهد ، توجد كثير من اضافات <b>محررات المحتوى</b> الجاهزة ، وهذه قائمة بأفضلها :<br />
<h3 style="text-align: right;"><span style="color: firebrick;">CKeditor</span></h3>
<a href="http://ckeditor.com/" rel="nofollow" target="_blank">CKeditor </a>واحد من افضل محررات النصوص المتقدمة ، وسهل التركيب ،حيث يحتوي على ثلاثة نسخ بسيط ومتوسط ومتقدم يمكنك اختيار النسخة المناسبة لمشروعك.<br />
<div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته:</b></span></div>
<ol>
<li dir="rtl"><span style="color: darkslategrey;">بإمكانك تخصيصة على حسب احتياجاتك</span></li>
<li dir="rtl"><span style="color: darkslategrey;">يدعم التراجع </span>do/undo<span style="color: darkslategrey;"> </span></li>
<li dir="rtl"><span style="color: darkslategrey;">يدعم الإتجاه من اليمين الى اليسار .</span></li>
<li dir="rtl"><span style="color: darkslategrey;">يدعم اكثر من 60 لغة بما فيها العربية</span></li>
</ol>
<br />
<h3 style="text-align: right;"><span style="color: firebrick;">Raptor Editor</span></h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOo_NOpKCC3ah7HEZWdrbDSJbxF90hTz4d0tuyHuykm5f_KYu4CeuaHi-zNS1ChBWVyH3h8HgNDeSnMClZ5B2NnGROHsfOmq_kNPon3xlOs4YCTL1xH6aS9nUOrqRohfMYHT3TJstjmcE/s1600-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A1%25D9%25A3%25D9%25A6.png"><img alt="Raptor Editor" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOo_NOpKCC3ah7HEZWdrbDSJbxF90hTz4d0tuyHuykm5f_KYu4CeuaHi-zNS1ChBWVyH3h8HgNDeSnMClZ5B2NnGROHsfOmq_kNPon3xlOs4YCTL1xH6aS9nUOrqRohfMYHT3TJstjmcE/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A1%25D9%25A3%25D9%25A6.png" title="Raptor Editor" width="640" /></a>
<a href="https://github.com/PANmedia/raptor-editor" rel="nofollow" target="_blank">Raptor Editor</a>
<b>محرر</b> نصوص مفتوح المصدر "<b>WYSIWYG HTML Editor</b>" ، سهل الإستخدام مكتوب بلغة الجافا سكريبت و HTML5 ،و سهل التركيب والإستخدام ،<br />
<div style="text-align: right;"><b>
مميزاته</b> :</div>
<ol>
<li dir="rtl">مرن وسهل الإستخدام.</li>
<li dir="rtl">امكانية تخصيص الشكل على حسب متطلباتك.</li>
<li dir="rtl">موثق بشروحات التركيب والإستخدام.</li>
</ol>
<h3 style="text-align: right;"><span style="color: firebrick;">TinyMCE </span></h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RY4I67N3vDTEgzYMJCRBgAIp6HApYEubqpB34Ju-jR0JBAqzw4QVvV8_dSU30FmDdOQb1qvkMBS0vpeBORxUMktlDNjPSldDS5kzicMh5XfyvWrKudH4Jv8u_uIoiKjfdqEV9LLxQxc/s1600/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A2%25D9%25A1%25D9%25A7.png" style="clear: right; float: right; margin-bottom: 1em; margin-right: 1em;"><img alt="TinyMCE" border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RY4I67N3vDTEgzYMJCRBgAIp6HApYEubqpB34Ju-jR0JBAqzw4QVvV8_dSU30FmDdOQb1qvkMBS0vpeBORxUMktlDNjPSldDS5kzicMh5XfyvWrKudH4Jv8u_uIoiKjfdqEV9LLxQxc/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A2%25D9%25A1%25D9%25A7.png" title="TinyMCE" width="640" /></a><a href="https://www.tinymce.com/" rel="nofollow" target="_blank">TinyMCE</a> محرر نصوص رائع يمكنك من تحويل اي عنصر html الى محرر نصوص ، يمكنك من الرفع المباشر للملفات على Google Drive او DropBox.<br />
<div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته:</b></span></div>
<ol>
<li dir="rtl"><span style="color: darkslategrey;">امكانية تضمين ورفع الملفات بشكل مباشر</span></li>
<li dir="rtl">محرر للصور مضمن.</li>
<li dir="rtl">امكانية فحص الأخطاء اللغوية.</li>
<li dir="rtl">يدعم اكثر من 40 لغة من ضمنها العربية.</li>
</ol><div><pre><code><b><span style="color: #274e13;">اقرأ ايضاً</span></b>: </code><a href="https://ar.codexait.com/2021/12/web-design-template-free-download.html" style="font-family: "Times New Roman"; white-space: normal;">افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا</a></pre></div><div><br /></div>
<h3 style="text-align: right;"><span style="color: firebrick;">Froala </span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNYa2Wf6WzohyRgoqERSVOUUs3ZFHf0JHf5gAlo_f9__-1Hyr7s4BYhyphenhyphenowuVi3cateOUxgUbh8hRFxlt6Hv3-yIsCwFtdVViMYwb0dRxZ0K69q5ARO8JB_tPOF_cQNKKyzS5WflzFRuA/s1600-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A2%25D9%25A5%25D9%25A3%25D9%25A6.png" style="margin-left: 1em; margin-right: 1em;"><img alt="froala editor" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNYa2Wf6WzohyRgoqERSVOUUs3ZFHf0JHf5gAlo_f9__-1Hyr7s4BYhyphenhyphenowuVi3cateOUxgUbh8hRFxlt6Hv3-yIsCwFtdVViMYwb0dRxZ0K69q5ARO8JB_tPOF_cQNKKyzS5WflzFRuA/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A2%25D9%25A5%25D9%25A3%25D9%25A6.png" title="froala editor" width="640" /></a></div>
<a href="https://www.froala.com/wysiwyg-editor" rel="nofollow" target="_blank">Froala</a> محرر متقدم وسهل الإستخدام ، يحتاج الى معرفة بلغة الجافاسكريبت و HTML لتركيبه يتطلب 1.11 jQuery و font Awesome 4.4 ايضا يأتي مع الية قوية للحماية من ثغرات XSS.<br />
<div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته</b></span><span style="color: darkslategrey; font-weight: normal;">:</span></div>
<ol>
<li dir="rtl">يدعم اختصارات لوحة المفاتيح.</li>
<li dir="rtl">يتوفر على ثيم ابيض وآخر اسود ، مع امكانية التخصيص.</li>
<li dir="rtl">محسن للعمل على اجهزة الموبايل.</li>
<li dir="rtl">يدعم 34 لغة من ضمنها العربية.</li>
<li dir="rtl">يدعم اللإتجاه من اليمين الى اليسار.</li>
</ol>
<h3 style="text-align: right;"><span style="color: firebrick;">Summernote </span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTtFij5yfoFmrgpF3LMZMK0k0HP4bJ5BEOe0ki0QwIqHZmuJUz_3zF5jd6LqNx-n0N61NRbt-nWkGgGafENy7IDkjU87ozrStV0NsgSYhz2k4tKM4EKDyzzwsI9eaf4zwa2zwkwaP17Z8/s1600-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A3%25D9%25A3%25D9%25A1%25D9%25A2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="summernote text editor" border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTtFij5yfoFmrgpF3LMZMK0k0HP4bJ5BEOe0ki0QwIqHZmuJUz_3zF5jd6LqNx-n0N61NRbt-nWkGgGafENy7IDkjU87ozrStV0NsgSYhz2k4tKM4EKDyzzwsI9eaf4zwa2zwkwaP17Z8/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A3%25D9%25A3%25D9%25A1%25D9%25A2.png" title="summernote text editor" width="640" /></a></div>
<a href="http://summernote.org/" rel="nofollow" target="_blank">Summernote</a>
محرر نصوص مبني على اساس <a href="https://ar.codexait.com/2016/10/best-bootstrap-arabic-course.html" target="_blank">البوتستراب Bootstrap</a> توجد العديد من الثيمات له من بينها ثيم ماتريال.<br />
<div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته</b>:</span></div>
<ol>
<li>صغير الحجم 80 كيلوبت من JS/CSS</li>
<li>يدعم Bootstrap 3.x.x</li>
<li>يمكن استخدامه مع AngularJS</li>
<li>سهل التخصيص </li>
</ol>
<br />
<blockquote>
اقرأ ايضا:<a href="https://ar.codexait.com/2016/12/top-5-slider-show.html" target="_blank"> اشهر 5 اضافات سلايد شو لمواقع الويب </a><br />
<a href="https://ar.codexait.com/2016/12/css3-animation-libraries.html" target="_blank"> افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب </a>
</blockquote>
<br />
كانت هذه مجموعة مميزة من <b>محررات المحتوى WYSIWYG HTML Editors</b> ، لتستخدم ما يناسبك منها في مشاريعك ، واذا كانت لديك اضافات اخرى تستخدمها لاتتردد بمشاركتها في تعليق ، دمتم في رعاية الله وحفظه!</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-89540346168927258212016-12-01T01:19:00.006+03:002022-04-28T09:17:12.694+03:00اشهر 5 اضافات سلايد شو لمواقع الويب<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME4Igr0mCD2iPou5GStjddvOzgSg7FrLVNKG2fF7Kc-Xnf9I2QdvvWOp1GcuI_JxK7LdFG5LlZMXzjl7BPVbPLkkcCrzO1HE44IW2oR_9cFXWG-xFy8D8V5SZcXPDzVEzkd7ILAJoKFc/s640-rw/top+slider+show.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="اشهر 5 اضافات سلايدشو لمواقع الويب" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME4Igr0mCD2iPou5GStjddvOzgSg7FrLVNKG2fF7Kc-Xnf9I2QdvvWOp1GcuI_JxK7LdFG5LlZMXzjl7BPVbPLkkcCrzO1HE44IW2oR_9cFXWG-xFy8D8V5SZcXPDzVEzkd7ILAJoKFc/s640-rw/top+slider+show.jpg" title="top 5 slider show for websites" /></a></div>
اذا كنت مصمم مواقع بالتأكيد ستحتاج للعديد من <b>إضافات السلايد شو Slider</b> بأنماط واشكال مختلفة لتوظفها حسب احتياجاتك او لتلبية متطلبات العميل ، وإضافة روح التنوع في التصميم.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on"> دعنا نتعرف على اشهر 5 إضافات سلايد شو لمواقع الويب والتي تتمتع بالعديد من الإمكانيات والأشكال المختلفة.
<br />
<br /><h2 style="text-align: right;">اشهر اضافات السلايد شو لمواقع الويب</h2>
<h3 style="text-align: right;"><a href="http://www.jssor.com/" rel="nofollow" target="_blank">jssor slider</a></h3>
يعتبر من اقدم إضافات السلايد شو على الويب ، حيث تعتبر السلايد شو الوحيد الذي يحتوي على نسخة مطورة بالجافا سكريبت فقط بدون أي مكاتب خارجية ، وبنفس الوقت يحتوي على نسخة بالجي كويري ، حيث توجد بأكثر من 30 شكل والعديد من الإعدادات ، ومن مميزاتها :
<br />
<ol>
<li><b>متجاوب</b> مع جميع احجام الشاشات.</li>
<li>تدعم خاصية التحريك باللمس او الماوس.</li>
<li>توجد بنسختين <b>نسخة بالجافا سكريبت فقط</b> ، ونسخة مع jQuery .</li>
<li>اكثر من 360 تأثير بتقنية CSS3.</li>
<li>العديد من الأشكال الاحترافية الجاهزة حيث بوجد على الموقع اكثر من 30 مثال حي للمعاينة والتركيب.</li>
<li>توجد نسخة مضغوطة جدا لأصحاب الإحتياجات الخاصة.</li>
<li>تعمل على جميع المتصفحات.</li>
<li>مفتوحة المصدر توجد نسخة كاملة من السلايد شو مع التوثيق للتطوير والتعديل.</li>
<li>تدعم التنقل بواسطة لوحة المفاتيح.</li>
<li>متوافقة مع بلوجر.</li>
</ol>
<br />
<h3 style="text-align: right;"><a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow" target="_blank">owl carousel</a></h3>
من اشهر إضافات السلايد شو على الويب ، والأكثر استخداما من قبل الكثير من المصممين ، لسهولة استخدامها وحجمها الصغير ، أيضا مع ظهور الإصدار التجريبي الجديد صارت اكثر من رائعة بتعدد الخيارات ، رغم ارتفاع حجمها للضعف تقريبا ، ومن مميزاتها الهامة :
<br />
<ol>
<li>متجاوب بنسبة 100%.</li>
<li>خفيفة وسهلة التركيب والتحكم.</li>
<li>متوافقة مع جميع المتصفحات .</li>
<li>تمتلك العديد من الخيارات للتحكم بها حسب احتياجاتك.</li>
<li>إمكانية انشاء اكثر من سلايدر شو على نفس الصفحة.</li>
</ol>
أيضا اذا كنت مصممي قوالب بلوجر يمكنك قراءة
<a href="https://ar.codexait.com/2016/11/slideshow-blogger.html" target="_blank">سلايد شو احترافي تلقائي لمدونات بلوجر.</a>
<br />
<br />
<h3 style="text-align: right;"><a href="http://flexslider.woothemes.com/" rel="nofollow" target="_blank">Flex slider</a></h3>
تعتبر Flex <b>slider </b>من الإضافات الشهيرة ، وتستخدم بكثرة على أنظمة ادارة المحتوى كوردبرس و دروبال وهي بالفعل مرنة ، حيث تتميز بعرضها الرائع للفيديو والصور ومن مميزاتها :
<br />
<ol>
<li>متجاوب</li>
<li>خفيفة نوعا ما لتعمل على الهواتف المحمولة ، مع دعم خاصية اللمس.</li>
<li>حركات وتأثيرات فريدة.</li>
</ol>
<br />
<blockquote>
اقرأ ايضا: <br />
<a href="https://ar.codexait.com/2016/12/wysiwyg-html-editors.html" target="_blank"> افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب </a>
<br />
<a href="https://ar.codexait.com/2016/12/css3-animation-libraries.html" target="_blank"> افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب </a>
</blockquote>
<h3 style="text-align: right;"><a href="http://bxslider.com/" rel="nofollow" target="_blank">bxSlider</a></h3>
من إضافات السلايد شو الحديثة وتعتبر قريبة لخصائص وإمكانيات owl carousel فهي تتمتع بالعديد من المميزات ، والتي منها الاتي :
<br />
<ol>
<li>متجاوب </li>
<li>خفيفة وسهلة التحكم والاستخدام.</li>
<li>تدعم النمط الرأسي والأفقي.</li>
<li>تدعم جميع صيغ المحتوى من صور وفيديو ونصوص.</li>
<li>توجد العديد من الخيارات للتحكم بها.</li>
</ol>
<br />
<h3 style="text-align: right;"><a href="http://kenwheeler.github.io/slick/" rel="nofollow" target="_blank">Slick Carousel</a></h3>
من الإضافات الرائعة التي تتمتع بسهولة التحكم وتعدد الاستخدامات ، للاطلاع على المزيد حولها يمكنك الاطلاع على هذه المقالة
<a href="https://ar.codexait.com/2016/07/slider-show.html" target="_blank"> سلايدر شو احترافي بالعديد من المميزات</a>
<br />
<br />
كانت هذه مجموعة مميزة من <b>إضافات السلايد شو</b> لتستخدمها في تصميم مواقع الويب ، و اذا كانت هناك إضافات أخرى تستخدمها شاركها معنا في تعليق ليستفيد الجميع ، دمتم في رعاية الله وحفظه!
<br />
<br /></div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-90016902069873895462016-11-29T04:15:00.004+03:002021-12-29T16:48:10.557+03:00استخدام وبرمجة رمز التحقق captcha بلغة php<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23Lyf1x0LWWs1PKtP1CUu6bkJiG49aUHmC5_iOBhuc4Ia0hlR4Flg6fb9bEPPPccqcgR88XHdtvq2iVmD3X9cTc9cLtk0V2MU9V5xZOsK6RDSjSyuQwmKB-P74fsDhyphenhyphenVksIzKmF6j29s/s640-rw/Generate+Captcha+by+PHP.png" style="margin-left: 1em; margin-right: 1em;"><img alt="استخدام وبرمجة رمز التحقق captcha بلغة php" border="0" data-original-height="500" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23Lyf1x0LWWs1PKtP1CUu6bkJiG49aUHmC5_iOBhuc4Ia0hlR4Flg6fb9bEPPPccqcgR88XHdtvq2iVmD3X9cTc9cLtk0V2MU9V5xZOsK6RDSjSyuQwmKB-P74fsDhyphenhyphenVksIzKmF6j29s/s640-rw/Generate+Captcha+by+PHP.png" title="استخدام وبرمجة رمز التحقق captcha بلغة php" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>
<b>رمز التحقق captcha </b>هي نظام بسيط للتحقق من المستخدم ما إذا كان انسان او روبوت ، وتستخدم للحماية من السبام spam على مواقع الويب، حيث يتم انشاء صورة والتي تتكون من نصوص عشوائية بالإضافة الى مجموعة من الخطوط والنقاط العشوائية للتشويش ودمج النص في الصورة، ويتم استخدامها في النماذج Forms بشكل كبير وخاصة مع صندوق الاتصال والتعليقات.
<br />
<br />
يتم تخزين الكود او النص العشوائي في جلسة session قبل دمجها في الصورة وارسالها للمستخدم ، وعند ارسال رمز التحقق من المستخدم يتم مقارنته مع القيمة المخزنة في الجلسة ، وهذه هي الية عملها.
<br />
<br />
هذا كود جاهز لإنشاء الكابتشا captcha ، حيث يمكنك تغيير الخط المستخدم ولون الخط وابعاد الصورة والحروف المستخدمة في نظام التحقق ، بالإضافة الى التحكم بالضوضاء (خطوط ونقاط) وكميتها في الصورة ، كما هو محدد باللون الأحمر في في الكود التالي :
<br />
<pre><code><?php
session_start();
//Settings: You can customize the captcha here
<span class="r">$image_width = 130;</span>
<span class="r">$image_height = 50;</span>
<span class="r">$characters_on_image = 6;</span>
<span class="r">$font = './monofont.ttf';</span>
//The characters that can be used in the CAPTCHA code.
//avoid confusing characters (l 1 and i for example)
<span class="r">$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';</span>
<span class="r">$random_dots = 0;</span>
<span class="r">$random_lines = 30;</span>
<span class="r">$captcha_text_color="0xffffff"</span>
<span class="r">$captcha_noice_color = "0xffffff"</span>
$code = '';
$i = 0;
while ($i < $characters_on_image) {
$code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
$i++;
}
$font_size = $image_height * 0.75;
$image = @imagecreate($image_width, $image_height);
/* setting the background, text and noise colours here */
$background_color = imagecolorallocate($image, 40, 40, 40);
$arr_text_color = hexrgb($captcha_text_color);
$text_color = imagecolorallocate($image, $arr_text_color['red'],
$arr_text_color['green'], $arr_text_color['blue']);
$arr_noice_color = hexrgb($captcha_noice_color);
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'],
$arr_noice_color['green'], $arr_noice_color['blue']);
/* generating the dots randomly in background */
for( $i=0; $i<$random_dots; $i++ ) {
imagefilledellipse($image, mt_rand(0,$image_width),
mt_rand(0,$image_height), 2, 3, $image_noise_color);
}
/* generating lines randomly in background of image */
for( $i=0; $i<$random_lines; $i++ ) {
imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height),
mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color);
}
/* create a text box and add 6 letters code in it */
$textbox = imagettfbbox($font_size, 0, $font, $code);
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code);
/* Show captcha image in the page html page */
header('Content-Type: image/jpeg');// defining the image type to be shown in browser widow
imagejpeg($image);//showing the image
imagedestroy($image);//destroying the image instance
<span class="g">$_SESSION['6_letters_code'] = $code;</span>
function hexrgb ($hexstr)
{
$int = hexdec($hexstr);
return array("red" => 0xFF & ($int >> 0x10),
"green" => 0xFF & ($int >> 0x8),
"blue" => 0xFF & $int);
}
?></code></pre>
<br />
حيث تم بدء جلسة في بداية الكود ،
وكما هو ملاحظ في الكود السابق المحدد باللون الأخضر تم تخزين كود التحقق في الجلسة باسم
<span class="code">
6_letters_code
</span>
، لكي يتم مقارنتها مع الكود المرسل من المستخدم .
<br />
<br />
في الكود التالي تم استدعاء الكابتشا والتحقق من البيانات المدخلة ، ومقارنتها مع القيمة المخزنة في الجلسة :
<br />
<pre><code><?php
session_start();
$errors ="";
if(isset($_POST['submit'])){
if(empty($_SESSION['6_letters_code'] ) ||
strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
{
$errors = " رمز التحقق غير صحيح";
}else{
header('Location: thank-you.html');
}
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP Secure Advanced Captcha.</title>
<link href="./styles.css" rel="stylesheet">
<script type='text/javascript'>
function refreshCaptcha(){
var img = document.images['captchaimg'];
img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000;
}
</script>
</head>
<body>
<?php
if(!empty($errors)){
echo "<p class='err'>".$errors."</p>";
}
?>
<div class="container">
<div id="header" class="header">
<h1>PHP Secure Advanced Captcha</h1>
<p> <a href="http://www.dev-techno.com/">www.dev-techno.com</a></p>
</div>
<form method="POST" name="contact_form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" class="dev-techno" >
<img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' >
<p> ادخل رمز التحقق هنا:</p>
<input type="text" id="6_letters_code" name="6_letters_code"/><br/>
<small>لا أستطيع قراءة الرمز؟ اضغط <a href='javascript: refreshCaptcha();'>هنا</a> للتحديث</small> <br/>
<input type="submit" name="submit" value="ارسال" />
</form>
</div>
</body>
</html></code></pre>
<br />
تم استدعاء الصورة التي تحتوي على كود الكابتشا بالطريقة الآتية :
<br />
<pre><code><img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' >
</code></pre>
<br />
في الكود التالي تم التحقق من صحة البيانات المدخلة بمقارنتها مع البيانات المخزنة في الجلسة
<span class="code">
6_letters_code
</span>
ما إذا كانت صحيحة ، بحيث اذا كانت متطابقة يتم توجيهك الى الصفحة المقصود ه او اكمال عملية ارسال البيانات ، وفي حال عدم التطابق يتم عرض رسالة الخطأ.
<br />
<pre><code>if(empty($_SESSION['6_letters_code'] ) ||
strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0)
{
$errors = " رمز التحقق غير صحيح";
}else{
header('Location: thank-you.html');
}</code></pre>
<br />
أنشئت مثال كامل لاستخدام الكابتشا captcha في مواقع الويب ، يمكنك تحميله من هنا :
<br />
<a class="redirect" href="https://www.dropbox.com/s/2wxci3pew9jtevd/captcha.zip" rel="nofollow" target="_blank">تحميل الكود</a>
<br />
كانت هذه طريقة سهلة <b>لإستخدام رمز التحقق captcha</b> في مواقع الويب ، واذا واجهت أي مشكلة او لديك استفسار حول الموضوع لا تتردد بتركها تعليق ، دمتم في رعاية الله وحفظه!
<br />
<br />
<blockquote>
اقرأ ايضا:<br />
<a href="https://ar.codexait.com/2016/01/upload-multiple-files-in-php.html" target="_blank">رفع عدة ملفات او صور بنفس الوقت بلغة php</a>
</blockquote>
</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-34638956740064001032016-11-27T01:58:00.006+03:002022-03-18T02:48:58.900+03:00اضافة سلايد شو احترافي لمدونات بلوجر<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYclQ38LurqlQCyBVBkYbH0NA0UPv9d5flc1A-UIDzCa_VBbwf3tzDTVryskDEebdZTpHzwOT7-2ciTBpIpkK4LIeO3jLgr26SPV0EjElB_MrHARItIlqAtRyIkHG_bHzwVzoWY9fl7lI/s1600-rw/slidershow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="سلايد شو تلقائي احترافي لمدونات بلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYclQ38LurqlQCyBVBkYbH0NA0UPv9d5flc1A-UIDzCa_VBbwf3tzDTVryskDEebdZTpHzwOT7-2ciTBpIpkK4LIeO3jLgr26SPV0EjElB_MrHARItIlqAtRyIkHG_bHzwVzoWY9fl7lI/s16000-rw/slidershow.jpg" title="سلايد شو تلقائي احترافي لمدونات بلوجر" /></a></div>
السلايد شو من الإضافات الجمالية لكل مدونة لإستعراض اخر المواضيع في مدونتك بطريقة احترافية تجعل احتمالية ضغط الزائر على المقالة كبيرة ، لهذا سأقدم لكم اليوم <b>سلايد شو رائع لمدونات بلوجر</b>، يتمتع بالعديد من المميزات والتي منها الآتي :
<br />
<ol>
<li>متجاوب مع كل الشاشات.</li>
<li>شكل جميل وحصري.</li>
<li>بشكل تلقائي يعرض آخر المواضيع.</li>
<li>يستخدم تقنية الأجاكس لعدم التأثير على سرعة المدونة.</li>
<li>يستخدم إضافة owl carousel الحديثة.</li>
<li>بالإضافة الى صورة المقال والعنوان يعرض اسم المدون والتاريخ وعدد التعليقات.</li>
</ol>
<br /><h2 class="r">تركيب إضافة السلايد شو لمدونات بلوجر:
</h2>
1 – ابحث عن الكود <span class="code" style="direction: ltr;">]]></b:skin></span> في تحرير HTML على بلوجر وأضف الكود التالي قبله :
<br />
<pre><code>.devt-slider{
background: #fff;
position:relative;
margin-top: 2px;
}
.devt-slider ul{clear:both;list-style:none}
.devt-slider ul li{height:260px;position:relative}.devt-slider ul li a{text-decoration:none;display:inline-block;height:100%;width:100%;position:relative}
.devt-slider ul li a img{display:block;position:relative;height:100%;width:100%}
.devt-slider ul li a:after{transition:all 0.3s ease-in-out;content:"";position:absolute;width:100%;height:100%;z-index:1000;top:0;right:0;background:rgba(42, 94, 121,0.2)}
.devt-slider ul li a div{-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;z-index:100000;display:block;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;height;auto;position:absolute;color:#ddd;bottom:0px;right:0;text-align:right;
background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.5));
background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.5));
background-image: linear-gradient(transparent,rgba(0, 0, 0,0.5));
overflow: hidden;
transition: 0.2s;
vertical-align: middle;
text-align: right;
}
.devt-slider ul li a:hover div {
background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.9));
background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.9));
background-image: linear-gradient(transparent,rgba(0, 0, 0,0.9));
padding-bottom:20px;
}
.devt-slider ul li a div h4{font-size:14px;font-family:"Droid Arabic Naskh",tahoma;color:#eee;}
.devt-slider ul li a div i,.devt-slider ul li a div span{font-size:10px;direction:rtl;display:inline-block}
.devt-slider ul li a div span{padding-left:10px;font-size:11px;font-family:"Droid Arabic Naskh",tahoma}
.devt-slider ul li a div i{padding-left:4px}
.devt-slider ul li a:hover:after{background:rgba(61,61,61,0);)}
.devt-slider .owl-nav{text-align:center;width:100%;height:0}
.devt-slider .owl-nav div{color:rgba(255,255,255,0.78);display:inline-block;font-size:55px;opacity:.9;text-shadow:2px 2px 9px rgba(0,0,0,0.65);width:30px;transition:0.3s}.devt-slider:hover .owl-nav div{opacity:1}.devt-slider .owl-nav div:hover{color:#fff}
.devt-slider .owl-prev{position:absolute;right:10px;bottom:40%;}
.devt-slider .owl-next{position:absolute;left:10px;bottom:40%;}
.devt-slider .owl-prev:before{content:"\f105";font-family:fontawesome}.devt-slider .owl-next:before{content:"\f104";font-family:fontawesome}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}
.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}
</code></pre>
<br />
2 – ابحث عن الكود <span class="code" style="direction: ltr;"></body></span> وضع الكود التالي قبله :
<br />
<pre><code><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
!function(a,b,c,d){function e(b,c){this.settings=null,this.options=a.extend({},e.Defaults,c),this.$element=a(b),this.drag=a.extend({},m),this.state=a.extend({},n),this.e=a.extend({},o),this._plugins={},this._supress={},this._current=null,this._speed=null,this._coordinates=[],this._breakpoint=null,this._width=null,this._items=[],this._clones=[],this._mergers=[],this._invalidated={},this._pipe=[],a.each(e.Plugins,a.proxy(function(a,b){this._plugins[a[0].toLowerCase()+a.slice(1)]=new b(this)},this)),a.each(e.Pipe,a.proxy(function(b,c){this._pipe.push({filter:c.filter,run:a.proxy(c.run,this)})},this)),this.setup(),this.initialize()}function f(a){if(a.touches!==d)return{x:a.touches[0].pageX,y:a.touches[0].pageY};if(a.touches===d){if(a.pageX!==d)return{x:a.pageX,y:a.pageY};if(a.pageX===d)return{x:a.clientX,y:a.clientY}}}function g(a){var b,d,e=c.createElement("div"),f=a;for(b in f)if(d=f[b],"undefined"!=typeof e.style[d])return e=null,[d,b];return[!1]}function h(){return g(["transition","WebkitTransition","MozTransition","OTransition"])[1]}function i(){return g(["transform","WebkitTransform","MozTransform","OTransform","msTransform"])[0]}function j(){return g(["perspective","webkitPerspective","MozPerspective","OPerspective","MsPerspective"])[0]}function k(){return"ontouchstart"in b||!!navigator.msMaxTouchPoints}function l(){return b.navigator.msPointerEnabled}var m,n,o;m={start:0,startX:0,startY:0,current:0,currentX:0,currentY:0,offsetX:0,offsetY:0,distance:null,startTime:0,endTime:0,updatedX:0,targetEl:null},n={isTouch:!1,isScrolling:!1,isSwiping:!1,direction:!1,inMotion:!1},o={_onDragStart:null,_onDragMove:null,_onDragEnd:null,_transitionEnd:null,_resizer:null,_responsiveCall:null,_goToLoop:null,_checkVisibile:null},e.Defaults={items:3,loop:!1,center:!1,mouseDrag:!0,touchDrag:!0,pullDrag:!0,freeDrag:!1,margin:0,stagePadding:0,merge:!1,mergeFit:!0,autoWidth:!1,startPosition:0,rtl:!1,smartSpeed:250,fluidSpeed:!1,dragEndSpeed:!1,responsive:{},responsiveRefreshRate:200,responsiveBaseElement:b,responsiveClass:!1,fallbackEasing:"swing",info:!1,nestedItemSelector:!1,itemElement:"div",stageElement:"div",themeClass:"owl-theme",baseClass:"owl-carousel",itemClass:"owl-item",centerClass:"center",activeClass:"active"},e.Width={Default:"default",Inner:"inner",Outer:"outer"},e.Plugins={},e.Pipe=[{filter:["width","items","settings"],run:function(a){a.current=this._items&&this._items[this.relative(this._current)]}},{filter:["items","settings"],run:function(){var a=this._clones,b=this.$stage.children(".cloned");(b.length!==a.length||!this.settings.loop&&a.length>0)&&(this.$stage.children(".cloned").remove(),this._clones=[])}},{filter:["items","settings"],run:function(){var a,b,c=this._clones,d=this._items,e=this.settings.loop?c.length-Math.max(2*this.settings.items,4):0;for(a=0,b=Math.abs(e/2);b>a;a++)e>0?(this.$stage.children().eq(d.length+c.length-1).remove(),c.pop(),this.$stage.children().eq(0).remove(),c.pop()):(c.push(c.length/2),this.$stage.append(d[c[c.length-1]].clone().addClass("cloned")),c.push(d.length-1-(c.length-1)/2),this.$stage.prepend(d[c[c.length-1]].clone().addClass("cloned")))}},{filter:["width","items","settings"],run:function(){var a,b,c,d=this.settings.rtl?1:-1,e=(this.width()/this.settings.items).toFixed(3),f=0;for(this._coordinates=[],b=0,c=this._clones.length+this._items.length;c>b;b++)a=this._mergers[this.relative(b)],a=this.settings.mergeFit&&Math.min(a,this.settings.items)||a,f+=(this.settings.autoWidth?this._items[this.relative(b)].width()+this.settings.margin:e*a)*d,this._coordinates.push(f)}},{filter:["width","items","settings"],run:function(){var b,c,d=(this.width()/this.settings.items).toFixed(3),e={width:Math.abs(this._coordinates[this._coordinates.length-1])+2*this.settings.stagePadding,"padding-left":this.settings.stagePadding||"","padding-right":this.settings.stagePadding||""};if(this.$stage.css(e),e={width:this.settings.autoWidth?"auto":d-this.settings.margin},e[this.settings.rtl?"margin-left":"margin-right"]=this.settings.margin,!this.settings.autoWidth&&a.grep(this._mergers,function(a){return a>1}).length>0)for(b=0,c=this._coordinates.length;c>b;b++)e.width=Math.abs(this._coordinates[b])-Math.abs(this._coordinates[b-1]||0)-this.settings.margin,this.$stage.children().eq(b).css(e);else this.$stage.children().css(e)}},{filter:["width","items","settings"],run:function(a){a.current&&this.reset(this.$stage.children().index(a.current))}},{filter:["position"],run:function(){this.animate(this.coordinates(this._current))}},{filter:["width","position","items","settings"],run:function(){var a,b,c,d,e=this.settings.rtl?1:-1,f=2*this.settings.stagePadding,g=this.coordinates(this.current())+f,h=g+this.width()*e,i=[];for(c=0,d=this._coordinates.length;d>c;c++)a=this._coordinates[c-1]||0,b=Math.abs(this._coordinates[c])+f*e,(this.op(a,"<=",g)&&this.op(a,">",h)||this.op(b,"<",g)&&this.op(b,">",h))&&i.push(c);this.$stage.children("."+this.settings.activeClass).removeClass(this.settings.activeClass),this.$stage.children(":eq("+i.join("), :eq(")+")").addClass(this.settings.activeClass),this.settings.center&&(this.$stage.children("."+this.settings.centerClass).removeClass(this.settings.centerClass),this.$stage.children().eq(this.current()).addClass(this.settings.centerClass))}}],e.prototype.initialize=function(){if(this.trigger("initialize"),this.$element.addClass(this.settings.baseClass).addClass(this.settings.themeClass).toggleClass("owl-rtl",this.settings.rtl),this.browserSupport(),this.settings.autoWidth&&this.state.imagesLoaded!==!0){var b,c,e;if(b=this.$element.find("img"),c=this.settings.nestedItemSelector?"."+this.settings.nestedItemSelector:d,e=this.$element.children(c).width(),b.length&&0>=e)return this.preloadAutoWidthImages(b),!1}this.$element.addClass("owl-loading"),this.$stage=a("<"+this.settings.stageElement+' class="owl-stage"/>').wrap('<div class="owl-stage-outer">'),this.$element.append(this.$stage.parent()),this.replace(this.$element.children().not(this.$stage.parent())),this._width=this.$element.width(),this.refresh(),this.$element.removeClass("owl-loading").addClass("owl-loaded"),this.eventsCall(),this.internalEvents(),this.addTriggerableEvents(),this.trigger("initialized")},e.prototype.setup=function(){var b=this.viewport(),c=this.options.responsive,d=-1,e=null;c?(a.each(c,function(a){b>=a&&a>d&&(d=Number(a))}),e=a.extend({},this.options,c[d]),delete e.responsive,e.responsiveClass&&this.$element.attr("class",function(a,b){return b.replace(/\b owl-responsive-\S+/g,"")}).addClass("owl-responsive-"+d)):e=a.extend({},this.options),(null===this.settings||this._breakpoint!==d)&&(this.trigger("change",{property:{name:"settings",value:e}}),this._breakpoint=d,this.settings=e,this.invalidate("settings"),this.trigger("changed",{property:{name:"settings",value:this.settings}}))},e.prototype.optionsLogic=function(){this.$element.toggleClass("owl-center",this.settings.center),this.settings.loop&&this._items.length<this.settings.items&&(this.settings.loop=!1),this.settings.autoWidth&&(this.settings.stagePadding=!1,this.settings.merge=!1)},e.prototype.prepare=function(b){var c=this.trigger("prepare",{content:b});return c.data||(c.data=a("<"+this.settings.itemElement+"/>").addClass(this.settings.itemClass).append(b)),this.trigger("prepared",{content:c.data}),c.data},e.prototype.update=function(){for(var b=0,c=this._pipe.length,d=a.proxy(function(a){return this[a]},this._invalidated),e={};c>b;)(this._invalidated.all||a.grep(this._pipe[b].filter,d).length>0)&&this._pipe[b].run(e),b++;this._invalidated={}},e.prototype.width=function(a){switch(a=a||e.Width.Default){case e.Width.Inner:case e.Width.Outer:return this._width;default:return this._width-2*this.settings.stagePadding+this.settings.margin}},e.prototype.refresh=function(){if(0===this._items.length)return!1;(new Date).getTime();this.trigger("refresh"),this.setup(),this.optionsLogic(),this.$stage.addClass("owl-refresh"),this.update(),this.$stage.removeClass("owl-refresh"),this.state.orientation=b.orientation,this.watchVisibility(),this.trigger("refreshed")},e.prototype.eventsCall=function(){this.e._onDragStart=a.proxy(function(a){this.onDragStart(a)},this),this.e._onDragMove=a.proxy(function(a){this.onDragMove(a)},this),this.e._onDragEnd=a.proxy(function(a){this.onDragEnd(a)},this),this.e._onResize=a.proxy(function(a){this.onResize(a)},this),this.e._transitionEnd=a.proxy(function(a){this.transitionEnd(a)},this),this.e._preventClick=a.proxy(function(a){this.preventClick(a)},this)},e.prototype.onThrottledResize=function(){b.clearTimeout(this.resizeTimer),this.resizeTimer=b.setTimeout(this.e._onResize,this.settings.responsiveRefreshRate)},e.prototype.onResize=function(){return this._items.length?this._width===this.$element.width()?!1:this.trigger("resize").isDefaultPrevented()?!1:(this._width=this.$element.width(),this.invalidate("width"),this.refresh(),void this.trigger("resized")):!1},e.prototype.eventsRouter=function(a){var b=a.type;"mousedown"===b||"touchstart"===b?this.onDragStart(a):"mousemove"===b||"touchmove"===b?this.onDragMove(a):"mouseup"===b||"touchend"===b?this.onDragEnd(a):"touchcancel"===b&&this.onDragEnd(a)},e.prototype.internalEvents=function(){var c=(k(),l());this.settings.mouseDrag?(this.$stage.on("mousedown",a.proxy(function(a){this.eventsRouter(a)},this)),this.$stage.on("dragstart",function(){return!1}),this.$stage.get(0).onselectstart=function(){return!1}):this.$element.addClass("owl-text-select-on"),this.settings.touchDrag&&!c&&this.$stage.on("touchstart touchcancel",a.proxy(function(a){this.eventsRouter(a)},this)),this.transitionEndVendor&&this.on(this.$stage.get(0),this.transitionEndVendor,this.e._transitionEnd,!1),this.settings.responsive!==!1&&this.on(b,"resize",a.proxy(this.onThrottledResize,this))},e.prototype.onDragStart=function(d){var e,g,h,i;if(e=d.originalEvent||d||b.event,3===e.which||this.state.isTouch)return!1;if("mousedown"===e.type&&this.$stage.addClass("owl-grab"),this.trigger("drag"),this.drag.startTime=(new Date).getTime(),this.speed(0),this.state.isTouch=!0,this.state.isScrolling=!1,this.state.isSwiping=!1,this.drag.distance=0,g=f(e).x,h=f(e).y,this.drag.offsetX=this.$stage.position().left,this.drag.offsetY=this.$stage.position().top,this.settings.rtl&&(this.drag.offsetX=this.$stage.position().left+this.$stage.width()-this.width()+this.settings.margin),this.state.inMotion&&this.support3d)i=this.getTransformProperty(),this.drag.offsetX=i,this.animate(i),this.state.inMotion=!0;else if(this.state.inMotion&&!this.support3d)return this.state.inMotion=!1,!1;this.drag.startX=g-this.drag.offsetX,this.drag.startY=h-this.drag.offsetY,this.drag.start=g-this.drag.startX,this.drag.targetEl=e.target||e.srcElement,this.drag.updatedX=this.drag.start,("IMG"===this.drag.targetEl.tagName||"A"===this.drag.targetEl.tagName)&&(this.drag.targetEl.draggable=!1),a(c).on("mousemove.owl.dragEvents mouseup.owl.dragEvents touchmove.owl.dragEvents touchend.owl.dragEvents",a.proxy(function(a){this.eventsRouter(a)},this))},e.prototype.onDragMove=function(a){var c,e,g,h,i,j;this.state.isTouch&&(this.state.isScrolling||(c=a.originalEvent||a||b.event,e=f(c).x,g=f(c).y,this.drag.currentX=e-this.drag.startX,this.drag.currentY=g-this.drag.startY,this.drag.distance=this.drag.currentX-this.drag.offsetX,this.drag.distance<0?this.state.direction=this.settings.rtl?"right":"left":this.drag.distance>0&&(this.state.direction=this.settings.rtl?"left":"right"),this.settings.loop?this.op(this.drag.currentX,">",this.coordinates(this.minimum()))&&"right"===this.state.direction?this.drag.currentX-=(this.settings.center&&this.coordinates(0))-this.coordinates(this._items.length):this.op(this.drag.currentX,"<",this.coordinates(this.maximum()))&&"left"===this.state.direction&&(this.drag.currentX+=(this.settings.center&&this.coordinates(0))-this.coordinates(this._items.length)):(h=this.coordinates(this.settings.rtl?this.maximum():this.minimum()),i=this.coordinates(this.settings.rtl?this.minimum():this.maximum()),j=this.settings.pullDrag?this.drag.distance/5:0,this.drag.currentX=Math.max(Math.min(this.drag.currentX,h+j),i+j)),(this.drag.distance>8||this.drag.distance<-8)&&(c.preventDefault!==d?c.preventDefault():c.returnValue=!1,this.state.isSwiping=!0),this.drag.updatedX=this.drag.currentX,(this.drag.currentY>16||this.drag.currentY<-16)&&this.state.isSwiping===!1&&(this.state.isScrolling=!0,this.drag.updatedX=this.drag.start),this.animate(this.drag.updatedX)))},e.prototype.onDragEnd=function(b){var d,e,f;if(this.state.isTouch){if("mouseup"===b.type&&this.$stage.removeClass("owl-grab"),this.trigger("dragged"),this.drag.targetEl.removeAttribute("draggable"),this.state.isTouch=!1,this.state.isScrolling=!1,this.state.isSwiping=!1,0===this.drag.distance&&this.state.inMotion!==!0)return this.state.inMotion=!1,!1;this.drag.endTime=(new Date).getTime(),d=this.drag.endTime-this.drag.startTime,e=Math.abs(this.drag.distance),(e>3||d>300)&&this.removeClick(this.drag.targetEl),f=this.closest(this.drag.updatedX),this.speed(this.settings.dragEndSpeed||this.settings.smartSpeed),this.current(f),this.invalidate("position"),this.update(),this.settings.pullDrag||this.drag.updatedX!==this.coordinates(f)||this.transitionEnd(),this.drag.distance=0,a(c).off(".owl.dragEvents")}},e.prototype.removeClick=function(c){this.drag.targetEl=c,a(c).on("click.preventClick",this.e._preventClick),b.setTimeout(function(){a(c).off("click.preventClick")},300)},e.prototype.preventClick=function(b){b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation&&b.stopPropagation(),a(b.target).off("click.preventClick")},e.prototype.getTransformProperty=function(){var a,c;return a=b.getComputedStyle(this.$stage.get(0),null).getPropertyValue(this.vendorName+"transform"),a=a.replace(/matrix(3d)?\(|\)/g,"").split(","),c=16===a.length,c!==!0?a[4]:a[12]},e.prototype.closest=function(b){var c=-1,d=30,e=this.width(),f=this.coordinates();return this.settings.freeDrag||a.each(f,a.proxy(function(a,g){return b>g-d&&g+d>b?c=a:this.op(b,"<",g)&&this.op(b,">",f[a+1]||g-e)&&(c="left"===this.state.direction?a+1:a),-1===c},this)),this.settings.loop||(this.op(b,">",f[this.minimum()])?c=b=this.minimum():this.op(b,"<",f[this.maximum()])&&(c=b=this.maximum())),c},e.prototype.animate=function(b){this.trigger("translate"),this.state.inMotion=this.speed()>0,this.support3d?this.$stage.css({transform:"translate3d("+b+"px,0px, 0px)",transition:this.speed()/1e3+"s"}):this.state.isTouch?this.$stage.css({left:b+"px"}):this.$stage.animate({left:b},this.speed()/1e3,this.settings.fallbackEasing,a.proxy(function(){this.state.inMotion&&this.transitionEnd()},this))},e.prototype.current=function(a){if(a===d)return this._current;if(0===this._items.length)return d;if(a=this.normalize(a),this._current!==a){var b=this.trigger("change",{property:{name:"position",value:a}});b.data!==d&&(a=this.normalize(b.data)),this._current=a,this.invalidate("position"),this.trigger("changed",{property:{name:"position",value:this._current}})}return this._current},e.prototype.invalidate=function(a){this._invalidated[a]=!0},e.prototype.reset=function(a){a=this.normalize(a),a!==d&&(this._speed=0,this._current=a,this.suppress(["translate","translated"]),this.animate(this.coordinates(a)),this.release(["translate","translated"]))},e.prototype.normalize=function(b,c){var e=c?this._items.length:this._items.length+this._clones.length;return!a.isNumeric(b)||1>e?d:b=this._clones.length?(b%e+e)%e:Math.max(this.minimum(c),Math.min(this.maximum(c),b))},e.prototype.relative=function(a){return a=this.normalize(a),a-=this._clones.length/2,this.normalize(a,!0)},e.prototype.maximum=function(a){var b,c,d,e=0,f=this.settings;if(a)return this._items.length-1;if(!f.loop&&f.center)b=this._items.length-1;else if(f.loop||f.center)if(f.loop||f.center)b=this._items.length+f.items;else{if(!f.autoWidth&&!f.merge)throw"Can not detect maximum absolute position.";for(revert=f.rtl?1:-1,c=this.$stage.width()-this.$element.width();(d=this.coordinates(e))&&!(d*revert>=c);)b=++e}else b=this._items.length-f.items;return b},e.prototype.minimum=function(a){return a?0:this._clones.length/2},e.prototype.items=function(a){return a===d?this._items.slice():(a=this.normalize(a,!0),this._items[a])},e.prototype.mergers=function(a){return a===d?this._mergers.slice():(a=this.normalize(a,!0),this._mergers[a])},e.prototype.clones=function(b){var c=this._clones.length/2,e=c+this._items.length,f=function(a){return a%2===0?e+a/2:c-(a+1)/2};return b===d?a.map(this._clones,function(a,b){return f(b)}):a.map(this._clones,function(a,c){return a===b?f(c):null})},e.prototype.speed=function(a){return a!==d&&(this._speed=a),this._speed},e.prototype.coordinates=function(b){var c=null;return b===d?a.map(this._coordinates,a.proxy(function(a,b){return this.coordinates(b)},this)):(this.settings.center?(c=this._coordinates[b],c+=(this.width()-c+(this._coordinates[b-1]||0))/2*(this.settings.rtl?-1:1)):c=this._coordinates[b-1]||0,c)},e.prototype.duration=function(a,b,c){return Math.min(Math.max(Math.abs(b-a),1),6)*Math.abs(c||this.settings.smartSpeed)},e.prototype.to=function(c,d){if(this.settings.loop){var e=c-this.relative(this.current()),f=this.current(),g=this.current(),h=this.current()+e,i=0>g-h?!0:!1,j=this._clones.length+this._items.length;h<this.settings.items&&i===!1?(f=g+this._items.length,this.reset(f)):h>=j-this.settings.items&&i===!0&&(f=g-this._items.length,this.reset(f)),b.clearTimeout(this.e._goToLoop),this.e._goToLoop=b.setTimeout(a.proxy(function(){this.speed(this.duration(this.current(),f+e,d)),this.current(f+e),this.update()},this),30)}else this.speed(this.duration(this.current(),c,d)),this.current(c),this.update()},e.prototype.next=function(a){a=a||!1,this.to(this.relative(this.current())+1,a)},e.prototype.prev=function(a){a=a||!1,this.to(this.relative(this.current())-1,a)},e.prototype.transitionEnd=function(a){return a!==d&&(a.stopPropagation(),(a.target||a.srcElement||a.originalTarget)!==this.$stage.get(0))?!1:(this.state.inMotion=!1,void this.trigger("translated"))},e.prototype.viewport=function(){var d;if(this.options.responsiveBaseElement!==b)d=a(this.options.responsiveBaseElement).width();else if(b.innerWidth)d=b.innerWidth;else{if(!c.documentElement||!c.documentElement.clientWidth)throw"Can not detect viewport width.";d=c.documentElement.clientWidth}return d},e.prototype.replace=function(b){this.$stage.empty(),this._items=[],b&&(b=b instanceof jQuery?b:a(b)),this.settings.nestedItemSelector&&(b=b.find("."+this.settings.nestedItemSelector)),b.filter(function(){return 1===this.nodeType}).each(a.proxy(function(a,b){b=this.prepare(b),this.$stage.append(b),this._items.push(b),this._mergers.push(1*b.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)},this)),this.reset(a.isNumeric(this.settings.startPosition)?this.settings.startPosition:0),this.invalidate("items")},e.prototype.add=function(a,b){b=b===d?this._items.length:this.normalize(b,!0),this.trigger("add",{content:a,position:b}),0===this._items.length||b===this._items.length?(this.$stage.append(a),this._items.push(a),this._mergers.push(1*a.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)):(this._items[b].before(a),this._items.splice(b,0,a),this._mergers.splice(b,0,1*a.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)),this.invalidate("items"),this.trigger("added",{content:a,position:b})},e.prototype.remove=function(a){a=this.normalize(a,!0),a!==d&&(this.trigger("remove",{content:this._items[a],position:a}),this._items[a].remove(),this._items.splice(a,1),this._mergers.splice(a,1),this.invalidate("items"),this.trigger("removed",{content:null,position:a}))},e.prototype.addTriggerableEvents=function(){var b=a.proxy(function(b,c){return a.proxy(function(a){a.relatedTarget!==this&&(this.suppress([c]),b.apply(this,[].slice.call(arguments,1)),this.release([c]))},this)},this);a.each({next:this.next,prev:this.prev,to:this.to,destroy:this.destroy,refresh:this.refresh,replace:this.replace,add:this.add,remove:this.remove},a.proxy(function(a,c){this.$element.on(a+".owl.carousel",b(c,a+".owl.carousel"))},this))},e.prototype.watchVisibility=function(){function c(a){return a.offsetWidth>0&&a.offsetHeight>0}function d(){c(this.$element.get(0))&&(this.$element.removeClass("owl-hidden"),this.refresh(),b.clearInterval(this.e._checkVisibile))}c(this.$element.get(0))||(this.$element.addClass("owl-hidden"),b.clearInterval(this.e._checkVisibile),this.e._checkVisibile=b.setInterval(a.proxy(d,this),500))},e.prototype.preloadAutoWidthImages=function(b){var c,d,e,f;c=0,d=this,b.each(function(g,h){e=a(h),f=new Image,f.onload=function(){c++,e.attr("src",f.src),e.css("opacity",1),c>=b.length&&(d.state.imagesLoaded=!0,d.initialize())},f.src=e.attr("src")||e.attr("data-src")||e.attr("data-src-retina")})},e.prototype.destroy=function(){this.$element.hasClass(this.settings.themeClass)&&this.$element.removeClass(this.settings.themeClass),this.settings.responsive!==!1&&a(b).off("resize.owl.carousel"),this.transitionEndVendor&&this.off(this.$stage.get(0),this.transitionEndVendor,this.e._transitionEnd);for(var d in this._plugins)this._plugins[d].destroy();(this.settings.mouseDrag||this.settings.touchDrag)&&(this.$stage.off("mousedown touchstart touchcancel"),a(c).off(".owl.dragEvents"),this.$stage.get(0).onselectstart=function(){},this.$stage.off("dragstart",function(){return!1})),this.$element.off(".owl"),this.$stage.children(".cloned").remove(),this.e=null,this.$element.removeData("owlCarousel"),this.$stage.children().contents().unwrap(),this.$stage.children().unwrap(),this.$stage.unwrap()},e.prototype.op=function(a,b,c){var d=this.settings.rtl;switch(b){case"<":return d?a>c:c>a;case">":return d?c>a:a>c;case">=":return d?c>=a:a>=c;case"<=":return d?a>=c:c>=a}},e.prototype.on=function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d):a.attachEvent&&a.attachEvent("on"+b,c)},e.prototype.off=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d):a.detachEvent&&a.detachEvent("on"+b,c)},e.prototype.trigger=function(b,c,d){var e={item:{count:this._items.length,index:this.current()}},f=a.camelCase(a.grep(["on",b,d],function(a){return a}).join("-").toLowerCase()),g=a.Event([b,"owl",d||"carousel"].join(".").toLowerCase(),a.extend({relatedTarget:this},e,c));return this._supress[b]||(a.each(this._plugins,function(a,b){b.onTrigger&&b.onTrigger(g)}),this.$element.trigger(g),this.settings&&"function"==typeof this.settings[f]&&this.settings[f].apply(this,g)),g},e.prototype.suppress=function(b){a.each(b,a.proxy(function(a,b){this._supress[b]=!0},this))},e.prototype.release=function(b){a.each(b,a.proxy(function(a,b){delete this._supress[b]},this))},e.prototype.browserSupport=function(){if(this.support3d=j(),this.support3d){this.transformVendor=i();var a=["transitionend","webkitTransitionEnd","transitionend","oTransitionEnd"];this.transitionEndVendor=a[h()],this.vendorName=this.transformVendor.replace(/Transform/i,""),this.vendorName=""!==this.vendorName?"-"+this.vendorName.toLowerCase()+"-":""}this.state.orientation=b.orientation},a.fn.owlCarousel=function(b){return this.each(function(){a(this).data("owlCarousel")||a(this).data("owlCarousel",new e(this,b))})},a.fn.owlCarousel.Constructor=e}(window.Zepto||window.jQuery,window,document),function(a,b){var c=function(b){this._core=b,this._loaded=[],this._handlers={"initialized.owl.carousel change.owl.carousel":a.proxy(function(b){if(b.namespace&&this._core.settings&&this._core.settings.lazyLoad&&(b.property&&"position"==b.property.name||"initialized"==b.type))for(var c=this._core.settings,d=c.center&&Math.ceil(c.items/2)||c.items,e=c.center&&-1*d||0,f=(b.property&&b.property.value||this._core.current())+e,g=this._core.clones().length,h=a.proxy(function(a,b){this.load(b)},this);e++<d;)this.load(g/2+this._core.relative(f)),g&&a.each(this._core.clones(this._core.relative(f++)),h)},this)},this._core.options=a.extend({},c.Defaults,this._core.options),this._core.$element.on(this._handlers)};c.Defaults={lazyLoad:!1},c.prototype.load=function(c){var d=this._core.$stage.children().eq(c),e=d&&d.find(".owl-lazy");!e||a.inArray(d.get(0),this._loaded)>-1||(e.each(a.proxy(function(c,d){var e,f=a(d),g=b.devicePixelRatio>1&&f.attr("data-src-retina")||f.attr("data-src");this._core.trigger("load",{element:f,url:g},"lazy"),f.is("img")?f.one("load.owl.lazy",a.proxy(function(){f.css("opacity",1),this._core.trigger("loaded",{element:f,url:g},"lazy")},this)).attr("src",g):(e=new Image,e.onload=a.proxy(function(){f.css({"background-image":"url("+g+")",opacity:"1"}),this._core.trigger("loaded",{element:f,url:g},"lazy")},this),e.src=g)},this)),this._loaded.push(d.get(0)))},c.prototype.destroy=function(){var a,b;for(a in this.handlers)this._core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Lazy=c}(window.Zepto||window.jQuery,window,document),function(a){var b=function(c){this._core=c,this._handlers={"initialized.owl.carousel":a.proxy(function(){this._core.settings.autoHeight&&this.update()},this),"changed.owl.carousel":a.proxy(function(a){this._core.settings.autoHeight&&"position"==a.property.name&&this.update()},this),"loaded.owl.lazy":a.proxy(function(a){this._core.settings.autoHeight&&a.element.closest("."+this._core.settings.itemClass)===this._core.$stage.children().eq(this._core.current())&&this.update()},this)},this._core.options=a.extend({},b.Defaults,this._core.options),this._core.$element.on(this._handlers)};b.Defaults={autoHeight:!1,autoHeightClass:"owl-height"},b.prototype.update=function(){this._core.$stage.parent().height(this._core.$stage.children().eq(this._core.current()).height()).addClass(this._core.settings.autoHeightClass)},b.prototype.destroy=function(){var a,b;for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.AutoHeight=b}(window.Zepto||window.jQuery,window,document),function(a,b,c){var d=function(b){this._core=b,this._videos={},this._playing=null,this._fullscreen=!1,this._handlers={"resize.owl.carousel":a.proxy(function(a){this._core.settings.video&&!this.isInFullScreen()&&a.preventDefault()},this),"refresh.owl.carousel changed.owl.carousel":a.proxy(function(){this._playing&&this.stop()},this),"prepared.owl.carousel":a.proxy(function(b){var c=a(b.content).find(".owl-video");c.length&&(c.css("display","none"),this.fetch(c,a(b.content)))},this)},this._core.options=a.extend({},d.Defaults,this._core.options),this._core.$element.on(this._handlers),this._core.$element.on("click.owl.video",".owl-video-play-icon",a.proxy(function(a){this.play(a)},this))};d.Defaults={video:!1,videoHeight:!1,videoWidth:!1},d.prototype.fetch=function(a,b){var c=a.attr("data-vimeo-id")?"vimeo":"youtube",d=a.attr("data-vimeo-id")||a.attr("data-youtube-id"),e=a.attr("data-width")||this._core.settings.videoWidth,f=a.attr("data-height")||this._core.settings.videoHeight,g=a.attr("href");if(!g)throw new Error("Missing video URL.");if(d=g.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/),d[3].indexOf("youtu")>-1)c="youtube";else{if(!(d[3].indexOf("vimeo")>-1))throw new Error("Video URL not supported.");c="vimeo"}d=d[6],this._videos[g]={type:c,id:d,width:e,height:f},b.attr("data-video",g),this.thumbnail(a,this._videos[g])},d.prototype.thumbnail=function(b,c){var d,e,f,g=c.width&&c.height?'style="width:'+c.width+"px;height:"+c.height+'px;"':"",h=b.find("img"),i="src",j="",k=this._core.settings,l=function(a){e='<div class="owl-video-play-icon"></div>',d=k.lazyLoad?'<div class="owl-video-tn '+j+'" '+i+'="'+a+'"></div>':'<div class="owl-video-tn" style="opacity:1;background-image:url('+a+')"></div>',b.after(d),b.after(e)};return b.wrap('<div class="owl-video-wrapper"'+g+"></div>"),this._core.settings.lazyLoad&&(i="data-src",j="owl-lazy"),h.length?(l(h.attr(i)),h.remove(),!1):void("youtube"===c.type?(f="http://img.youtube.com/vi/"+c.id+"/hqdefault.jpg",l(f)):"vimeo"===c.type&&a.ajax({type:"GET",url:"http://vimeo.com/api/v2/video/"+c.id+".json",jsonp:"callback",dataType:"jsonp",success:function(a){f=a[0].thumbnail_large,l(f)}}))},d.prototype.stop=function(){this._core.trigger("stop",null,"video"),this._playing.find(".owl-video-frame").remove(),this._playing.removeClass("owl-video-playing"),this._playing=null},d.prototype.play=function(b){this._core.trigger("play",null,"video"),this._playing&&this.stop();var c,d,e=a(b.target||b.srcElement),f=e.closest("."+this._core.settings.itemClass),g=this._videos[f.attr("data-video")],h=g.width||"100%",i=g.height||this._core.$stage.height();"youtube"===g.type?c='<iframe width="'+h+'" height="'+i+'" src="http://www.youtube.com/embed/'+g.id+"?autoplay=1&v="+g.id+'" frameborder="0" allowfullscreen></iframe>':"vimeo"===g.type&&(c='<iframe src="http://player.vimeo.com/video/'+g.id+'?autoplay=1" width="'+h+'" height="'+i+'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'),f.addClass("owl-video-playing"),this._playing=f,d=a('<div style="height:'+i+"px; width:"+h+'px" class="owl-video-frame">'+c+"</div>"),e.after(d)},d.prototype.isInFullScreen=function(){var d=c.fullscreenElement||c.mozFullScreenElement||c.webkitFullscreenElement;return d&&a(d).parent().hasClass("owl-video-frame")&&(this._core.speed(0),this._fullscreen=!0),d&&this._fullscreen&&this._playing?!1:this._fullscreen?(this._fullscreen=!1,!1):this._playing&&this._core.state.orientation!==b.orientation?(this._core.state.orientation=b.orientation,!1):!0},d.prototype.destroy=function(){var a,b;this._core.$element.off("click.owl.video");for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Video=d}(window.Zepto||window.jQuery,window,document),function(a,b,c,d){var e=function(b){this.core=b,this.core.options=a.extend({},e.Defaults,this.core.options),this.swapping=!0,this.previous=d,this.next=d,this.handlers={"change.owl.carousel":a.proxy(function(a){"position"==a.property.name&&(this.previous=this.core.current(),this.next=a.property.value)},this),"drag.owl.carousel dragged.owl.carousel translated.owl.carousel":a.proxy(function(a){this.swapping="translated"==a.type},this),"translate.owl.carousel":a.proxy(function(){this.swapping&&(this.core.options.animateOut||this.core.options.animateIn)&&this.swap()},this)},this.core.$element.on(this.handlers)};e.Defaults={animateOut:!1,animateIn:!1},e.prototype.swap=function(){if(1===this.core.settings.items&&this.core.support3d){this.core.speed(0);var b,c=a.proxy(this.clear,this),d=this.core.$stage.children().eq(this.previous),e=this.core.$stage.children().eq(this.next),f=this.core.settings.animateIn,g=this.core.settings.animateOut;this.core.current()!==this.previous&&(g&&(b=this.core.coordinates(this.previous)-this.core.coordinates(this.next),d.css({left:b+"px"}).addClass("animated owl-animated-out").addClass(g).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c)),f&&e.addClass("animated owl-animated-in").addClass(f).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c))}},e.prototype.clear=function(b){a(b.target).css({left:""}).removeClass("animated owl-animated-out owl-animated-in").removeClass(this.core.settings.animateIn).removeClass(this.core.settings.animateOut),this.core.transitionEnd()},e.prototype.destroy=function(){var a,b;for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&&(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Animate=e}(window.Zepto||window.jQuery,window,document),function(a,b,c){var d=function(b){this.core=b,this.core.options=a.extend({},d.Defaults,this.core.options),this.handlers={"translated.owl.carousel refreshed.owl.carousel":a.proxy(function(){this.autoplay()
},this),"play.owl.autoplay":a.proxy(function(a,b,c){this.play(b,c)},this),"stop.owl.autoplay":a.proxy(function(){this.stop()},this),"mouseover.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&&this.pause()},this),"mouseleave.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&&this.autoplay()},this)},this.core.$element.on(this.handlers)};d.Defaults={autoplay:!1,autoplayTimeout:5e3,autoplayHoverPause:!1,autoplaySpeed:!1},d.prototype.autoplay=function(){this.core.settings.autoplay&&!this.core.state.videoPlay?(b.clearInterval(this.interval),this.interval=b.setInterval(a.proxy(function(){this.play()},this),this.core.settings.autoplayTimeout)):b.clearInterval(this.interval)},d.prototype.play=function(){return c.hidden===!0||this.core.state.isTouch||this.core.state.isScrolling||this.core.state.isSwiping||this.core.state.inMotion?void 0:this.core.settings.autoplay===!1?void b.clearInterval(this.interval):void this.core.next(this.core.settings.autoplaySpeed)},d.prototype.stop=function(){b.clearInterval(this.interval)},d.prototype.pause=function(){b.clearInterval(this.interval)},d.prototype.destroy=function(){var a,c;b.clearInterval(this.interval);for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(c in Object.getOwnPropertyNames(this))"function"!=typeof this[c]&&(this[c]=null)},a.fn.owlCarousel.Constructor.Plugins.autoplay=d}(window.Zepto||window.jQuery,window,document),function(a){"use strict";var b=function(c){this._core=c,this._initialized=!1,this._pages=[],this._controls={},this._templates=[],this.$element=this._core.$element,this._overrides={next:this._core.next,prev:this._core.prev,to:this._core.to},this._handlers={"prepared.owl.carousel":a.proxy(function(b){this._core.settings.dotsData&&this._templates.push(a(b.content).find("[data-dot]").andSelf("[data-dot]").attr("data-dot"))},this),"add.owl.carousel":a.proxy(function(b){this._core.settings.dotsData&&this._templates.splice(b.position,0,a(b.content).find("[data-dot]").andSelf("[data-dot]").attr("data-dot"))},this),"remove.owl.carousel prepared.owl.carousel":a.proxy(function(a){this._core.settings.dotsData&&this._templates.splice(a.position,1)},this),"change.owl.carousel":a.proxy(function(a){if("position"==a.property.name&&!this._core.state.revert&&!this._core.settings.loop&&this._core.settings.navRewind){var b=this._core.current(),c=this._core.maximum(),d=this._core.minimum();a.data=a.property.value>c?b>=c?d:c:a.property.value<d?c:a.property.value}},this),"changed.owl.carousel":a.proxy(function(a){"position"==a.property.name&&this.draw()},this),"refreshed.owl.carousel":a.proxy(function(){this._initialized||(this.initialize(),this._initialized=!0),this._core.trigger("refresh",null,"navigation"),this.update(),this.draw(),this._core.trigger("refreshed",null,"navigation")},this)},this._core.options=a.extend({},b.Defaults,this._core.options),this.$element.on(this._handlers)};b.Defaults={nav:!1,navRewind:!0,navText:["prev","next"],navSpeed:!1,navElement:"div",navContainer:!1,navContainerClass:"owl-nav",navClass:["owl-prev","owl-next"],slideBy:1,dotClass:"owl-dot",dotsClass:"owl-dots",dots:!0,dotsEach:!1,dotData:!1,dotsSpeed:!1,dotsContainer:!1,controlsClass:"owl-controls"},b.prototype.initialize=function(){var b,c,d=this._core.settings;d.dotsData||(this._templates=[a("<div>").addClass(d.dotClass).append(a("<span>")).prop("outerHTML")]),d.navContainer&&d.dotsContainer||(this._controls.$container=a("<div>").addClass(d.controlsClass).appendTo(this.$element)),this._controls.$indicators=d.dotsContainer?a(d.dotsContainer):a("<div>").hide().addClass(d.dotsClass).appendTo(this._controls.$container),this._controls.$indicators.on("click","div",a.proxy(function(b){var c=a(b.target).parent().is(this._controls.$indicators)?a(b.target).index():a(b.target).parent().index();b.preventDefault(),this.to(c,d.dotsSpeed)},this)),b=d.navContainer?a(d.navContainer):a("<div>").addClass(d.navContainerClass).prependTo(this._controls.$container),this._controls.$next=a("<"+d.navElement+">"),this._controls.$previous=this._controls.$next.clone(),this._controls.$previous.addClass(d.navClass[0]).html(d.navText[0]).hide().prependTo(b).on("click",a.proxy(function(){this.prev(d.navSpeed)},this)),this._controls.$next.addClass(d.navClass[1]).html(d.navText[1]).hide().appendTo(b).on("click",a.proxy(function(){this.next(d.navSpeed)},this));for(c in this._overrides)this._core[c]=a.proxy(this[c],this)},b.prototype.destroy=function(){var a,b,c,d;for(a in this._handlers)this.$element.off(a,this._handlers[a]);for(b in this._controls)this._controls[b].remove();for(d in this.overides)this._core[d]=this._overrides[d];for(c in Object.getOwnPropertyNames(this))"function"!=typeof this[c]&&(this[c]=null)},b.prototype.update=function(){var a,b,c,d=this._core.settings,e=this._core.clones().length/2,f=e+this._core.items().length,g=d.center||d.autoWidth||d.dotData?1:d.dotsEach||d.items;if("page"!==d.slideBy&&(d.slideBy=Math.min(d.slideBy,d.items)),d.dots||"page"==d.slideBy)for(this._pages=[],a=e,b=0,c=0;f>a;a++)(b>=g||0===b)&&(this._pages.push({start:a-e,end:a-e+g-1}),b=0,++c),b+=this._core.mergers(this._core.relative(a))},b.prototype.draw=function(){var b,c,d="",e=this._core.settings,f=(this._core.$stage.children(),this._core.relative(this._core.current()));if(!e.nav||e.loop||e.navRewind||(this._controls.$previous.toggleClass("disabled",0>=f),this._controls.$next.toggleClass("disabled",f>=this._core.maximum())),this._controls.$previous.toggle(e.nav),this._controls.$next.toggle(e.nav),e.dots){if(b=this._pages.length-this._controls.$indicators.children().length,e.dotData&&0!==b){for(c=0;c<this._controls.$indicators.children().length;c++)d+=this._templates[this._core.relative(c)];this._controls.$indicators.html(d)}else b>0?(d=new Array(b+1).join(this._templates[0]),this._controls.$indicators.append(d)):0>b&&this._controls.$indicators.children().slice(b).remove();this._controls.$indicators.find(".active").removeClass("active"),this._controls.$indicators.children().eq(a.inArray(this.current(),this._pages)).addClass("active")}this._controls.$indicators.toggle(e.dots)},b.prototype.onTrigger=function(b){var c=this._core.settings;b.page={index:a.inArray(this.current(),this._pages),count:this._pages.length,size:c&&(c.center||c.autoWidth||c.dotData?1:c.dotsEach||c.items)}},b.prototype.current=function(){var b=this._core.relative(this._core.current());return a.grep(this._pages,function(a){return a.start<=b&&a.end>=b}).pop()},b.prototype.getPosition=function(b){var c,d,e=this._core.settings;return"page"==e.slideBy?(c=a.inArray(this.current(),this._pages),d=this._pages.length,b?++c:--c,c=this._pages[(c%d+d)%d].start):(c=this._core.relative(this._core.current()),d=this._core.items().length,b?c+=e.slideBy:c-=e.slideBy),c},b.prototype.next=function(b){a.proxy(this._overrides.to,this._core)(this.getPosition(!0),b)},b.prototype.prev=function(b){a.proxy(this._overrides.to,this._core)(this.getPosition(!1),b)},b.prototype.to=function(b,c,d){var e;d?a.proxy(this._overrides.to,this._core)(b,c):(e=this._pages.length,a.proxy(this._overrides.to,this._core)(this._pages[(b%e+e)%e].start,c))},a.fn.owlCarousel.Constructor.Plugins.Navigation=b}(window.Zepto||window.jQuery,window,document),function(a,b){"use strict";var c=function(d){this._core=d,this._hashes={},this.$element=this._core.$element,this._handlers={"initialized.owl.carousel":a.proxy(function(){"URLHash"==this._core.settings.startPosition&&a(b).trigger("hashchange.owl.navigation")},this),"prepared.owl.carousel":a.proxy(function(b){var c=a(b.content).find("[data-hash]").andSelf("[data-hash]").attr("data-hash");this._hashes[c]=b.content},this)},this._core.options=a.extend({},c.Defaults,this._core.options),this.$element.on(this._handlers),a(b).on("hashchange.owl.navigation",a.proxy(function(){var a=b.location.hash.substring(1),c=this._core.$stage.children(),d=this._hashes[a]&&c.index(this._hashes[a])||0;return a?void this._core.to(d,!1,!0):!1},this))};c.Defaults={URLhashListener:!1},c.prototype.destroy=function(){var c,d;a(b).off("hashchange.owl.navigation");for(c in this._handlers)this._core.$element.off(c,this._handlers[c]);for(d in Object.getOwnPropertyNames(this))"function"!=typeof this[d]&&(this[d]=null)},a.fn.owlCarousel.Constructor.Plugins.Hash=c}(window.Zepto||window.jQuery,window,document);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/* by dev-techno.com */
$(document).ready(function(){
$.ajax({url: "/feeds/posts/default?max-results=9&orderby=published&alt=json-in-script",type: 'get',dataType: "jsonp",success:function(e){
var dev_techno_item="";
var img=new Array();
var numOfEntries = e.feed.entry.length;
for(var i=0; i<numOfEntries;i++){
var entry=e.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
var author=entry.author[0].name.$t;
var authorurl=entry.author[0].uri.$t;
var pdate = entry.published.$t;
pdate = pdate.substr(0,10);
pdate = pdate.replace("-","/");
pdate = pdate.replace("-","/");
for (var o = 0; o < entry.link.length; o++){
if (entry.link[o].rel == "replies" && entry.link[o].type == "text/html") {
var u = entry.link[o].title;
var f = entry.link[o].href;
}}
for(var k = 0; k < entry.link.length; k++){
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
if("content" in entry){
var postcontent = entry.content.$t;
}
s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a != -1) && (b != -1) && (c != -1) && (d != "")){img[i] = d;var post_image=img[i];}else{var post_image = no_image_url;}
dev_techno_item += '<li> <a href="'+posturl+'" target="_blank"><img src="'+post_image+'" alt="'+posttitle+'"/><div><h4>'+posttitle+'</h4><span><i class="fa fa-user"></i>' + author + '</span><span><i class="fa fa-calendar"></i>'+ pdate +'</span><span><i class="fa fa-comments"></i>'+ u +'</span></div></a></li>';}
$('.devt-slider ul').html(dev_techno_item);
$('.devt-slider ul').owlCarousel({
rtl:true,
loop:true,
margin:1,
navText:["",""],
nav:true,
autoplay:true,
autoplayHoverPause:true,
navSpeed:400,
responsive:{0:{items:1},
600:{items:2},1000:{items:3}}
});}});});
//]]>
</script>
</b:if>
</b:if></code></pre>
<br />
3 – ابحث عن الكود التالي <span class="code" style="direction: ltr;"><div id='main-wrapper'></span> واضف هذا الكود قبله مباشرة :
<br />
<pre><code><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:section class='devt-slider' id='devt-slider' showaddelement='no'>
<b:widget id='HTML21' locked='true' title='' type='HTML' visible='true'>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</b:if>
</b:if></code></pre>
<br />
بعد الإنتهاء اضغط حفظ النموذج.
<br />
4 – انتقل الى صفحة التخطيط وستجد إضافة السلايد شو قد ظهرت بهذا الشكل :
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9JZ_TvYQRZEA_SPZAtz6VR2vEza2069FZ81NDBI_OdThXB6Q8q3x6C6_6whdL-kcHQ5GxCAUGL6E72L8LNvS-AuY_TdW2yExCgaAR8j0Ci2ui7scj07jIo_UiMjOo1HANWsehi64OJY/s1600/slider-blogger.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="تركيب السلايد شو لمدونات بلوجر" border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9JZ_TvYQRZEA_SPZAtz6VR2vEza2069FZ81NDBI_OdThXB6Q8q3x6C6_6whdL-kcHQ5GxCAUGL6E72L8LNvS-AuY_TdW2yExCgaAR8j0Ci2ui7scj07jIo_UiMjOo1HANWsehi64OJY/w400-h83/slider-blogger.PNG" title="تركيب السلايد شو لمدونات بلوجر" width="400" /></a></div>
اضغط تحرير واضف الكود التالي من دون إضافة عنوان واضغط حفظ.
<br />
<pre><code><ul></ul></code></pre>
<br />
<br />
وبهذا تكون تمت <b>إضافة سلايد شو الى مدونتك</b> بنجاح ، اذا واجهت أي مشكلة في التركيب لا تتردد بتركها في تعليق ، لمتابعتنا على بلوجر إشترك بالمدونة من
<a href="https://www.blogger.com/follow-blog.g?blogID=1421699815441362866" rel="nofollow" target="_blank">
هنــــــا
</a>
، دمتم بخير!
</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-63857326263050883542016-11-20T02:52:00.007+03:002021-12-28T01:38:11.831+03:00لماذا لغة الجافا سكريبت هي مستقبل الويب<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdqMj80IyMKqVzSqjePwlsHwrD4PzxypefgTDLLCEM5KFoq3ihwqUUJG_T0wDHrF0xpMDO9YD6pT9WG4RPLKaHS0HtI5tjD3rFoxOeasPeEsntmk4vJKJ7YkjPNwXRPQR5fzCtnTs8pI/s640-rw/javascript+language.png" style="margin-left: 1em; margin-right: 1em;"><img alt="لماذا لغة الجافا سكربت هي مستقبل الويب" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdqMj80IyMKqVzSqjePwlsHwrD4PzxypefgTDLLCEM5KFoq3ihwqUUJG_T0wDHrF0xpMDO9YD6pT9WG4RPLKaHS0HtI5tjD3rFoxOeasPeEsntmk4vJKJ7YkjPNwXRPQR5fzCtnTs8pI/s640-rw/javascript+language.png" title="لماذا لغة الجافا سكريبت هي مستقبل الويب" /></a></div>
</div>تساءل البعض لماذا لغة الجافا سكربت هي مستقبل الويب ؟ ولماذا يجب ان اتعلمه..؟ في هذا المقال سنتعرف على اهميتها ؟</div><div dir="rtl" style="text-align: right;" trbidi="on"> </div><div dir="rtl" style="text-align: right;" trbidi="on">لغة الجافا سكربت javascript من اشهر لغات البرمجة وأكثرها استخداما ، شاهد عدد الأسئلة التي تسأل في <b>الجافا سكريبت</b> على موقع Stack Overflow ، وقارنها مع اللغات الأخرى .</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on"> وكما نعلم انها لغة أساسية يجب تعلمها لتصبح مطور مواقع ، وهي اللغة المعيارية التي تنفذ على المتصفح ، لغة الجافا سكريبت تضيف روح التفاعل في مواقع الويب.
<br />
<br />
تعتبر اللغة FullStack تعمل في جهة العميل وجهة الخادم ، حيث مع Node.js المكتبة المبنية بلغة الجافا سكريبت يمكنك برمجة وتطوير تطبيقات في جهة الخادم ، وبهذا تكون طورت موقع متكامل بالجافا سكريبت ، وهذه المكتبة بدأت بالانتشار بشكل كبير مؤخراً ، ايضا يمكن برمجة الشبكات العصبية والروبوتات بالجافا سكريبت ، وأنظمة التشغيل.
<br />
<br />
من الأشياء التي ادهشتني في لغة الجافا سكربت ، تم تطوير نظام تشغيل متكامل يعمل على المتصفح بلغة الجافا سكريبت ، والمسمى بـــ OS.js وهو نظام مفتوح المصدر ، يمكنك مشاهدته من الموقع الرسمي
<a href="http://os.js.org/" rel="nofollow" target="_blank">OS.js.org </a>
.
<br />
<br /><b>
تقنية الأجاكس</b> المبنية بلغة الجافا سكريبت للتعامل بين <b>الخادم والعميل</b> ، حيث هذه التقنية صارت خيار أساسي في تطوير المواقع ومستخدمة بشكل كبير جدا ، في هذه التقنية يتم ارسال البيانات واستقبالها بين الخادم والعميل في الخلفية بدون تحديث الصفحة ، وهذا ما رفع سرعة الاستجابة وزيادة التفاعل بين المستخدم والموقع .</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on"> بالإضافة الى ذلك تم حفظ الباند ويدث وقلل نسبة استهلاك البيانات ، وكأمثلة على ذلك شاهد الفيس بوك الذي نتصفحه يوميا ، فهو يستخدم هذه التقنية بشكل أساسي ، والعديد من المواقع الشهيرة الى المواقع الشخصية صارت تستخدم تقنية الأجاكس حاليا .
<br />
<br />
حيث توجد العديد من المكتبات المبنية بلغة الجافا سكريبت ، واشهرها مكتبة jQuery ، ولكن هناك آلاف المكتبات ، التي تبنى ومازالت تبنى ، منها ما تفشل ومنها ما تأخذ نصيبها.
<br />
<br />
<br />
<h2 class="r">
مميزات برمجية للغة الجافا سكريبت :
</h2>
<ol>
<li>
سريعة التنفيذ.
</li>
<li>
معتمدة بشكل معياري للعمل على كافة المتصفحات.
</li>
<li>
سهلة التعلم والتنفيذ.
</li>
<li>
إمكانية استخدام الكائنات الذي جعلها اكثر مرونة وأداء.
</li>
<li>
سهولة صيانة الموقع وتصحيح الأخطاء .
</li>
<li>
مفتوحة المصدر.
</li>
</ol>
<br />
<br />
كانت هذه مجموعة من المعلومات التي توضح مدى أهمية لغة الجافا سكريبت في مستقبل الويب والشبكة العنكبوتية ، هناك الكثير ما نجهله حول هذه اللغة ، فهي لغة رائعة بالفعل ولديها مستقبل كبير في عالم تطوير مواقع الويب.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">اذا كانت لديك إضافات حول هذه اللغة وأهميتها فلا تتردد بتركه في تعليق، دمتم في رعاية الله وحفظه!
<br />
<br />
<div class="soread">
اقرأ ايضا:<br />
<a href="https://ar.codexait.com/2016/06/best-jquery-arabic-course.html" rel="" target="_blank">تعلم جي كويري من الصفر للإحتراف</a>
</div>
<br /></div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-2659363776421907302016-11-19T01:54:00.007+03:002021-12-27T06:15:14.815+03:00 ماهي خصائص اطار العمل Laravel ؟ وما مميزات استخدامها؟ وكيف اتعلمه؟<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BG1X5NPLrdNfuK2ZZzOUUVs6QNAy54Uulh_mfsB1OYUGi2l_JFDlQLh5zg4TbewKPSwwTj6CVI4m_w4k5EwPt9WumK9NrIhjriW7LHGoY6CW86yz9qNlAbEirBGOyh6ayMHPPIBFCoI/s640-rw/laravel+framework.png" style="margin-left: 1em; margin-right: 1em;"><img alt="خصائص ومميزات Laravel" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BG1X5NPLrdNfuK2ZZzOUUVs6QNAy54Uulh_mfsB1OYUGi2l_JFDlQLh5zg4TbewKPSwwTj6CVI4m_w4k5EwPt9WumK9NrIhjriW7LHGoY6CW86yz9qNlAbEirBGOyh6ayMHPPIBFCoI/s640-rw/laravel+framework.png" title="خصائص ومميزات Laravel" /></a></div>
<b>Laravel </b>هو اطار عمل مبني بلغة PHP ، لتطوير وبناء مواقع وتطبيقات الويب ، أنشئت بواسطة Taylor Otwell في العام 2011 ، مثل العديد من إطارات العمل مبني على أساس النمط model–view–controller.</div><div dir="rtl" style="text-align: right;" trbidi="on">يتميز اطار العمل Laravel بالبساطة والقوة والمرونة والأمنية العالية ، للمزيد حول النمط MVC
اطلع على :
<a href="https://ar.codexait.com/2016/02/build-your-php-mvc.html" target="_blank">ماهو اطار العمل MVC ? ومافوائده؟ وكيف تبني اطار عمل PHP MVC خاص بك ؟</a>
<br />
<br />
تم بناء اطار العمل على أساس مميزات الإطارات الأخرى ، مع إضافة لمسات خاصة ومميزات اخرى علية ، التي تصنع منه اطار جديد.</div><div dir="rtl" style="text-align: right;" trbidi="on">حيث اخذ العديد من المميزات القوية والأمنية العالية من اطار العمل Symfony ، كما أخذ البساطة وسهولة التعلم من اطار العمل CodeIgniter ، وهذا ما جعله يشتهر ، القوة وسهولة في التعلم.
<br />
<br />
<br />
<h2 class="r">
ماهي الخصائص المميزة في اطار العمل Laravel ؟
</h2>
1 - استخدام <b>Eloquent ORM</b> ، وهو عبارة عن آلية للتعامل مع قواعد البيانات ، من انشاء وحذف ، بالإضافة الى الاستعلامات عن طريق الكود بطريقة سهلة وممتعة ، بدلا عن كتابة استعلامات SQL يدويا ، بغض النظر عن نوع قواعد البيانات المستخدمة. فهو ينشئ الاستعلام بشكل آلي لقواعد البيانات المحددة مسبقا في ملف الإعدادات ، ويعتبر من اقوى خصائص اطار العمل Laravel .
<br />
<br />
2 - <b>منشئ الاستعلامات</b> (Query builder) طريقة أخرى للتعامل مع قواعد البيانات وانشاء الاستعلامات.
<br />
<br />
3 - <b>نظام التوجيه</b> (Routing) للتعامل مع الروابط بطريقة رائعة وقوية ، ويعتبر من اهم مميزاته حيث يتميز بالمرونة والبساطة.
<br />
<br />
4 - <b>نظام قوالب مميز</b> (Blade templating engine) ، حيث يستخدم في الـ View بحيث يكون امتداد الملفات filename.blade.php ، و تستخدم لسهولة التعامل بين View والـــ Controller بالإضافة الى ذلك تستخدم لزيادة الأمنية ، وهي من المميزات الخاصة بـ Laravel .
<br />
<br />
5 -<b> استخدام الـ Composer</b> لإدارة الاعتماديات بواسطة منفذ الأوامر ، حيث بواسطته تثبت Laravel على جهازك وأيضا تنشئ ملفات الــ Views والـــ Controllers بأمر واحد فقط بالإضافة الى ذلك يتيح لك استدعاء مكتبات خارجية لتستخدمها في مشروعك ، بالإضافة الى العديد من المهام الأخرى كالتحديث وغيرها.
<br />
<br />
<h2 class="r">
ماهي مميزات استخدام اطار العمل Laravel ؟
</h2>
<ol>
<li>
يمتلك دعم كبير ، ونمو متسارع ، لهذا ستجد حلول للمشاكل التي تواجهك بسهولة تامة.
</li>
<li>
تركيبة الكود سهلة وقابلة للقراءة.
</li>
<li>
يستخدم نظام توجيه سهل ومرن.
</li>
<li>
يمتلك نظام خاص Eloquent ORM للتعامل مع قواعد البيانات ، مما يجعل العمل اسهل والإنتاجية اكثر.
</li>
<li>
إمكانية استخدام مكتبات خارجية جاهزة في مشروعك ، باستخدام الــ Composer .
</li>
<li>
الكود منظم ومرتب.
</li>
<li>
يجمع بين الأمنية العالية والمرونة والبساطة ، مما يجعلك تتعلمه كإطار عمل لجميع مشاريعك.
</li>
<li>
Laravel لديها ازدهار وتطور متسارع ، مما يوحي بمستقبلها المشرق.
</li>
</ol>
<div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h2 style="text-align: right;">كيف أتعلم اطار العمل لارافيل Laravel Framework </h2>م<b>الذي يجب ان تتعلمه في اطار العمل لارافيل؟</b> بالطبع يجب ان تعرف كيف يعمل ال MVC بعد معرفتك بذلك يجب ان تتعلم التالي:</div><h3 style="text-align: right;"> كيفية تثبيت بيئة التطوير</h3><div dir="rtl" style="text-align: right;" trbidi="on">تثبيت تنزيل الاطار على جهازك بواسطة ال Composer من موجه الأوامر، ومعرفة اعدادات اطار العمل.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h3 style="text-align: right;">تعلم الأساسيات</h3><div dir="rtl" style="text-align: right;" trbidi="on">التوجيه Routing ، او كيفية انشاء الروابط والمسارات.الطلبات ، والاستجابة ، الجلسات ، وال Cookies ، التحكم بالأخطاء.</div><div dir="rtl" style="text-align: right;" trbidi="on">والتعامل مع ال Views وهو نظام قوالب مميز (Blade templating engine) لعرض محتوى الصحة وتمرير متغيرات البيانات، من المتحكمات Controllers.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h3 style="text-align: right;">التعامل مع قواعد البيانات</h3><div dir="rtl" style="text-align: right;" trbidi="on">يعد التعامل مع قواعد البيانات الجزء الأهم والأكثر متعة في اطار العمل لارافيل بشكل عام ويتمثل منشئ الاستعلامات َQuery Builder،وترقيم الصفحات Pagination وتهجير قواعد البيانات Migrations.</div><div dir="rtl" style="text-align: right;" trbidi="on">التعامل مع نظام Eloquent ORM ، والذي يتمثل العلاقات Relationships والجموعات Collections.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h3 style="text-align: right;">الأمن والحماية</h3><div dir="rtl" style="text-align: right;" trbidi="on">يجب ان تتعلم كيفية التحقق من هوية المستخدم Authentication وال Authorization نظام تسجيل الدخول ، اعادة ضبط كلمة المرور ، التحقق من صحة الايميل ، ايضا تعلم الهاش وتشفير البيانات.</div><h3 style="text-align: right;">مواضيع اخرى يجب تتعلمها</h3><div dir="rtl" style="text-align: right;" trbidi="on">التعامل مع الملفات ، نظام الايميلات ، التعامل مع اوامر Artisan Console ، ايضا كيفية بناء موقع متعدد اللغات او Localization.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h3 style="text-align: right;">تعلم وتعرف على الحزم الجاهزة لــ Laravel</h3><div>توجد الاف او الحزم Packages الجاهزة ، التي تؤدي العديد من المهام المعقدة ، مثل استيراد البيانات من ملفات الأكسل ، بوابة الدفع الالكترونية ، تصدير البيانات بعدة صيغ ك PDF وغيرها ، لذلك يجب تتعلم بعض منها وكيفية تثبيتها واستخدامها.</div><div><br /></div><h3 style="text-align: right;">طبق ماتعلمته على مشروع حقيقي </h3><div>اختر مشروع مناسب لبناءه من الصفر بإطار العمل لارافيل كمتجر الكتروني او موقع تسجيل الطلاب (جامعي) ، نظام مجاسبي اونلاين اوغيره ، لتثبت ماتعلمته وتكون بالفعل مطور متمرس.</div><div><br /></div><h2 style="text-align: right;">دورات لتعلم لارافيل Laravel Courses</h2><div dir="rtl" style="text-align: right;" trbidi="on">1. دورة قناة الزيرو <a href="https://www.youtube.com/playlist?list=PLDoPjvoNmBAy_mAhY0x8cHf8oSGPKsEKP" rel="nofollow" target="_blank">Mastring Laravel</a> ولكن تعتبر مقدمة الى يومنا هذا 21 فيديو.</div><div dir="rtl" style="text-align: right;" trbidi="on">2. دورة قناة Professional Code </div><div dir="rtl" style="text-align: right;" trbidi="on"> <a href="https://www.youtube.com/playlist?list=PLCm7ZeRfGSP4NNEikwx3wUAskQHB3p-LK" rel="nofollow" target="_blank">Professional Code Laravel in Arabic Framework 2020 - شرح لارافل دوره لارافل بالعربي المتكاملة بمشروع متجر</a> ، ايضا ستجد العديد من الدروس المتجددة على نفس القناة.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">وبالأخير عليك زيارة الموقع الرسمي <a href="http://laravel.com/" rel="nofollow" target="_blank">Laravel.com</a> لقراءة التوثيق الرسمي والاطلاع على الجديد. </div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on"><blockquote> اقرأ أيضا :<br />
<a href="https://ar.codexait.com/2016/08/php-framework-using.html" target="_blank">لماذا ومتى استخدم اطار عمل للبرمجة بلغة PHP ؟</a></blockquote><p>كانت هذه مجموعة من المعلومات القيمة حول <b>اطار العمل Laravel </b>، من تعريف بالاطار وخصائص ومميزات ، بالأضافة الى كيف تتعلمها وتتقنها وبالأخير كورسات عربية اطار العمل لارافل ، دمتم بخير. </p>
</div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-83436989855570960912016-11-16T01:45:00.005+03:002021-12-27T02:12:57.634+03:00هل لغة php تحتضر؟ شاهد التقرير<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge65weo7OAnkdjrCYhYLxTHphDckiZTzocAK3J1Oim-U2IrQv1Krfx1NiIjEFdaExOE_1W8Ow7vXhyVT08VLFeLbH3b_nqd8Mb3UXIbM-jiNrBXpJK3vUi61xHgzzaR_O4UwPZOuK0odI/s640-rw/php+usage.png" style="margin-left: 1em; margin-right: 1em;"><img alt="هل لغة php تحتظر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge65weo7OAnkdjrCYhYLxTHphDckiZTzocAK3J1Oim-U2IrQv1Krfx1NiIjEFdaExOE_1W8Ow7vXhyVT08VLFeLbH3b_nqd8Mb3UXIbM-jiNrBXpJK3vUi61xHgzzaR_O4UwPZOuK0odI/s640-rw/php+usage.png" title="هل لغة php تحتظر" /></a></div>
</div>
ظهرت لغة <b>PHP</b> في عام 1995، وتعتبر من أشهر لغات برمجة تطبيقات الويب، وتعمل في جهة الخادم، وهي <b>لغة متخصصة ببرمجة مواقع الويب فقط</b>، بعكس معظم اللغات الأخرى التي تستخدم في مجالات متعددة، وكما نعلم ان الفيس بوك مبرمج بلغة PHP وأيضا موقع ويكيبيديا، والكثير من المواقع الشهيرة، بالإضافة الى ذلك أشهر أنظمة إدارة المحتوى، مثل الورد برس ودروبال وجملة وغيرها.
<br />
<br />
ولكن مع ظهور العديد من لغات البرمجة المستخدمة في تطوير مواقع الويب، وبالطبع التي تعمل في جهة الخادم، مثل تقنية ASP.Net وروبي وبايثون وغيرها، هل بدأ انتشار لغة PHP بالتلاشي؟ هذا ما سنوضحه في هذه المقالة من خلال احصائيات عالمية.
<br />
<br />
حيث في إحصائية جديده لموقع
<a href="https://w3techs.com/technologies/overview/programming_language/all" rel="nofollow" target="_blank">w3techs.com</a>
، للشهر الحالي نوفمبر 2016، والذي يقدم احصائيات للعديد من التقنيات ولغات البرمجة بشكل يومي، والذي يوضح ان لغة PHP مازالت مسيطرة بشكل تام حيث 82% من المواقع مطورة بلغة PHP، وهذا الشكل يوضح ذلك:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5RnAQXAzhk_iR_CmlzD31ZQRRnUwbLTNfKVJ7iq1s-CmGeClMCyK_YYABv3A7pagoC9mVXPk0cLUC2PbnmDtrBd53KpkCxFd-LJpWbo3TfkiB8mctQn-lI7U_Q1JIrjYDa4yUL1KgH6s/s1600-rw/stats+of+php+usage.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="نسبة استخدام لغة php في تطوير مواقع الويب" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5RnAQXAzhk_iR_CmlzD31ZQRRnUwbLTNfKVJ7iq1s-CmGeClMCyK_YYABv3A7pagoC9mVXPk0cLUC2PbnmDtrBd53KpkCxFd-LJpWbo3TfkiB8mctQn-lI7U_Q1JIrjYDa4yUL1KgH6s/s400-rw/stats+of+php+usage.PNG" title="نسبة استخدام لغة php في تطوير مواقع الويب" width="400" /></a></div>
<br />
ومقارنة مع إحصائية سابقة، في شهر يناير لنفس السنة نجد ان 81% من المواقع مطورة بلغة PHP، وهذا ما يبرهن انها مازالت في ازدهار، وهذا الشكل يعرض التقرير في شهر يناير:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIT6naYY3kR2fEk0vVbX6LHnyZi0NXti8lMuF-mBt0Xhk9eEt7s73G3RyVM2xOW_kGJTWaGDvVntgpPzw4J_PP01pG63eUCEw6WYnTaqKFYwUanJkX1zExd-0PDYAk7LjSGlcmuhOugR4/s1600-rw/usage+php.png" style="margin-left: 1em; margin-right: 1em;"><img alt="استخدام لغة php في مواقع الويب" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIT6naYY3kR2fEk0vVbX6LHnyZi0NXti8lMuF-mBt0Xhk9eEt7s73G3RyVM2xOW_kGJTWaGDvVntgpPzw4J_PP01pG63eUCEw6WYnTaqKFYwUanJkX1zExd-0PDYAk7LjSGlcmuhOugR4/s320-rw/usage+php.png" title="استخدام لغة php في مواقع الويب" width="320" /></a></div>
<br />
لعلك لاحظت لغة الجافاسكربت في القائمة رغم ان التقرير يحتوي على اللغات التي تعمل في جهة الخادم، ولكن لغة الجافاسكربت تعمل بالجانبين، بجهة السيرفر وجهة العميل، عميل مزدوج، نعم هي كذلك حيث لها مترجمات خاصة في جهة السيرفر، والمتصفح في جهة العميل.
<br />
<br />
ولكن ما الخلل؟ من خلال الشكل التالي ستلاحظ ان لغة PHP تستخدم في المواقع التي تمتلك اقل زيارات بينما لغة مثل الجافا تستخدم في المواقع الأكثر زيارات رغم قلة المواقع التي تستخدمها ولكن هذا ما يميزها وذلك لامتيازات خاصة بها ، مثل الأمنية العالية وغيرها.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ZDCL107beRA7juSl3EyZ1OC9iXhPkl3lkN7mkFvoi1_PG5vmvl9xqIsB_HLTUpJg-BOpDK5InrnJm1y_ZAJo6l6PspvE65pfHW8BKK3uS1d62DREVbywfbH4zuwPA24IubLGKhC89TA/s1600-rw/php+traffinc.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="استخدام لغة php في مواقع الويب" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ZDCL107beRA7juSl3EyZ1OC9iXhPkl3lkN7mkFvoi1_PG5vmvl9xqIsB_HLTUpJg-BOpDK5InrnJm1y_ZAJo6l6PspvE65pfHW8BKK3uS1d62DREVbywfbH4zuwPA24IubLGKhC89TA/s640-rw/php+traffinc.jpg" title="استخدام لغة php في مواقع الويب" width="640" /></a></div>
<br />
كان هذا المقال يوضح م<b>دى انتشار لغة PHP</b> مقارنة مع اخواتها في تطوير مواقع الويب، وإذا كانت لديكم أي إضافات فباب التعليقات مفتوح، دمتم في رعاية الله وحفظه!
<br />
<br />
<div class="soread">
اقرأ ايضا:<br />
<a href="https://ar.codexait.com/2016/11/which-contries-that-have-best-developers.html" target="_blank">تعرف على الدول التي تمتلك افضل مبرمجين في العالم</a><br />
<a href="https://ar.codexait.com/2016/06/15-heighest-paying-programming.html" target="_blank">15 من اعلى لغات البرمجة دخلا في 2016</a>
</div>
<br /></div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.comtag:blogger.com,1999:blog-1421699815441362866.post-12472815973437700982016-11-10T02:40:00.011+03:002022-04-28T08:11:40.619+03:00افضل محررات الأكواد المجانية لتصميم وتطوير المواقع<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1n7NBqKPSXzDoUkdMKCWkbQ3HfFQxzHiSnUJBfXGbCHy1ATvErOEWOklnufDOWnS9NY_Rl_ZLf2GoemstBvG2Vs4ChWsGiN3FNrb4uOS-9-X7RtBOtJTNaeYsVCJlrXYawzngth2Jes8/s640-rw/code+editor.png" style="margin-left: 1em; margin-right: 1em;"><img alt="افضل محررات الأكواد المجانية لتصميم وتطوير المواقع" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1n7NBqKPSXzDoUkdMKCWkbQ3HfFQxzHiSnUJBfXGbCHy1ATvErOEWOklnufDOWnS9NY_Rl_ZLf2GoemstBvG2Vs4ChWsGiN3FNrb4uOS-9-X7RtBOtJTNaeYsVCJlrXYawzngth2Jes8/s640-rw/code+editor.png" title="افضل محررات الأكواد المجانية لتصميم وتطوير المواقع" /></a></div>
في ظل التطور المتسارع في عالم البرمجة و تقنية المعلومات، وظهور العديد من الأدوات والبرامج لمساعدة المبرمجين بشكل عام ومطوري مواقع الويب بشكل خاص، لإنجاز المهام بشكل اسهل وزيادة الإنتاجية.</div><div dir="rtl" style="text-align: right;" trbidi="on">ومن اهم هذه الأدوات <b>محررات الأكواد</b> الاحترافية والمعتمدة على الذكاء الاصطناعي، التي تعتبر الأداة الأساسية لمصممي ومطوري المواقع، حيث ظهرت العديد من محررات الأكواد.</div><div dir="rtl" style="text-align: right;" trbidi="on">ولكل منها مميزاتها الخاصة بها، لهذا سأسرد لكم مجموعة مميزة من محررات الأكواد التي تستحق التجربة، لتختار المناسب منها.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;">افضل محررات الأكواد المجانية لتصميم وتطوير المواقع
</h2>
<h3 style="text-align: right;"><a href="https://notepad-plus-plus.org/download/" rel="nofollow" target="_blank">Notepad++ </a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuwl6h0Apl0i46eFe5jVkiKeuyZEwrKvtYCkgEpGBUKy8D6RJFmZZq0dzmIa5X4Ec0BA6BHhPdi6RgSKmyCMmJs3RxJAa6xcSUC9eckLAx4oWpn7Qe3B7Z233AGgdBBFTq_0q4WSqW_Q/s1600-rw/notepad.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="notepad++ code editor" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuwl6h0Apl0i46eFe5jVkiKeuyZEwrKvtYCkgEpGBUKy8D6RJFmZZq0dzmIa5X4Ec0BA6BHhPdi6RgSKmyCMmJs3RxJAa6xcSUC9eckLAx4oWpn7Qe3B7Z233AGgdBBFTq_0q4WSqW_Q/s400-rw/notepad.jpg" title="notepad++ code editor" width="400" /></a></div>
محرر اكواد رائع وما يميزه هو خفته، ودعمه للعديد من لغات البرمجة، ويمكنك استخدامه في حال كنت مبتدئ في تعلم تصميم وتطوير المواقع، او اردت التعديل السريع على بعض الأكواد او قراءتها فهذا المحرر الأفضل لك، أيضا بإمكانك استخدامه بشكل رئيسي.
<br />
<div style="text-align: right;"><span style="font-size: medium;">
مميزاته</span>:
</div>
<ol>
<li>متوفر على الويندوز والماك ولينكس.</li>
<li>خفيف جدا.</li>
<li>يدعم الإضافات الخارجية.</li>
<li>فتح العديد من الملفات بنفس الوقت.</li>
<li>تلوين الكلمات المفتاحية والنصوص البرمجية.</li>
<li>التحكم بالمسافات وتنظيم الكود بشكل تلقائي.</li>
<li>يدعم الــ FTP.</li>
</ol>
<div style="text-align: right;"><span style="font-size: medium;">
عيوبه</span> :
</div>
<ol>
<li>الإكمال التلقائي ضعيف.</li>
<li>لا يدعم التعديل على الملفات البعيدة عبر SSH, WebDev ,HTTP. </li>
</ol>
<br />
<h3 style="text-align: right;"><a href="https://www.sublimetext.com/download" rel="nofollow" target="_blank">Sublime Text
</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKiSCeNN-I2uUa4-lPq01OCN-wPium5kmXHuUc_mSMI2n7XyMh145wioLvWY_KwNCWbj_NWzyfRRHw7fh1y646v5_ezdP2kF6SZrTrSSHgtVDCg6H2TndUnT5LqYMJxlS79h4zrGZI8N0/s1600-rw/sublime+text.png" style="margin-left: 1em; margin-right: 1em;"><img alt="sublime text code editor" border="0" height="339" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKiSCeNN-I2uUa4-lPq01OCN-wPium5kmXHuUc_mSMI2n7XyMh145wioLvWY_KwNCWbj_NWzyfRRHw7fh1y646v5_ezdP2kF6SZrTrSSHgtVDCg6H2TndUnT5LqYMJxlS79h4zrGZI8N0/s640-rw/sublime+text.png" title="sublime text code editor" width="640" /></a></div>
محرر متقدم ، وخفيف جدا ، حيث يتميز بخلفية سوداء رائعة مع تلوين الكلمات المفتاحية والأكواد بألوان رائعة ، مع إمكانية تخصيص الواجهة على ذوقك الخاص ، وهو الخيار الأفضل لدى العديد من مصممي المواقع.
<br />
<div style="text-align: right;"><span style="font-size: medium;">
مميزاته</span> :
</div>
<ol>
<li>خفيف جدا.</li>
<li>يحتوي على العديد من الثيمات الرائعة مع إمكانية تخصيصها.</li>
<li>التحكم بالمسافات والإكمال التلقائي.</li>
<li>مرن وسريع الاستجابة.</li>
<li>يتمتع بواجهة سهلة الاستخدام للمبتدئين.</li>
<li>النسخة التجريبية مجانية.</li>
</ol>
<div style="text-align: right;"><span style="font-size: medium;">
عيوبه</span>:
</div>
<ol>
<li>لا يدعم الكتابة باللغة العربية بشكل سليم.</li>
</ol>
<h3 style="text-align: right;"><a href="https://atom.io/" rel="nofollow" target="_blank">Atom
</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzMZtgOis_sxk2unJGzCpaBGNoM-HLZiqiQ6NgoLeW6ofzpd7XjJCDMSGA9TmMwGOsJtQQLwgfp7FFmzB_QnrGDUI04XA_fHWrScjv6PD-cnhpZuVjOxwfkK4QSOYj_zpoAnD3CuVmAg/s1600-rw/atom.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="atom code editor" border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzMZtgOis_sxk2unJGzCpaBGNoM-HLZiqiQ6NgoLeW6ofzpd7XjJCDMSGA9TmMwGOsJtQQLwgfp7FFmzB_QnrGDUI04XA_fHWrScjv6PD-cnhpZuVjOxwfkK4QSOYj_zpoAnD3CuVmAg/s640-rw/atom.jpg" title="atom code editor" width="640" /></a></div>
مطور بواسطة GitHub ، وهو قريب بالشكل لـ Sublime Text.
<br />
<div style="text-align: right;"><span style="font-size: medium;">
مميزاته</span>:
</div>
<ol>
<li>سهل الاستخدام.</li>
<li>يتوفر على أدوات خاصة بالمطورين.</li>
<li>سهولة تخصيص الواجهة.</li>
<li>دعم قوي من مجتمع GitHub.</li>
</ol>
<div style="text-align: right;"><span style="font-size: medium;">
عيوبه</span>:
</div>
<ol>
<li>بطيء مقارنة بالمحررات السابقة.</li>
</ol>
<h3 style="text-align: right;"><a href="https://code.visualstudio.com/" rel="nofollow" target="_blank">Visual Studio Code
</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZJRdbDBy8liJH4Mb2sjckHfZ1J2-kvnfHuBnTi8GIiI0vQKgH-LlM4mxVbwadtd5kFcQuWLkGGM_y4KA4hJOyXVQu-Y0KryXvk8_RBa3LLP2JK4LMgNkod-AdFyEREyKRpPpSFfmjLQ/s1600-rw/Visual-Studio-Code.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Visual-Studio-Code editor" border="0" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZJRdbDBy8liJH4Mb2sjckHfZ1J2-kvnfHuBnTi8GIiI0vQKgH-LlM4mxVbwadtd5kFcQuWLkGGM_y4KA4hJOyXVQu-Y0KryXvk8_RBa3LLP2JK4LMgNkod-AdFyEREyKRpPpSFfmjLQ/s640-rw/Visual-Studio-Code.jpg" title="Visual-Studio-Code editor" width="640" /></a></div>
محرر اكواد مطور من شركة ميكروسوفت، وهو برنامج مفتوح المصدر ومتوفر للويندوز وماكنتوش ولينكس، وهو يعتبر محرر اكواد خفيف مقارنة Visual Studio الضخم.</div><div dir="rtl" style="text-align: right;" trbidi="on">يعتبر بديلا مناسبا لأصحاب الأجهزة ذات الإمكانيات المحدودة، حيث يتمتع بصغر حجمه، مما يكسبه السرعة وقلة استهلاك المعالج والرام.</div><div dir="rtl" style="text-align: right;" trbidi="on">مايميزه انه يدعم كافة اللغات البرمجية ، كل ماعليك فقط اضافة الحزمة ث extension الخاصة باللغة للمحرر والبدء بالبرمجة ، اي بإمكانك تخصيصة كما تشاء وجعله يدعم اللغات التي تريد.<br />
<div style="text-align: right;"><span style="font-size: medium;">
مميزاته</span>:
</div>
<ol>
<li>يدعم أكثر من 30 لغة برمجة بما في ذلك، اللغات البرمجية لميكروسوفت، سي شارب و ASP.Net.</li>
<li>خفيف وسهل التثبيت.</li>
<li>مجاني ومفتوح المصدر.</li>
</ol>
<div style="text-align: right;"><span style="font-size: medium;">
عيوبه</span>:
</div>
<ol>
<li>يحتاج لوقت كبير لكي يتم تحديثه على انظمة اللينكس.</li>
</ol>
<br />
<h3 style="text-align: right;"><a href="http://brackets.io/" rel="nofollow" target="_blank">Brackets
</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLR4UwM2hZ90dH-7Wrk56fmzKsbP0GOXjcDzrOBGDCQ_d3DPjqIBLnK6_9t8TWUtPynrqZbNaJ5hGB1EIIQc50ENEUFfW34xefp611d7orLmOg4hBk7sNi-SfyxE-3o8i9zAyoZAM2xXA/s1600-rw/brackets.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="bracket code editor" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLR4UwM2hZ90dH-7Wrk56fmzKsbP0GOXjcDzrOBGDCQ_d3DPjqIBLnK6_9t8TWUtPynrqZbNaJ5hGB1EIIQc50ENEUFfW34xefp611d7orLmOg4hBk7sNi-SfyxE-3o8i9zAyoZAM2xXA/s400-rw/brackets.jpg" title="bracket code editor" width="400" /></a></div>
محرر من منتجات شركة ادوب، وهو برنامج مفتوح المصدر، حيث نعرف ان شركة ادوب تتميز بمنتجات خاصة بالجرافيكس، وتعتبر المسيطرة في هذا المجال، حيث انتجت هذا التطبيق كمكمل لتطبيقاتها.</div><div dir="rtl" style="text-align: right;" trbidi="on">ومثال ذلك لتقطيع تصاميم المواقع بالفوتوشوب وتحويلها الى HTML/CSS .
<br />
<div style="text-align: right;"><span style="font-size: medium;">
مميزاته</span>:
</div>
<ol>
<li>واجهة جميلة، وسهلة التعديل والتخصيص.</li>
<li>عرض مباشر لنتيجة الكود.</li>
<li>يعتبر أداة رائعة لتصميم المواقع بــ <b>HTML/CSS/Javascript</b>.</li>
<li>تحديث البرنامج بشكل مستمر لإصلاح الأخطاء.</li>
<li>مجاني ومفتوح المصدر</li>
</ol>
<br />
<h3 style="text-align: right;"><a href="http://bluefish.openoffice.nl/download.html" rel="nofollow" target="_blank">BlueFish
</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQP0VpFhy52C9Fp-WU4reYVahL9n-gJkzhSzXzPJoasH44rQ7J5NnmEO2v8hjykW8wdfUI91Hbb4xtsENH9-PsSDTwtoF2p4GFuzQzrLmCEnfVZv5LbsHVAbPbL3rlYxvJCfeASP8hka4/s1600-rw/bluefish-code-editor.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="bluefish-code-editor" border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQP0VpFhy52C9Fp-WU4reYVahL9n-gJkzhSzXzPJoasH44rQ7J5NnmEO2v8hjykW8wdfUI91Hbb4xtsENH9-PsSDTwtoF2p4GFuzQzrLmCEnfVZv5LbsHVAbPbL3rlYxvJCfeASP8hka4/s320-rw/bluefish-code-editor.jpg" title="bluefish-code-editor" width="320" /></a></div>
واحد من افضل محررات الأكواد المجانية، حيث يتوافر على العديد من الأنظمة والتي منها الويندوز وماكنتوش واللينكس.</div><div dir="rtl" style="text-align: right;" trbidi="on">يتميز بسرعة المعالجة والتنفيذ ، حيث بإمكانك فتح العديد من المشاريع في نفس الوقت ، والتنقل بسهولة من دون أي مشاكل.<br />
<div style="text-align: right;"><span style="font-size: medium;">
مميزاته</span>:
</div>
<ol>
<li>خفيف وسريع جدا.</li>
<li>يدعم تنفيذ ومعالجة العديد من الملفات بنفس الوقت.</li>
<li>يدعم خاصية الاسترجاع التلقائي في حال حدوث مشكلة ما.</li>
<li>البحث والاستبدال المتعدد.</li>
<li>عرض بكامل الشاشة.</li>
<li>دعم التعديل على الملفات البعيدة.</li>
<li>مجاني. </li>
<li>يدعم HTML/CSS/Javascript/PHP بشكل أساسي.
</li>
</ol>
<div style="text-align: right;"><span style="font-size: medium;">
عيوبه</span>:
</div>
<ol>
<li>لديه مشاكل في العمل مع ويندوز 7.</li>
</ol>
<br />
<h3 style="text-align: right;"><a href="https://macromates.com/download" rel="nofollow" target="_blank">TextMate
</a></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgjy_ZUZXZBafTvNqJCrpdhaJGrW82RYVPaNwl0K-OFymahRjSvTwUoiUCFaFeFajCOoiY_tsY9rz78K3Ic34lImYiwiQxpK-7zhgnSjNecdAzFzwBPCagSzcxRf4K9yF5F3KRR6fagQ/s1600-rw/text-mate.png" style="margin-left: 1em; margin-right: 1em;"><img alt="textmate code editor" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgjy_ZUZXZBafTvNqJCrpdhaJGrW82RYVPaNwl0K-OFymahRjSvTwUoiUCFaFeFajCOoiY_tsY9rz78K3Ic34lImYiwiQxpK-7zhgnSjNecdAzFzwBPCagSzcxRf4K9yF5F3KRR6fagQ/s320-rw/text-mate.png" title="textmate code editor" width="320" /></a></div>
محرر خاص بأنظمة الماكنتوش، وهو للمطورين بــ Ruby on Rails.<br />
<br />
<br />
<div class="soread">
اقرأ ايضا:
<a href="https://ar.codexait.com/2016/07/code-editor-for-android.html" target="_blank">افضل محرر اكواد على نظام الإندرويد ويدعم معظم لغات البرمجة </a></div>
<div class="soread">
</div>
<br />
حيث توجد العديد من محررات الأكواد المدفوعة، ولكن ماركزنا عليه في هذه المقالة هي <b>افضل محررات الأكواد المجانية</b>، وبشكل خاص لتصميم وتطوير المواقع.</div><div dir="rtl" style="text-align: right;" trbidi="on">اذا كانت لديك محررات اكواد مجانية غير السابقة، ضعها في تعليق ليستفيد الجميع، دمتم بخير.
<br />
<br /></div>
Codex AIThttp://www.blogger.com/profile/10277402041090003956noreply@blogger.com