لغة HTML5 طفرة جديدة في شبكة الويب،،إستعدوا..!

يجري الإعداد علي قدم وساق لوضع مواصفات جديدة للغة HTML، اللغة المسئولة عن تصميم صفحات الويب. وقد أطلق علي الإصدارة الجديدة القادمة HTML5. الإصدارة الحالية هي HTML4.01.
الهيئة العالمية المسئولة عن وضع مواصفات لغة HTML تسمي بال(World Wide Web Consortium) المختصرة بالأحرف(W3C)-w3c.org
ولأن معرفة تصميم الويب أصبحت ذات أهمية قصوي، حتي لغير المتخصصين في المجال، فقد رأيت ضرورة إلقاء الضوء علي إصدارة HTML5. فالأمر يعني الجميع: مستخدمين – مصممين- ومطورين.
وبالرغم من أن إصدارة HTML5 القادمة لن تكون جاهزة بصورتها النهائية قبل العام 2014، لكن كل إصدارات المتصفحات الجديدة أصبحت جاهزة للتعامل معها،،،كما أن العالم كله أصبح مشدوهاً ومهتماً بأمرها غاية الإهتمام.
وقبل الخوض في المميزات غير المنظورة التي ستقدمها الإصدارة الجديدة HTML5--أود إلقاء الضوء علي المفاهيم الأساسية للغة HTML،وتصميم صفحات الويب،حتي تعم الفائدة للجميع متخصصين وغيرمتخصصين!
ما هي HTML؟
HTML هي اللغة المسئولة عن تنسيق صفحات الويب وت######## العناصر فيها. والكلمة إختصار لعبارة(Hypertext Markup Language). والعبارة نفسها تتكون من شقين(Hypertext) و(Markup Language )
Hypertext (هايبر تكست) تعني النصوص المتشعبة المتفاعلة. البادئة (Hyper) تعني أكثر أو فوق؛ والحقيقة أن محتويات صفحات الويب هي (أكثر) من مجرد نصوص، فهناك الصور،وهناك الملتيميديا من صوت وفيديو، وهناك الوصلات التشعبية.....و(أكثر)...!
أما الشق (Markup Language ) فيعني لغة التوسيم المستخدمة لتنسيق وإنشاء ال Hypertext!
ولغة HTML تحتوي علي أوسمة محددة ومعروفة (Well Known Tags)توضع بين علامتي < >. فمثلاً لإضافة سطر جديد فإننا نكتب:<br>، ولعمل خط أفقي فإننا نكتب: <hr>. وهذا النوع من الأوسمة يطلق عليه وسم وحيد(Standalone Tag). النوع الآخر من الأوسمة يطلق علية وَسْم حاوِي(Container Tag)؛وله بداية ونهاية ويؤثر فقط علي المحتويات الموجودة بين بدايته ونهايتة. فمثلاً الوسم <p> يستخدم لإدارج فقرة جديدة،ويأخذ هذا الشكل:
<p> تكتب الفقرة هنا </p>. نلاحظ أن نهاية الوسم هي نفس بدايته فقط مسبوقة بعلامة /
بواسطة لغة HTML نستطيع التحكم الكامل في ت######## النصوص-الوانها-ونوع خطوطها؛ووضع الصور،وإدارج الوصلات التشعبية و(أكثر). كما أننا نستطيع إستخلاص البيانات من الزائر بعمل نماذج التعبئة بعناصرها المختلفة من نصوص (Text)،قوائم منسدلة(Combo Box)، عناصر صح-خطأ(Check Box)، وعناصر الخيار من متعدد(Radio Buttons)، الخ.
يتم تفسير لغة HTML بواسطة برامج متخصصة تسمي بالمتصفحات(Web Browsers)، أشهر هذه المتصفحات هي إنترنت إكسبلولر(Internet Explorer)، فيرفوكس(Firefox)، قوقل كروم(Chrome)، أوبَرا(Opera)، الخ..كلٍ بمميزاته المختلفة.
والحرب مستعرة بين الشركات المنتجة لهذه المتصفحات كلٍ يحاول جذب أكبر عدد ممكن من المستخدمين..!
ولايوجد متصفح كامل،فننصح،هنا، بعدم الإعتماد علي متصفح واحد،،فيجب تنزيل أكثر من متصفح حتي يتسني للمستخدم الإستفادة القصوي من تلك الشبكة الساحرة...!
عند تحميل صفحة الويب بواسطة المتصفح،،فإنه يقوم بتفسيرها وإنشاء عناصرها ثم عرض الصفحة للزائر خلال رمشة عين(قبل أن يرتد اليك طرفك). والشئ الحاسم في سرعة عرض صفحات الويب هو وسيلة الإتصال بالإنترنت وسعتها؛ وليس نوع المتصفح!.
ولإضفاء مزيد من التفاعلية والقوة علي صفحات الويب، صممت لغة خصيصة لهذا الغرض وهي لغة "جافا سكربت"(Java Script)؛ وهذه الأخيرة هي لغة نصية يتم تفسيرها وتنفيذها بواسطة المتصفح. وهي موجهة لعناصر صفحة الويب التي أنشأها المتصفح. من أهم إستخدامات لغة "جافا سكربت" هي التحقق من مُدخلات المستخدام(User Input Validation) قبل إرسالها للسيرفر، إضفاء الحركية علي عناصر الصفحة(مثل الصور المتحركة أو النصوص البراقة متغيرة اللون). وبمرور الأيام وشدة الطلب، إكتسبت لغة "جافا سكربت" الكثير من القوة الإضافية، حيث يستطيع الزائر إرسال بياناته دون الحوجة الي إعادة تحميل كل الصفحة؛فيما يعرف بتكنيك أجاكس(Ajax Technique).
جدير بالذكر أن لغة "جافا سكربت" هي ليست لغة "جافا"، فهما لغتين مختلفتين تماماً،،فالأولي-"جافا سكربت"- متخصصة ،فقط، لمعالجة عناصر صفحة الويب ولا توجد خارج المتصفح،،والثانية-لغة "جافا"- هي لغة متعددة المهام توجد ،تقريبا، في اي مكان حتي بسيارة صديقك...!

