إزالة الغموض عن HTML5 وCSS3

يؤدي تطور الإنترنت دائمًا إلى ظهور تقنيات جديدة، وتعد HTML5 وCSS3 من المواضيع الساخنة التي تمت مناقشتها مؤخرًا لكل مطور إنترنت، وخاصة مطوري الواجهة الأمامية، فهي مليئة بالفضول والرغبة. إذًا ما هي الأشياء التي تجعلنا نتألق في HTML5 وCSS3؟ لقد شاركت "الكشف عن أسرار HTML5 و CSS3 " معك في مؤتمر WebRebuild Beijing Exchange وPearl Milk Tea Gang هنا:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

كان يسمى الإصدار السابق لمسودة HTML 5 Web Applications 1.0 وقد تم اقتراحه بواسطة WHATWG في عام 2004 وقبله W3C في عام 2007، وتم إنشاء فريق عمل HTML جديد. في 22 يناير 2008، تم إصدار المسودة الرسمية الأولى. يعد HTML 5 أكبر قفزة للأمام في معايير تطوير الويب في العقد الماضي. على عكس الإصدارات السابقة، لا يتم استخدام HTML 5 فقط لتمثيل محتوى الويب، بل تتمثل مهمته الجديدة في جلب الويب إلى نظام أساسي للتطبيقات الناضجة، ويتم توحيد الفيديو والصوت والصور والرسوم المتحركة والتفاعلات المستندة إلى الكمبيوتر . لذلك دعونا نلقي نظرة على النظرة الفنية العامة لـ HTML5:

HTML5 العناصر الجديدة والمحذوفة

يضيف HTML5 العديد من الوسائط المتعددة والعناصر التفاعلية الجديدة مثل الفيديو والصوت. في HTML4، إذا كنت تريد تضمين فيديو أو صوت، فأنت بحاجة إلى تقديم قسم كبير من التعليمات البرمجية وهو متوافق مع المتصفحات المختلفة، ومع ذلك، يحتاج HTML5 إلى ذلك فقط هذا كل شيء، وهو مناسب تمامًا مثل علامة img. فيما يتعلق بتخطيط الصفحة وتنفيذ المحتوى، أضاف HTML5 العديد من عناصر العلامات المنظمة الجديدة بالإضافة إلى العناصر الدلالية ومستوى الكتلة. إذا كنت تريد استخدام HTML لتمثيل شريط تقدم تحميل الملف، يمكنك استخدام التقدم في HTML5 يحتوي على سمة قيمة تصف عدد المهام المكتملة، وتصف سمة الحد الأقصى عدد المهام المطلوبة إجمالاً. يمكنك أيضًا الحصول على سمة الموضع (للقراءة فقط) لشريط التقدم هذا من خلال DOM الواجهة، وهي النسبة المئوية لإنجاز المهمة. لقد قام YouTube بالفعل بمحاولة استخدام تقنية HTML5. http://www.youtube.com/html5 (يحتاج إلى التحايل على جدار الحماية ) عبارة عن عرض توضيحي تم إنشاؤه باستخدام HTML5، وبالنظر إلى الكود المصدري للصفحة بالكامل، فهو بسيط جدًا. بالطبع، يضيف HTML5 أيضًا بعض السمات الجديدة إلى بعض العناصر، مثل سمة العنصر النائب للإدخال ومنطقة النص، والتي تعادل موجه الإدخال لمربع الإدخال. يحتوي البرنامج النصي على سمة غير متزامنة ستؤثر على تحميل وتنفيذ ملف script. بالنسبة لجميع السمات المشتركة في HTML، فإننا نسميها عادةً "السمات العامة"، مثل الفئة والمعرف وtabindex والعنوان. كما يضيف HTML5 بعض السمات العامة الجديدة، مثل contenteditable وcontextmenu والسمات المخفية وغيرها. يضيف HTML5 أيضًا دعمًا للبيانات الجزئية، مثل سمات HTML5 الجديدة مثل العنصر، وitempro، والموضوع.

