لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 10/25/22 in مقالات البرمجة
-
تُعَدّ HTML أو لغة توصيف النصوص التشعبية بأنها الشيفرة التي تُستخدَم في هيكلة صفحات ويب ومحتوياتها، فقد تُنظَّم الصفحة مثلًا على هيئة مجموعة من المقاطع النصية أو قائمة من النقاط أو أن تعرض الصور أو جداول البيانات، وسنقدِّم لك في هذا المقال مجموعة معارف أساسية لفهم لغة HTML ووظائفها. ما هي HTML؟ تُعَدّ HTML بأنها لغة توصيفية تُعرِّف هيكلية المحتوى الذي تقدِّمه الصفحة، وتتألف اللغة من سلسلة من العناصر التي تستخدِمها لتضمين أو تغليف الأجزاء المختلفة من المحتوى لتظهر بطريقة محددة أو لتعمل بطريقة محددة، كما يمكن أن تربط الوسوم المغلقة enclosing tags كلمةً أو صورةً بمكان آخر، أو يمكنها عرض الكلمات عرضًا مائلًا أو تكبّر خط الكتابة أو تصغّره وهكذا، وإليك على سبيل المثال المحتوى التالي الذي لا يتعدى السطر: My cat is very grumpy إذا أردنا أن يظهر السطر كما هو، فيمكننا أن نجعله فقرةً نصيةً بتضمينه داخل وسمَي فقرة، أي <p> </p>: <p>My cat is very grumpy</p> تشريح عنصر HTML دعونا نستكشف عنصر الفقرة السابق بصورة أعمق: إن الأجزاء الرئيسية من العنصر هي: وسم البداية Opening tag: يشير هذا الوسم إلى النقطة التي يبدأ عندها العنصر أو التي يبدأ تأثيره عندها (بداية الفقرة النصية في حالتنا)، ويتكوّن من اسم العنصر (p في حالتنا) محاطًا بقوسَي زاوية. وسم النهاية Closing tag: يشير هذا الوسم إلى نهاية العنصر (نهاية الفقرة في حالتنا)، ويشبه وسم البداية لكنه يبدأ بشرطة أمامية / قبل اسم العنصر، كما يُعَدّ إغفال وسم النهاية من أكثر الأخطاء التي يرتكبها المبتدئون، وقد تفضي إلى نتائج غريبة بالفعل. المحتوى Content: يشير إلى المحتوى الفعلي للعنصر، وهو في حالتنا مجرد نص. العنصر Element: ويتكون من وسمَي البداية والنهاية والمحتوى معًا. يمكن أن تمتلك العناصر سمات attributes تبدو شبيهةً كما يلي: تتضمن السمات معلومات إضافية عن العنصر لا تريدها أنت أن تظهر مثل جزء من المحتوى الفعلي، فالكلمة class في الشكل السابق هي اسم السمة وقيمتها هي editor-note، إذ تسمح لك السمة class بإعطاء العنصر معرِّفًا عامًا يمكن استخدامه لتطبيق معلومات تنسيق على هذا العنصر أو أي عنصر تحمل السمة class فيه القيمة نفسها أو غيرها. لكتابة السمة لا بد من: مسافة فارغة بينها وبين اسم العنصر، أو بينها وبين السمة التي تسبقها في حال امتلك العنصر سمتَين أو أكثر. اسم السمة تليها إشارة المساواة =. قيمة السمة بين إشارتَي تنصيص. ملاحظة: يمكنك عدم وضع قيمة السمة بين إشارتي تنصيص إذا لم تتضمن رمز ASCII الخاص بالمسافة الفارغة أو أيّ من المحارف " أو ' أو ` أو = أو < أو >، لكن يفضَّل وضع قيمة السمة دائمًا داخل إشارتَي التنصيص لأنها تجعل الشيفرة واضحةً ومفهومةً. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن العناصر المتداخلة يمكن وضع عناصر داخل عناصرأخرى أيضًا وهذا ما يُعرف بالتداخل nesting، فإذا أردنا أن تظهر الكلمة "very" في الفقرة "My cat is very grumpy" بخط سميك، فيمكن تغليف هذه الكلمة داخل العنصر <strong></strong> كما يلي: <p>My cat is <strong>very</strong> grumpy.</p> لكن عليك التأكد دومًا من أنّ العناصر متداخلة بصورة صحيحة، فقد فتحنا في المثال السابق العنصر <p> أولًا ثم <strong>، وبالتالي توجَّب إغلاق العنصر الثاني آخر من فتح على الشكل <strong/> ثم إغلاق الأول <p/>، أي أنّ التداخل التالي غير صحيح: <p>My cat is <strong>very grumpy.</p></strong> لا بد من فتح وإغلاق العناصر بالصورة الصحيحة لكي تظهر بوضوح داخل أو خارج عنصر آخر، فإذا تداخلت بالشكل الذي عرضناه في الشيفرة السابقة، فسيحاول المتصفح أن يخمّن بأفضل شكل ما تحاول قوله، مما قد يتسبب بظهور نتائج غير متوقعة، فلا تفعل ذلك. العناصر الفارغة تُدعى بعض العناصر التي لا تحمل أيّ محتوى بالعناصر الفارغة Empty elements مثل العنصر <img> الذي استخدمناه سابقًا: <img src="images/firefox-icon.png" alt="My test image"> إذ يمتلك العنصر سمتَين ولا يمتلك وسم نهاية <img/> أو محتوى، والسبب أن عنصر الصورة لا يغلِّف محتوًى لكي يتأثر بوجود أو عدم وجود وسم النهاية، فوظيفته هي إدراج صورة في صفحة HTML في المكان الذي يظهر فيه. تشريح مستند HTML سنشرح الآن الطريقة التي نجمّع بها عناصر HTML المفردة لنشكِّل صفحةً كاملةً، فلنعُد قليلًا إلى الشيفرة التي وضعناها في الملف index.html والذي رأيناه أول مرة في المقال السابق: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> </body> </html> لدينا هنا الأشياء التالية: <DOCTYPE html!>: وهو عنصر تمهيدي مطلوب، فقد كانت الغاية من هذا العنصر في الأيام الأولى (1991/1992) أن يعمل على أساس رابط إلى مجموعة من القواعد التي ينبغي أن تحققها صفحة HTML لكي تُعَدّ صفحةً جيدةً بما في ذلك الاكتشاف التلقائي للأخطاء وغيرها من النقاط المفيدة، وليس لهذا العنصر في أيامنا هذه وظيفةً سوى التأكد من سلوك المستند للسلوك المطلوب، وهذا كل ما عليك معرفته حاليًا. <html></html>: يضم هذا العنصر كامل محتوى الصفحة، ويُدعى أحيانًا بالعنصر الجذري root element. <head></head>: يعمل على أساس حاوية لتضع فيها كل الأشياء التي تريدها في صفحتك ولكنها لا تمثِّل محتوًى تريد إظهاره لمتابعيك مثل الكلمات المفتاحية ووصف الصفحة الذي تريد إظهاره عندما يعرضها محرك البحث على أساس نتيجة وقواعد CSS لتنسيق محتوى الصفحة ونوع المحارف التي تستخدمها في الصفحة وغيرها الكثير. <"meta charset="utf-8>: يضبط هذا العنصر مجموعة المحارف التي تستخدِمها في الصفحة، وهنا اخترنا المجموعة UTF-8 التي تضم محارف الأغلبية الساحقة من اللغات المكتوبة، إذ تستطيع هذا المحارف أن تعرض الآن أيّ محتوى نصي بأيّ لغة قد تضعه في صفحتك، ولا مبرر لعدم ضبط مجموعة المحارف المستخدَمة، كما ستساعدك على تحاشي الكثير من الأخطاء لاحقًا. <title></title>: يضبط هذا العنصر عنوان صفحتك الذي يظهر أعلى المتصفح عند تحميل الصفحة، كما يُستخدم لوصف الصفحة عندما تضيفها إلى قائمة الصفحات المفضلة. <body></body>: يضم المحتوى الذي تريد عرضه على زائري صفحتك بأكمله، سواءً كان نصًا أو صورًا أو فيديو أو ألعاب أو أيّ شيء آخر. الصور لنعُد إلى العنصر <img> مجددًا: <img src="images/firefox-icon.png" alt="My test image"> يُدرِج هذا العنصر صورةً ضمن الصفحة في المكان الذي تضعه فيه، إذ نحدِّد الصورة المعروضة بكتابة عنوانها على أساس قيمة للسمة src -أي مصدر source-، كما يمتلك عنصر الصورة أيضًا سمةً أخرى تُدعى alt -أي بديل alternative-، إذ تُستخدَم هذه السمة لعرض نص بديل عن الصورة للأشخاص الذين لا يستطيعون رؤيتها لأسباب عديدة منها: المشاكل البصرية: إذ يستخدِم الكثيرون من فاقدي البصر أدوات تُدعى قارئات الشاشة تستطيع قراءة النص البديل. أخطاء في عرض الصورة: حاول مثلًا تغيير المسار الموجود داخل السمة في مثالنا السابق ثم احفظ الملف وأعد تحميله ضمن المتصفح، إذ لن تظهر الصورة، وإنما نص كما يلي: ما يهم فعلًا في النص البديل هو أن يكون وصفيًا تمامًا لمحتوى الصورة، إذ ينبغي أن يزوِّد النص القارئ بمعلومات كافية ليكوِّن فكرةً جيدةً عن محتوى الصورة، فالنص البديل "My test image" في مثالنا غير جيد على الإطلاق، وسيكون الأنسب لشعار فايرفوكس هو "Firefox logo: a flaming fox surrounding the Earth" وبالعربية "شعار فايرفوكس: ثعلب ملتهب يحيط بالكرة الأرضية"، أي حاول إذًا ابتكار نصوص بديلة جيدة تصف الصورة. توصيف محتوى صفحات HTML يغطي هذا القسم من المقال عناصر HTML الأساسية لتوصيف محتوى الصفحات. العناوين تساعدك العناوين Headings على عرض أجزاء من محتوى الصفحة على أساس عناوين رئيسية أو فرعية، وكما هو حال الكتب التي تحمل عنوانًا رئيسيًا وعناوين للفصول وعناوين فرعية في كل فصل، تحمل صفحة HTML الميزة ذاتها، إذ تضم اللغة عناوين تتدرج إلى مستويات ستة من <h1> إلى <h6>، وغالبًا ما ستستخدِم ثلاث إلى أربع مستويات كحد أقصى. <!-- 4 heading levels: --> <h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4> ملاحظة: كل ما يرد بين الوسمين <-- و --!> في صفحة HTML هو تعليق سيتجاهل المتصفح محتواه عندما يصيّر الشيفرة ولن يُعرَض على الشاشة، إذ تساعدك التعليقات في وضع ملاحظات مفيدة عن مقطع محدَّد من الشيفرة أو عن منطق معيّن اعتمدته. حاول الآن وضع عنوان فرعي في صفحة HTML التي نبنيها فوق العنصر <img> مباشرةً. ملاحظة: تملك العناوين من المستوى الأول تنسيقًا ضمنيًا خاصًا، لذلك لا تستخدِمها لتكبير النص أو جعله سميكًا Bold لأنها تُستخدَم لغايات أخرى مثل سهولة الوصول أو لأسباب أخرى مثل تحسين محركات البحث، لذا حاول أن تعطي تدرجًا منطقيًا للعناوين في صفحتك دون تجاوز أيّ مستوى إلى ما دونه مثل الانتقال من 4 إلى 2 مباشرةً دون المرور بالمستوى 3. الفقرات النصية يحتوي العنصر <p> كما شرحنا سابقًا مقطعًا نصيًا، وستستخدمه بكثرة عندما ترمز المحتوى النصي في الصفحة: <p>This is a single paragraph</p> يمكنك على سبيل التجربة إضافة عينة من نص ما على هيئة فقرة نصية أو أكثر تحت العنصر <img> في الصفحة التجريبية التي نبنيها. القوائم تُصنَّف كمية لا بأس بها من محتوى ويب على صورة قوائم Lists وتمتلك HTML القدرة على ذلك، إذ تتضمن القائمة عنصرين على الأقل، وأكثر القوائم شيوعًا هي القوائم المرتبة Ordered وغير المرتبة Unordered: القوائم المرتبة: توضع بنود هذه القائمة ضمن العنصر <ol>، وتُستخدَم لعرض القوائم التي يهمنا فيها ترتيب العناصر مثل وصفات تحضير الطعام أو ترتيب فِرق دوري لكرة القدم وغيرها. القوائم غير المرتبة: توضع بنود هذه القائمة ضمن العنصر <ul>، وتُستخدَم لعرض القوائم التي لا نهتم فيها لترتيب العناصر مثل قائمة التسوق. يوضع كل بند من بنود القائمة ضمن العنصر <li> -أي بند من قائمة list item-، فإذا أردنا مثلًا تحويل جزء من الفقرة النصية التالية إلى قائمة: <p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p> فيمكننا تعديل توصيف محتوى الفقرة ليصبح كما يلي: <p>At Mozilla, we’re a global community of</p> <ul> <li>technologists</li> <li>thinkers</li> <li>builders</li> </ul> <p>working together ... </p> الروابط تُعَدّ الروابط العنصر الأكثر أهميةً، فهي ما تجعل من الويب شبكةً حقيقيةً، إذ نستخدِم العنصر البسيط <a> لإنشاء رابط، وهو اختصار للكلمة "anchor"، ولتجعل جزءًا من الفقرة النصية السابقة رابطًا اتبع الخطوات التالية: اختر جزءًا من النص وليكن "Mozilla Manifesto". ضَع هذا الجزء ضمن الوسمَين <a></a> كما يلي: <a>Mozilla Manifesto</a> زوّد الرابط بعنوان للانتقال إليه من خلال السمة href كما يلي: <a href="">Mozilla Manifesto</a> اكتب العنوان المطلوب بين علامَتي تنصيص السمة href كما يلي: <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> قد تصل إلى نتيجة غير متوقعة إذا حذفت بداية العنوان الذي يُدعى بروتوكول، أي //:https أو ://http، لذلك تحقق من وصولك إلى المكان المطلوب عند النقر على الرابط. ملاحظة: قد يبدو اختيار اسم السمة href غامضًا في البداية، فإذا صعُب عليك الأمر، تذكر أنه مشتق من كلمتَي "مرجع إلى نص تشعبي hypertext reference" خلاصة إذا اتبعت التوجيهات التي أشرنا إليها خلال اطلاعك على هذا المقال، فستبدو صفحة الويب التي نبنيها بالشكل التالي تقريبًا إذا لم تغير في العناوين أو النصوص. إذا لم تجد عملك صحيحًا، فيمكنك دائمًا موازنة ما فعلته مع النسخة الجاهزة على جيت-هاب. ترجمة -وبتصرف- للمقال HTML Basics. اقرأ أيضًا المقال السابق: التعامل مع الملفات في عملية تطوير موقع الويب توثيق لغة HTML العربي مكونات الويب: عناصر HTML المخصصة وقوالبها دليل: تعلم لغة HTML1 نقطة -
أداة البناء Grunt أو Gulp، مكتبة require.js، browserify، الإصدار السادس من ES، المفسرات، أطر عمل React و Angular و Amber، التعابير المغلقة (closures)، سلسلة prototype. ارتفاع في ضغط الدم يؤدي إلى سكتة دماغية. حسنًا، تطوير الويب أمرٌ ممتع جدًا، لكن JavaScript مروعة! تجد نفسك منسجمًا تمامًا مع جميع جوانب تطوير الويب، لكن عندما يأتي الأمر إلى JavaScript فستشعر أنَّ جزءًا كبيرًا من المعلومات الأساسية ينقصك بينما يعرفه الآخرون، والذي سيؤدي إلى جعلهم يفهمون سكربتات JavaScript. نعم، الحقيقة هي أنَّك تفتقد بالفعل إلى بعض القطع؛ لكن هذا لا يعني أنَّ التوجه الحالي لتطوير الواجهات الأمامية ليس مجنونًا! اطمئن، فأنت لستَ بمفردك، لذا اسحب كرسيًا واجلس، وجهِّز نفسك لكتابة تطبيق JavaScript. أوّل خطوة هي ضبط بيئة التطوير المحلية، لذا اتخذ قرارك: هل ستستخدم Gulp، أم Grunt، لا! سأستعمل سكربتات NPM. هل أستعمل Webpack أم Browserify أم Require.js؟ هل أتخذ قرارًا مصيريًا بالانتقال إلى الإصدار السادس من ES؟ أليس ضروريًا أن أضع مرجعًا عن أمراض القلب بجواري؟ كيف سأنظِّم اختبار الشيفرات؟ هل من إطارِ عملٍ تنصحني به؟ أليس من الأفضل تشغيل الاختبارات من سطر الأوامر، لنستعمل إذًا PhantomJS؟ مع أي إطارٍ أذهب: Angular أم React؟ ربما Ember؟ ماذا عن Backbone؟ ربما قرأتَ بعض صفحات توثيق React ووجدتَ فيها أنَّ «Redux هو حاويةٌ ذاتُ حالةٍ قابلةٍ للتوقع لتطبيقات JavaScript» وبدت على وجهك أمارات الرضى، فمن المؤكد أنَّك ستحتاج إلى هذه الميزة العظيمة، بغض النظر عن أنَّك لم تفهم حرفًا من شرحها. السؤال الآن هو: لماذا أصبح تطوير تطبيقات JavaScript أمرًا يدفع إلى الجنون؟! دعني أساعدك لفهم سبب ذلك. لنبدأ بمثالٍ بسيطٍ ثم سنستعرض صورًا جميلةً توضِّح وجهة نظري. هذا تطبيق «Hello, World!» مكتوبٌ باستخدام React: // main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); لم ننتهِ منه بعد: $ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js هنالك عدِّة خطوات ناقصة هنا، مثل تثبيت مكتبة browserify أو ما الذي عليك فعله لتشغيل الصفحة في المتصفح، إذ لا يبدو أنَّ ما سبق سيُنشِئ صفحة ويب قادرة على فعل أيّ شيء! بعد أن تنتهي من إنجاز ما سبق، فستجد ملفًا يدعى bundle.js يحتوي على تطبيق «Hello, World!» السابق المكتوب بمكتبة React والذي يضم حوالي 19374 سطرًا برمجيًا، وكل ما فعلتَه هو تثبيت browserify و babelify و react-dom، التي «تزن» آلاف الأسطر البرمجية. هذه صورة تعبيرية عن برنامج «Hello, World!» في React: حسنًا، هذا تطبيق «Hello, World!» باستخدام JavaScript دون مكتبات: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Hello World</title> </head> <body> <div id="container"></div> <script> document.body.onload = function(){ var container = document.getElementById("container"); container.innerHTML = '<h1>"Hello, world!"</h1>'; } </script> </body> </html> هذا كل ما في الأمر! 18 سطر برمجي (يمكن اختصارها إلى أقل من ذلك)، التي تستطيع نسخها ولصقها في ملفٍ باسم index.html وتنقر نقرتين عليه مما يفتحه في متصفحك. يا للبساطة! إذا كنتَ تفكِّر في هذه اللحظة «أليس إطار React يفعل أكثر من ذاك المثال البسيط الذي كتبته، والذي لا يرقى أن يكون تطبيق JavaScript» فأنت مصيبٌ (تقريبًا)، وعلى بعد خطوة واحدة من فهمك لماذا كل هذا التعقيد. انظر إلى هذه الصورة: أغلبية تطبيقات JavaScript التي ستعمل عليها ستقع في مكانٍ ما في منتصف المنحني الجرسي (bell curve) السابق. وإذا كنتَ في منتصف المنحني السابق وبدأت تطبيقًا بالاعتماد على React فسوف ينتهي بك المطاف بهندسة تطبيقك زيادةً عن اللزوم من بدايته. وهذا هو سبب تعقيد تطوير تطبيقات JavaScript، لأنَّ غرض أغلبية الأدوات التي تظن أنَّك بحاجةٍ إليها هو حلّ المشاكل التي لن تتعرض إليها بتاتًا. أصبحت حالة تطوير تطبيقات JavaScript في الآونة الأخيرة معقدةً ومربكةً لأنَّ الجميع يبالغون في هندسة تطبيقاتهم دون أن يدركوا ذلك. إذًا، كيف يجب أن نبدأ بتطوير تطبيق JavaScript؟ هل علينا استخدام مكتبة شبيهة بمكتبة React أو Angular؟ هل يجب أن نستخدم مدير للحزم؟ ماذا يفترض علينا أن نفعل إذا لم نستخدمهما؟ هل كتابة الاختبارات ضرورية؟ هل علينا أصلًا توليد شيفرات HTML عبر JavaScript؟ هذه هي الأسئلة التي يجب أن تسألها لنفسك قبل أن تبدأ بمجموعة ضخمة من أدوات التطوير. عندما تبدأ بتطوير تطبيق JavaScript فمن المهم أن تختار نقطةً في المنحني الجرسي في المكان الذي تظن أنَّ من المرجح أن يصله تطبيقك في المستقبل من ناحية التعقيد. لن أكذب عليك، فعل ذلك ليس سهلًا ويحتاج خبرةً، لكن هنالك منطقةٌ كبيرة يمكنك أن تبدأ منها أغلبية تطبيقات JavaScript: استعمل مكتبة jQuery مع قوالب لصفحات الواجهة الأمامية مع أداة بناء بسيطة لجمع الملفات وتصغيرها (بفرض أنَّ إطار العمل الذي تستعمله لتطوير السند الخلفي [backend] لا يفعل ذلك تلقائيًا). إذا أردتَ أن تتعلم كيفية هيكلة تطبيق JavaScript بطريقةٍ صحيحة، فعليك أن تبدأ بفهم كيف ومتى ولماذا تستخدم إطار عمل أو حزمة npm أو إصدار ES6 أو متى تكتب اختبارات أو هل عليك جعل الاختبارات تعمل محليًا أو في متصفح، ثم سيأتي دور بقية الأسئلة وحلّ بقية المشاكل. إن أردتَ أن تملأ الفجوات الموجودة في معلوماتك حول تطوير JavaScript وأن تتجنّب الشعور بأنّك تبالغ في تصميم تطبيق JavaScript فحاول أن تتابع ما نطرحه هنا في قسم البرمجة في أكاديمية حسوب. ترجمة -وبتصرّف- للمقال Why JavaScript Development is Crazy لصاحبه Sean Fioritto1 نقطة