إذا ما هو الجديد الذي ستقدمة الإصدارة الطفرة:HTML5؟؟؟
عناصر HTML التي يتم تنفيذها مباشرة بواسطة المتصفح، تسمي عناصر الدرجة الأولي(First Class HTML Elements) ؛والمعني يدل علي وجود عناصر درجة ثانية(علي الأقل)،،وهذا هو الواقع بالضبط...!
فلا يستطيع المتصفح عرض الفيديو والصوت مباشرةً ؛ حيث لا توجد عناصر، من الأصل، تقوم بهذه الأغراض في الإصدارة الحالية للغة HTML(HTML4.01)..!
لعرض محتويات الفيديو والصوت تتم الإستعانة ببرامج خارجية يطلق عليها عناصر الدرجة الثانية(Second Class Elements). ومن أهم هذه الوسائل برامج تُسمي (البَلَكَات)(Plug-Ins)،ومن الإسم نفهم أنها برامج خارجية مساعدة وليست جزء أصيل من لغة HTML!. أشهر هذه البَلَكات هو برناج الفلاش(Macromedia Flash)،الذي يستخدم لعرض فيديوهات اليوتيوب وما شابة. ومن هذه البَلَكات منتج منافس للفلاش انتجته شركة ميكروسوفت يسمي "سيلفر لايت" لكنه لم يجد الشعبية التي وجدها الفلاش.
يتم إدارج هذه البلكات عبر وسم خاص للغة HTML هوالوسم <embed>؛ ويتيح لنا هذا الأخير إختيار البَلَك المطلوب بصورة مباشرة أو غير مباشرة. الصورة غير المباشرة تقتضي ان يفحص المتصفح إمتداد الملف المرسل،،فمثلاً لملف بالإمتداد (.rm) ،يبحث المتصفح عن برنامج الريال بلير(Real Player) ل(تلعيب) المحتوي!. وسواء إن كان الإدارج مباشر أو غير مباشر،،ففي جميع الأحوال يجب أن يكون البرنامج الخارجي المطلوب مثبت علي جهاز المستخدم،،وإلا فالسماع والمشاهدة سُديً...!
البلَكات نفسها لها إصدارتها المختلفة ويجب علي المستخدم التأكد دوما من انه يملك الإصدار الأخير حتي يستطيع التمتع بكل مزايا هذه الشبكة الساحرة...!