بالطبع، يقوم HTML5 أيضًا بإزالة بعض العناصر التي تمثل عرض الصفحة، مثل الخط والوسط والإضراب وما إلى ذلك. ومن المفترض أن يتم ذلك بواسطة CSS، لذلك لا يزال من السهل فهمها، كما أنه يزيل بعض العناصر التي تؤثر على إمكانية الوصول إلى موقع الويب. مثل الإطار ومجموعة الإطارات وnoframe وبعض العناصر غير الشائعة مثل الاختصار، استخدم abbr لتمثيل الاختصار. يقوم HTML5 أيضًا بإزالة بعض ألفة HTML التي تؤثر على توافق العميل، مثل سمة rev الخاصة بالرابط وسمة النطاق الخاصة بـ td، كما يزيل HTML5 أيضًا بعض السمات التي تشير إلى عرض الصفحة، مثل سمات align وbgcolor لبعض العناصر.

دعم HTML5 للنماذج

يوفر HTML5 أنواع تحكم قوية مثل عنوان URL، والبريد الإلكتروني، والتاريخ، والهاتف، وما إلى ذلك، وسمات قيد قوية، مثل المطلوبة للإشارة إلى المطلوب، وقبول السمات لتحميلات الملفات، ودعم بعض نماذج العناصر المتكررة للنماذج، كما يوفر HTML5 الدعم عند الإرسال نموذج يمكنك ضبط طريقة الإرسال على إرسال XML، بحيث تكون البيانات التي يتلقاها الخادم بتنسيق XML. يتم تعريف نماذج HTML5 على أنها "نماذج الويب 2.0". يتمتع Opera9.5+ حاليًا بدعم مثالي لنماذج الويب 2.0.

انقر هنا لعرض الإصدار التجريبي من Web Forms 2.0 ، ويتطلب Opera9.5+

تغييرات HTML5 DOM

يحتوي HTML5 على العديد من الواجهات الموروثة من HTMLDocument في DOM LEVEL 2 HTML. بالطبع، يحتوي HTML5 أيضًا على بعض الأعضاء الجدد الجديرين بالملاحظة في DOM، مثل: دعم getElementsByClassName، والذي يسمح لك بتحديد العناصر بناءً على أسماء الفئات ()getSelection تحديد الكائن، هناك طريقتان querySelector وquerySelectorAll في المحدد، ويمكنهما الحصول على العنصر المطلوب الاستعلام عنه بناءً على محدد CSS، وهو ما يعادل Y.one وY.all في YUI3.

HTML5 واجهات برمجة تطبيقات جافا سكريبت

ما واجهات برمجة التطبيقات الجديدة التي يضيفها HTML5 إلى Javascript؟

