كيفية استخدام HTML5 على موقعك الآن

كانت هناك العديد من المقالات حول HTML5، مثل "ماذا تتوقع من HTML5؟" "و"كيف سيغير HTML5 الويب؟" وما إلى ذلك، ولكن بالنسبة لمطوري الويب، الشيء الرئيسي الذي يجب معرفته هو: ما الذي يمكنني فعله باستخدام HTML5 الآن، وكيف أبدأ في استخدامه؟ والخبر السار هو أن هناك بالفعل الكثير من الأشياء المتاحة في HTML5.

ومع ذلك، هناك شيء واحد يجب أن تفهمه في البداية، وهو أنك تحتاج إلى معرفة جمهورك، وإلا فلا يجب عليك استخدام HTML5. إذا كان معظم الأشخاص الذين يزورون موقعك يستخدمون IE6، فلا يوجد أي سبب على الإطلاق لاستخدام HTML5. ومن ناحية أخرى، إذا كان جميع زوار موقعك يستخدمون متصفحات الجوال، مثل أجهزة iPhone وiPad، فماذا تنتظر؟ يمكنك البدء الآن! انتظر، إليك بعض الإرشادات، لم يفت الأوان بعد للبدء بعد قراءتها.

ما هي ميزات HTML5 التي يمكنك استخدامها الآن؟

على الرغم من أن معيار HTML5 لا يزال مسودة ولا يزال قيد المناقشة بين أيدي منظمات المعايير، فقد تم تنفيذ أجزاء مهمة بواسطة العديد من المتصفحات الحديثة. تدعم Apple Safari وGoogle Chrome وMozilla Firefox وOpera وMicrosoft IE9 بالفعل بعض ميزات HTML5.

دعونا أولاً نلقي نظرة على كيفية تسجيل كل متصفح على موقع اختبار HTML5:

*أبل سفاري 5.0: 208

* جوجل كروم 5.03: 197

*مايكروسوفت IE7: 12

*مايكروسوفت IE8: 27

*موزيلا فايرفوكس 3.66: 139

* الأوبرا 10.6: 159

يبدو من الواضح أن معظم المتصفحات السائدة التي لا تعتمد على IE Core تتمتع بدعم جيد لـ HTML5، ويمكنها جعل "مواقع الويب التي تستخدم مسودة HTML5" تعمل بشكل جيد للغاية.

بالعودة إلى البداية، يمكنك الآن استخدام HTML5 doctype، ولا يوجد سبب لعدم استخدامه، ويمكنك أيضًا الاستعلام والاستبدال في جميع أنحاء موقع الويب:

يصبح:

تبدو التعليمات البرمجية التالية أكثر وضوحًا ووضوحًا، أليس كذلك؟ إذا عرضت المتصفحات صفحات الويب الخاصة بك بطريقة متوافقة مع المعايير، فستظل تفعل ذلك.

دعونا نتحدث عن الفيديو. ستذكر العديد من المنشورات حول HTML5 المنافسين الحاليين، أربعة في المجموع: Flash وH.264 وOGG وWebM. قد تصبح كل هذه التنسيقات قياسية في المستقبل، ولن يتم تشغيل أي منها بشكل صحيح في جميع المتصفحات على جميع الأنظمة الأساسية، وللأسف، يبدو أن رعاة المتصفح لم يجهزوا واحدًا لهذه الميزة في أي وقت قريب.

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

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

من الناحية الدلالية، التغيير الكبير في HTML5 هو تلك العلامات ذات الدلالات الواضحة. التغيير الذي يمكنك رؤيته هو أن موقعك أصبح الآن مليئًا بكود مشابه لما يلي:

في HTML5، يمكنك التعبير عنها على النحو التالي:

هل الدلالات أكثر وضوحا؟ بالطبع، لا يزال يتعين علينا استخدام CSS [أوراق الأنماط المتتالية] لتنسيق هذه العناصر. لكن مهلا، لا يوجد إصدار من IE يدعم هذه العلامات! هذه مشكلة كبيرة للناس! هل نحن حقا سيئي الحظ إلى هذا الحد؟ لحسن الحظ، لدينا الحل: كل ما عليك فعله هو لصق الكود التالي في علامة HEAD بصفحتك:

