لقد تمت كتابة العديد من المقالات حول 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، ولا يوجد سبب لعدم استخدامه، ويمكنك أيضًا الاستعلام والاستبدال في جميع أنحاء موقع الويب:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
يصبح:
<أتش تي أم أل> |
تبدو التعليمات البرمجية التالية أكثر وضوحًا ووضوحًا، أليس كذلك؟ إذا عرضت المتصفحات صفحات الويب الخاصة بك بطريقة متوافقة مع المعايير، فستظل تفعل ذلك.
دعونا نتحدث عن الفيديو. ستذكر العديد من المنشورات حول HTML5 المنافسين الحاليين، أربعة في المجموع: Flash وH.264 وOGG وWebM. قد تصبح كل هذه التنسيقات قياسية في المستقبل، ولن يتم تشغيل أي منها بشكل صحيح في جميع المتصفحات على جميع الأنظمة الأساسية، وللأسف، يبدو أن رعاة المتصفح لم يجهزوا واحدًا لهذه الميزة في أي وقت قريب.
لذلك، فمن الواضح أن علامة الفيديو لم تصل بعد إلى المرحلة التي يمكن تطبيقها فيها. لكن مهلا، ينبغي للمرء أن يتوقع أن تكون علامة فيديو HTML5 مستقلة عن التنسيق. في الواقع، بما أن الفيديو يمكن أن يحتوي على علامات مصدر متعددة، فيجب أن يعمل بهذه الطريقة. إذا كان متصفحك لا يدعم الخيار الأول فسوف تقوم بتجربة الثاني ثم الثالث فالرابع فالخامس...
HTML للتعامل مع مثل هذه المواقف هو مشروع مفتوح المصدر يدعم الفيديو المستند إلى الويب دون استخدام أي نصوص برمجية أو استنشاق المتصفح ويمكن العثور عليه هنا .
من الناحية الدلالية، التغيير الكبير في HTML5 هو تلك العلامات ذات الدلالات الواضحة. التغيير الذي يمكنك رؤيته هو أن موقعك أصبح الآن مليئًا بكود مشابه لما يلي:
|
في HTML5، يمكنك التعبير عنها على النحو التالي:
<الرأس> <التنقل> |
هل الدلالات أكثر وضوحا؟ بالطبع، لا يزال يتعين علينا استخدام CSS [أوراق الأنماط المتتالية] لتنسيق هذه العناصر. لكن مهلا، لا يوجد إصدار من IE يدعم هذه العلامات! هذه مشكلة كبيرة للناس! هل نحن حقا سيئي الحظ إلى هذا الحد؟ لحسن الحظ، لدينا الحل: كل ما عليك فعله هو لصق الكود التالي في علامة HEAD الخاصة بصفحتك:
|
HTML5 Shiv هو مشروع مفتوح المصدر يعتمد على اكتشاف بسيط: إذا قمت بإنشاء عنصر DOM في IE، فيمكنك استخدام هذا الاسم في الأنماط. على سبيل المثال، إذا كنت تستخدم
document.createElement("foo") |
قم بإنشاء عنصر DOM، ثم يمكنك إضافة أي عدد من علامات foo إلى الصفحة الحالية، وسيقوم IE بتنسيقها. يحتوي HTML5 Shiv على بعض عناصر HTML5 التي لا يستطيع IE التعرف عليها، ثم يقوم بإنشائها واحدًا تلو الآخر. بهذه الطريقة يمكنك استخدام علامات HTML5 هذه، على سبيل المثال:
| المقالة، القسم، الرأس، التذييل، التنقل |
النماذج الذكية، ميزة أخرى تجعل HTML5 أكثر ذكاءً. إذا سئمت من كتابة نفس البرنامج النصي في كل مرة للتحقق من صحة عنوان البريد الإلكتروني أو شيء مثل رقم الهاتف أو عنوان الإنترنت وما إلى ذلك، فأنت لست وحدك! هناك سبب للسماح للمتصفح بالقيام بكل هذا العمل المزعج، أليس كذلك؟ صحيح تماما.
هنا هو بناء الجملة:
| <نوع الإدخال = "البريد الإلكتروني"> <نوع الإدخال = "url"> <نوع الإدخال = "الرقم"> <نوع الإدخال = "الهاتف"> |
ماذا سيحدث لتلك المتصفحات القديمة؟ الجزء الأكثر ذكاءً: إذا رأوا سمة 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 على القيام بذلك.
زوايا مستديرة (Firefox 3+، Safari 3.1+، Opera 10.5+، Chrome 4+، IE 9+) |
-webkit-border-radius: 10px; |
ظل النص (Firefox 3.5+، Safari 1.1+، Opera 9.6+، Chrome 4+) |
ظل النص: 5px 5px 3px #CCC؛ |
كتلة الظل (فايرفوكس 3.5+، سفاري 3+، أوبرا 10.5+، كروم 4+): |
-webkit-box-shadow: 10px 10px 5px #666; |
ما هي الميزات التي قد تستخدمها يوما ما؟
يحتوي هذا الكتالوج على ميزات كان المطورون والمصممون يفكرون فيها لسنوات. ولسوء الحظ، قد يستغرق الأمر عدة سنوات أخرى قبل أن يتم استخدامها في العالم الحقيقي.
لقد تم ذكر النماذج الذكية من قبل، ولكن في الواقع هناك العديد من العناصر المفيدة التي لم يتم ذكرها، ولكن قبل الدعم الأوسع، لا توجد طريقة لاستخدامها.
محدد منزلق:
<نوع الإدخال = "نطاق" دقيقة = "0" ماكس = "100" خطوة = "2" قيمة = "50"> |
منتقي الألوان:
| <نوع الإدخال = "اللون"> |
منتقي التاريخ:
| <نوع الإدخال = "التاريخ"> |
مربع الإدخال مع التحقق المنتظم:
صناديق الإدخال المطلوبة:
<نوع الإدخال = "نص" مطلوب> |
لا تتمتع أي من هذه العلامات بدعم عبر المتصفحات أو الأنظمة الأساسية، ولكن عندما يأتي ذلك اليوم، ستكون بالتأكيد حريصًا على استخدام هذه العلامات.
لا تزال التخطيطات المطبوعة، وهي ميزة أخرى لـ CSS3، بعيدة عن التنفيذ الكامل بعد سنوات. يوفر للمصممين ميزات تخطيط متعددة الأعمدة. حاليًا، لا يمكن تنفيذه إلا في حالات اختبار Firefox وSafari.
| -عدد الأعمدة: 3؛ -moz-column-gap: 20px; -عدد أعمدة webkit: 3 ؛ -webkit-column-gap: 20px; |
اكتشاف الموقع الجغرافي، مع نمو الخدمات القائمة على الموقع مثل 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 التي طال انتظارها - لذا يمكنك البدء في استخدامها اليوم.
بمساهمة: SafariX — مدونة Safari الصينية، تشارك معلومات ونصائح وإضافات Safari.
المصدر الأصلي: Infoworld
المصدر الصيني: http://safarix.net/how-to-use-html5-on-your-site-today