0 ابدأ من هنا

‫دورة ‪Html5‬‬
‫تقديم‪ :‬أنيس حكمت أنيس أبوحميد‬

‫ايميل‪Anees_hikmat@yahoo.com :‬‬
‫مالحظة‪ :‬هذا العمل مجانً خالص لوجه هللا تعالى‪ ,‬ال ٌجوز بٌعه او احتكاره‪....‬‬
‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬
‫مقدمة‬
‫الحمد هلل الذي بحمده تتم النعم‪ ,‬الحمد هلل رب العالمٌن‪ ,‬بفضل من هللا تعالى‬
‫سنبدأ بدورة ‪ ,html5‬حٌث سٌتم التطرق لما هو جدٌد عن ال ‪,html‬‬
‫راجٌا ً من هللا تعالى أن ٌوفقنا لخٌر العمل وٌجزٌنا واٌاكم خٌر الجزاء‪ ,‬وأن‬
‫ٌنفع بنا وبكم امتنا االسالمٌة‪ ,‬وأن ٌجعلنا عزا لالسالم والمسلمٌن‪ ..‬اللهم‬
‫آمٌن‪.‬‬
‫*) مالحظة‪ :‬اخوانً هذا العمل مثله مثل أي عمل بشري‪ٌ ,‬صٌب االنسان به‪,‬‬
‫وقد ٌخطئ‪ ,‬فإن أصبنا فبفضل من هللا تعالى‪ ,‬وإن أخطئنا فمن أنفسنا ‪..‬‬
‫نسأل هللا تعالى التوفٌق لً ولكم ولشباب المسلمٌن ‪..‬‬
‫مالجظة‪ :‬حاول أن ال تتعجل وأنت تستعرض الشرائح ‪ ...‬قم بكتابة كل مثال ‪...‬جرب ‪..‬ثم انطلق‪..‬اٌضا هناك‬
‫دروس تعتمد على سابقاتها ‪..‬لذلك ‪..‬تسلسل باسلوب منهجً ‪...‬‬
‫الفهرس ‪ ( 1‬هذا الفهرس يستعرض فقط العناويني الرئيسية‪ ,‬وكل عنوان رئيسي‬
‫قد حيتوي من ‪ 0‬اىل ‪ 13‬عنوان فرعي أكثر أو أقل)‬

‫الفهرس ( هذا الفهرس يستعرض فقط العناويني الرئيسية‪ ,‬وكل عنوان رئيسي قد‬
‫حيتوي من ‪ 0‬اىل ‪ 13‬عنوان فرعي أكثر أو أقل) ‪2‬‬

‫‪ )1‬ما هي ال ‪html5‬؟‬
‫‪ Html5 ‬عبارة عن معٌار جدٌد لل ‪.... html‬‬
‫والسبب فً ظهورها هو التطور الكبٌر الذي حصل على شبكة االنترنت‪,‬‬
‫ومع انها حتى هذه اللحظة ‪-‬لحظة كتابة هذا الشرح البسٌط‪ٌ -‬تم العمل‬
‫لتطوٌرها الى أن الكثٌر من الخصائص تم اضافتها للمتصفحات الرئٌسٌة‪,‬‬
‫ولكن ال ٌوجد متصفح قد دعم جمٌع هذه الخصائص بشكل كامل حتى اآلن‪,‬‬
‫لذلك عند ذكرنا خاصٌة معٌنة لل ‪ ,html5‬سنقوم باذن هللا تعالى بذكر ما‬
‫هً المتصفحات التً تدعمها من المتصفحات الرئٌسٌة‪...‬‬