HTML5 Shiv هو مشروع مفتوح المصدر يعتمد على اكتشاف بسيط: إذا قمت بإنشاء عنصر DOM في IE، فيمكنك استخدام هذا الاسم في الأنماط. على سبيل المثال، إذا كنت تستخدم

قم بإنشاء عنصر DOM، ثم يمكنك إضافة أي عدد من علامات foo إلى الصفحة الحالية، وسيقوم IE بتنسيقها. يحتوي HTML5 Shiv على بعض عناصر HTML5 التي لا يستطيع IE التعرف عليها، ثم يقوم بإنشائها واحدًا تلو الآخر. بهذه الطريقة يمكنك استخدام علامات HTML5 هذه، على سبيل المثال:

النماذج الذكية، ميزة أخرى تجعل HTML5 أكثر ذكاءً. إذا سئمت من كتابة نفس البرنامج النصي في كل مرة للتحقق من صحة عنوان البريد الإلكتروني أو شيء مثل رقم الهاتف أو عنوان الإنترنت وما إلى ذلك، فأنت لست وحدك! هناك سبب للسماح للمتصفح بالقيام بكل هذا العمل المزعج، أليس كذلك؟ صحيح تماما.

هنا هو بناء الجملة:

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

إذا كنت تتساءل عما تفعله المتصفحات التي تدعم هذه الأنواع من الإجراءات بعد التحقق من الصحة، فيمكنك تجربة هذه النماذج على جهاز iPhone الخاص بك. ستلاحظ أن نوع لوحة المفاتيح المرتبط بالنموذج يتغير في بعض الأحيان، وأحيانًا يكون أبجديًا رقميًا مع إضافة رمز @، وبعضها يحتوي على key.com مباشرةً. كل ما عليك فعله هو تغيير قيمة سمة النوع.

ويمكن أيضًا أن يكون أكثر ذكاءً قليلًا، إليك سمة جديدة:

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

ما هي ميزات HTML5 التي يمكنك استخدامها على الفور؟

ليست كل عناصر HTML5 جاهزة للاستخدام بعد، لأسباب مختلفة (لا يتم اختصار أي منها بـ IE)، سيأتي دعم المتصفح قريبًا، وفي المستقبل غير البعيد، سيكون لديك على الفور عنصران جاهزان للاستخدام.

الخطوط السحرية، كل مصمم لديه حلم، على أمل أن يقوم جميع زوار الموقع بتثبيت الخطوط التي يحتاجونها عند التصميم. للقيام بذلك، كانت هناك مجموعة متنوعة من الأساليب، بما في ذلك الصور، والفلاش، وما إلى ذلك، ولكن الآن، أصبحوا قادرين على ذلك لديك هذا الحق، ويمكنك إجبار زوار موقعك على تثبيت الخطوط التي تحددها. هذا ما يدعمه CSS3: سمة @font-face. لا تدعم إصدارات Firefox قبل 3.5 وإصدارات Safari للهواتف المحمولة (قبل iOS 4) هذه السمة. إذا كان موقعك يحتوي على الكثير من الزيارات المشابهة، فقد تضطر إلى الانتظار.

بغض النظر، لا يوجد سبب حقيقي لاستخدام جميع المتصفحات لنفس الخط. إذا كنت تريد توفير خطوط مخصصة للمتصفحات التي تدعم هذه السمة، ثم توفير خط بديل للمتصفحات التي لا تدعم هذه السمة، فهذا أيضًا حل جيد في الوقت الحالي، http://www.fontsquirrel. يعد Fontface/generator مكانًا جيدًا للذهاب إليه.

الظلال والزوايا المستديرة هي الأشياء التي تجعل العديد من المصممين سعداء. أصبحت ظلال النص وظلال الكتل والزوايا الدائرية وما إلى ذلك معايير يدعمها CSS3. مرة أخرى، إذا كنت لا تريد قياس العرض في متصفحات مختلفة بناءً على إتقان البكسل، فيمكنك البدء في استخدام هذه الميزات الآن. سوف تساعدك مولدات CSS3 على القيام بذلك.

ما هي الميزات التي قد تستخدمها يوما ما؟

