Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

باللغة العربية HTML5 دورة

6,320 views

Published on

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

اذن قم بدراسة هذه الدورة ^_^

قم بزيارة الموقع
2nees.com
لتحميل الملف مع كامل الأمثلة ...
(دورة مجانية)

Published in: Education
  • Be the first to comment

باللغة العربية HTML5 دورة

  1. 1. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ دورة Html5 تقديم: أنيس حكمت أنيس أبوحميد ايميل: Anees_hikmat@yahoo.com ملاحظة: هذا العمل مجان خالص لوجه الله تعالى, لا جٌوز ب عٌه او احتكاره....
  2. 2. مقدمة الحمد لله الذي بحمده تتم النعم, الحمد لله رب العالم نٌ, بفضل من الله تعالى سنبدأ بدورة html5 , ح ثٌ س تٌم التطرق لما هو جد دٌ عن ال html , راج اًٌ من الله تعالى أن وٌفقنا لخ رٌ العمل و جٌز نٌا وا اٌكم خ رٌ الجزاء, وأن نٌفع بنا وبكم امتنا الاسلام ةٌ, وأن جٌعلنا عزا للاسلام والمسلم نٌ.. اللهم آم نٌ. *( ملاحظة: اخوان هذا العمل مثله مثل أي عمل بشري, صٌ بٌ الانسان به, وقد خٌطئ, فإن أصبنا فبفضل من الله تعالى, وإن أخطئنا فمن أنفسنا .. نسأل الله تعالى التوف قٌ ل ولكم ولشباب المسلم نٌ .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاجظة: حاول أن لا تتعجل وأنت تستعرض الشرائح ... قم بكتابة كل مثال ...جرب ..ثم انطلق..ا ضٌا هناك دروس تعتمد على سابقاتها ..لذلك ..تسلسل باسلوب منهج ...
  3. 3. الفهرس 1 ) هذا الفهرس يستعرض فقط العناويين الرئيسية, وكل عنوان رئيسي قد يحتوي من 0 الى 13 عنوان فرعي أكثر أو أقل( anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  4. 4. الفهرس ) هذا الفهرس يستعرض فقط العناويين الرئيسية, وكل عنوان رئيسي قد يحتوي من 0 الى 13 عنوان فرعي أكثر أو أقل( 2 anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  5. 5. 1 ) لا يه ام html5 ؟ Html5 عبارة عن مع اٌر جد دٌ لل html .... والسبب ف ظهورها هو التطور الكب رٌ الذي حصل على شبكة الانترنت, ومع انها حتى هذه اللحظة -لحظة كتابة هذا الشرح البس طٌ- تٌم العمل لتطو رٌها الى أن الكث رٌ من الخصائص تم اضافتها للمتصفحات الرئ سٌ ةٌ, ولكن لا وٌجد متصفح قد دعم جم عٌ هذه الخصائص بشكل كامل حتى الآن, لذلك عند ذكرنا خاص ةٌ مع نٌة لل html5 , سنقوم باذن الله تعالى بذكر ما ه المتصفحات الت تدعمها من المتصفحات الرئ سٌ ةٌ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  6. 6. 2 ) نع اهملعن نا بيج صئاصخ html5  ال html5 تعتمد على html, JavaScript,css .  ال html5 قامت بتقل لٌ الحاجة الى الاضافات الخارج ةٌ ) (plug-in مثل الفلاش...  ال html5 أفضل ف معالجة للاخطاء.  ال html5 تقلل من بعض الكود عن طر قٌ اضافة tag جد دٌة, تقوم بنفس العمل. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  7. 7. الإنسان المبدع هو الذي يصنع المجسمات الجميلة من أكوام القمامة .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  8. 8. HTML5 NEW TAGS لنبدأ بإذن الله .. اختصارات: Internet Explorer 9+: I9+ F : Firefox Opera:O Chrome:C Safari:S anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  9. 9. canvas anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  10. 10. <canvas> <canvas> هو tag تم تصم مٌه خص صٌا ليحتوي على الرسومات الؽراف كٌ ةٌ ثنائ ةٌ البعد 2D , ومكننا الرسم داخله عن طر قٌ استخدام السكربت, وف الؽالب كٌون جافا سكربت.  من الأمور الت سٌتط عٌ احتوئها ال canvas ه الخطوط, المربعات, دوائر, الأحرؾ...  المتصفحات الت تدعم هذه الخاص ةٌ .) I9+,O,F,C,S ) طر قٌة كتابة ال canvas .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  11. 11. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  12. 12. والآن طريقة الرسم داخل ال canvas أولا: Rect anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  13. 13. ثانيا: رسم Path anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  14. 14. ثالثا: رسم curve path anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  15. 15. رابعا: Line Join Path anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  16. 16. خامسا: رسم صورة (image) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ بهذه الص ؽٌة أستط عٌ تحد دٌ حجم الصورة أ ضٌا ...
  17. 17. سادسا: رسم نص ) (Fill Text anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  18. 18. سابعا:رسم نص ) Stroke Text anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  19. 19. اللهم إنا نسألك زيادة في الدين وبركة في العمر وصحة في الجسد وسععععععععععععععععععععععععععة فعععععععععععععععععععععععععي العععععععععععععععععععععععععرز وتوبعععععععععععععععععععععععععة بعععععععععععععععععععععععععل المعععععععععععععععععععععععععوت وشعععهادة نعععد المعععوت ومالعععرة بععععد المعععوت و لعععوا نعععد الحسعععا وأمانعععا معععن الععععذا ونصععععععععععععععيبا مععععععععععععععن الجنععععععععععععععة وارز نععععععععععععععا الن ععععععععععععععر إلعععععععععععععع وجهععععععععععععععك الكععععععععععععععريم اللهععععععم ارحعععععععم موتانعععععععا وموتعععععععا المسععععععلمين واشعععععععلي مر عععععععانا ومر عععععععا المسعععععععلمين اللهععععم اللععععر للمسععععلمين والمسععععلمات والمععععامنين والمامنععععات ا حيععععا مععععنهم وا مععععوات اللهععععععم ارز نععععععي بععععععل المععععععوت توبععععععة و نععععععد المععععععوت شععععععهادة وبعععععععد المععععععوت جنععععععة اللهم ارز ني حسن الخاتمة anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  20. 20. Drag and Drop anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  21. 21. Drag and Drop  لا ًف html5 أصبح بامكاننا عمل سحب عنصر مع نٌ ووضعه ف مكان آخر, وهذا سٌمى drag and drop .  المتصفحات الت تدعم هذه الخاص ةٌ .) I9+,O,F,C,S )  شرح الدوال لهذه الخاص ةٌ : أولا: نضع draggable="true“ لل بدنا نسحبو ..وهاي شؽلة مهمة ثان اٌاا: dataTransfer.setData("Text",ev.target.id) وهااذا مااا ساا حٌدث عنااد باادأ عمل ةٌ السحب, لك قٌوم باخذ نوع الب اٌنات والق مٌة الخاصة بها ثالثا: preventDefault() وهذه الدالة ه الت تمنع المتصفح من التعامال الطب عٌا ماع الب اٌنات.)لك تستط عٌ تأد ةٌ عمل ةٌ السحب بنفس الصفحة مثلا, ماش اٌروح فٌاتح صافحة ثان ةٌ...الخ( رابعااا: dataTransfer.getData("Text"); هااذه الدالااة هاا التاا تسااتقبل الب اٌنااات عنااد اسقاطها .. خامساا: appendChild وتساتخدم هاذه الدالاة لاضاافة الب اٌناات الاى العنصار الاذي قمناا باخت اٌره . anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  22. 22. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  23. 23. <video></video>  لا مسا tag لا حٌتاج لتوض حٌ ^_^, هذا عبارة عن tag سٌمح بتضم نٌ مكان لعرض الف دٌ وٌ داخل الصفحة.  هذا ال tag دٌعم 3 ص ػٌ للف دٌ وٌ) MP4,Ogg,WebM .)  المتصفحات الت تدعم هذا ال Tag وما ه الص ػٌ المدعومة لها لاحظ أنه عند استخدامك لص ؽٌة Ogg(audio) & MP4 للف دٌ وٌ تضمن عمل ال tag على جم عٌ المتصفحات anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  24. 24. الطريقة القديمة لكتابة كود تضمين الفيديو.. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  25. 25. طريقة استخدام الفيديو في html5 anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ لاحظ طر قٌة تضم نٌه ما أبسطها... نقوم فقط بفتح tag من نوع ف دٌ وٌ .. <source هااذه تحاادد الف اٌاد وٌ الااذي ساا عٌمل وعنااد تكرراهااا ..فأنااا قماات بتحد اٌاد الصاا ؽٌة ..الأولااى mp4 والثان اٌاة ogg ..لكاا أضاامن أان تعماال علااى جم اٌاع المتصاافحات )لا تنسااى الاصدارات( ..
  26. 26. بعض الدوال التي يمكن استخدامها مع الفيديو.. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  27. 27. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  28. 28. لم العليم و قل العا ل اختللا اي الذي منهما د احرز الشرفا فالعلم ال انا احرزت لايته والعقل ال انا الرحمن بي رفا فأفصح العلم افصاحا و ال له بأينا الله في فر انه اتصلا فبان للعقل ان العلم سيده فقبل العقل رأس العلم وانصرفا anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  29. 29. <audio></audio>  هذه الخاص ةٌ ^__^, بعرؾ سهلة ^_^, هذه الخاص ةٌ تسمح لنا بتضم نٌ مقطع صوت داخل الصفحة, ولا تحتاج أ ضٌا plug-in .  المتصفحات الت دٌعمها هذا ال tag مع الص ػٌ ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  30. 30. Input Type  الآن مع ال Html5 توفرت مجموعة من الخصائص ا ضٌا الت مٌكن ان نستخدمها مباشرة لادخال نوع محدد من الب اٌنات, دون استخدام السكربت مثلا, وسنتكلم باذن الله تعالى عن: color date datetime datetime-local email month number range tel time url week anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  31. 31. color  من اسم هذه الخاص ةٌ, نستنتج أنها تتعلق بالألوان, وفعلا هذه الخاص ةٌ تقوم بتوف رٌ زر حٌتوي على مجموعة الألوان , بح ثٌ ظٌهر لنا على الزر اللون الذي قمنا باخت اٌره, وبإمكاننا طبعا ارسال ق مٌة اللون والتعامل معه .....  المتصفحات الت تدعمها هذه الخاص ةٌ ) (C,O ملاحظة: قد تتطور المتصفحات الأخرى وتدعم هذه الخاص ةٌ, لذلك هذه المتصفحات لحظة كتابة هذا الشرح البس طٌ ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ هذه هي طريقة استخدام هذا التاغ, وهو يشبه الطريقة التقليدية لكتابة التاغ... ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 14.php وموجودة داخل مجلد اسمه PHP ) أو استعرضها على شكل صفحة html فقط ...
  32. 32. Date  هذه الخاص ةٌ تت حٌ للمستخدم اخت اٌر تار خٌ مع نٌ من تقو مٌ.  المتصفحات الت تدعمها ) C,S,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 15.php وموجودة داخل مجلد اسمه PHP ) أو استعر ها ل شكل صلحة html فقط ...
  33. 33. Input Type: datetime-local  هذه الخاص ةٌ تت حٌ للمستخدم اخت اٌر التار خٌ والوقت من خلال تقو مٌ .  المتصفحات الت تدعمها ) C,S,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 16.php وموجودة داخل مجلد اسمه PHP ) أو استعر ها ل شكل صلحة html فقط ...
  34. 34. email  تستخدم هذه الخاصة لتعر ؾٌ حقل س حٌتوي على ا مٌ لٌ, وهذا عٌن انه جٌب ان رٌاع ص ؽٌة الا مٌ لٌ المعروفة, والا فس خٌرج رسالة تحذ رٌ تف دٌ بوجود خطأ...  المتصفحات الت تدعم هذه الخاص ةٌ ) F,C,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 17.php وموجودة داخل مجلد اسمه PHP ) أو استعر ها ل شكل صلحة html فقط ...
  35. 35. month  تسمح لنا هذه الخاص ةٌ الاخت اٌر من تقو مٌ مع نٌ )الشهر والسنة فقط( ..  المتصفحات الت تدعم هذه الخاص ةٌ ) S,C,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاح ة: ستعراض هذا المثال ل شكل ملي, ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر مثل xampp, zendserver, wampserver أو أي اشي آخر...)اسم الصلحة 18.php وموجودة داخل مجلد اسمه PHP ) أو استعر ها ل شكل صلحة html فقط ...
  36. 36. number  ةعبرأ هل دجوٌو ماقرلأا عم لماعتٌ لقح ؾٌرعتل ةٌصاخلا هذه مدختست خصائص رئ سٌ ةٌ ) (min,max,step,value .  عٌمل على المتصفحات ) O,S,C .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ اسم الصلحة ك PHP ( 19.php ( واذا أردت راية المثال ك Html ..ا اط هنا ..
  37. 37. Range  هل دجوٌو ماقرلأا نم ىدم عم لماعتٌ لقح ؾٌرعتل ةٌصاخلا هذه مدختست أربعة خصائص أ ضٌا وه ) (min,max,step,value .  عٌمل على المتصفحات ) O,S,C .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ اسم الصلحة ك PHP ( 20.php ( واذا أردت راية المثال ك Html ..ا اط هنا ..
  38. 38. يقععععععععول الشععععععععافعي فععععععععي تجاهععععععععل السععععععععليه و ععععععععدم الععععععععرد ليععععععععه: يخععععععاطبني السععععععليه بكععععععل ععععععبح........فععععععأكره أن أكععععععون لععععععه مجيبععععععا. يزيعععععععد سعععععععلاهة فأزيعععععععد حلمعععععععا...........كععععععععود زاده ا حعععععععرا طيبعععععععا. ويقعععععععععععععععععععععععععععععععععول معععععععععععععععععععععععععععععععععرو بعععععععععععععععععععععععععععععععععن لعععععععععععععععععععععععععععععععععي: ادا نطعععععع السعععععععليه فعععععععلا تجبعععععععه......فخيعععععععر معععععععن اجابتعععععععه السعععععععكوت. سكت ن السليه ف ن أني..... ........ ييت ن الجوا وما ييت. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  39. 39. tel  تستخدم هذه الخاص ةٌ لتعر ؾٌ حقل قٌبل ص ؽٌة لأرقام الهواتؾ.  حتى لحظة كتابة هذه الشراح )ل سٌ مدعوما بعد من المتصفحات الرئ سٌ ةٌ( anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  40. 40. time  تقو لكش ىلع نٌعم لقح دٌدحتل ةٌصاخلا هذه مدختست ...  دٌعم هذه الخاص ةٌ المتصفحات ) C,S,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ اسم الصلحة ك PHP ( 22.php ( واذا أردت راية المثال ك Html ..ا اط هنا ..
  41. 41. url  تستخدم هذه الخاص ةٌ لتعر ؾٌ حقل سٌتقبل روابط.. http://anything…etc  دٌعم هذه الخاص ةٌ المتصفحات ) F,C,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  42. 42. week  هذه الخاص ةٌ تعط كٌ رقم الأسبوع الذي اخترته مع العام ...^_^  دٌعم هذه الخاص ةٌ المتصفحات ) C,S,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ اسم الصلحة ك PHP ( 24.php ( واذا أردت راية المثال ك Html ..ا اط هنا ..
  43. 43. Form Elements <datalist> <keygen> <output> anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  44. 44. <datalist>  لا اذه مدختسٌ tag لإظهار كلمات متوقعة بشكل تلقائ عند كتابتك ش ءً مع نٌ, أو ظٌهر لك عدة اخت اٌرات حسب ما تم حفظه داخل القائمة )شب هٌا تقريبا بفكرة الؽوؼل –من ح ثٌ المظهر-(  دٌعم هذا ال tag من المتصفحات ) F,C,O anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  45. 45. <keygen>  لا اذه مدختسٌ tag ل زٌ دٌ من مقدار الأمان والتحقق من صلاح ةٌ الوصول للأعضاء, عن طر قٌ تشف رٌ الب اٌنات المرسلة باستخدامه, ومبدأ عمله قٌوم على انشاء مفتاح نٌ الأول محم )ً private ( والثان عام ) public (, والمقصود بمحم أي تٌم تخز نٌ هذا المفتاح بشكل محل بدون ارساله الى الس رٌفر, والعام قٌوم بارسال المفتاح الى الس رٌفر, و مٌكننا من خلال هذا المفتاح العام التأكد ف المستقبل أنه تٌوافق مع المفتاح الخاص أم لا , اذا نعم عٌن أن الأمور تس رٌ بالشكل الصح حٌ. ^_^  دٌعم هذا ال tag المتصفحات ) C,F,S,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ اسم الصلحة ك PHP ( 26.php ( واذا أردت راية المثال ك Html .)لن ي هر ناتج(.ا اط هنا ..
  46. 46. <output>  لا اذه tag وظ فٌته ارجاع ناتج عمل ةٌ حساب ةٌ مباشرة ^^.  المتصفحات الت تدعم هذا ال tag ه ) C,F,S,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  47. 47. New Form Attributes and New Input Attributes anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  48. 48. autocomplete Attribute  هذه الخاص ةٌ تقوم على تعبئة الحقول بشكل تلقائ مجرد رجوع ال وٌزر للصفحة, أي أن الب اٌنات تم ادخالها بالأصل من قبل المستخدم.  هذه الخاص ةٌ مٌكن وضعها لل form أو ضمن input tag ...وه حالتنان on وتعن قم بالتعبئة التلقائ ةٌ, و off ..لا تقم بذلك.  تدعم هذه الخاص ةٌ المتصفحات الرئ سٌ ةٌ جم عٌها باستثناء ال ) O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  49. 49. novalidateAttribute  وه خاص ةٌ خاصة بال form , وتعن أنه ل سٌ من الضرورة التحقق من صحة المعلومات المدخلة ف هذا ال form .  دٌعم هذه الخاص ةٌ المتصفحات ) F,C,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  50. 50. ال سعبحانه وتععال : ﴿الَّعيذي ن آ مونعوا و يملوعوا الصَّعالي حايت وطعو ب ل وهعسم ووحسسعون مع ]الر ععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععد: 29 .] طوب لي من طا ل وه ال حديــــــــــوث *** ما يس توي ال طيِّو وال خبيـــــــــــــــــ وث anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  51. 51. autofocus Attribute  تستخدم هذه الخاص ةٌ لتحد دٌ عنصر ادخال مع نٌ مباشرة, أي مجرد تحم لٌ الصفحة تٌم التأش رٌ عل هٌ ^_^.)من خصائص ال input .)  دٌعم هذه الخاص ةٌ المتصفحات )جم عٌ المتصفحات عدا I) .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  52. 52. form Attribute <its for input tag>  طبخلن ام ناشع لاوأ : Pp ... هذه خاص ةٌ اسمها form وه من خصائص ال input ..  تقوم هذه الخاص ةٌ على جعل أحد ال input tag الموجودة داخل الصفحة تابعة لفورم مع نٌ, أو أكثر..  دٌعم هذه الخاص ةٌ المتصفحات الرئ سٌ ةٌ جم عٌها ما عدا ) I .)  ل عٌمل المثال بشكل صح حٌ وترى النتائج عل كٌ بتجربته على الس رٌفر ..اسم الصفحة 31.php ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ أو انظر الى الكود ك html ....
  53. 53. formactionAttribute <its for input tag>  رٌؼ ىرخأ ةحفص ىلا باهذلل نٌعم رصنع هٌجوت ىلع ةٌصاخلا هذه موقت الصفحة المخصصة ف ال action الموجودة داخل الفورم...و قٌوم مبدأ عملها على عمل override لل action الخاص بال form ب formaction الخاص ةٌ الموجودة داخل ال input tag .  مٌكن استخدام هذه الخاص ةٌ فقط لنوع نٌ من الحقول submit & image  دٌعم هذه الخاص ةٌ جم عٌ المتصفحات الرئ سٌ ةٌ ما عدا ) I .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ رض ك html ستعراض النتائج ..اسم الصلحة . .. 32.php
  54. 54. formenctypeAttribute <its for input tag>  تستخدم هذه الخاص ةٌ لتحد دٌ طر قٌة ترم زٌ الب اٌنات المرسلة عن طر قٌ الفورم, مثل Multipart/form-data .. ح ثٌ مٌكننا الآن تحد دٌ عن طر قٌ ربطها اما ) submit or image ( ولا تعمل هذه الخاص ةٌ الى على هذان ال tags ... ^_^..  لا تستط عٌ استخدام هذه الخاص ةٌ الا مع method=“post” ...  دٌعم هذه الخاص ةٌ المتصفحات )جم عٌها عدا I .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  55. 55. formmethodAttribute <its for input tag>  ًه له تاناٌبلا لاسرا ةقٌرط دٌدحتل ةٌصاخلا هذه مدختست get or post وبهذا نستط عٌ عن طر قٌها عمل override للطر قٌة المستخدمة بالفورم وتحو لٌها الى ما تم تحد دٌه داخل ال input tag .  مٌكن استخدام هذه الخاص ةٌ فقط داخل ال submit or image ...  دٌعم هذه الخاص ةٌ جم عٌ المتصفحات عدا ) I .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ لتطبي المثال م ينسخ الصلحتان 34.php and 34_0.php ال السيرفر او اطلع على الكود ك html ...
  56. 56. formnovalidateAttribute <its input tag>  ًهو اقباس اهنع انملكت ةٌصاخ هبشت ةٌصاخلا هذه novalidate ..وكانت تلك الخاص ةٌ على مستوى الفورم, والآن مٌكننا ان نربطها مع submit بح ثٌ اذا قام بالضؽط على هذا الزر فانه س نٌفذ بدون validation ..  تعمل هذه الخاص ةٌ فقط على submit ...  دٌعم هذه الخاص ةٌ المتصفحات ) C,F,O .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  57. 57. formtargetAttribute <its for input tag>  ىلع ظعضلا دنع تاناٌبلا ضرع ةقٌرط دٌدحتل ةٌصاخلا هذه مدختست الزر...  دٌعم هذه الخاص ةٌ المتصفحات جم عٌها عدا ) I .)  مٌكنك استخدام _blank or _self or _parent or _top ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ _blank : يقوم ل فتح نافذة جديدة ند ال اط ..وفي هذا المثال مت بو ع ال action = # لذلك سيقوم بعرض نلس الصلحة ولكن بنافذة جديدة أي ا ..
  58. 58. min and max Attributes <its for input>  لقد تكلمنا عن هذه الخاص تٌ نٌ بشكل ؼ رٌ مباشر..عندما تطرقنا الى موضوع ال input=number كمثال ...والآن سنذكرهما بشكل أوسع .. مٌكن استخدام هذه الخاص تٌان لتحد دٌ أقل أو أكبر )تار خٌ, رقم, مدى, شهر, أسبوع, وقت..(..وبهذا نكون استطعنا أن نحدد أقل ق مٌة لادخال مع نٌ أو أكبرها بدون استخدام الوسائل الأخرى ....مثل js ...  دٌعم هاتان الخاص تٌان ال C,S,O anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ انتبه ال نوع المتصلح الخاص بك..
  59. 59. multiple Attribute <its for input>  ^_^ ... ةلهس : Pp ...تستخدم هذه الخاص ةٌ لتفع لٌ امكان ةٌ اخت اٌر أكثر من صورة او ملؾ معا وأ ضٌا وضع أكثر من ا مٌ لٌ ...وهذا عٌن أنها لن تعمل الى على file & email ...  دٌعم هذه الخاص ةٌ المتصفحات جم عٌها عدا ) -_- I .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  60. 60. placeholder<its for input>  تستخدم هذه الخاصية لو ع hint يقوم ل وصف مصار لما سيحتوي ال input , ويمكن استخدام هذه الخاصية مع text,password,Email,url,tel,search .... لما أن الملاح ة الصايرة هذه التي ست هر لن تاثر ل معلومات ا دخال...  يد م هذه الخاصية جميع المتصلحات I9+ .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  61. 61. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  62. 62. Element Semantic anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  63. 63. Element Semantic  أولا سنبدأ بتعر ؾٌ هذا المصطلح, وتوض حٌ الفرق ب نٌه وب نٌ ال NotSemantic .. قٌصااد بااال Semantic أي ال tag التاا مٌكاان فهاام محتوهااا مباشاارة ماان النظر ال هٌا عان طر اٌق المبارمج أو مباشارة مان المتصافح مثال <table> , أماااا not Semantic ف قٌصاااد بهاااا ماااا لا مٌكااان تخمااا نٌ محتاااواه مثااال ال <span> أو <div> ..فقد تحتوي أكثر من محتوى ول سٌ ش ءً محدد .. هذا الموضوع دٌعمه جم اٌع المتصافحات الرئ سٌا ةٌ) I9+,C,S,O,F ( ..علماا أن I8 مٌكاان دعمااه عاان طر اٌاق اسااتخدام سااكربت .والاصااداراتت القد مٌااة ماان المتصفحات الأخرى مٌكن ان ندعمها باستخدام طر قٌة مع نٌة.لكن الآن لتبقاى هذه المعلومات ف تفك رٌك ولنبدأ على بركة الله .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  64. 64. <time>  ومن اسمه دٌل على وجود لاستخدام الوقت ...وبالحق قٌة هو كذلك, سٌتخدم لمعرفة الأوقات والتوار خٌ كل على حدا أو معا ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ح أنني استطعت القيام بتحديد الو ت لوحده أو التاريخ لوحده أو ا ثنان معا.. ملاح ة: يمكننا استخدام اي ا <time>2011-07-14</time> وهذه الصياة تستخدم فقط ندما احتاجها فقط هار القيمة ..
  65. 65. <meter>  تستخدم هذه كمق اٌس مٌكن أن رٌاه المستخدم, و كٌون على شكل مدى Range ب نٌ رقم نٌ لا تظهر ق مٌتهما..) ( , وؼالبا ما تستخدم لتوضح مدى استؽلال قرص مع نٌ أو بدء وانتهاء عمل ةٌ مع نٌة ..الخ.  لها 6 خصائص: Value : وه الق مٌة الت وصل ال هٌا. Min : أقل ق مٌة ممكنة للمدى. Max : أكبر ق مٌة ممكنة للمدى. High : بحدد عن طر قٌها النقطة الت ستعتبر نقطة قر بٌة للوصول للنها ةٌ Low : عكس ال high .. optimum: : اذا أحببت أن تضع نقطة ضمن المدى تكون ه النقطة الأمثل..  ملاحظة: آخر 3 خ اٌرات اخت اٌر ةٌ. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  66. 66. <progress>  تستخدم هذه لتحد دٌ نسبة المهام المنجزة بالنسبة لعمل ةٌ مع نٌة....مثل عمل ةٌ تحم لٌ الملفات ...  لها 3 خصائص min,max,value ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  67. 67. <section>  تستخدم هذه للاشارة على انها تحتوي جزء أو مقطع من ملؾ أو مستند..  تعتبر هذه صورة مصؽرة عن div ولكن ذات معنى دلال او اشاري ..أي مجرد النظر ال هٌا نعلم انها تحتوي جزء من ملؾ أو مستند.. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  68. 68. <article>  تستخدم هذه لتحد دٌ أن المحتوى جزء مستقل, مٌكن توز عٌه بشكل مستقل, وأن كٌون المحتوى الخاص به كاف لإ صٌال فكرة مع نٌة...  مثل: Blog post News story Comment Review Forum post anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ لاحظ أنها أفكار تنظ مٌ ةٌ, للدلالة على المحتوى الت بداخلها وهذه فكرة انشائها ..
  69. 69. <nav>  تحتوي هذه على مجموعة من الروابط, بح ثٌ مٌكننا تنظ مٌ الروابط داخل هذا ال nav ...مع العلم أنه ل سٌ بالضرورة أن تٌم وضع جم عٌ الروابط الت بالصفحة داخله ..^_^ anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  70. 70. <header>  تستخدم هذه لتحتوي ألمقدمة لأي محتوى أو صفحة ..و مٌكن أن تٌواجد أكثر من header ف نفس الصفحة ...مثلا ف حالة وضعنا أكثر من section بامكان أن أضع header لكل section .... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  71. 71. <footer>  تستخدم هذه للدلالة على نها ةٌ أو خاتمة فثرة مع نٌة او صفحة .., و جٌب ان تحتوي هذه على معلومات عن الصفحة او الفقرة ..., مثل اسم الناشر أو حقوق الملك ةٌ, أو معلومات عن الصفحة أو روابط متصلة بالموضع ..الخ. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  72. 72. <aside>  سٌتخدم هذا ل حٌتوي المعلومات الجانب ةٌ, أو الاضاف ةٌ لمحتوى مع نٌ, مثل وضع نص, ومن ثم وضع معلومات جانب ةٌ عنه .... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  73. 73. <figure> and <figcaption> figure تستخدم هذه للدلالة على احتوائها محتوى متكامل بذاته شٌرح نفسه بنفسه تقر بٌا..مثل الصورة أو الجداول الب اٌن ةٌ ..الخ, و مٌكن ترق مٌها أو ترت بٌها الواحدة تلو الأخرى باستخدام figcaption ... انظر الى أي كتاب أو أي منهاج مدرس ^_^ مثلا الف زٌ اٌء *_* ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  74. 74. دعم المتصفحات لهذه ال tags ..  قلنا أن هذه ال tags مدعومة من المتصفحات الرئ سٌ ةٌ, باصداراتها الجد دٌة, لكن الاصدارات القد مٌة, قد لا تستط عٌ دعمها, فهل هناك طر قٌة تمكن المتصفحات القد مٌة من ان تدعم هذه ال tags ؟ الجواب نعم وٌجد وه باضافة كود css الى style تضعه انت بصفحتك عٌن ) Css .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  75. 75. مشكلة في متصفح Ie8- ..  الطر قٌة الت ذكرناها, ستعمل ف المتصفحات القد مٌة الأخرى باذن الله, ولكن ل سٌ مع ال ie8- ..  مٌكن حل هذه المشكلة باستخدام التال :ً anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  76. 76. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  77. 77. HTML5 Web Storage anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  78. 78. أولا: ال Cookies  قبل البدأ بمفهوم ال Web Storge , عل نٌا أن نعلم أنها تشبه تقر بٌا فكرة ال cookies , لكن مع بعض الاختلافات ..  ال cookies تستخدم لحفظ بعض الب اٌنات على جهاز المستخدم, ل تٌم استدعائها عند الحاجة ال هٌا عن طر قٌ الس رٌفر.  من الأمثلة على استخدام ال cookies ... عمل ةٌ ”تذكرن “ً.  مشكلة ال cookies : الحجم محدود للملؾ الذي حٌفظ ب اٌنات ال cookies بسعة تقدر 4KB أي ما قٌدر ب 30 الى 50 cookies بكل ملؾ.أ ضٌا مٌكن ان تشكل مشاكل تتعلق بالأمان أو الخصوص ةٌ, و مٌكن أ ضٌا لل وٌزر حذؾ هذا الملؾ. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  79. 79. ثانيا: Web Storage  تعد هذه أسرع وأكثر أمانا من ال cookies ..  تمكننا تخز نٌ كم اٌت أكبر من الب اٌنات تصل الى 5 م ؽٌا و مٌكن ز اٌدة هذه السعة من قبل المستخدم.  المعلومات لا تكون متضمنة ف كل عمل ةٌ requset من الس رٌفر, ولكن فقط عند الطلب تٌم تشؽ لٌها والعمل معها.  تخزن الب اٌنات على شكل key/value ...و مٌكن لكل web page أن تقوم باتدعائها بنقسها ..  تٌم التعامل معها عن طر قٌ ال clintside سكربت, لذلك ه ل سٌت بحاجة للتعامل مع الس رٌفر أو الداتا ب سٌ, أي تخلصنا من الطر قٌة التقل دٌ ةٌ..  هناك نوعان مهمان منها : الأول: Local Storage والثان :ً Session Storage anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  80. 80. قبل البدأ بتفصيل النوعين ) local and Session ) عل نٌا أن نقوم بفحص المتصفح ...هل دٌعم هذه الخاص ةٌ ؟؟؟؟ ^_^.. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  81. 81. أولا: Local Storage  قٌوم نوع التخز نٌ هذا على مبدأ )احفظ الب اٌنات بدون وجود وقت محدد لانتهاء هذا التخز نٌ( ..أي لا وٌجد حد زمن لاحتواء الب اٌنات ..  هذه الب اٌنات لا تخذؾ بعد اؼلاق المتصفح ..و مٌكن ان تكون متاحة للاستخدام حتى وإن مضى عل هٌا وٌم او اسبوع أو شهر أوسنة ...الخ  تخزن هذه المعلومات على شكل string (.. (key & value .... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  82. 82. ثانيا: Session Storage  قٌوم نوع التخز نٌ هذا على تخز نٌ الب اٌنات بنفس طر قٌة ال local ولكن الفرق الجوهري والرئ سٌ ..أن عمل ةٌ التخز نٌ ف هذا نوع تنته بانتهاء ال session .. عٌن مثلا اذا اؼلقت المتصفح ..خلص بتروح الب اٌنات .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  83. 83. مثال يوضح الفرق بين النوعين ^_^ anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ 
  84. 84. أسلوب برمجي آخر لتخزين واسترجاع القيم .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  85. 85. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  86. 86. Application Cache anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  87. 87. Application Cache  ًف اهمادختسا نكمٌ ًتلاو ةعئارلا تاٌناكملاا نم هذه دعت html5 ..ولكن ماذا قٌصد بها؟ .. مٌكننا القول بانها القدرة او الامكان ةٌ على تصفح موقع مع نٌ حتى وان لم كٌن هناك اتصال ف الانترنت !!...ك ؾٌ هذا؟!  مبدأ عملها: قٌوم مبدأ عملها بشكل مبسط على قائمة تحتوي الروابط للصفحات الت داخل الموقع وما تحتو هٌ من ملفات html أو js أو أي من المصادر الأخرى ..الآن الصفحة الرئ سٌ ةٌ تقوم على تحد دٌ هذه القائمة وعمل لها استدعاء عن طر قٌ استدعاء ملؾ اسمه manifest ..  ما طب عٌة عمل ملؾ ال manifest ؟ ...أولا هذا الملؾ عبارة عن txt , و قٌوم هذا الملؾ باخبار المتصفح ا شٌ ال بدي أعملوا cache وا شٌ ال ما انعملوا لسا ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  88. 88.  قٌسم ملؾ ال manifest الى 3 أقسام .. الأول: CACHEMANIFEST : هذه تحتوي على مجموعة الملفات الت س تٌم تحم لٌها بعد عمل ةٌ التحم لٌ الأولى للموقع .. مثال: لو وجد عندي تحت هذا القسم ملؾ css وملؾ js ..فانه عند تحم لٌ الصفحة للملؾ ال manifest س قٌوم بتحم لٌ المتصفح هذان الملفان و ضٌعمها الى root الخاص بالموقع .. الثان :ً NETWORK : حٌتوي هذا الجزء على جم عٌ الملفات ال جٌب ان تتصل بالس رٌفر لتعمل ..أي لا تٌم وضعها بال cache .. مثال : لو فرضنا وجود صفحة تسج لٌ عضو ةٌ فان reg.php هذه الصفحة جٌب أن لا تعمل الى بوجود س رٌفر ..فلذلك نقوم بوضعها هنا ...وبامكاننا وضع الرمز ال * ..وهذا عٌن ان كل الصفحات جٌب ان تكون متصلة بالس رٌفر ؼ رٌ الذي ذكر بالنقطة واحد.. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  89. 89. الثالث: FALLBACK : وٌضع ف هذا الجزء صفحات تعمل ف حال فشل وصول الى احدى الصفحات الت جٌب ان تكون ف ال cache ... عٌن تعمل عمل نسخة احت اٌط ةٌ لاسماء الملفات بداخلها بٌدأ باستدعاء النقطة الأولى من هنا ..هناك تحم لٌ وهنا استدعاء للملفات لما نص رٌ ف حالة ؼ رٌ متصل نٌ على الانترنت..وتحتوي هذه على جز ئٌ نٌ الجزء الأول العنوان للملفات الأصل ةٌ والثان ف حالة عدم وجودها ذٌهب ال هٌ ... هنا مثلا نضع صفحة نسم هٌا offline.html ف حال لم تٌم تحم لٌ الملفات الت بال cache manifest بنجاح سٌتدع الصفحة الت اسمها offline.html .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  90. 90. طريقة انشاء ملف manifest  أولا: نذهب الى .htaccess ( apache ( ..ونقوم باضافة AddTypetext/cache-manifest .manifest  ثان اٌ: قم بانشاء صفحة اسمها offline.manifest ..وكمثال سنضع داخلها: CACHE MANIFEST #This is a comment CACHE: index.htmlstyle.cssNETWORK: search.phplogin.phpFALLBACK: /apioffline.html ف حال لم كٌن المسار api موجود س ذٌهب الى offline.html ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  91. 91.  ثالثا: الآن كٌون ملؾ ال manfestfile جاهز ..ولكن عل نٌا ان نقوم باضافة ال manifest الى ال html .. <html manifest="/offline.manifest">  من دٌعم ال appCache من المتصفحات: IE: No support Firefox: 3.5+ Safari: 4.0+ Chrome: 5.0+ Opera: 10.6+ iPhone: 2.1+ Android: 2.0+ anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  92. 92. مثال على ال AppCache ... anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ قمت بتحم لٌ مثال بس طٌ على هذا الموضوع ..... بامكانك الاطلاع عل هٌ ..قم أولا باسعراض صفحة ال index ..ثم انظر الى الكود المكتوب بداخل ال indexandoffline.manifestandfallback ... ملاحظة: قد تختلؾ حجم السعة المخصصة لل cache من متصفح لآخر ..وقد تكون ف بعض المتصفحات الى حد 5 م ؽٌا
  93. 93. Web Worker  لا web worker عبارة عن كود جافا سكربت .. عٌمل بالخفاء ودون التأث رٌ على أداء الصفحة ...أي بامكانك الاستمرار بالتعامل الصفحة من استخدام لمحتو اٌتها مثل الضؽط على الأزرار أو تحد دٌ ش ءً مع نٌ ..الخ, وبنفس هذه اللحظة كٌون ال web worker عٌمل ..  دٌعم هذه الخاص ةٌ جم عٌ المتصفحات الرئ سٌ ةٌ مع I10+ ...  طر قٌة التعامل معه ..عل نٌا أن نقوم بتفقد المتصفح ..هل دٌعم هذه المز ةٌ؟ anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  94. 94. طريقة التعامل مع ال Web Worker ..  أولا: انشاء ملؾ (file worker) ...وهذا الملؾ حٌتوي السكربت الذي س عٌمل بالخفاء ...وهذا الملؾ س عٌمل له استدعاء عن طر قٌ الصفحة الت سٌتعرضها ال وٌزر ..وسأقوم بانشاء ملؾ اسمه اسمه 58.js ..  ثان اٌ: بصفحة ال html ...نقوم بتعر ؾٌ أوبج كٌت ...من الملؾ 58.js .. w=new Worker("58.js");  ثالثا: بدء عمل ال worker ...هذه تأخذ الق مٌة من صفحة ال 58.js ..وبترجعها داخل الفانكشن ...وهنا س قٌوم بطباعة الناتج على صفحة ال html .. w.onmessage=function (event) { document.getElementById("result").innerHTML=event.data; anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  95. 95.  رابعا: w.terminate(); , هذه تستخدم لا قٌاؾ عمل ال web worker .  خامسا: postMessage(i); هذه وضعتها داخل ال file worker ..وهذه تقوم ه الت تقوم على ارجاع الق مٌة للنقطة رقم 3  الآن أصبح لد نٌا Web Worker ... الآن لنذهب ونرى المثال ف الصفحة الثان ةٌ .. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاحظة: هذا الشرط وٌضع لفحص هل تم تعر ؾٌ الأبجكت قبل هذا ام لا ..
  96. 96. مثال anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ ملاحظة: ل عٌمل هذا المثال ...قم بأخذ الصفحتان 58.js and 58.html وضعهم على الس رٌفر ومن ثم قم بتشؽ لٌ المثال ... أو استعرض المثال على متصفح الكروم مع اعطائه صلاح ةٌ الوصول الى الملفات المخزنة على الجهاز (.. localhost/58.html )
  97. 97. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  98. 98. Server-Sent Events (SSE)  لل ةٌزملا هذه حمست web page بأخذ التحد ثٌات من الس رٌفر بشكل تلقائ ,ً وهذه المز ةٌ تعتبر باتجاه واحد, أي من الس رٌفر الى ال web page .  ال SSE صورة مصؽرة عن ال Web Sockets ..ولكن مع مراعاة ان ال SSE فقط مٌكنه ارسال الب اٌنات من الس رٌفر الى المستخدم أما الو بٌ سوكت فهو رٌسل و سٌتقبل المعلومات .وهناك أمور أخرى..) مٌكنك البحث عن الفرق ب نٌهم(..  دٌعم هذه المز ةٌ ..جم عٌ المتصفحات الرئ سٌ ةٌ باستثناء ال ) I .) anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  99. 99. التحقق من دعم المتصفح ل SSE anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  100. 100. سيرفر كود ..للصفحة التي سترسل البيانات الى المستخدم anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ لتنف ذٌ المثال ..قم بالدخول الى المجلد الذي اسمه PHP وقم بنسخ الصفحات 60.php and 60.html وقم بوضعهم داخل الس رٌفر ..ومن ثم قم بتشؽ لٌ الصفحة 60.html .. Localhost/60.html ...وانظر الناتج
  101. 101. MathML  لا هذه زكرٌ Tag على استعراض المعادلات الر اٌض ةٌ ..أي انها طر قٌة تمكنن من عرض المعادلة الر اٌض ةٌ كما ه برموز الر اٌض اٌت ول سٌ برموز الحاسوب ..  لهذا ال tag مجموعة من الخصائص ألا وه :ً <mi>x</mi> : هذه تحتوي على المتؽ رٌات ) x,y,z…..etc ) <mo>+</mo> : تحتوي هذه على العمل اٌت مثل ) +,-,* ...الخ( <mn>2</mn> : تحتوي هذه على الأرقام. <mrow> : هذه تدل على صؾ أفق من العناصر <mfrac> : هذه للكسور. <mfenced> : تدل علو وجود محتوى داخل أقواس مثلا ..الخ ...مثال: المصفوفات.  دٌعم هذه الخاص ةٌ F anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  102. 102. أمثلة: anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ لا تنسى ..المتصفح التذي دٌعم هذا التاغ ال Firefox
  103. 103. نهاية الدورة الحمد لله الذي بحمده تتم النعم ... الحمد لله رب العالم نٌ .. بفضل من الله تعالى ورضوانه ..ومنه وعطائه عل نٌا ... استطعنا باذنه تعالى, أن نتعلم الكث رٌ عن Html5 ... اخوان هذا العمل كأي عمل بشري ...كما حٌتوي الصح حٌ مٌكن أن حٌتوي الخطأ ..لأن الكمال لله ... حاولت قدر الامكان أن تكون المعلومات دق قٌة وبشكل سهل وسلس للفهم ... أتمنى من الله تعالى ان تٌقبل منا عملنا هذا ..و ؽٌفر لنا ذنوبنا ...و رٌحمنا و هٌد نٌا الى الحق من عنده ...و رٌزقنا وإ اٌكم الرزق الحلال الط بٌ ... وفقكم الله لكل خ رٌ ...وجزاكم الله خ رٌا اللهم اؼفر ل ولوالدي وللمسلم نٌ أح اٌئهم وأمواتهم .. انك على كل ش ءً قد رٌ ... أخوكم أن سٌ حكمت أبو حم دٌ ... Anees_hikmat@yahoo.com 0785448030 anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  104. 104. دورات أخرى  دورة دروبال 7 باللؽة العرب ةٌ للمبتئ نٌ /____.html0_-shared.com/get/TRksS4http://www.  دورة ج كو رٌي H/l_j.html13shared.com/get/RriHx4http://www. anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ
  105. 105. الحمد لله رب العالمين anees_hikmat@yahoo.com أن سٌ حكمت أبو حم دٌ

×