الأربعاء، 26 يوليو 2017

الأربعاء، 1 مارس 2017

التعامل مع المسار في HTML (الرجوع للملف الأب)


تحديد المسار من الخصائص الشائعة عند التعامل مع صفحات الويب، و أحيانا قد يصعب كتابة المسار اللازم بصورة صحيحة

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



 <html>



 <head>



  <title>

   التعامل مع المسار

  </title>

 </head> 





 <body>





  <img src="islam.jpg" />




 </body> 



</html>
- islam
و هو اسم الصورة 

 - jpg
الامتداد الخاص بالصورة. يمكن معرفة امتداد الصورة من خلال عرض خائصها عن طريقة الضغط بالزر الأيمن على الصورة ثم اختيار (Proprieties) 

و عند عرض الصفحة 
لكن إذا ما قمنا بتغيير مكان الصورة و قمنا بوضعها داخل ملف و اسميناه (images)، و قمنا بوضع صفحة الويب داخل ملف و اسميناه (html)

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

و لأننا الصورة توجد داخل الملف (images) وصفحة الويب توجد داخل الملف (html). مما يعني أنه يجب علينا الرجوع للملف الأب لملف صفحة الويب ثم الوصول للملف الآخر و هو الملف (images) حتى نتمكن من الوصول للصورة.

 و للرجوع للملف الأب يتم وضع العلامة (/..) في بداية المسار المخصص لتحديد مكان الصورة.

و سوف يكون الكود كالتالي:



<img src="../images/islam.jpg" />
تمّ النشر بـ أضف تعليق

الأربعاء، 8 فبراير 2017

حفظ صفحات الويب كملف pdf باستخدام قوقل كروم

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

يجب عليك استخدام متصفح قوقل كروم (Google chrome) و الأفضل تحميل آخر نسخة؛ لأن خاصية حفظ الصفحات كملف pdf قد لا تكون مدعومة في الإصدارات الأقدم

بعد فتح الصفحة المطلوبة في المتصفح نضغط بالزر الأيمن للفأرة على الصفحة و من ثمة اختيار print كالتالي:

بعد ذلك نضغط على save كما هو موضح في الصورة التالية: 

و أخيراً  تحديد مكان الحفظ و الضغط على save


شاركها لعلّ غيرك يستفيد 



تمّ النشر بـ أضف تعليق

الأحد، 29 يناير 2017

تصميم صفحة ويب ديناميكة باستخدام جافا سكربت javascript



جافا سكربت (javascript) هي لغة برمجة تعمل على جانب العميل (client side).
فائدة جافا سكربت أنها تمككنا من إنشاء صفحات ويب ديناميكية كما تُمكن للمستخدم التفاعل مع صفحات الويب. سوف نستخدمها في التحكم في بعض خصائص وسم HTML 
لا توجد علاقة بين لغة البرمجة المعروفة java و لغة javascript


أولاً سوف نصمم صفحة HTML بسيطة
و الكود الازم لتصميم هذه الصفحة هو:

<html>



 <head>



  <title>



   جافا سكربت



  </title>



 </head>



 <body>



  <div id="myDiv">



   <h1>



    This is my Div.



   </h1>



  </div>



 </body>



</html>

و هذه الصفحة  تحتوي على وسم (div) يحمل الـ (id) التالي:

id="myDiv"
سوف نستخدم هذا الـ (id) حتى نتمكن من الوصول للوسم و التحكم فيه

 و للتحكم في عناصر HTML يمكن استخدام احدى الدوال التالية و التي توفرها لغة javascript و هي:

تستخدم هذه الدالة للوصول إلى الوسوم الخاصة بـ HTML عن طريق تمرير اسم الوسم. 

تستخدم هذه الدالة للوصول إلى الوسوم الخاصة بـ HTML عن طريق تمرير الـ id الخاص بالوسم المحدد لهذه الدالة مثلا:

document.getElementById("myDiv");

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

 <script>



  var d = document.getElementById("myDiv");



  d.style.color = "red";



 </script>
قمنا بتعريف متغير (d) حتى يسهل علينا الكود و يجعله قابلاً للقراءة بدلاً عن كتابة الكود بالصورة التالية:

