مقدمة فى HTML5

عام 0 geek4arab
Spread the love

1. HTML5 و HTML

للوهلة الأولى يبدو لك أن HTML5 ليست إلا الاصدار الخامس من HTML بينما فى الواقع HTML ليست إلا لغة بسيطة جدا لبناء صفحات الويب و HTML5 هى مستقبل الويب و تطبيقاته بل و من وجهة نظرى أعتبرها لغةً جديدة تماماً ستغير من صفحات الويب و طريقة التعامل معها بشكل كامل , بل و ستستبدل تقنيات انتشرت مؤخراً كالفلاش و بالتالى ليس من المنطقى بأى حال من الاحوال مقارنتها ب HTML , فهى ليست الإصدار الخامس من HTML و لكنها فقط .

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

للبدء فى سلسلة دروس HTML5 تحتاج لأن يكون لديك :

  • خبرة و لو متوسطة فى لغة جافاسكربت (javaScript).
  • خبرة فى لغتى HTML , CSS .

2. تاريخ HTML :


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

ثم فى عام 1997 تم إصدار HTML 3.2 و كانت أول إصدارة قياسية تُعتمد من قبل منظمة W3C , و لكن هذه المرة تم تجاهلها من قبل مطورى متصفحات الانترنت و بدأ كل متصفح يتجه نحو إصدار أكواد خاصة به , و قد مَثل هذا مشكلة كبيرة لمطوري مواقع الانترنت حيث اضطروا لكتابة نسخ متعددة من الكود لتلائم كل متصفح .

و فى عام 1998 بدأ مجموعة من المطورين بما يسمى “مشروع قواعد الويب” بهدف وضع قواعد محددة لكتابة صفحات الويب باستخدام HTML و إيجاد الحلول التنظيمية و إعادة هيكلة مشروع W3C , و خلال عام تم إصدار HTML 4 و التى تعتبر أفضل إصدارة من HTML تنظم كتابة صفحات الويب بشكل كبير و تم اعتمادها فى معظم متصفحات الانترنت .

و فى عام 2000 تم اصدار 1.0 XHTML و كانت تهدف بشكل اساسي لبدء الإنتقال نحو إجبار مطورى الويب على كتابة الكود بشكل معين كلغة XML و فى نفس العام بدأ العمل فى XHTML 2.0 و لكن بسبب رفض مطوري الويب لها و تجاهل متصفحات الانترنت لهذه القواعد المحددة لكتابة صفحات الويب فقررت منظمة W3C إيقاف العمل على الإصدارة الثانية من XHTML فى عام 2004.

و بعد الفشل فى تطوير XHTML 2.0 , بدأت مجموعة تسمى Web Hypertext Application Technology Working Group (WHATWG) – و هى تمثل مجموعة من المبرمجين من شركات أبل و موزيلا و أوبرا -فى مشروع لإعادة هيكلة HTML , و فى عام 2007 قامت منظمة W3C باعتماد هذا المشروع و أطلقت عليه , و فى عام 2009 قامت منظمة W3C بإلغاء XHTML 2.0 بشكل كامل , و أخيراً فى عام 2010 قامت الكثير من متصفحات الانترنت بدعم HTML5 بشكل جزئي و كذلك عدد من الشركات الكبرى كشركتى أبل و جوجل بإستخدام HTML5 حيث استخدمتها جوجل بشكل مستمر فى شعارها فى مختلف المناسبات و قامت شركة أبل بالاعتماد عليها بشكل أساسى كبديل للFlash فى نظام iOS .


3. لماذا HTML5 ؟

  • HTML5 مستقبل الويب : حيث يُتوقع أن يتم الإعتماد الكامل على لغة HTML5 و بشكل أساسي بحلول عام 2022 و بالتالى مستقبل الويب و تطبيقاته تعتمد بشكل كبير على هذه اللغة .
  • تحكم أفضل : حيث تشتمل هذه اللغة على مجموعة متميزة من الواجهات البرمجية (API) توفر الوصول للصوت و الكاميرا و المكان و غيرها لتسمح للمبرمج ببناء تطبيقات تفاعلية متميزة .
  • التصفح بدون إتصال و تخزين البيانات : حيث يمكن من خلالها تخرين صفحات الويب على الجهاز لتصفح المواقع بدون إتصال و هذه الميزة جعلت جوجل توقف العمل على مشروع Google gears , و الإتجاه نحو HTML5 بهدف الاستغناء عن إجبار الزائر على تركيب الإضافة و كذلك لبساطة و سرعة هذه الميزة فى HTML5 مقارنة ب Gears .

