السلام عليكم ورحمة الله وبركاته , اخواتي اليوم نحكي عن اشهر واسهل لغة في عالم برمجة الويب (HTML) هي اللغة التي يسميها البعض هيكل الموقع وذلك لأهميتها , يمكنك ان تتعلم اساسيات اللغة في تقريباً 3 ساعت بعد ان تسمع كورس تعليمي علي اليوتيوب مدته ساعتان وتطبق ذلك لمدة ساعة لتكون فهمت اللغة .
تاريخ اللغة HTML
علامات الوسوم صريحة – Express Tags
كما هو واضح من العنوان، ستكون تلك العلامات صريحة مثل <logo></logo> و <navigation></navigation> و <sidebar></sidebar> .. الخ. بالاضافة الى انه عوضاً عن استخدام الـ ID او Class لتعريف العنصر container الذي دائما مايستخدمه المطورون في اكوادهم، يمكنهم استخدام علامة الوسم <container>.
دعم العناصر الأصلية في Native Modals Support in HTML 6
عنصر الحوار dialog في طريقه إلى HTML6. يساوي هذا العنصر نوافذ الحوار ( Dialog boxs – Javascript-powered Modal Windows ) التي تعمل بنظام الجافاسكريبت Javascript.
عناصر Dialog قائمة بالفعل، ولكن هناك عدد قليل فقط من المتصفحات مثل كروم Chrome ومتصفحات الانترنت الخاصة بـ Samsung التي تتمتع بالدعم الكامل له. ولكن لا تقلق، ستعمل في جميع المتصفحات قريباً.
وهذا العنصر – كتنسيق افتراضي له – سيكون ظهروه فقط بمرور المؤشر فوق المكان الذي تم وضعه فيه.
وكتكوين افتراضي للعنصر، سينشئ العنصر خلفية رمادية مع محتوى غير تفاعلي تحته.
ويمكن استخدام سمات العناصر المعروفة بـ attributes مع هذا العنصر، حيث سيكون له سماته الخاصة مثل open. انظر الى المثال التالي للتوضيح:
<dialog>
<form method="dialog">
<p>Dialog Box Built with HTML6</p>
</form>
</dialog><dialog open>
<p>Dialog Box Built with HTML6</p>
</dialog>بشكل عام، يعد عنصر الحوار dialog هذا مفيداً في تفاعل صغير مع المستخدم وتحسين واجهة المستخدم.
الحرية في تعديل حجم الصور – Freedom to Resize Image
يعتقد الخبراء أن التحديث في طريقه لتمكين المتصفحات من تغيير حجم الصورة للحصول على أفضل تجربة مشاهدة.
تواجه المتصفحات صعوبات في إظهار أفضل حجم للصورة فيما يتعلق بحجم الجهاز والنافذة.
ويعد وسم <img> و سمة src ليست قوية بما يكفي للتعامل مع تلك المشكلة. و قد يتوفر وسم <srcset>. حيث يمكن لهذا الوسم ان يُسهل على المتصفحات الاختيار بين أكثر من صورة واحدة لعرض افضل مشهد للصورة.
مكتبات HTML6 المخصصة – HTML 6 Dedicated Libraries
سيكون تقديم مكتبات قابلة للتخزين المؤقت في HTML6 خطوة نحو تحسين انتاجية مصممي الويب والمستخدمين.
شروح للصور ومقاطع الفيديو – Annotations for Images and Videos
سيكون من الرائع جداً اذا استطعنا اضافة تعليق على الصور ومقاطع الفيديو في HTML. حيث يوفر لنا HTML5 القدرة على تفسير الكلمات والجمل والفقرات ولكن ليس للصور ومقاطع الفيديو.
قدمت العديد من المنظمات في هذا المجال بعض الحلول، ويبدو أن منظمة WHATWG ستنظر في بعض منها على الأقل.
لذا نتمنى بالفعل توفير امكانية وضع تعليقات على الصور ومقاطع الفيديو في تحديثات HTML قريباً. سيكون ذلك رائعاً.
تحسين المصادقة – Authentication enhancement
على الرغم من أن HTML5 ليست سيئة من حيث الأمان. كما توفر المتصفحات وتقنيات الويب حماية معقولة. إلا أنه لاشك أن هناك الكثير مما يمكن القيام به في مجال المصادقة والأمان.
وكأمثلة لذلك: يمكن تخزين المفاتيح خارج الموقع، وهذا سيمنع وصول الأشخاص غير المرغوب فيهم ويقوي الحماية. وأيضاً استخدام المفاتيح المدمجة ( المضمنة – Embedded ) بدلاً من ملفات تعريف الإرتباط ( Cookies )سيجعل التوقيع الرقمي ( Digital Signature ) أفضل … الخ.
قوائم HTML6 المخصصة – Customized Menus in HTML6
تستخدم حالياً وسوم <ul> و <ol> لإنشاء القوائم في مواقع الويب، ولكنها لا تتناسب بشكل جيد مع كل شيء. وسيعتبر وسم <menu> القادم مع العناصر التفاعلية هو المطلوب في الوقت الحالي.
وقد يتعامل وسم <menu> بشكل جيد مع قائمة العناصر المدمج بداخلها ازرار، انظر الى المثال التالي:
<menu type="toolbar">
<li><button>Cut</button></li>
<li><button>Copy</button></li>
<li><button>Paste</button></li>
</menu>كاميرا HTML6 المدمجة – HTML6 Integrated Camera
قد تتيح لنا HTML6 استخدام الكاميرا والوسائط على أجهزتنا بشكل أفضل. حيث قد نكون قادرين على التحكم في الكاميرا وتأثيراتها وأوضاعها وصورها البانورامية و خاصية الـ HDR وأشياء اخرى.
قد يمكننا استخدام أي وسائط واعادة توظيفها … هناك الكثير من الأشياء التي يمكن تحسينها باستخدام الكاميرا مع HTML6.
عناصر Microformats جيدة – Good Microformats
في كثير من الأوقات نحتاج الى تعريف معلومات عامة على الإنترنت.
قد يتكون المعلومات العامة أي شيء عام مثل رقم الاتصال والاسم والعنوان … الخ. وتعتبر Microformats هي المعايير القادرة على تحديد البيانات العامة.
يمكن لـ Microformats ان تحسن إمكانيات صممي الويب وتقليل جهود محركات البحث اللازمة لاستنتاج المعلومات العامة لموقع ويب لشركة مثلا.
ولمعرفة المزيد عن Microformats اضغط هنــــــــــا. ويمكنك رؤية المثال في السطر التالية لمعرفة ماهي الـ Microformats:
<meta name="author" content="MUHAMAD AYMAN">تطبيقات الصفحة الواحدة بدون جافاسكريبت – Single-Page Apps without Javascript
يقترح “بوبي موزومدر” رئيس مجلة FutureClaw مافي السطور التالية:
“linking anchor elements to JSON/XML, API endpoints, having the browser internally load the data into a new data structure, and the browser then replaces DOM elements with whatever data that was loaded as needed. The initial data (as well as standard error responses) could be in header fixtures, which could be replaced later if desired.”
“ربط عناصر anchor بـ JSON/XML وواجهات البرمجيات التطبيقية مع تحميل المتصفح داخليا للبيانات في بنية بيانات جديدة، ثم استبدال المتصفح عناصر DOM بأي بيانات تم تحميلها بحسب الحاجة إليها. ويمكن ان تكون البيانات المدئية ( بالاضافة الى الاستجابات القياسية للأخطاء ) في تركيبات الهيدر header، والتي يمكن استبدالها لاحقا اذا رغبت في ذلك.
وختاماً لتلك المقالة، لايوجد شيء مثالي وكامل ولا حتى HTML، لذلك هناك الكثير من الأشياء التي يمكن القيام بها لتحسين لغة HTML وجعلها افضل.
يجب ان يتم توحيد بعض المعايير المفيدة لعزيز قوة لغة HTML. وقد تم طرح بعض التغييرات الصغيره بالفعل.
يعتبر تعزيز دعم البلوتوث Bluetooth ونقل ملفات p2p والحماية من البرامج الضارة ودمج التخزين السحابي هي بعض الأشياء التي يجب مراعاتها في الاصدار التالي من HTML.
وهناك بالفعل بعض التحديثات التي تم تقديمها ومن المرجح أن يتم الاعلان عن بعضها قريباً.
أتمنى ان تكون تلك المقالة كافية لفهم ماهو آتٍ من تحديثات في HTML6 الجديدة. أشكركم على قراءة المقالة واشكركم كل الشكر اذا قمتم بنشرها لتعم الفائدة بين المصممين والمطورين. دمتم بخير.