• الفيديو/الصوت: يوفر HTML5 واجهات برمجة التطبيقات للفيديو والصوت للسماح للمطورين بالتحكم في واجهة المستخدم الخاصة بهم، مثل تشغيل محتوى الوسائط أو إيقافه مؤقتًا.
• Canvas: Canvas هو عنصر HTML جديد يمكن استخدامه لرسم الرسومات باستخدام لغة البرنامج النصي (عادةً JavaScript). على سبيل المثال، يمكنك استخدامه لرسم صور، أو صور مركبة، أو القيام برسوم متحركة بسيطة (وليست بهذه البساطة). إن Canvas هي شيء سحري. أول شعور يعطيني هو مثل استخدام Photoshop. كل طريقة منه تشبه Photoshop إلى حد كبير. يمكنك الحصول على واجهة برمجة تطبيقات Canvas من خلال Canvas.getContext('2d') ، ويمكنك ضبط لون التعبئة من خلالها fillStyle أو ضبط لون الحد من خلال StrokeStyle. حتى أن تشغيله لمسارات الرسم يتزامن مع تشغيل القلم في Photoshop. تم استخدام Canvas في العديد من مواقع الويب، مثل إحصائيات حالة التنزيل في الوقت الفعلي لمتصفح Firefox ، ويمكن أيضًا استخدام Canvas لكتابة ألعاب الويب.
• السحب والإفلات: في الوسائط المرئية لأجهزة التأشير، فإن عملية "السحب" هي حدث تحريك الماوس لأسفل (أسفل الماوس) مصحوبًا بحركة الماوس (تحريك الماوس)، في حين أن "الإفلات" هو الحدث الذي يتم تشغيله عند تحرير الماوس. يتم تعريف واجهات DataEvent وDataTransfer في السحب والإفلات. وفي الوقت نفسه، عند حدوث عملية سحب، سيتم تشغيل أحداث مثل Dragstart وDragenter وDragleave وDrop وDragend.
• عمال الويب: اجعل Javascript متعدد الخيوط ويمكنه القيام بالكثير من العمل في الخلفية دون عرقلة عملية المتصفح الحالية.
• تحديد الموقع الجغرافي: تحديد الموقع الجغرافي. عند تشغيل طريقة navigator.geolocation.getCurrentPosition(النجاح، الخطأ)، سيطالبك المتصفح بما إذا كنت تريد مشاركة موقعك الجغرافي. إذا اخترت المشاركة، فسيتم استدعاء وظيفة النجاح مرة أخرى وظيفة النجاح هي كائن الموضع، يحتوي كائن الموضع هذا على كائن إحداثيات يحتوي على الكثير من معلومات الموقع الجغرافي، مثل خط العرض (البعد) وخط الطول، حتى تتمكن من معرفة موقعك المحدد يتم استخدامه بالفعل على نطاق واسع في بعض الهواتف المحمولة مثل Iphone.
• ذاكرة التخزين المؤقت للتطبيق: هذا هو دعم HTML5 للتطبيقات غير المتصلة بالإنترنت عن طريق إضافة بيان سمة إلى عنصر html، وسيطالبك المتصفح بما إذا كنت تريد تخزين البيانات مؤقتًا للعميل قائمة ملفات البيان. قم بتخزين الملفات التي تحتاجها مؤقتًا حتى يظل بإمكانك استخدام التطبيق عندما تكون شبكتك غير متاحة. بالنسبة للتطبيقات غير المتصلة بالإنترنت، طورت Google أيضًا امتداد متصفح Google Gears، ولكن في النهاية تحولت Google إلى HTML5 وربما تكون قد شاهدت مزايا تخزين HTML5 والتطبيقات غير المتصلة بالإنترنت.
• التخزين: قام Webkit بتنفيذ تخزين قاعدة البيانات، حيث يمكنك الاستعلام عن البيانات وتنفيذ بعض العمليات تمامًا مثل عمليات قاعدة البيانات الخلفية. هناك نوع آخر من التخزين وهو تخزين القيمة الرئيسية، مثل sessionStorage وlocalStorage، والذي يمكنه تخزين القيم والحصول عليها من خلال setItem وgetItem. بالمقارنة مع تخزين ملفات تعريف الارتباط، فإن سعة التخزين أكبر بكثير.
• X-Document Messaging: تمنع المتصفحات اتصال المستندات بين المجالات المختلفة لأسباب تتعلق بالأمان والخصوصية، وعلى الرغم من أن هذا يعد قيدًا أمنيًا، إلا أنه يجلب العديد من المشكلات لاتصال المستندات في المجالات المختلفة غير الضارة، ولكن HTML5 هذا المستند المتبادل. يمكن تحقيق الاتصال، مما يسمح لنا بتجاهل مصدر النطاق المصدر ومنع هجمات البرامج النصية.

هل يثيرك HTML5؟ إذن متى سيصبح HTML5 معيارًا؟ يقال أنه سيتعين عليها الانتظار حتى عام 2022. هناك موقع ويب مثير للاهتمام http://ishtml5readyyet.com/ يخبرك بعدد الأيام المتبقية حتى يصل HTML5 فعليًا.