HTML5 والإراحة من كل هذا العناء والي الأبد:
الشئ الحاسم الذي أضيف في الإصدارة الطفرة(HTML5) هو إمكانية (تلعيب) الفيديو والصوت مباشرة بواسطة المتصفح عبر أوسمة جديدة أضيفت في الإصدارة 5. فلا حوجة ،في المستقبل القريب، للبلكات الخارجية مثل الفلاش والسيلفر لايت. كما أضيفت دوال جديدة للغة "جافا سكربت" يستطيع بواسطتها مطور الويب التحكم كلية في كيفية (تلعيب) الفيديو والصوت.
فمواصفات HTML5 قدمت إضافات جديدة هامة للغاية، نذكر منها:
- إمكانية (تلعيب) ملفات الفيديو والصوت مباشرة بواسطة المتصفح عبر عناصر جديدة أضيفت للغة HTML، كما أضيفت دوال جديدة للغة جافا سكربت للتحكم في هذه العناصر الجديدة.
- أستحدث عنصر جديد يسمي بالكانفس(Canvas)،،وهو عنصر موجة لكل معالجات الجرافيكس(Graphics) والحركة(Animation)، ومعالجة الصور(Image Processing). كما أضيفت دوال جديدة للغة جافا سكربت تتعامل مع العنصر الجديد(Canvas). هذا العنصر يتيح للمطورين إمكانات مهولة في تصميم صفحات ويب تحتوي علي مواد تعليمية، العاب، رسومات،،،،.........الي اللانهاية!
- أستحدثت عناصر جديدة لإستخلاص البيانات من المستخدم(عناصر جديدة للنماذج) مثل المنزلق(slider) وعنصر الزيادة والنقصان(Updown). وبالطبع تطوير لغة "جافا سكربت" كي تتعامل مع هذه العناصر.
- إضافة عناصر تتعامل مع الGPS(Geographical Positioning System)، وتمكين المتصفح من معرفة مكان جهاز المستخدم مباشرة وتوفير كل البيانات عبر لغة "جافا سكربت"! وهنا يستطيع مطور الويب إنشاء صفحات تتعامل مباشرة مع مكان المستخدم الجغرافي وبدقة كبيرة. وهذا النوع من التطبيقات سيكون ذي فعالية كبيرة في أجهزة مثل الموبايل والآي فون...!
- إمكانية التعامل البرمجي مع الشبكات عبر دوال السوكت(Socket)التي أضيفت للغة "جافا سكربت"
- و(أكثر)...!

إذا كيف تلتحق بركب الHTML5؟؟؟؟
غير مطلوب منك أي جهد سوي ترقية متصفحك لإصدارة متوافقة مع مواصفات HTML5!،،وعندها سيقوم المتصفح بباقي الدور، فالأوسمة الجديدة أصبحت جزء أصيل من لغة HTML،،وبالتالي تنفذ مباشرة بواسطة المتصفح دون الحوجة الي صداع البرامج الخارجية والبلكات!

