قبل أن أبدأ بطرح هذا الموضوع، أود أن أذكر أني أعلم جيداً أن هذا الموضوع لن يجذب اهتمام أكثر من نسبة 5% من أعضاء المنتدى (و هذه نسبة متفائله)، لكن هدف طرحي له هو أن نظل واعيين و متيقظين للإنجازات الحديثه التي تحدث في عالم الويب و مواقعه، و الأمر الآخر هو أن نطور أنفسنا قليلاً عن مستوى مواقع التشات و المنتديات و المجلات و غيرها من الأمور التي كثيراً ما نصحنا بالإبتعاد عنها.
XHTML2.0
و كما يوحي الإسم، فهذه اللغه هي النسخه الأحدث من لغة الـ HTML، هذه النسخه لم تظهر بعد لاستخدام الجمهور، بل مازالت تحت التطوير، أي أنه لم يتم دعمها من أي من المتصفحات، لكن هذا لا يمنع من التحدث عنها، و النظر في التطورات و التغيرات التي حدثت لها بمقارنتها مع النسخ 1.0 و 1.1 من لغة الـ XHTML.
التغير الأكثر أهميه في هذه النسخه هو أنها ستجبر مصممي المواقع على فصل المحتويات عن التصميم. هذا الأمر الذي تجاهله الكثير من المصممين في السنين التي مضت عندما كانو يستخدمون النسخ السابقه. الآن لن يمكنهم التهرب من هذا الأمر مره أخرى. ففي هذه النسخه سيتم الإستغاء عن بعض الوسوم التي كانت تهتم بمظهر المحتويات كالوسمين <b>, <i>، كما سيتم التخلص من بعض الوسوم الأخرى مثل <img>, <br />. هذا بالإضافه إلى أنه سيتم إضافة بعض الوسوم الجديده و التي سنتكلم عنها لاحقاً.
التغيرات:
1- لن نرى الوسم <img>بعد الآن:
وسم إدراج الصور الذي تعودنا عليه أثناء كتابتنا لصفحات مواقعنا سيصبح شيئاً من الماضي في الـ XHTML 2.0، فقد يتم استبدالها بالوسم <object> فبدل أن ندرج الصوره بالشكل التالي:
<img src=”an_image.png” alt=”some description” />
ستصبح بالشكل التالي:
2- استبدال الوسم <br /> بالوسم <line>:كود HTML:<object data=”an_image.png” type=”image/png”>some description</object>
بالفعل! هذا الوسم الذي استعملناه كثيراً في أماكن لا يجب أن نستعمه فيه، الآن حان الوقت لكي نكف عن هذا التصرف (مجبرين لا راغبين)، و ذلك لأن هذا الوسم سيتم استبداله بوسم آخر يتم استخدامه فقط في المكان المناسب و الذي يجب أن يستخدم فيه، و المثال التالي سيوضح الفرق:
في الـ XHTML1.0:
في الـ XHTML2.0:كود HTML:بعض الكلام في السطر الأول<br /> و من ثم بعض الكلام في السطر الثاني
الهدف من هذا الأمر هو جعلك قادراً على التحكم بهذا الوسم من خلال الـCSS، بالإضافة لما ذكرت هو عدم استخدام هذا الوسم في أماكن لا يفضل إستخدامه فيها.كود HTML:<line>بعض الكلام في السطر الأول</line> <line>بعض الكلام في السطر الثاني</line>
3- لن نحتاج للوسم <a> لوصل الصفحات ببعضها البعض:
قد تستغرب من هذه النقطه، ولكن إن رأيت البديل فستتوضح لك المعلومه أكثر:
في الـ XHTML1.0
في الـ XHTML2.0كود HTML:<h1><a href=”index.html”>عنوان رئيسي</a></h1>
أي أن الرابط سيتم وضعه بأي وسم نريده دون الحاجه للوسم <a> لوصل الصفحات.كود HTML:<h1 href=”index.html”>عنوان رئيسي</h1>
4- أنواع جديده من اللوائح (Lists)
في هذه النسخه الجديده، سيتوفر لنا نوعين جديدن من اللوائح، و هما كالتالي:
النوع الأول:
هو عباره عن لائحه يتم استخدامها في عملية الإبحار navigational list، كما في القائمه الرئيسية للموقع، فبدل أن كنّا نستعمل اللائحه المرتبه أو غير مرتبه، الآن يوجد لدينا هذه اللائحه لغستخدامها لهذا الغرض.
مثال عليها:
النوع الثاني:كود HTML:<nl> <label>القائمة الرئيسية</label> <li href=”aboutme.html”>السيرة الذاتية</li> <li href=”contactme.html”>اتصل بي</li> </nl>
هو عباره عن لائحه للتعريفات definition list، قمثلا لو كان لديك موقع به بحث من البحوث العلميه، و أردت أن تضع في صفحة من الصفحات لائحه بالتعريفات للكلمات العلميه تم استخدامها في ذلك البحث. في هذه اللائحه يوجد أربع عناصر و هم كالتالي:
<dl>: يجب على جميع العناصر أن يكونوا بداخل هذا الوسم
<di>: هذا الوسم يستخدم لتفريق كل تعريف عن الآخر
<dt>: هذا الوسم يستخدم لوصف عنوان التعريف
<dd>: هذا الوسم يستخدم لكتابة التعريف بداخله
فيكون الناتج كالتالي:
كود HTML:<dl> <di> <dt>التعريف الأول</dt> <dd>هو عباره عن تعريف يتم التعرف عليه من خلال هذا التعريف</dd> </di> <di> <dt>التعريف الثاني</dt> <dd> هو أيضاً تعريف يتم التعريف عليه من خلال هذا التعريف</dd> </di> </dl>
5- طريقة جديده لاستخدام العناوين الرئيسية
هذه الطريقة وجدت فقط بعد أن أصبح الكثير من المصممين يستخدمون وسوم العناوين الرئيسية لتكبير حجم النصوص مع أن تلك النصوص ليست عناوين رئيسية، لذا كان من الضروري الخروج بهذه الطريقه لإنهاء ذلك العصر من التجاوزات.
كيفية عمل هذه الطريقه:
هذه الطريقة تعتمد على وجود نوعين من الوسوم و هما<h> و <section>، فالأول يتم استخدامه لتعريف العنوان، أما الثاني لتحديد نطاق القسم، لشرح هذه الطريقه أكثر دعونا نلقي نظره على الكود التالي:
هذه هي الأوامر التي كنا نستخدمها لكتابة قسمين الأول فيه عنوان رئيسي و آخر فرعي، أما القسم الثاني ففيه عنوان رئيسي فقط. أما بالـ XHTML2.0 فستكون الطريقه التي سنكتبها به هي:كود HTML:<h1>Heading1</h1> <p>text text text text text text text text text</p> <h2>heading 2</h2> <p> text text text text text text text text text</p> <h1>Heading 1 again</h1> <p>text text text text text text text text text </p>
6- تغييرات على الوسم <p>:كود HTML:<section> <h>Heading 1</h> <p>text text text text text text text text</p> <section> <h>Heading 2</h> <p>text text text text text text text text</p> </section> </section> <section> <h>Heading 1 again</h> <p>text text text text text text text text </p> </section>
في النسخ السابقه من الـ XHTML كان من غير الجائز استخدام أي وسوم أخرى بداخل الوسم <p>، أما في هذه النسخه الجديده فسيكون الأمر مختلفاً، فسيبصح بالإمكان إنشاء جدولاً أو لائحه مثلاً بداخل إحدى الفقرات كالتالي:
7- تغيير اسم الوسم <hr />:كود HTML:<p> Text text text text text text <ul> <li>an item</li> <li>a second item</li> <li>a third item</li> </ul> Text text text text text </p>
تم تغيير اسم هذا الوسم فقط لتوضيح الهدف من استخدامه ليس أكثر. الإسم الجديد هو <separator />.
8- الدعم الكامل للغة الـ XForms:
هذه اللغه التي ستكون مستقبلاً للنماذج الحاليه المستخدمه في الـ XHTML، ستصبح هي اللغه الإفتراضيه في النسخه الجديده. أي أننا لن نرى الوسم <form> بعد نزول هذه النسخه و اعتمادها.
كنت قد وضعت درساً عن هذه اللغه قبل بضعة شهور، و لكن للتذكير، هذا هو الشكل الذي ستكون عليه هذه اللغه:
كما ذكرت بأول هذا المقال أن هذه النسخه لم تعتمد بعد من الـ W3C، بل حتى أنها لم تنتهي بعد من الإعداد، لكن هذا لا يمنع من التعرف عليها، فنكون متحضرين و مستعدين لها، و نبدأ باستعمالها فور ظهورها.. و الحقيقه أنها بالفعل نسخه رائعه و سنستمتع كثيراً في استخدامها..كود HTML:<head> <xform:model> <xforms:instance> <name /> <age /> <gender /> </xforms:instance> <xforms: submission action = “post.php” method = “post” /> </xforms:model> </head> <body> <input ref=”name”> <label>Name: </label> </input> <input ref=”age”> <label>Age: </label> </input> <input ref=”gender”> <label>Gender: </label> <input> <submit submission = “submit”> <label>Send</label> </submit> </body>
تحيتي للجميع..
عماد الصدر
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Dr-dre67
