السبت، 20 أغسطس 2011

دروس حول HTML5

الدرس الأول :

مقدمة فى HTML5


  1. HTML5 و HTML .
  2. تاريخ HTML5 .
  3. لماذا HTML5 ؟
  4. دعم المتصفحات .
  5. حلول لدعم الخواص الأساسية ل HTML5 فى كل المتصفحات .
  6. مناقشة الدرس .

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 .

  • دعم الوسائط المتعددة : حيث يمكنك إضافة الصوت و الفيديو بدون الحاجة لأى إضافة ك» 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. دعم المتصفحات ؟


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

* جدول تفصيلي يوضح دعم المتصفحات لخواص HTML5 , CSS3

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. التأكد من صحة البريد الإلكترونى فى التعليق حيث سيتم إرسال الدعوات عليه .


====================================================
الدرس الثانى :

صفحتُك الأولى باستخدام HTML5


تحدثتُ فى الدرس الأول عن مقدمة سريعة فى HTML5 , و فى هذا الدرس سأتحدث عن نوع المستند (DOCTYPE) و ترميز الصفحة (CHARSET) و كذلك مقدمة فى الوسوم البنائية الجديدة (Structural tags) فى HTML5 .
استخدام هذا الرمز يعني أن السؤال مطروح للمناقشة فى التعليقات , و كذلك لاحقاً عبر Skype و#IRC .
باختصار ….
“باختصار” تشرح الدرس بصورة سريعة و بدون الدخول فى تعريفات أو تفاصيل إحصائية , يمكنك قراءة هذا الجزء إذا كنت خبير فى كتابة صفحات الويب و لا تملك الوقت لقراءة الدرس كاملاً . “

نوع المستند (DOCTYPE)

فى HTML5 لم تعد تحتاج سوى لهذا السطر البسيط لتعريف المتصفح بنوع المستند DOCTYPE و كذلك نظام عرض الصفحة و التى ستكون Standards
1
<!DOCTYPE html>
و ستلاحظ أنها أبسط مما تعودت عليه فى HTML 4.0 و XHTML 1.0 .

ترميز الصفحة (CHARSET)

و بالنسبة لكود ترميز الصفحة (CHARSET) و الذى كان يُكتب هكذا
1
2
<meta http-equiv="content-type"
  content="text/html;charset=utf-8" />
تم استبداله بالجزء الذى يهم المتصفح فقط و هو أقل عدد من الحروف يحتاجها المتصفح ليقرأ ترميز الصفحة , و صار كما يلي :
1
<meta charset="utf-8">

(SCRIPT && LINK)

و بالإضافة الى DOCTYPE و ترميز الصفحة (CHARSET) , فتم تبسيط الوسوم Script , link أيضاً بحذف الصفة التى تحدد نوع الملف أو المحتوى و هى type
1
2
<script type="text/javascript" src="file.js"></script>
 <link rel="stylesheet" type="text/css" href="file.css">
ب
1
2
<script src="file.js"></script>
 <link rel="stylesheet" href="file.css">
و كما نلاحظ فإن HTML5 تهدف إلى تبسيط الكود بقدر الإمكان على مطور الويب .
~

والآن لنبدأ :

نوع المستند (DOCTYPE)

من لديه خبرة فى HTML يذكر انها لطالما احتاج لنسخ ولصق السطر الاول من الكود و هو نوع المستند (DOCTYPE) , لاستحالة حفظه , و قد كان أحد الأشكال التالية و يختلف على أساس إصدارة HTML المستخدمة فى كتابة الصفحة و كذلك نظام عرض الصفحة فى المتصفح .
فى HTML5 تم حل هذه المشكلة و تبسيط نوع المستند (DOCTYPE) لهذا السطر فقط !! “بدون مسافات قبل !DOCTYPE أو بعد html “
و هذا التغيير يطرح سؤالين :
  1. السؤال الأول و هو لماذا تم حذف إصدار HTML من نوع المستند (DOCTYPE) ؟
  2. و السؤال الثانى أى نظام عرض سيتم تنشيطه بالمتصفح عند استخدام هذا DOCTYPE الجديد ؟