يحتوي هذا الكتالوج على ميزات كان المطورون والمصممون يفكرون فيها لسنوات. ولسوء الحظ، قد يستغرق الأمر عدة سنوات أخرى قبل أن يتم استخدامها في العالم الحقيقي.

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

محدد منزلق:

منتقي الألوان:

منتقي التاريخ:

مربع الإدخال مع التحقق المنتظم:

صناديق الإدخال المطلوبة:

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

ستظل التخطيطات المطبوعة، وهي ميزة أخرى لـ CSS3، بعيدة عن التنفيذ الكامل بعد سنوات. يوفر للمصممين ميزات تخطيط متعددة الأعمدة. حاليًا، لا يمكن تنفيذه إلا في حالات اختبار Firefox وSafari.

اكتشاف الموقع الجغرافي، مع نمو الخدمات القائمة على الموقع مثل Gowalla وFoursquare، من المفيد للمتصفحات معرفة مكان المستخدم. لذلك ليس من المستغرب أن تكون متصفحات الهاتف المحمول المستندة إلى الهواتف المحمولة هي أول من قام بتنفيذ هذه الميزة، حيث بدأ Firefxo 3.5 وSafari 5 بالفعل في تقديم الدعم لتحديد الموقع الجغرافي. (يتم تنفيذ خدمة Chrome المماثلة من خلال Gears، ولكنها تنتقل تدريجيًا إلى HTML5).

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

المتصفحات التي تدعم هذه الميزة هي: Firefox 3.5+، Safari Mobile 3.1+، Safari 4+، Chrome 4+.

يمكن تحقيق اللوحات الفنية والرسوم المتحركة وتأثيرات التحويل، وهي إحدى وعود HTML5 باستخدام عنصر Canvas وبعض خصائص CSS3 لتحقيق موقع ويب مصور بالكامل ومتحرك بالكامل. هذا من المعيار اعتبارًا من 12 يوليو 2010.

الأخضر = تم الإنجاز، الأحمر = غير مخطط له

اختصارات إلى HTML5 المتطورة

إذا كنت لا تستطيع الانتظار حتى يموت IE8، فهناك العديد من الطرق لتخطيه والمضي قدمًا - مرة أخرى، كل هذا يتوقف على زوار موقعك. قم بإلقاء نظرة على سجلات الوصول إلى موقعك لمعرفة رؤوس المتصفح الأكثر زيارة. إحدى الطرق للقيام بذلك هي، على سبيل المثال، استخدام Google Chrome Frame لتضمين مثيل Chrome في IE. إذا كنت تدرك أن زوار موقعك ربما قاموا بتثبيت GCF [Google Chrome Frame]، فيمكنك إضافته إلى HEAD الخاص بك. تجبر علامة META الموجودة في السطر السابق IE على استخدام GCF لعرض موقع الويب الخاص بك:

[المحرر: ولكن أود أن أذكرك بأن القيام بذلك سيؤدي إلى إبطال وضع التوافق IE7 الأصلي لـ IE=7. يرجى تقييمه بنفسك إذا اخترت ذلك. ]

إلى جانب البرنامج النصي القصير المقدم من Google، والذي يسمح للمستخدمين الذين لم يقوموا بتثبيت GCF بالانتقال إلى صفحة تثبيت GCF، قد تتمكن من تخطي قيود IE. [المحرر: أنا مجنون، يبدو أن الإعلان المجاني لـ GCF يجلب حركة مرور مجانية...]

العناصر المدرجة في هذه المقالة ليست سوى جزء صغير من مسودات HTML5 وCSS3 الحالية. إذا كان عليك استخدام بعض الميزات الجديدة، فمن الضروري التحقق من المشاريع مفتوحة المصدر الحالية حتى تتمكن من تقليل مشكلات توافق الخادم. .

عند إعداد تقارير عن HTML، تركز العديد من وسائل الإعلام على موقفها، مثل "ليس حتى عام 2022" و"Flash Killer". والحقيقة هي أن HTML5 عبارة عن ترقية طال انتظارها وجديدة تمامًا لـ HTML4 التي طال انتظارها - لذا يمكنك البدء في استخدامها اليوم.