HTML 5 الثورة القادمة في عالم الويب

4:56 ص |

20يول

إن كنت تعمل في مجال تصميم أو تطوير مواقع الويب فلابد أنك سمعت البعض يذكر HTML 5 هنا أو هناك، وعلى الأغلب أنك لم تعره الكثير من الاهتمام، فكما قد يتبادر لك من الوهلة الأولى على أنه مجرد إصدار جديد من المعايير والواسمات للغة HTML قد تأخذ عديد السنوات حتى تصبح متاحة ومدعومة على المتصفحات الأكثر تداولا، هذا عدى عن كونك راضيا بما تقدمه لك حاليا XHTML و HTML 4 من أدوات، إن كانت هذه هي حالك فأعد التفكير مجددا كي لا تفوتك واحدة من اللحظات المفصلية في عالم الويب، وتابع معنى قراءة هذه المقالة التي سأحاول من خلاله أن أقدم لك مدخل ولو بسيط عما يتيحه هذا الإصدار الجديد من لغة HTML والتي لم تتغير كثيرا منذ الإصدار HTML 2، إلا أن هذا الإصدار الجديد يسمح بتطبيق العشرات من المزايا الجديدة سنطلع على البعض من أهمها هنا.

دعني بداية أجيب على التساؤل الذي ربما قد بدأ يدور في رأسك عزيزي القارئ، هل هناك متصفحات متوافرة حاليا تدعم هذه التقنية؟ والجواب نعم، فكل من مستعرضي Chrome من Google و Safari من Apple يفعلان ذلك بشكل ممتاز، كما أن متصفح Firefox يدعم HTML 5 ولو بشكل غير كامل حتى تاريخ كتابة هذه السطور، لذا قد تكون المنصات الأولى التي توفر دعما كاملا لهذه التقنية هي الجيل الجديد من الهواتف المحمولة الذكية مثل iPhone أو هواتف Android، فهل ترغب في انتظار Microsoft ومتصفحها Internet Explorer؟ دعني أضيف هنا تلميحين صغيرين لأوضح مدى الدعم الكبير الذي تحظى به هذه التقنية الجديدة (عدى عن كونها مقدمة أصلا من قبل W3C ذاتها)، أولهما أن كلا من Google و Apple لا توفران مشغلات لملفات Flash على هواتفهما المحمولة، والسبب أن HTML 5 تستطيع أن تكون بديلا ناجحا لها، من جهة أخرى فإن Google توقفت عن تطوير تقنية Gear لتطبيقات الويب التي تستطيع العمل عند عدم توفر إتصال حي بشبكة الإنترنت، ذلك الاستغناء جاء لصالح دعم HTML 5 التي توفر تقنية مشابهة إلى حد ما، كما جاء إطلاق Google Wave المبني باستخدام HTML 5 الخطوة الأكبر إلى الأمام في هذا المجال.

من الجدير ذكره أن HTML 5 تعتمد بشكل كبير على لغة JavaScript، فإن لم تكن تجيد استخدامها فاستثمر مزيدا من الوقت في ذلك (غريب، ألم تثر تقنية AJAX من قبل فضولك وتدفعك لتعلم JavaScript؟ لقد أصبحت هذه اللغة يوما بعد آخر لاعبا أساسيا في عالم تطبيقات الويب، وليست مجرد مجموعة من التعليمات التي تقصها وتلصقها مع بعض التعديلات الطفيفة لتقوم بوظائف التحقق من مدخلات المستخدم أو لتعرض قائمة منسدلة أو صورة متبدلة لجذب إنتباه الزائر).

حسنا، قبل أن أبدأ بجديد ما أضيف إلى لغة HTML مع هذا الإصدار الخامس، سأشير إلى بعض الواسمات الشهيرة التي ألغيت ومنها <applet> (لا أصدق أن هنالك أحدا ما زال يستخدم Java Applet في صفحات موقعه عام 2010)، <font> و <center> و <s> و <u> و <big> (فجميعها وظائف نقلت منذ زمن إلى صفحات الأنماط المتعددة CSS)، <frame> و <frameset> و <noframes> (حيث تم الاستغناء نهائيا عن تقنية الأطر السيئة السمعة والتي ارتبط اسمها بأنواع متعددة من الاختراقات والقرصنة).

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