‫‪ )2‬خصائص جيب ان نعلمها عن ‪html5‬‬
‫ال ‪ html5‬تعتمد على ‪.html, JavaScript, css‬‬ ‫‪‬‬
‫ال ‪ html5‬قامت بتقلٌل الحاجة الى االضافات الخارجٌة (‪ (plug-in‬مثل‬ ‫‪‬‬
‫الفالش‪...‬‬
‫ال ‪ html5‬أفضل فً معالجة لالخطاء‪.‬‬ ‫‪‬‬
‫ال ‪ html5‬تقلل من بعض الكود عن طرٌق اضافة ‪ tag‬جدٌدة‪ ,‬تقوم بنفس‬ ‫‪‬‬
‫العمل‪.‬‬

‫اإلنسان المبدع هو الذي يصنع المجسمات الجميلة‬
‫من أكوام القمامة ‪..‬‬

.. ‫لنبدأ بإذن هللا‬
:‫اختصارات‬
HTML5 NEW TAGS
Internet Explorer 9+: I9+
Firefox:F
Opera:O
Chrome:C
Safari:S
‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com
canvas

‫>‪<canvas‬‬
‫‪ <canvas> ‬هو ‪ tag‬تم تصمٌمه خصٌصا ليحتوي على الرسومات‬
‫الؽرافٌكٌة ثنائٌة البعد ‪ ,2D‬ومكننا الرسم داخله عن طرٌق استخدام‬
‫السكربت‪ ,‬وفً الؽالب ٌكون جافا سكربت‪.‬‬
‫‪ ‬من األمور التً ٌستطٌع احتوئها ال ‪ canvas‬هً الخطوط‪ ,‬المربعات‪,‬‬
‫دوائر‪ ,‬األحرؾ‪...‬‬
‫‪ ‬المتصفحات التً تدعم هذه الخاصٌة ‪)I9+,O,F,C,S (.‬‬
‫طرٌقة كتابة ال ‪..canvas‬‬

‫واآلن طريقة الرسم داخل ال ‪canvas‬‬
‫أوال‪Rect:‬‬

Path ‫ رسم‬:‫ثانيا‬

curve path ‫ رسم‬:‫ثالثا‬

Line Join Path :‫رابعا‬

‫خامسا‪ :‬رسم صورة )‪(image‬‬
‫بهذه الصٌؽة أستطٌع تحدٌد حجم‬

‫الصورة أٌضا ‪...‬‬

(Fill Text ( ‫ رسم نص‬:‫سادسا‬

Stroke Text ( ‫رسم نص‬:‫سابعا‬

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

Drag and Drop

‫‪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 :‬وتساتخدم هاذه الدالاة الضاافة البٌاناات الاى العنصار الاذي قمناا‬
‫باختٌاره ‪.‬‬

‫>‪<video></video‬‬
‫‪ ‬اسم ال ‪ tag‬ال ٌحتاج لتوضٌح ^_^‪ ,‬هذا عبارة عن ‪ٌ tag‬سمح بتضمٌن‬
‫مكان لعرض الفٌدٌو داخل الصفحة‪.‬‬
‫‪ ‬هذا ال ‪ٌ tag‬دعم ‪ 3‬صٌػ للفٌدٌو(‪.)MP4,Ogg,WebM‬‬
‫‪ ‬المتصفحات التً تدعم هذا ال ‪ Tag‬وما هً الصٌػ المدعومة لها‬
‫الحظ أنه عند استخدامك لصٌؽة ‪ Ogg(audio) & MP4‬للفٌدٌو تضمن‬

‫عمل ال ‪tag‬على جمٌع المتصفحات‬
‫الطريقة القدمية لكتابة كود تضمني الفيديو‪..‬‬

‫طريقة استخدام الفيديو يف ‪html5‬‬
‫الحظ طرٌقة تضمٌنه ما أبسطها‪ ...‬نقوم فقط بفتح ‪ tag‬من نوع فٌدٌو ‪..‬‬
‫‪ <source‬هااذه تحاادد الفٌاادٌو الااذي سااٌعمل وعنااد تكرراهااا ‪..‬فأنااا قماات بتحدٌااد الصااٌؽة‬
‫‪..‬األولااى ‪ mp4‬والثانٌااة ‪.. ogg‬لكااً أضاامن أان تعماال علااى جمٌااع المتصاافحات (ال تنسااى‬
‫االصدارات) ‪..‬‬
‫بعض الدوال اليت ميكن استخدامها مع الفيديو‪..‬‬

‫لم العليم و قل العا ل اختللا‬
‫اي الذي منهما د احرز الشرفا‬
‫فالعلم ال انا احرزت لايته‬
‫والعقل ال انا الرحمن بي رفا‬
‫فأفصح العلم افصاحا و ال له‬
‫بأينا هللا في فر انه اتصلا‬
‫فبان للعقل ان العلم سيده‬
‫فقبل العقل رأس العلم وانصرفا‬

‫>‪<audio></audio‬‬
‫‪ ‬هذه الخاصٌة ^__^‪ ,‬بعرؾ سهلة ^_^‪ ,‬هذه الخاصٌة تسمح لنا بتضمٌن‬
‫مقطع صوت داخل الصفحة‪ ,‬وال تحتاج أٌضا ‪.plug-in‬‬
‫‪ ‬المتصفحات التً ٌدعمها هذا ال ‪ tag‬مع الصٌػ ‪...‬‬

‫‪Input Type‬‬
‫‪ ‬اآلن مع ال ‪ Html5‬توفرت مجموعة من الخصائص اٌضا التً ٌمكن ان نستخدمها‬
‫مباشرة الدخال نوع محدد من البٌانات‪ ,‬دون استخدام السكربت مثال‪ ,‬وسنتكلم باذن هللا‬
‫تعالى عن‪:‬‬
‫‪‬‬ ‫‪color‬‬
‫‪‬‬ ‫‪date‬‬
‫‪‬‬ ‫‪datetime‬‬
‫‪‬‬ ‫‪datetime-local‬‬
‫‪‬‬ ‫‪email‬‬
‫‪‬‬ ‫‪month‬‬
‫‪‬‬ ‫‪number‬‬
‫‪‬‬ ‫‪range‬‬
‫‪‬‬ ‫‪tel‬‬
‫‪‬‬ ‫‪time‬‬
‫‪‬‬ ‫‪url‬‬
‫‪‬‬ ‫‪week‬‬
‫‪color‬‬
‫‪ ‬من اسم هذه الخاصٌة‪ ,‬نستنتج أنها تتعلق باأللوان‪ ,‬وفعال هذه الخاصٌة تقوم بتوفٌر زر ٌحتوي‬
‫‪ ,‬بحٌث ٌظهر لنا على الزر اللون الذي قمنا باختٌاره‪ ,‬وبإمكاننا‬ ‫على مجموعة األلوان‬
‫طبعا ارسال قٌمة اللون والتعامل معه ‪.....‬‬
‫‪ ‬المتصفحات التً تدعمها هذه الخاصٌة (‪ (C,O‬مالحظة‪ :‬قد تتطور المتصفحات األخرى وتدعم‬
‫هذه الخاصٌة‪ ,‬لذلك هذه المتصفحات لحظة كتابة هذا الشرح البسٌط ‪...‬‬
‫هذه هي طريقة استخدام هذا التاغ‪ ,‬وهو يشبه الطريقة التقليدية لكتابة التاغ‪...‬‬
‫مالح ة‪ :‬ستعراض هذا المثال ل شكل ملي‪ ,‬ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل‬
‫السيرفر مثل ‪ xampp, zend server, wamp server‬أو أي اشي آخر‪(...‬اسم الصلحة‬
‫‪ 14.php‬وموجودة داخل مجلد اسمه ‪)PHP‬‬
‫أو استعرضها على شكل صفحة ‪ html‬فقط ‪...‬‬

‫‪Date‬‬
‫‪ ‬هذه الخاصٌة تتٌح للمستخدم اختٌار تارٌخ معٌن من تقوٌم‪.‬‬
‫‪ ‬المتصفحات التً تدعمها ( ‪.)C,S,O‬‬
‫مالح ة‪ :‬ستعراض هذا المثال ل شكل ملي‪ ,‬ارسال واستقبال يم ليك باخذ الصلحة وو عها داخل السيرفر‬
‫مثل ‪ xampp, zend server, wamp server‬أو أي اشي آخر‪(...‬اسم الصلحة ‪ 15.php‬وموجودة داخل‬
‫مجلد اسمه ‪)PHP‬‬
‫أو استعر ها ل شكل صلحة ‪ html‬فقط ‪...‬‬

‫‪Input Type: datetime-local‬‬
‫‪ ‬هذه الخاصٌة تتٌح للمستخدم اختٌار التارٌخ والوقت من خالل تقوٌم ‪.‬‬
‫‪ ‬المتصفحات التً تدعمها ( ‪.)C,S,O‬‬
‫مالح ة‪ :‬ستعراض هذا المثال ل شكل ملي‪ ,‬ارسال واستقبال يم ليك‬
‫باخذ الصلحة وو عها داخل السيرفر مثل ‪xampp, zend server,‬‬
‫‪ wamp server‬أو أي اشي آخر‪(...‬اسم الصلحة ‪ 16.php‬وموجودة‬
‫داخل مجلد اسمه ‪)PHP‬‬

‫‪email‬‬
‫‪ ‬تستخدم هذه الخاصة لتعرٌؾ حقل سٌحتوي على اٌمٌل‪ ,‬وهذا ٌعنً انه ٌجب‬
‫ان ٌراعً صٌؽة االٌمٌل المعروفة‪ ,‬واال فسٌخرج رسالة تحذٌر تفٌد بوجود‬
‫خطأ‪...‬‬
‫‪ ‬المتصفحات التً تدعم هذه الخاصٌة (‪.)F,C,O‬‬


‫‪month‬‬
‫‪ ‬تسمح لنا هذه الخاصٌة االختٌار من تقوٌم معٌن (الشهر والسنة فقط) ‪..‬‬
‫‪ ‬المتصفحات التً تدعم هذه الخاصٌة (‪.)S,C,O‬‬


‫‪number‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتعرٌؾ حقل ٌتعامل مع األرقام وٌوجد له أربعة‬
‫خصائص رئٌسٌة (‪.(min,max,step,value‬‬
‫‪ٌ ‬عمل على المتصفحات (‪.)O,S,C‬‬
‫اسم الصلحة ك ‪ ) 19.php ( PHP‬واذا أردت راية المثال ك ‪.. Html‬ا اط هنا ‪..‬‬

‫‪Range‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتعرٌؾ حقل ٌتعامل مع مدى من األرقام وٌوجد له‬
‫أربعة خصائص أٌضا وهً (‪.(min,max,step,value‬‬
‫‪ٌ ‬عمل على المتصفحات (‪.)O,S,C‬‬

‫يقععععععععول الشععععععععافعي فععععععععي تجاهععععععععل السععععععععليه و ععععععععدم الععععععععرد ليععععععععه‪:‬‬
‫يخععععععاطبني السععععععليه بكععععععل ععععععبح‪........‬فععععععأكره أن أكععععععون لععععععه مجيبععععععا‪.‬‬

‫يزيعععععععد سعععععععلاهة فأزيعععععععد حلمعععععععا‪...........‬كععععععععود زاده ا حعععععععرا طيبعععععععا‪.‬‬
‫ويقعععععععععععععععععععععععععععععععععول معععععععععععععععععععععععععععععععععرو بعععععععععععععععععععععععععععععععععن لعععععععععععععععععععععععععععععععععي‪:‬‬
‫ادا نطعععععع السعععععععليه فعععععععال تجبعععععععه‪......‬فخيعععععععر معععععععن اجابتعععععععه السعععععععكوت‪.‬‬

‫سكت ن السليه ف ن أني‪ .............‬ييت ن الجوا وما ييت‪.‬‬

‫‪tel‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتعرٌؾ حقل ٌقبل صٌؽة ألرقام الهواتؾ‪.‬‬
‫‪ ‬حتى لحظة كتابة هذه الشراح (لٌس مدعوما بعد من المتصفحات الرئٌسٌة)‬

‫‪time‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتحدٌد حقل معٌن على شكل وقت ‪...‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (‪.)C,S,O‬‬

‫‪url‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتعرٌؾ حقل ٌستقبل روابط‪http://anything…etc..‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (‪.)F,C,O‬‬

‫‪week‬‬
‫‪ ‬هذه الخاصٌة تعطٌك رقم األسبوع الذي اخترته مع العام ‪^_^...‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (‪.)C,S,O‬‬

Form Elements
<datalist>
<keygen>
<output>

‫>‪<datalist‬‬
‫‪ٌ ‬ستخدم هذا ال ‪ tag‬إلظهار كلمات متوقعة بشكل تلقائً عند كتابتك شًء‬
‫معٌن‪ ,‬أو ٌظهر لك عدة اختٌارات حسب ما تم حفظه داخل القائمة (شبٌها‬
‫تقريبا بفكرة الؽوؼل –من حٌث المظهر‪)-‬‬
‫‪ٌ ‬دعم هذا ال ‪ tag‬من المتصفحات (‪F,C,O‬‬

‫>‪<keygen‬‬
‫‪ٌ ‬ستخدم هذا ال ‪ tag‬لٌزٌد من مقدار األمان والتحقق من صالحٌة الوصول‬
‫لألعضاء‪ ,‬عن طرٌق تشفٌر البٌانات المرسلة باستخدامه‪ ,‬ومبدأ عمله ٌقوم على‬
‫انشاء مفتاحٌن األول محمً(‪ )private‬والثانً عام (‪ ,)public‬والمقصود‬
‫بمحمً أي ٌتم تخزٌن هذا المفتاح بشكل محلً بدون ارساله الى السٌرفر‪ ,‬والعام‬
‫ٌقوم بارسال المفتاح الى السٌرفر‪ ,‬وٌمكننا من خالل هذا المفتاح العام التأكد فً‬
‫المستقبل أنه ٌتوافق مع المفتاح الخاص أم ال ‪ ,‬اذا نعم ٌعنً أن األمور تسٌر‬
‫بالشكل الصحٌح‪^_^ .‬‬
‫‪ٌ ‬دعم هذا ال ‪ tag‬المتصفحات (‪.)C,F,S,O‬‬
‫اسم الصلحة ك ‪ ) 26.php ( PHP‬واذا أردت راية المثال ك ‪(. Html‬لن ي هر ناتج)‪.‬ا اط هنا ‪..‬‬

‫>‪<output‬‬
‫‪ ‬هذا ال ‪ tag‬وظٌفته ارجاع ناتج عملٌة حسابٌة مباشرة ^^‪.‬‬
‫‪ ‬المتصفحات التً تدعم هذا ال ‪ tag‬هً (‪.)C,F,S,O‬‬

New Form Attributes and New
Input Attributes

‫‪autocomplete Attribute‬‬
‫‪ ‬هذه الخاصٌة تقوم على تعبئة الحقول بشكل تلقائً مجرد رجوع الٌوزر للصفحة‪,‬‬
‫أي أن البٌانات تم ادخالها باألصل من قبل المستخدم‪.‬‬
‫‪ ‬هذه الخاصٌة ٌمكن وضعها لل ‪ form‬أو ضمن ‪... input tag‬وهً حالتنان ‪on‬‬
‫وتعنً قم بالتعبئة التلقائٌة‪ ,‬و ‪.. off‬ال تقم بذلك‪.‬‬
‫‪ ‬تدعم هذه الخاصٌة المتصفحات الرئٌسٌة جمٌعها باستثناء ال (‪.)O‬‬

‫‪novalidate Attribute‬‬
‫‪ ‬وهً خاصٌة خاصة بال ‪ ,form‬وتعنً أنه لٌس من الضرورة التحقق من‬
‫صحة المعلومات المدخلة فً هذا ال ‪.form‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (‪.)F,C,O‬‬

‫ت وطعوب ل وهع سم و وح سسعنو مع‬ ‫صعاليحا ي‬ ‫ال سعبحانه وتععال ‪﴿ :‬الَّعذيين آم ونعوا و يملوعوا ال َّ‬
‫[الر ععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععععد‪.]29 :‬‬
‫ديــــــــــث *** ما يستوي الط ِّي و والخبيـــــــــــــــــ و‬

‫ث‬ ‫و‬ ‫طوب ليمن طا ل وه الح‬

‫‪autofocus Attribute‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتحدٌد عنصر ادخال معٌن مباشرة‪ ,‬أي مجرد تحمٌل‬
‫علٌه ^_^‪(.‬من خصائص ال‬ ‫الصفحة ٌتم التأشٌر‬
‫‪.)input‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (جمٌع المتصفحات عدا )‪.)I‬‬

‫>‪form Attribute <its for input tag‬‬
‫أوال عشان ما نلخبط ‪ ... Pp:‬هذه خاصٌة اسمها ‪ form‬وهً من خصائص ال‬ ‫‪‬‬
‫‪.. input‬‬
‫تقوم هذه الخاصٌة على جعل أحد ال ‪ input tag‬الموجودة داخل الصفحة تابعة‬ ‫‪‬‬
‫لفورم معٌن‪ ,‬أو أكثر‪..‬‬
‫ٌدعم هذه الخاصٌة المتصفحات الرئٌسٌة جمٌعها ما عدا (‪.)I‬‬ ‫‪‬‬
‫لٌعمل المثال بشكل صحٌح وترى النتائج علٌك بتجربته على السٌرفر ‪..‬اسم‬ ‫‪‬‬
‫الصفحة ‪...31.php‬‬
‫أو انظر الى الكود ك ‪....html‬‬

‫>‪formaction Attribute <its for input tag‬‬
‫‪ ‬تقوم هذه الخاصٌة على توجٌه عنصر معٌن للذهاب الى صفحة أخرى ؼٌر‬
‫الصفحة المخصصة فً ال ‪ action‬الموجودة داخل الفورم‪...‬وٌقوم مبدأ عملها‬
‫على عمل ‪ override‬لل ‪ action‬الخاص بال ‪ form‬ب ‪formaction‬‬
‫الخاصٌة الموجودة داخل ال ‪.input tag‬‬
‫‪ٌ ‬مكن استخدام هذه الخاصٌة فقط لنوعٌن من الحقول ‪submit & image‬‬
‫‪ٌ ‬دعم هذه الخاصٌة جمٌع المتصفحات الرئٌسٌة ما عدا (‪.)I‬‬
‫رض ك ‪...html‬‬ ‫ستعراض النتائج ‪..‬اسم الصلحة‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬ ‫‪32.php‬‬
‫>‪formenctype Attribute <its for input tag‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتحدٌد طرٌقة ترمٌز البٌانات المرسلة عن طرٌق‬

‫الفورم‪ ,‬مثل ‪ .. Multipart/form-data‬حٌث ٌمكننا اآلن تحدٌد عن‬
‫طرٌق ربطها اما (‪ )submit or image‬وال تعمل هذه الخاصٌة الى على‬
‫هذان ال ‪... ^_^.. tags‬‬
‫‪ ‬ال تستطٌع استخدام هذه الخاصٌة اال مع ”‪... method=“post‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (جمٌعها عدا ‪.)I‬‬

‫>‪formmethod Attribute <its for input tag‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتحدٌد طرٌقة ارسال البٌانات هل هً ‪get or post‬‬
‫وبهذا نستطٌع عن طرٌقها عمل ‪ override‬للطرٌقة المستخدمة بالفورم‬
‫وتحوٌلها الى ما تم تحدٌده داخل ال ‪.input tag‬‬
‫‪ٌ ‬مكن استخدام هذه الخاصٌة فقط داخل ال ‪... submit or image‬‬
‫‪ٌ ‬دعم هذه الخاصٌة جمٌع المتصفحات عدا (‪.)I‬‬
‫لتطبي المثال م ينسخ‬

‫او اطلع على الكود ك‬
‫‪... html‬‬
‫الصلحتان ‪34.php and‬‬
‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬ ‫‪ 34_0.php‬ال السيرفر‬
‫>‪formnovalidate Attribute <its input tag‬‬
‫‪ ‬هذه الخاصٌة تشبه خاصٌة تكلمنا عنها سابقا وهً ‪.. novalidate‬وكانت‬
‫تلك الخاصٌة على مستوى الفورم‪ ,‬واآلن ٌمكننا ان نربطها مع ‪submit‬‬
‫بحٌث اذا قام بالضؽط على هذا الزر فانه سٌنفذ بدون ‪.. validation‬‬
‫‪ ‬تعمل هذه الخاصٌة فقط على ‪... submit‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات (‪.)C,F,O‬‬

‫>‪formtarget Attribute <its for input tag‬‬
‫‪ ‬تستخدم هذه الخاصٌة لتحدٌد طرٌقة عرض البٌانات عند الضعظ على‬
‫الزر‪...‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات جمٌعها عدا (‪.)I‬‬
‫‪ٌ ‬مكنك استخدام ‪... _blank or _self or _parent or _top‬‬
‫‪ : _blank‬يقوم ل فتح نافذة جديدة ند ال اط‬

‫‪..‬وفي هذا المثال مت بو ع ال ‪ # = action‬لذلك‬
‫سيقوم بعرض نلس الصلحة ولكن بنافذة جديدة أي ا ‪..‬‬
‫>‪min and max Attributes <its for input‬‬
‫‪ ‬لقد تكلمنا عن هذه الخاصٌتٌن بشكل ؼٌر مباشر‪..‬عندما تطرقنا الى موضوع ال‬
‫‪ input=number‬كمثال ‪...‬واآلن سنذكرهما بشكل أوسع ‪ٌ..‬مكن استخدام هذه الخاصٌتان لتحدٌد‬
‫أقل أو أكبر (تارٌخ‪ ,‬رقم‪ ,‬مدى‪ ,‬شهر‪ ,‬أسبوع‪ ,‬وقت‪..)..‬وبهذا نكون استطعنا أن نحدد أقل قٌمة‬
‫الدخال معٌن أو أكبرها بدون استخدام الوسائل األخرى ‪....‬مثل ‪...js‬‬
‫‪ٌ ‬دعم هاتان الخاصٌتان ال ‪C,S,O‬‬
‫انتبه ال نوع المتصلح الخاص‬

‫بك‪..‬‬
‫>‪multiple Attribute <its for input‬‬
‫‪...^_^ ‬سهلة ‪ ... Pp:‬تستخدم هذه الخاصٌة لتفعٌل امكانٌة اختٌار أكثر من‬
‫صورة او ملؾ معا وأٌضا وضع أكثر من اٌمٌل ‪...‬وهذا ٌعنً أنها لن تعمل‬
‫الى على ‪...file & email‬‬
‫‪ٌ ‬دعم هذه الخاصٌة المتصفحات جمٌعها عدا (‪.)I -_-‬‬

‫>‪placeholder <its for input‬‬
‫‪ ‬تستخدم هذه الخاصية لو ع ‪ hint‬يقوم ل وصف مصار لما سيحتوي ال ‪ ,input‬ويمكن استخدام هذه‬
‫الخاصية مع ‪....text,password,Email,url,tel,search‬‬
‫لما أن المالح ة الصايرة هذه التي ست هر لن تاثر ل معلومات ا دخال‪...‬‬
‫‪ ‬يد م هذه الخاصية جميع المتصلحات ‪..I9+‬‬

Semantic Element

‫‪Semantic Element‬‬
‫‪ ‬أوال سنبدأ بتعرٌؾ هذا المصطلح‪ ,‬وتوضٌح الفرق بٌنه وبٌن ال‬
‫‪.. NotSemantic‬‬
‫ٌقصااد بااال ‪ Semantic‬أي ال ‪ tag‬التااً ٌمكاان فهاام محتوهااا مباشاارة ماان‬
‫النظر الٌها عان طرٌاق المبارمج أو مباشارة مان المتصافح مثال >‪, <table‬‬
‫أماااا ‪ not Semantic‬فٌقصاااد بهاااا ماااا ال ٌمكااان تخماااٌن محتاااواه مثااال ال‬
‫>‪ <span‬أو >‪.. <div‬فقد تحتوي أكثر من محتوى ولٌس شًء محدد ‪..‬‬
‫هذا الموضوع ٌدعمه جمٌاع المتصافحات الرئٌساٌة(‪.. )I9+,C,S,O,F‬علماا أن‬

‫‪ٌ I8‬مكاان دعمااه عاان طرٌااق اسااتخدام سااكربت ‪.‬واالصااداراتت القدٌمااة ماان‬
‫المتصفحات األخرى ٌمكن ان ندعمها باستخدام طرٌقة معٌنة‪.‬لكن اآلن لتبقاى‬
‫هذه المعلومات فً تفكٌرك ولنبدأ على بركة هللا ‪..‬‬
‫>‪<time‬‬
‫‪ ‬ومن اسمه ٌدل على وجود الستخدام الوقت ‪...‬وبالحقٌقة هو كذلك‪ٌ ,‬ستخدم‬
‫لمعرفة األوقات والتوارٌخ كل على حدا أو معا ‪...‬‬
‫ح أنني استطعت القيام بتحديد الو ت لوحده أو‬

‫التاريخ لوحده أو ا ثنان معا‪..‬‬
‫مالح ة‪ :‬يمكننا استخدام اي ا‬

‫>‪<time>2011-07-14</time‬‬
‫وهذه الصياة تستخدم فقط ندما احتاجها فقط‬
‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬ ‫هار القيمة ‪..‬‬
‫>‪<meter‬‬
‫‪ ‬تستخدم هذه كمقٌاس ٌمكن أن ٌراه المستخدم‪ ,‬وٌكون على شكل مدى ‪ Range‬بٌن‬
‫) ‪ ,‬وؼالبا ما تستخدم لتوضح مدى‬ ‫رقمٌن ال تظهر قٌمتهما‪(..‬‬
‫استؽالل قرص معٌن أو بدء وانتهاء عملٌة معٌنة ‪..‬الخ‪.‬‬
‫‪ ‬لها ‪ 6‬خصائص‪:‬‬
‫‪ :Value ‬وهً القٌمة التً وصل الٌها‪.‬‬
‫‪ :Min ‬أقل قٌمة ممكنة للمدى‪.‬‬
‫‪ :Max ‬أكبر قٌمة ممكنة للمدى‪.‬‬
‫‪ :High ‬بحدد عن طرٌقها النقطة التً ستعتبر نقطة قرٌبة للوصول للنهاٌة‬
‫‪ :Low ‬عكس ال ‪.. high‬‬
‫‪ :optimum: ‬اذا أحببت أن تضع نقطة ضمن المدى تكون هً النقطة األمثل‪..‬‬
‫‪ ‬مالحظة‪ :‬آخر ‪ 3‬خٌارات اختٌارٌة‪.‬‬

‫>‪<progress‬‬
‫‪ ‬تستخدم هذه لتحدٌد نسبة المهام المنجزة بالنسبة لعملٌة معٌنة‪....‬مثل عملٌة‬
‫تحمٌل الملفات ‪...‬‬
‫‪ ‬لها ‪ 3‬خصائص ‪... min,max,value‬‬

‫>‪<section‬‬
‫‪ ‬تستخدم هذه لالشارة على انها تحتوي جزء أو مقطع من ملؾ أو مستند‪..‬‬
‫‪ ‬تعتبر هذه صورة مصؽرة عن ‪ div‬ولكن ذات معنى داللً او اشاري ‪..‬أي‬
‫مجرد النظر الٌها نعلم انها تحتوي جزء من ملؾ أو مستند‪..‬‬

‫>‪<article‬‬
‫‪ ‬تستخدم هذه لتحدٌد أن المحتوى جزء مستقل‪ٌ ,‬مكن توزٌعه بشكل مستقل‪,‬‬
‫وأن ٌكون المحتوى الخاص به كافً إلٌصال فكرة معٌنة‪...‬‬
‫‪ ‬مثل‪:‬‬
‫‪Blog post‬‬
‫‪News story‬‬
‫‪Comment‬‬
‫‪Review‬‬
‫‪Forum post‬‬
‫الحظ أنها أفكار تنظٌمٌة‪ ,‬للداللة على‬

‫المحتوى التً بداخلها وهذه فكرة انشائها ‪..‬‬
‫>‪<nav‬‬
‫‪ ‬تحتوي هذه على مجموعة من الروابط‪ ,‬بحٌث ٌمكننا تنظٌم الروابط داخل‬
‫هذا ال ‪... nav‬مع العلم أنه لٌس بالضرورة أن ٌتم وضع جمٌع الروابط‬
‫التً بالصفحة داخله ‪^_^..‬‬

‫>‪<header‬‬
‫‪ ‬تستخدم هذه لتحتوي ألمقدمة ألي محتوى أو صفحة ‪..‬وٌمكن أن ٌتواجد أكثر‬
‫من ‪ header‬فً نفس الصفحة ‪...‬مثال فً حالة وضعنا أكثر من ‪section‬‬
‫بامكانً أن أضع ‪ header‬لكل ‪.... section‬‬

‫>‪<footer‬‬
‫‪ ‬تستخدم هذه للداللة على نهاٌة أو خاتمة فثرة معٌنة او صفحة ‪ ,..‬وٌجب ان‬
‫تحتوي هذه على معلومات عن الصفحة او الفقرة ‪ ,...‬مثل اسم الناشر أو‬
‫حقوق الملكٌة‪ ,‬أو معلومات عن الصفحة أو روابط متصلة بالموضع ‪..‬الخ‪.‬‬

‫>‪<aside‬‬
‫‪ٌ ‬ستخدم هذا لٌحتوي المعلومات الجانبٌة‪ ,‬أو االضافٌة لمحتوى معٌن‪ ,‬مثل‬
‫وضع نص‪ ,‬ومن ثم وضع معلومات جانبٌة عنه ‪....‬‬

‫>‪<figure> and <figcaption‬‬
‫‪ figure ‬تستخدم هذه للداللة على احتوائها محتوى متكامل بذاته ٌشرح‬
‫نفسه بنفسه تقرٌبا‪..‬مثل الصورة أو الجداول البٌانٌة ‪..‬الخ‪ ,‬وٌمكن ترقٌمها أو‬
‫ترتٌبها الواحدة تلو األخرى باستخدام ‪ ...figcaption‬انظر الى أي كتاب‬
‫أو أي منهاج مدرسً ^_^ مثال الفٌزٌاء *_* ‪...‬‬

‫دعم املتصفحات هلذه ال ‪.. tags‬‬
‫‪ ‬قلنا أن هذه ال ‪ tags‬مدعومة من المتصفحات الرئٌسٌة‪ ,‬باصداراتها‬
‫الجدٌدة‪ ,‬لكن االصدارات القدٌمة‪ ,‬قد ال تستطٌع دعمها‪ ,‬فهل هناك طرٌقة‬
‫تمكن المتصفحات القدٌمة من ان تدعم هذه ال ‪tags‬؟ الجواب نعم ٌوجد‬
‫وهً باضافة كود ‪ css‬الى ‪ style‬تضعه انت بصفحتك ٌعنً (‪.)Css‬‬

‫مشكلة يف متصفح ‪.. Ie8-‬‬
‫‪ ‬الطرٌقة التً ذكرناها‪ ,‬ستعمل فً المتصفحات القدٌمة األخرى باذن هللا‪,‬‬
‫ولكن لٌس مع ال ‪.. ie8-‬‬
‫‪ٌ ‬مكن حل هذه المشكلة باستخدام التالً‪:‬‬

HTML5 Web Storage

‫أوال‪ :‬ال ‪Cookies‬‬
‫قبل البدأ بمفهوم ال ‪ ,Web Storge‬علٌنا أن نعلم أنها تشبه تقرٌبا فكرة ال‬ ‫‪‬‬
‫‪ ,cookies‬لكن مع بعض االختالفات ‪..‬‬
‫ال ‪ cookies‬تستخدم لحفظ بعض البٌانات على جهاز المستخدم‪ ,‬لٌتم‬ ‫‪‬‬
‫استدعائها عند الحاجة الٌها عن طرٌق السٌرفر‪.‬‬
‫من األمثلة على استخدام ال ‪ ... cookies‬عملٌة ”تذكرنً“‪.‬‬ ‫‪‬‬
‫مشكلة ال ‪ : cookies‬الحجم محدود للملؾ الذي ٌحفظ بٌانات ال‬ ‫‪‬‬
‫‪ cookies‬بسعة تقدر ‪ 4KB‬أي ما ٌقدر ب ‪ 30‬الى ‪ cookies 50‬بكل‬
‫ملؾ‪.‬أٌضا ٌمكن ان تشكل مشاكل تتعلق باألمان أو الخصوصٌة‪ ,‬وٌمكن‬
‫أٌضا للٌوزر حذؾ هذا الملؾ‪.‬‬

‫ثانيا‪Web Storage :‬‬
‫‪ ‬تعد هذه أسرع وأكثر أمانا من ال ‪.. cookies‬‬
‫‪ ‬تمكننا تخزٌن كمٌات أكبر من البٌانات تصل الى ‪ 5‬مٌؽا وٌمكن زٌادة هذه السعة‬
‫من قبل المستخدم‪.‬‬
‫‪ ‬المعلومات ال تكون متضمنة فً كل عملٌة ‪ requset‬من السٌرفر‪ ,‬ولكن فقط عند‬
‫الطلب ٌتم تشؽٌلها والعمل معها‪.‬‬
‫‪ ‬تخزن البٌانات على شكل ‪... key/value‬وٌمكن لكل ‪ web page‬أن تقوم‬
‫باتدعائها بنقسها ‪..‬‬
‫‪ٌ ‬تم التعامل معها عن طرٌق ال ‪ clint side‬سكربت‪ ,‬لذلك هً لٌست بحاجة‬
‫للتعامل مع السٌرفر أو الداتا بٌس‪ ,‬أي تخلصنا من الطرٌقة التقلٌدٌة‪..‬‬
‫‪ ‬هناك نوعان مهمان منها ‪:‬‬
‫‪Local Storage‬‬ ‫األول‪:‬‬
‫والثانً‪Session Storage :‬‬

‫قبل البدأ بتفصيل النوعني (‪)local and Session‬‬
‫علٌنا أن نقوم بفحص المتصفح ‪...‬هل ٌدعم هذه الخاصٌة ؟؟؟؟ ^_^‪..‬‬

‫أوال‪Local Storage :‬‬
‫‪ٌ ‬قوم نوع التخزٌن هذا على مبدأ (احفظ البٌانات بدون وجود وقت محدد‬
‫النتهاء هذا التخزٌن) ‪..‬أي ال ٌوجد حد زمنً الحتواء البٌانات ‪..‬‬
‫‪ ‬هذه البٌانات ال تخذؾ بعد اؼالق المتصفح ‪..‬وٌمكن ان تكون متاحة‬
‫لالستخدام حتى وإن مضى علٌها ٌوم او اسبوع أو شهر أوسنة ‪...‬الخ‬
‫‪ ‬تخزن هذه المعلومات على شكل ‪....(key & value(.. string‬‬

‫ثانيا‪Session Storage :‬‬
‫‪ٌ ‬قوم نوع التخزٌن هذا على تخزٌن البٌانات بنفس طرٌقة ال ‪ local‬ولكن‬
‫الفرق الجوهري والرئٌسً ‪..‬أن عملٌة التخزٌن فً هذا نوع تنتهً بانتهاء‬
‫ال ‪ٌ.. session‬عنً مثال اذا اؼلقت المتصفح ‪..‬خلص بتروح البٌانات ‪..‬‬

‫مثال يوضح الفرق بني النوعني ^_^‬
‫‪‬‬

‫أسلوب برجمي آخر لتخزين واسرتجاع القيم ‪..‬‬

Application Cache

‫‪Application Cache‬‬
‫‪ ‬تعد هذه من االمكانٌات الرائعة والتً ٌمكن استخدامها فً ‪.. html5‬ولكن‬
‫ماذا ٌقصد بها؟ ‪ٌ ..‬مكننا القول بانها القدرة او االمكانٌة على تصفح موقع‬
‫معٌن حتى وان لم ٌكن هناك اتصال فً االنترنت !!‪...‬كٌؾ هذا؟!‬
‫‪ ‬مبدأ عملها‪ٌ :‬قوم مبدأ عملها بشكل مبسط على قائمة تحتوي الروابط‬
‫للصفحات التً داخل الموقع وما تحتوٌه من ملفات ‪ html‬أو ‪ js‬أو أي من‬
‫المصادر األخرى ‪ ..‬اآلن الصفحة الرئٌسٌة تقوم على تحدٌد هذه القائمة‬
‫وعمل لها استدعاء عن طرٌق استدعاء ملؾ اسمه ‪.. manifest‬‬
‫‪ ‬ما طبٌعة عمل ملؾ ال ‪ manifest‬؟ ‪...‬أوال هذا الملؾ عبارة عن ‪, txt‬‬
‫وٌقوم هذا الملؾ باخبار المتصفح اٌش الً بدي أعملوا ‪ cache‬واٌش الً‬
‫ما انعملوا لسا ‪...‬‬
‫‪ٌ ‬قسم ملؾ ال ‪ manifest‬الى ‪ 3‬أقسام ‪..‬‬
‫األول‪ : CACHE MANIFEST :‬هذه تحتوي على مجموعة الملفات التً سٌتم‬
‫تحمٌلها بعد عملٌة التحمٌل األولى للموقع ‪..‬‬
‫مثال‪ :‬لو وجد عندي تحت هذا القسم ملؾ ‪ css‬وملؾ ‪.. js‬فانه عند تحمٌل الصفحة‬
‫للملؾ ال ‪ manifest‬سٌقوم بتحمٌل المتصفح هذان الملفان وٌضعمها الى ‪root‬‬
‫الخاص بالموقع ‪..‬‬
‫الثانً‪ٌ : NETWORK :‬حتوي هذا الجزء على جمٌع الملفات الً ٌجب ان تتصل‬
‫بالسٌرفر لتعمل ‪..‬أي ال ٌتم وضعها بال ‪.. cache‬‬
‫مثال ‪ :‬لو فرضنا وجود صفحة تسجٌل عضوٌة فان ‪ reg.php‬هذه الصفحة ٌجب أن‬
‫ال تعمل الى بوجود سٌرفر ‪..‬فلذلك نقوم بوضعها هنا ‪...‬وبامكاننا وضع الرمز ال‬
‫* ‪..‬وهذا ٌعنً ان كل الصفحات ٌجب ان تكون متصلة بالسٌرفر ؼٌر الذي ذكر‬
‫بالنقطة واحد‪..‬‬
‫الثالث‪ٌ : FALLBACK :‬وضع فً هذا الجزء صفحات تعمل فً حال فشل‬
‫وصول الى احدى الصفحات التً ٌجب ان تكون فً ال ‪ٌ...cache‬عنً‬
‫تعمل عمل نسخة احتٌاطٌة السماء الملفات بداخلها ٌبدأ باستدعاء النقطة‬
‫األولى من هنا ‪..‬هناك تحمٌل وهنا استدعاء للملفات لما نصٌر فً حالة ؼٌر‬
‫متصلٌن على االنترنت‪..‬وتحتوي هذه على جزٌئٌن الجزء األول العنوان‬
‫للملفات األصلٌة والثانً فً حالة عدم وجودها ٌذهب الٌه ‪...‬‬
‫هنا مثال نضع صفحة نسمٌها ‪ offline.html‬فً حال لم ٌتم تحمٌل الملفات‬
‫التً بال ‪ cache manifest‬بنجاح ٌستدعً الصفحة التً اسمها‬
‫‪..offline.html‬‬

manifest ‫طريقة انشاء ملف‬
‫ونقوم باضافة‬.. )apache( .htaccess ‫ نذهب الى‬:‫ أوال‬
AddType text/cache-manifest .manifest
:‫وكمثال سنضع داخلها‬.. offline.manifest ‫ قم بانشاء صفحة اسمها‬:‫ ثانٌا‬
CACHE MANIFEST
#This is a comment
CACHE:
index.html
style.css
NETWORK:
search.php
login.php
FALLBACK:
/api offline.html
... offline.html ‫موجود سٌذهب الى‬api ‫فً حال لم ٌكن المسار‬
‫ولكن علٌنا ان نقوم باضافة ال‬.. ‫ جاهز‬manfest file ‫ اآلن ٌكون ملؾ ال‬:‫ثالثا‬ 
.. html ‫الى ال‬manifest
<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+ 
‫مثال على ال ‪... AppCache‬‬
‫قمت بتحمٌل مثال بسٌط على هذا الموضوع ‪ .....‬بامكانك االطالع‬
‫علٌه ‪..‬قم أوال باسعراض صفحة ال ‪.. index‬ثم انظر الى الكود‬
‫المكتوب بداخل ال ‪index and offline.manifest and‬‬
‫‪... fallback‬‬
‫مالحظة‪ :‬قد تختلؾ حجم السعة‬

‫المخصصة لل ‪ cache‬من متصفح‬
‫آلخر ‪..‬وقد تكون فً بعض‬
‫المتصفحات الى حد ‪ 5‬مٌؽا‬

‫‪Web Worker‬‬
‫‪ ‬ال ‪ web worker‬عبارة عن كود جافا سكربت ‪ٌ..‬عمل بالخفاء ودون‬
‫التأثٌر على أداء الصفحة ‪...‬أي بامكانك االستمرار بالتعامل الصفحة من‬
‫استخدام لمحتوٌاتها مثل الضؽط على األزرار أو تحدٌد شًء معٌن ‪..‬الخ‪,‬‬
‫وبنفس هذه اللحظة ٌكون ال ‪ٌ web worker‬عمل ‪..‬‬
‫‪ٌ ‬دعم هذه الخاصٌة جمٌع المتصفحات الرئٌسٌة مع ‪... I10+‬‬
‫‪ ‬طرٌقة التعامل معه ‪..‬علٌنا أن نقوم بتفقد المتصفح ‪..‬هل ٌدعم هذه المزٌة؟‬

‫طريقة التعامل مع ال ‪.. 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=even‬‬
‫;‪t.data‬‬

‫‪ ‬رابعا‪ , w.terminate(); :‬هذه تستخدم الٌقاؾ عمل ال ‪.web worker‬‬
‫‪ ‬خامسا‪ postMessage(i); :‬هذه وضعتها داخل ال ‪.. file worker‬وهذه‬
‫تقوم هً التً تقوم على ارجاع القٌمة للنقطة رقم ‪3‬‬
‫‪ ‬اآلن أصبح لدٌنا ‪ ... Web Worker‬اآلن لنذهب ونرى المثال فً الصفحة‬
‫الثانٌة ‪..‬‬
‫مالحظة‪ :‬هذا الشرط ٌوضع لفحص هل تم تعرٌؾ األبجكت قبل هذا ام‬
‫ال ‪..‬‬

‫مثال‬
‫مالحظة‪ :‬لٌعمل هذا المثال ‪...‬قم بأخذ الصفحتان ‪58.js and‬‬
‫‪ 58.html‬وضعهم على السٌرفر ومن ثم قم بتشؽٌل المثال ‪...‬‬
‫أو استعرض المثال على متصفح الكروم مع اعطائه صالحٌة‬
‫الوصول الى الملفات المخزنة على الجهاز‬
‫‪)localhost/58.html(..‬‬

‫)‪Server-Sent Events (SSE‬‬
‫‪ ‬تسمح هذه المزٌة لل ‪ web page‬بأخذ التحدٌثات من السٌرفر بشكل‬
‫تلقائً‪ ,‬وهذه المزٌة تعتبر باتجاه واحد‪ ,‬أي من السٌرفر الى ال ‪web‬‬
‫‪.page‬‬
‫‪ ‬ال ‪ SSE‬صورة مصؽرة عن ال ‪.. Web Sockets‬ولكن مع مراعاة ان‬
‫ال ‪ SSE‬فقط ٌمكنه ارسال البٌانات من السٌرفر الى المستخدم أما الوٌب‬
‫سوكت فهو ٌرسل وٌستقبل المعلومات ‪.‬وهناك أمور أخرى‪ٌ(..‬مكنك البحث‬
‫عن الفرق بٌنهم)‪..‬‬
‫‪ٌ ‬دعم هذه المزٌة ‪..‬جمٌع المتصفحات الرئٌسٌة باستثناء ال (‪.)I‬‬

‫التحقق من دعم املتصفح ل ‪SSE‬‬

‫سريفر كود ‪..‬للصفحة اليت سرتسل البيانات اىل املستخدم‬
‫لتنفٌذ المثال ‪..‬قم بالدخول الى المجلد الذي اسمه ‪ PHP‬وقم بنسخ الصفحات ‪60.php and‬‬
‫‪ 60.html‬وقم بوضعهم داخل السٌرفر ‪..‬ومن ثم قم بتشؽٌل الصفحة ‪.. 60.html‬‬
‫‪... Localhost/60.html‬وانظر الناتج‬
‫‪MathML‬‬
‫ٌركز هذه ال ‪Tag‬على استعراض المعادالت الرٌاضٌة ‪..‬أي انها طرٌقة تمكننً‬ ‫‪‬‬
‫من عرض المعادلة الرٌاضٌة كما هً برموز الرٌاضٌات ولٌس برموز الحاسوب‬
‫‪..‬‬
‫لهذا ال ‪ tag‬مجموعة من الخصائص أال وهً‪:‬‬ ‫‪‬‬
‫>‪ :<mi>x</mi‬هذه تحتوي على المتؽٌرات (‪)x,y,z…..etc‬‬ ‫‪‬‬
‫>‪ :<mo>+</mo‬تحتوي هذه على العملٌات مثل (*‪... +,-,‬الخ)‬ ‫‪‬‬
‫>‪ :<mn>2</mn‬تحتوي هذه على األرقام‪.‬‬ ‫‪‬‬
‫>‪ :<mrow‬هذه تدل على صؾ أفقً من العناصر‬ ‫‪‬‬
‫>‪ :<mfrac‬هذه للكسور‪.‬‬ ‫‪‬‬
‫>‪ :<mfenced‬تدل علو وجود محتوى داخل أقواس مثال ‪..‬الخ ‪...‬مثال‪:‬‬ ‫‪‬‬
‫المصفوفات‪.‬‬
‫ٌدعم هذه الخاصٌة ‪F‬‬ ‫‪‬‬

‫أمثلة‪:‬‬
‫ال تنسى ‪..‬المتصفح التذي ٌدعم هذا التاغ‬
‫ال‬
‫‪Firefox‬‬

‫هناية الدورة‬
‫الحمد هلل الذي بحمده تتم النعم ‪ ...‬الحمد هلل رب العالمٌن ‪..‬‬
‫بفضل من هللا تعالى ورضوانه ‪..‬ومنه وعطائه علٌنا ‪ ...‬استطعنا باذنه تعالى‪ ,‬أن نتعلم الكثٌر عن‬
‫‪... Html5‬‬
‫اخوانً هذا العمل كأي عمل بشري ‪...‬كما ٌحتوي الصحٌح ٌمكن أن ٌحتوي الخطأ ‪..‬ألن الكمال هلل ‪...‬‬
‫حاولت قدر االمكان أن تكون المعلومات دقٌقة وبشكل سهل وسلس للفهم ‪...‬‬
‫أتمنى من هللا تعالى ان ٌتقبل منا عملنا هذا ‪..‬وٌؽفر لنا ذنوبنا ‪...‬وٌرحمنا وٌهدٌنا الى الحق من عنده‬
‫‪...‬وٌرزقنا وإٌاكم الرزق الحالل الطٌب ‪...‬‬
‫وفقكم هللا لكل خٌر ‪...‬وجزاكم هللا خٌرا‬
‫اللهم اؼفر لً ولوالدي وللمسلمٌن أحٌائهم وأمواتهم ‪ ..‬انك على كل شًء قدٌر ‪...‬‬
‫أخوكم أنٌس حكمت أبو حمٌد ‪...‬‬

‫‪Anees_hikmat@yahoo.com‬‬
‫‪0785448030‬‬

‫دورات أخرى‬
‫ باللؽة العربٌة للمبتئٌن‬7 ‫ دورة دروبال‬
http://www.4shared.com/get/TRksS-_0/____.html
‫ دورة جً كوٌري‬
http://www.4shared.com/get/RriHx13H/l_j.html

‫الحمد هلل رب العالمين‬

0 ابدأ من هنا

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

0 ابدأ من هنا

Uploaded by

Copyright:

Available Formats

‫دورة ‪Html5‬‬

‫تقديم‪ :‬أنيس حكمت أنيس أبوحميد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫بهذه الصٌؽة أستطٌع تحدٌد حجم‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫اللهععععم اللععععر للمسععععلمين والمسععععلمات والمععععامنين والمامنععععات ا حيععععا مععععنهم وا مععععوات‬

‫اللهم ارز ني حسن الخاتمة‬

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫الحظ أنه عند استخدامك لصٌؽة ‪ Ogg(audio) & MP4‬للفٌدٌو تضمن‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫أو استعرضها على شكل صفحة ‪ html‬فقط ‪...‬‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫أو استعر ها ل شكل صلحة ‪ html‬فقط ‪...‬‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫أو استعر ها ل شكل صلحة ‪ html‬فقط ‪...‬‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫مالح ة‪ :‬ستعراض هذا المثال ل شكل ملي‪ ,‬ارسال واستقبال يم ليك‬

‫أو استعر ها ل شكل صلحة ‪ html‬فقط ‪...‬‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫مالح ة‪ :‬ستعراض هذا المثال ل شكل ملي‪ ,‬ارسال واستقبال يم ليك‬

‫أو استعر ها ل شكل صلحة ‪ html‬فقط ‪...‬‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫يخععععععاطبني السععععععليه بكععععععل ععععععبح‪........‬فععععععأكره أن أكععععععون لععععععه مجيبععععععا‪.‬‬

‫ادا نطعععععع السعععععععليه فعععععععال تجبعععععععه‪......‬فخيعععععععر معععععععن اجابتعععععععه السعععععععكوت‪.‬‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫ أنٌس حكمت أبو حمٌد‬anees_hikmat@yahoo.com

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫ديــــــــــث *** ما يستوي الط ِّي و والخبيـــــــــــــــــ و‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫أو انظر الى الكود ك ‪....html‬‬

‫رض ك ‪...html‬‬ ‫ستعراض النتائج ‪..‬اسم الصلحة‬

‫‪ ‬تستخدم هذه الخاصٌة لتحدٌد طرٌقة ترمٌز البٌانات المرسلة عن طرٌق‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫لتطبي المثال م ينسخ‬

‫‪ anees_hikmat@yahoo.com‬أنٌس حكمت أبو حمٌد‬

‫‪ : _blank‬يقوم ل فتح نافذة جديدة ند ال اط‬