document.getElementById("myDiv").style.color = "red";

ما نريده هو تغيير الشكل الخاص بالوسم المحدد. يتم كتابة الخاصية المطلوبة بعد (style) ثمّ تحديد الخاصية المراد التحكم فيها، و هنا هي الخاصية (color) و من ثمة اسناد القيمة المناسبة.

 للتعامل مع الخصائص المختلفة يجب اتباع النمط التالي عند كتابة الخاصية بعد (style):
كتابة الكلمة الأولى بالحروف الصغيرة (small letters) و من ثمة كتابة الحرف الأول من الكلمة التي تليها بالحروف الكبيرة (capital letters) بدون الفصل بين الكلمتين بمسافة 
مثلاً للتعامل مع حجم الخط:

document.getElementById("myDiv").style.fontSize = "25px";

و لأن صفحة الويب هي عبارة عن مستند HTML نلاحظ أن يتم الوصول للعناصر عن طريقة كتابة (document) ثم استخدام الدوال المتاحة.


و عند عرض الصفحة مرة أخرى سوف يتم تنفيذ أكواد جافا سكربت (javascript) و تغيير لون الوسم المحدد و هو الوسم div الذي تمكنا من الوصول إليه باستخدام الـ (id) الخاص به. و شكل الصفحة سوف يكون كالتالي:

تمّ النشر بـ أضف تعليق

الاثنين، 23 يناير 2017

تصميم قائمة منسدلة باستخدام HTML و jQuery


سوف نقوم بتصميم صفحة بسيطة، تحتوي على قائمة بسيطة بها عنصرين. ما نريده هو عند الضغط على (>) أن تظهر القائمة و عند الضغط مرة ثانية عليها أن تختفي.
سوف نقوم بتقسيم الشرح إلى عدد من الخطوات 


الخطوة الأولى: تصميم هيكل الصفحة


<html>

<head>

<title>

قائمة منسدلة

</title>

</head>

<body>

<h2>

<span id="clickToShow">



          < 



</span>

مقالات

</h2>

<ul class="menu" >

<li>

برمجة

</li>

<li>

ويب

</li>

</ul>

</body>

</html>

محتوى الصفحة بسيط جداً، فداخل الوسم body نجد الوسم h2 و بداخله الوسم span ، و فائدة الوسم span هي في أنه لا يقوم بملء المساحة التي يوجد بها كما في الوسم div، بل إن الوسم span يقوم يحجز المساحة المناسبة له و أيضا الفائدة الثانية هي حتى يسهل علينا التحكم في عملية الضغط على (>).


الخطوة الثانية: إضافة أكواد الـ CSS

كما هو معلوم يجب أن تكون القائمة غير ظاهرة عند تحميل الصفحة، و للقيام بذلك سوف نقوم بإضافة أكواد CSS.