إن الشكل التالي يوضح مثال عن بنية نموذجية لصفحة ويب مطورة باستخدام تقنية HTML 4 الحالية:

في حين أن الشكل التالي يوضح ذات بنية صفحة الويب السابقة لكن باستخدام بعض من واسمات HTML 5 الجديدة:

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

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

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

http://lifehacker.com/395171/how-your-location+aware-iphone-will-change-your-life

من المزايا المثيرة الجديدة هي رسوم Canvas والتي تعتبر منافس مباشر وبديل محتمل لتقنية Flash تمكن مطور الموقع من توصيف توضع الصور والمخططات والرسومات ضمن مساحة الصفحة وتفاعلها مع الأحداث من طرف المستخدم، تخيل أنك تستطيع الاستعاضة عن ملفات وبرامج Adobe Flash بشيفرات HTML و JavaScript صرفة ليست بحاجة إلى ترجمة أو إضافة خاصة بالمتصفح أو توافقية مع منصة العرض أو نظام التشغيل، فيما يلي مثال بسيط يوضح كيفية استخدام واسمة <canvas> الجديدة لرسم مستطيلين متداخلين أحدهما نصف شفاف:

<script type="application/x-javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                ctx.fillStyle = 'rgb(40, 0, 0)';
                ctx.fillRect  = (20, 20, 65, 60);
                ctx.fillStyle = 'rgba(0, 0, 160, 0.5)';
                ctx.fillRect  = (40, 40, 65, 60);
            }
        }

</script>

<canvas id="canvas" width="150" height="150"></canvas>

حتى في هذا العهد المبكر من عمر تقنية HTML 5 هناك بعض الأمثلة الممتعة التي تظهر مدى قوة هذه الميزة الجديدة وتطبيقاتها في مجال الواقع الافتراضي والألعاب التفاعلية في عالم الويب على سبيل المثال، والتي كانت حكرا على تقنية Flash ومحترفيها فيما سبق (لا تنس أن تستخدم متصفح يدعم تقنية HTML 5)

http://www.benjoffe.com/code/demos/canvascape/textures

أخيرا أود الحديث عن ميزة ربما تكون صاحبة الأثر الأعمق والأهم في عالم تطبيقات الويب كما نعرفه اليوم، ألا وهي وسائل حفظ البيانات محليا على حاسوب زائر الموقع والتي توفرها لغة HTML 5 (أو المتصفحات التي تدعمها إن أردنا الدقة)، حيث تتعدى إمكانية الوظائف الجديدة بأشواط ما توفره تقنية ملفات تعريف الارتباط Cookies المتوافرة حاليا سواء من ناحية الكمية أو النوعية، حيث تتاح للمطور ثلاث طرائق مختلفة هي:

1- مخزن الجلسة والذي لا يختلف بآليته كثيرا عن تقنية Cookie على الرغم من أنه يمتلك بعضا من المزايا الإضافية منها أنه يستوعب أكثر بكثير من 4 KB التي تمثل الحد الأعلى المتاح لملفات تعريف الارتباط، كما أن محتوى ملفات Cookie يرسل آليا مع كل طلب HTTP بغض النظر إن كان هناك حاجة لها أم لا، أما القيم المحفوظة في مخزن الجلسة فترسل عند الطلب فقط مما يساهم في الاقتصاد بعرض الحزمة المستخدم عند تصفح الموقع واستخدامه بشكل أكثر مثالية. فيما يلي مثال يوضح طريقة استخدام مخزن الجلسة:

sessionStorage.setItem('fullname', 'Khaled Al-Shamaa');