ماهي أفضل المتصفحات المتوافقة مع HTML5؟؟
حسب الإحصاءات التي اتيحت لي، فإن متصفح إنترنت إكسبلولر الإصدارة 9 هو الأكثر دعما لمواصفات HTML5، وهو ينزل من هذه الوصلة:
وصلة غير مباشرة:
http://www.microsoft.com/download/en/default.aspx

وصلة مباشرة
http://windows.microsoft.com/en-US/internet-e...LIGHTS_121LMUS007473

كيف أعرف مستوي الدعم لإصدارة HTML5 من متصفحي الحالي:
لمعرفة مستوي الدعم الذي يوفرة متصفحك لإصدارة HTML5، قم بزيارة هذا الموقع،،
http://html5test.com/
وسوف يعطيك مستوي التوافقية في شكل نقاط

مع الأمنيات لكم بإستخدام مفيد ومثمر للشبكة العنكبويتة....!

مكي الأحمدي-خبير تطوير الويب

أهلاً يا باشمهندس ياخي
الله يخدر ضراعكـ
ده الكلام المفيد
شكراً مكي الأحمدي وأتمنى صادقاً أن تواصل في هذا الباب المهم
وراجنكـ نحن بعون الله

مشكور على الشرح الرائع
وبوست مفيد جدا

Quote: هلاً يا باشمهندس ياخي الله يخدر ضراعكـ ده الكلام المفيد شكراً مكي الأحمدي وأتمنى صادقاً أن تواصل في هذا الباب المهم وراجنكـ نحن بعون الله

الف شكر الأخ عمران،،،سوف امدكم بالمزيد بإذن الله

شكراً جزيلاً على المشاركة الرائعة التي تفيد المتخصصين وغير المتخصصين .

أتابع باهتمام وانتظر مزيداً من المعلومات المفيدة .



http://dev.w3.org/html5/spec/Overview.html

شكر مربع يا مكي..
وده المفيد زي ما قاال عمران.
حا اتابع بوستك ده بي كل 'اضنين تشوف وعينين تسمع'*.
وانعل ابو ساس يسوس..

دي مساهمه سغيري مني أرجو إنها تكون مفيده لمن قصدتهم بالاستفاده من بوستك القيم هذا
http://www.youtube.com/watch?v=siOHh0uzcuY


-
بكري
ياخ افتح للشليخ الما عندو معنى ده



------------------
* سيد احمد عبدالحميد

HTML5
From Wikipedia, the free encyclopedia
HTML5
(HyperText Markup Language)

Filename extension .html, .htm
Internet media type text/html
Type code TEXT
Uniform Type Identifier public.html
Developed by World Wide Web Consortium and WHATWG
Type of format Markup language
Extended from SGML
Extended to XHTML5
Open format? Yes
Website whatwg.org/html
www.w3.org/TR/html5
XHTML5
Filename extension .xhtml, .xht, .xml, .html, .htm
Internet media type application/xml, application/xhtml+xml
Developed by World Wide Web Consortium and WHATWG
Type of format Markup language
Extended from XML, HTML5
Open format? Yes
Website www.whatwg.org/specs/web-apps/current-work/mu...he-xhtml-syntax.html
HTML
HTML and HTML5
Dynamic HTML
XHTML
XHTML Basic
XHTML Mobile Profile and C-HTML
Canvas element
Character encodings
Document Object Model
Font family
HTML editor
HTML element
HTML Frames
HTML5 video
HTML scripting
Web browser engine
Quirks mode
Style sheets
Unicode and HTML
W3C and WHATWG
Web colors
Web Storage
WebGL
Comparison of
document markup languages
web browsers
layout engines for
HTML
HTML5
HTML5 Canvas
HTML5 Media
Non-standard HTML
XHTML (1.1)
v d e
HTML5 is a language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software.[1] It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997)[2] and as of January 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.[2]
Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.[3] For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011 research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013.[4]
In particular, HTML5 adds many new syntactical features. These include the new