تتيح لنا CSS عبر الخاصية display التحكم في عملية ظهور العناصر.
أولاً يجب علينا تحديد عنصر الـ HTML الذي نريد تطبيق أكواد CSS عليه. و يمكننا الوصول لعناصر HTML عن طريق اسم الوسم، او باستخدام الـ (كلاس class) و الذي يمكننا من التعامل مع أكثر من وسم او عن طريق الـ (id) و الذي يتيح لنا التعامل مع وسم واحد فقط و لا يمكن ان يتكرر نفس الـ id لأكثر من وسم.
و هنا سوف نقوم بالوصول للوسم الخاص بالقائمة عن طريقة استخدام الكلاس، و للوصول للكلاس يجب إضافة اسم الكلاس مسبوقاً بنقطة ( . )
و للوصول للوسم باستخدام الـ id يتم كتابة الـ id المعين مسبوقاً بعلامة ( # )
بعد ذلك سوف نخبر المتصفح أن يقوم بإخفاء القائمة عن طريقة اسناد القيمة none للخاصية display كالتالي: 

<style>



 .menu{



  display:none;



 }



</style>
بعد إعادة تحميل الصفحة نلاحظ اختفاء القائمة.



الخطوة الثالثة: إضافة أكواد jQuery

ببساطة (جيه كويري jQuery) هي مكتبة تمّ تطويرها باستخدام لغة جافا سكربت، و هي مبسطة و أسهل من جافا سكربت.
في هذه الخطوة نريد عند الضغط على (>) أن تظهر القائمة و عند الضغط مرة ثانية عليها أن تختفي.

 يجب تحميل ملف jQuery أولاً من الموقع الرسمي الخاص بـ jQuery

بعد ذلك يتم تضمين الملف ضمن ملفات صفحة الويب و ربطه مع صفحة الويب عن طريق الوسم script و يمكننا كتابته دخل الوسم head كالتالي:
<script type="text/javascript" src="jquery-1.11.1.min.js"> </script>
و لكتابة الأكواد اللازمة لتنفيذ ما نريده يتم كتابة الاكواد الخاصة بـ jQuery داخل وسم script و هنا سنقوم باضافته بعد نهاية الوسم body

 

<script>



  $(function(){



   $("#clickToShow").click(



    function(){



     $("ul").toggleClass("menu");



    }



   );



  });



</script>

الرمز $ يقوم بتعريف jQuery و الدالة الأولى التي بداخله تعني أنه سيتم تنفيذ أكواد jQuery بعد الإنتهاء من تحميل صفحة الويب. و داخل هذه الدالة قمنا باستهداف عنصر الـ HTML ، و كما شرحنا سابقاً ما نريده هو عند الضغط على (>) ... إلخ 
و لذلك سوف نقوم بتحديد الوسم الذي يحوي (>) و لأننا نريد الوصول إليه باستخدام الخاصية id 

$("#ClickToShow")
و من ثمة يتم تحيد الحدث الذي عن حدوثه يجب تنفيذ الدالة و هو الحدث click ( أي عند الضغط ). و بعد تحديد الحدث المناسب يجب علينا الإعلان على الدالة التي يجب تنفيذها.

كما هو معلوم أن الخاصية display هي التي تستخدم في عملية عرض عناصر HTML و هذه الخاصية يتم تطبيقها على الوسوم الذي يحمل الكلاس (menu) فإذا ما قمنا بإزالة هذا الكلاس هذا يعني أنه لن يتم تطبيق هذه الخاصية. و هذا هو ما تقوم به الدالة ()toggleClass فهي تقوم بإزالة الكلاس المحدد إذا كان موجوداً و العكس، أي إذا لم يكن الكلاس موجوداً سوف تقوم بإضافته للوسم ul.



تمّ النشر بـ أضف تعليق

الأحد، 15 يناير 2017

إضافة أيقونة إلى صفحة ويب | Favicon

سوف نقوم بتصميم صفحة بسيطة كالتالي:


لتحديد الشعار (الأيقونة) يجب إضافة الوسم link 
<link rel="shortcut icon" href="fb.png" />
و الذي يحتوى على الخصائص:

  • rel

     لتحديد نوعية الملف الذي نريد ربطه بالصفحة المحددة، و هنا تمّ اسناد                      القيمة shortcut icon لأننا نريد إضافة شعار لصفحة الويب.

  • href

     لتحديد مسار الصورة التي نريدها كشعار لصفحة الويب مع تحديد إمتداد تلك الصورة.

و سوف يكون الكود كالتالي:

و نلاحظ وجود شعار فيسبوك بجانب عنوان الصفحة





تمّ النشر بـ 4 تعليق

السبت، 29 أكتوبر 2016

ملف اختبار مضاد الفيروسات القياسي من إيكار



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

 هذا الإختبار يجعلك تتأكد من أنّ مضاد الفيروسات لديك يعمل بصورة جيّدة، بدلاً من استخدام فيروسات حقيقة و التي قد تسبب لك أضرار.

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

 نص اختبار إيكار هو:
X5O!P%@AP[4\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*

ويمكن عمله بواسطة برنامج المفكرة (نوت باد) وحفظه بامتداد com.

 يمكنك تحميل الملف بدلاً من إنشائه على جهازك من هنا 

 المصدر: ويكيبيديا
تمّ النشر بـ أضف تعليق
الاشتراك في: الرسائل (Atom)