0

  • دعم الوسائط المتعددة : حيث يمكنك إضافة الصوت و الفيديو بدون الحاجة لأى إضافة ك» Flash , silverlight  .
  • السرعة و الدمج مع المتصفحات : فهى تأتى مع المتصفحات بشكل تلقائي , و بالتالى لن يحتاج زائر الموقع إلى تركيب أى اضافة .
  • الرسم و التأثيرات : مكتبات WebGL , SVG , Canvas توفر أدوات لا حصر لها للرسم و تحريك العناصر « بل و هناك برامج ك Adobe Edge  و radiapp تسمح بتحريك الرسومات باستخدام HTML5 من خلال واجهة رسومية و بدون كتابة كود .
  • كما أن HTML5 تدعم الإصدارات السابقة من HTML بشكل كامل و بدلاً من إجبار مطوري صفحات الويب على قواعد معينة فإنها تقوم بمعالجة و تجميع الأخطاء فى الكود فحسب لتسمح للمطور بتعديله و تطويره بدون الإضطرار لإعادة كتابته بشكل كامل .
  • إمكانية تطوير تطبيقات للأندرويد و الأيفون و العديد من الأجهزة المحمولة باستخدام Titanium او phonegap , سأتطرق لهذه الميزة بالتفصيل فيما بعد .
  • المزيد من الوسوم (tags) ك article, footer, header, nav, section ,calendar, date, time, email, url, search بهدف تنظيم الكود بشكل أكبر و تبسيطه لمصممى المواقع .
توضيح : SVG , WebGL , CSS3 , Geolocation , Web sockets لا تمت بصلة للغة HTML5 نفسها و لكن ارتبطت بها فى بناء تطبيقات الويب .

4. دعم المتصفحات ؟

::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::1

بدايةً يجب أن أوضح أن لغة HTML5 ليست كتلة واحدة و انما مجموعة من الخواص و يختلف دعم هذه الخواص من متصفح لآخر * , فمعظم الخواص الأساسية ك canvas , Geolocation , app cache , video , indexedDB, workers مدعومة بشكل كامل فى كل المتصفحات الحديثة تقريباً كالفايرفوكس و كروم و سفاري و أوبرا و انترنت اكسبلورر 9 . كما أن الاحصائيات تشير إلى تسابق كبير بين المتصفحات لدعم المزيد من خواص HTML5 فى الآونة الأخيرة , و كذلك تشير إلى اتجاه مستخدمى الويب نحو المتصفحات الحديثة التى تدعم HTML5 بشكل كبير جداً كما هو موضح فى هذا الرسم البيانى :


5. حلول لدعم الخواص الأساسية ل HTML5 فى كل المتصفحات

فى الآونة الأخيرة ظهرت العديد من المشاريع التى تهتم بدعم HTML5 فى كل المتصفحات و لعل أبرز هذه المشاريع :

  •   مشروع HTML5 Media و الذى يهدف لدعم الصوت و الفيديو فى كافة المتصفحات و يمكن استخدامه بكل بساطة من خلال اضافة هذا السطر
  •  مشروع ExplorerCanvasو الذى يهدف لدعم canvas فى متصفح انترنت اكسبلورر IE و يمكن استخدامه من خلال إضافة هذا السطر
    1
    2
    3
    <!--[if IE]>
    <script src="excanvas.js"></script>
    <![endif]-->

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

سوف تتم مناقشة هذا الدرس بالتفصيل عبر #IRC و skype خصوصاً النقاط التالية :

  • عيوب و مزايا بناء تطبيقات أندرويد و ايفون باستخدام HTML5 , و لن تتم مناقشة كيفية بناء هذه التطبيقات حيث سيتم شرحها فى وقت لاحق .
  • كيفية عمل مشاريع HTML5MEDIA و explorercanvas .
  • مناقشة عامة عن استخدام المتصفحات و دعمها ل HTML5.
  • كفاءة البرامج التى تقوم بعمل رسوم متحركة باستخدام HTML5 ك edge , radiapp .

و إذا كنت تود المشاركة فى هذا النقاش :

  1. يجب أن تكون لديك فكرة عامة عن هذا الدرس , و كذلك النقاط التى سيتم مناقشتها .
  2. إضافة تعليق على هذا المقال مع كتابة #IRC أو skype فى نهاية التعليق على حسب الوسيلة التى تُفضلها .
  3. التأكد من صحة البريد الإلكترونى فى التعليق حيث سيتم إرسال الدعوات عليه .

الكاتب geek4arab

geek4arab

مواضيع متعلقة

التعليقات مغلقة