بالنسبة للسؤال الأول فمن وجهة نظرى استخدام إصدار HTML فى DOCTYPE ليس له أى قيمة حيث يتم عرض الصفحة من قبل المتصفح بنفس الطريقة مع كل أنواع DOCTYPE و حتى بدون كتابته , فوظيفة DOCTYPE الوحيدة هى تحديد نظام عرض المتصفح للصفحة لا أكثر و لا أقل , و بالنسبة للسؤال الثانى وقبل الإجابة أوضح أولاً ما هو نظام عرض المستند بالمتصفح , فهناك نوعان من أنظمة عرض المستند بالمتصفح :

نظام Standards : لعرض الصفحات المكتوبة طبقاً للشروط القياسية حتى و لو حدثت مشكلة أثناء عرض الصفحة .
نظام Quirks : لعرض الصفحات المكتوبة بشكل عشوائي و بدون مراعاة للشروط القياسية لكتابة صفحات الويب و معظم المواقع العربية و خصوصاً الحكومية لا تراعى أى قواعد أو شروط قياسية أثناء كتابة صفحات الويب و يعرضها المتصفح بهذا النظام غالباً.
و عند استخدام نوع المستند (DOCTYPE) الجديد سيتم تنشيط وضع Standards فى المتصفح , و لم يعد هناك اختيار بين الانظمة المختلفة كما كان فى DOCTYPE القديم و أعتقد انها خطوة إيجابية للاتجاه نحو مراعاة القواعد و الشروط القياسية أثناء كتابة صفحات الويب , خصوصاً و أن الإحصائيات تشير إلى تجاهل المواقع العربية للشروط القياسية بشكل كبير جداً .
أنظمة عرض المستند بالمتصفح بالمواقع العربية
إحصائية المواقع العربية تمت على حوالى 2800 موقع مختلف من خلال نتائج محرك البحث جوجل لحروف الأبجدية العربية و أشهر كلمات البحث العربية من أول 10 صفحات لكل منهم .
هل تعنى هذه الإحصائية أن 24% من المواقع العربية مكتوبة بمراعاة كاملة للشروط القياسية لكتابة صفحات الويب حيث أن نظام عرضها بالمتصفح هو Standrads ؟
لمعرفة نظام عرض المتصفح لأى صفحة من خلال الفايرفوكس , قم بالضغط على الزر الأيمن للماوس فى أى مكان بالصفحة و اختر View Page Info , الجزء Render mode هو الذى يوضح نظام عرض الصفحة كما هو موضح بالصورة .
ملحوظة : يجب كتابة (DOCTYPE) فى السطر الأول و بدون أى مسافات أو سطور تسبقه و إلا سيتم تنشيط نظام Quirks فى المتصفح كما فى موقع بوابة الحكومة المصرية حيث تمت كتابة DOCTYPE فى السطر الثانى .

ترميز المستند (CHARSET)

و الآن نأتى للخطوة التالية وهى تحديد ترميز الصفحة , و الذى يعني باختصار طريقة عرض و معالجة الحروف داخل الصفحة . و أشهر هذه الترميزات و الذى شهد نمواً كبيرا فى الويب فى الآونة الاخيرة هو الترميز العالمى utf-8 و الذى يدعم معظم اللغات المتداولة على الانترنت تقريباً
و كما نرى فى هذه الإحصائية فإنها تشير إلى اتجاه عالمى نحو الترميز utf-8 , و مع ذلك فإن نسبة كبيرة جداً من المواقع العربية لازالت تستخدم الترميز windows-1256 الذى لا يدعم سوى الحروف العربية و الانجليزية فقط !!