alert('Your name is:' + sessionStorage.getItem('fullname');
alert('Hello ' + sessionStorage.fullname);

sessionStorage.removeItem('fullname');

2- المخزن المحلي، وهو مشابه إلى حد كبير لمخزن الجلسة مع فارق أساسي هو أن معلومات هذا المخزن تبقى ضمن المتصفح ولا يتم نقلها إلى المخدم، لذا يمكن الوصول إليها باستخدام JavaScript، فيما يلي مثال يوضح طريقة استخدام هذا المخزن:

// foo1 will be accessible by any website
globalStorage[''].foo1 = 'bar1';

// foo2 will be accessible by example.com
globalStorage['example.com'].foo2 = 'bar2';

3- أما الطريقة الثالثة فتدعى مخزن قاعدة البيانات، وهي كذلك حرفيا، حيث ستزود المتصفحات التي تدعم لغة HTML 5 بقاعدة SQLite للبيانات بحيث تغدو قادرا على حفظ واسترجاع المعلومات على حاسوب الزائر باستخدام تعليمات SQL المعيارية بكل ما توفره من مرونة وقوة من خلال شيفرات JavaScript البرمجية، يوضح المثال التالي كيفية القيام بذلك:

var db = openDatabase('Database Name', 'Database Version');

بالحصول على كائن قاعدة البيانات هذا تستطيع تنفيذ تعليمات SQL من خلال استدعاء الطريقة executeSQL التي يمتلكها.

هل بدأت تدرك مدى عمق وثورية هذه النقلة؟ حسنا هناك المزيد مما هو في جعبة HTML 5 لدعم تنفيذ السلس لتطبيقات الويب حينما لا يتوفر إتصال حي بشبكة الإنترنت، منها خاصية manifest لسمة html والتي يمكن أن تحدد باستخدامها اسم ملف يتضمن ما يجب على المتصفح أن يحتفظ به ضمن الذاكرة المخبئية Cache عوض أن تترك مهمة اختيار تلك الملفات لتخمينات المتصفح ذاته أو تبقيها عرضة للحذف من قبل المستخدم، فأنت تقوم ببساطة بتحديد تلك الملفات التي تحتاج إليها إن قطع الاتصال بالإنترنت سواء كانت ملفات HTML أو CSS أو صور أو حتى خطوط، والمثال التالي يوضح ذلك:

<html manifest="offline.manifest">

# this is how you add a comment to the manifest
# offline.manifest file content.
CACHE MANIFEST
fonts/example.ttf
css/main.css
css/print.css
images/face.jpeg
images/logo.gif
scripts/main.js
index.html

NETWORK:
search.php
login.php
/api

يذكر ضمن قسم NETWORK من ذلك الملف أسماء المصادر التي يجب عدم حفظها في الذاكرة المخبئية وبالتالي استخدامها عند عدم وجود اتصال مع شبكة الإنترنت، من جهة أخرى تجدر الإشارة إلى أن سمة MIMI-Type لملف البيان ذاك يجب أن تكون text/cache-manifest وهو ما يوجب عليك تعديل إعدادات مخدم الويب لديك أو إرسال قيمة MIMI-Type تلك برمجيا ضمن ترويسة HTTP لهذا الملف. ولدعم هذه الميزة أضيفت خاصية onLine إلى كائن navigator في لغة JavaScript توضح وضع الاتصال الحالي بشبكة الإنترنت.

إن الحلول والأدوات الثورية طالت أيضا عناصر الإدخال، حيث بات بإمكاننا تحديد أي عناصر الإدخال تلك هو عنصر مطلوب لا يمكنك إرسال الاستعلام دونه، كذلك يمكنك استخدام التعابير النظامية Regular Expression للتحقق من صحة نمط البيانات المدخلة، إضافة إلى تجهيز رسالة توضيحية تظهر عندما يختار المستخدم عنصر الإدخال المعني:

<form>
    <p>
        Enter a US or Canadian Postal Code:
        <input type="text" name="postCode" required="required"
        pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
        title="US: 99999-1234; Canadian: 0A1 B2C" />
    </p>
    <input type="submit" />
</form>

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

المراجع للاستزادة:

http://www.html5demos.com
http://www.html5tutorial.net
http://www.wikipedia.org/wiki/HTML5
http://www.google.com/search?q=HTML5

اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في Web-King من خلال (نشرات rss)

التسميات: تطوير محتوى المواقع , نظرية التصميم للويب

0 التعليقات :

إرسال تعليق

رأيك مهم بالنسبه لنا ، فلا تحرمنا منه

Web-King

هل هذة أول زيارة لك ؟

يمكن أن تبدأ بقراءة :

الاقسام

ارشيف Web-King

جديد المواضيع