إحصائية ترميز المواقع تمت على حوالى 2800 موقع مختلف من خلال نتائج محرك البحث جوجل لحروف الأبجدية العربية و أشهر كلمات البحث العربية من أول 10 صفحات لكل منهم .
لماذا تتوقع استمرار المواقع العربية فى استخدام الترميز windows-1256 بالرغم من مشاكله المتعددة و قصوره الشديد فى دعم اللغات ؟
ولتعريف المتصفح بترميز الصفحة ليتم عرضها بطريقة صحيحة فى HTML4.0 و XHTML 1.0 كان يتم كتابة هذا السطر و الذى يحوى معلومات كثيرة غير مفيدة للمتصفح حيث أنه حتى لو تمت كتابته بشكل خاطئ سيتعرف المتصفح على الترميز كما أنه يصعب حفظه على مطوري الويب
فى HTML5 تم حذف كل المعلومات التى لا يحتاجها المتصفح و استبداله ب

و كما نلاحظ فإن HTML5 تعتمد منهج البساطة فى كتابة الكود و الاتجاه لعدم الاعتماد على أى محرر WYSIWYG او نسخ و لصق أى اجزاء من الكود لصعوبة حفظها .
و هذا هو كود الصفحة حتى الآن
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

الوسوم البنائية فى HTML5 (Structural Tags)

قبل أن أقوم بتعريف الوسوم البنائية الجديدة فى HTML5 و التى سأتطرق لها فى الدرس القادم بالتفصيل , سأبدأ بشرح أحد هذه الوسوم و هو الوسم header

رأس الصفحة (header)

و لنبدأ الآن بكتابة محتوى الصفحة داخل الوسم <body> و كما نعرف فان أول ما يتم كتابته فى معظم صفحات الويب هو رأس الصفحة (header) و الذى قد يحوى شعار الموقع و نص تعريفي و مربع البحث فى الموقع . و قد اعتاد مطوري الويب على استخدام div ليحوى هذا الجزء من الصفحة و إضافة الرمز التعريفي (id) ا header او top او topper أو اى كلمة تدل على الجزء الأعلى من الصفحة
1
<div id="header"></div>
و لكى أوضح الامر فإن هذا الجزء من مهاويس الموضح بالصورة هو الheader

فى HTML5 تم استبدال div التى تشير لرأس الصفحة بالوسم الوصفى الجديد header
1
<header></header>
بدايةً تعريف هذا الوسم طبقاً لوثائق HTML5 الرسمية
هو رأس أى جزء من الصفحة أو المقال و هو الذى يحتوى على العناوين الرئيسية h1-h6 , ليس هذا فحسب بل يمكن أن يحوى عناصر أخرى كشعار الصفحة أو مقدمة أو بحث فى الموقع .
و كما هو واضح من تعريف header فانه يمكن استخدامه أكثر من مرة فى نفس الصفحة سواء لرأس الصفحة الكامل أو لرأس المقالات او التدوينات او أجزاء الصفحة و بالطبع يشترط ان يحوى هذا الوسم على الوسم h1-h6 . و الآن سنقوم باضافة الوسم header و نكتب بداخله عنوان أول صفحة باستخدام HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>أول صفحة باستخدام HTML5</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>أول صفحة باستخدام HTML5</h1>
</header>
</body>
</html>
و لإضافة ستايل لهذا الوسم نقوم باستخدام
1
header { display:block;}
و الآن و بعد أن وضحت الوسم header , من وجهة نظرك ما هو تعريف الوسوم البنائية و ما أهميتها فى حين يمكن استخدام div بدلاً منها ؟!!
سوف تتم مناقشة هذا الدرس بالتفصيل عبر #IRC و skype خصوصاً النقاط التالية :
  • اقتراحات لتحسين كود المواقع العربية .
  • جدوى استخدام الوسوم البنائية بدلاً من div
  • المشاكل المتوقعة لاستخدام هذه الوسوم البنائية مع المتصفحات التى لا تدعم HTML5
و إذا كنت تود المشاركة فى هذا النقاش :
  1. يجب أن تكون لديك فكرة عامة عن هذا الدرس , و كذلك النقاط التى سيتم مناقشتها .
  2. إضافة تعليق على هذا المقال مع كتابة #IRC أو skype فى نهاية التعليق على حسب الوسيلة التى تُفضلها .
  3. التأكد من صحة البريد الإلكترونى فى التعليق حيث سيتم إرسال الدعوات عليه .

هذا المقال باعداد الزميل : عبد الله ضياء
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)