أساسيات اتش.تي.إم.إل

أ. ما هي الطرق الشائعة لتحسين موارد الوسائط Optimize Media Assets ؟

هناك ثلاث أدوات يجب أخذها في الاعتبار عند استخدام الوسائط media، مثل الصور، على صفحات الويب الخاصة بك: الحجم size، التنسيق format، والضغط compression.

لنتحدث أولًا عن حجم size صورك. عند إنشاء موقع ويب website، غالبًا ما تُصمم الصور لعرضها display بحجم مُحدد. على سبيل المثال، قد يكون لديك صورة مُعروضة بدقة 640×480. يمثل 640 العرض width بينما يمثل 480 height "بالبكسل" pixels. عند تحضير صورتك، ستحتاج إلى تغيير حجمها إلى 640×480 لتتناسب مع هذا التصميم. إذا عرضت صورة بدقة 1920×1080 ولكنك تُصممها لتكون أصغر بكثير، فأنت تُلزم المستخدمين users بتنزيل بيانات غير ضرورية unnecessary data. الدقة resolution الأصغر تُؤدي إلى حجم ملف أصغر.

الأمر التالي الذي يجب مراعاته هو تنسيق format ملفك. من أكثر تنسيقات الملفات شيوعًا PNG وJPG، لكنهما لم يعودا التنسيقين الأمثل لعرض الصور. ما لم تكن بحاجة إلى دعم المتصفحات القديمة، يُنصح باستخدام تنسيق format أكثر تحسينًا more optimized، مثل WEBP أو AVIF.

أخيرًا، يمكنك استخدام خوارزميات ضغط compression على صورك. تُستخدم خوارزمية الضغط A compression algorithm لتقليل حجم size الملفات أو البيانات. تتوفر خيارات مثل pngcrush لضغط صورك محليًا، أو يمكنك استخدام أدوات ضغط compressed tools عبر الإنترنت. مع ذلك، تجدر الإشارة إلى أن بعض تنسيقات الملفات file formats، مثل JPG، ليست خالية من فقدان البيانات. تعني هذه الصيغة أنه يمكن إعادة بناء البيانات الأصلية بدقة من البيانات المضغوطة compressed data. إذا حاولت ضغط (حاولت ضغط) صورة JPG، فسيؤدي ذلك إلى انخفاض الجودة quality. يجب مراعاة جميع هذه الأمور عند اختيار الصور لصفحات الويب.

ب. ما هي أنواع تراخيص الصور Image Licenses المختلفة، وكيف تعمل؟

تُعتبر الصور ملكية فكرية، أي أنها محمية بموجب قوانين حقوق النشر copyright، وغالبًا ما تكون ملكًا لمُنشئها The creator. تُنشر الصور تلقائيًا كجميع الحقوق محفوظة. يحتفظ مُنشئ الصورة، أو الناشر publisher أحيانًا، بجميع حقوق النشر الخاصة بها.

وهذا يعني أنه لا يمكنك استخدامها في صفحتك على الويب إلا إذا قمت بأحد ثلاثة أشياء: الحصول على إذن كتابي written permission من صاحب حقوق الطبع والنشر، أو شراء ترخيص license من صاحب حقوق الطبع والنشر، أو دمج incorporate الصورة بطريقة تندرج ضمن الاستخدام العادل fair use.

النقطة الثالثة مُعقّدة بعض الشيء. الاستخدام العادل Fair use يتطلب أن يكون استخدامك للصورة محدودًا limited ومُغيّرًا transformative. من أمثلة الاستخدام العادل التعليق على العمل الفني أو مراجعته أو إنشاء محاكاة ساخرة له.

قد تُنشر بعض الصور بموجب ترخيص مُتساهل permissive license، مثل ترخيص Creative Commons license أو ترخيص BSD license الذي يستخدمه freeCodeCamp. هذه الصور متاحة available للاستخدام في موقعك الإلكتروني، ولكن عليك قراءة الترخيص لفهم القواعد the rules التي يجب اتباعها عند استخدامها. على سبيل المثال، قد يُطلب منك جعل موقعك الإلكتروني مفتوح المصدر open source، أو قد لا يُسمح لك بتعديل modify الصورة بأي شكل من الأشكال.

أخيرًا، قد تُنشر بعض الصور ضمن نطاق الملكية العامة public domain. الصورة ضمن نطاق الملكية العامة public domain لا تخضع لحقوق الطبع والنشر copyright، ويمكن استخدامها بحرية free دون أي قيود restrictions. تُعتبر الصور المرخصة خصيصًا بموجب رخصة المشاع الإبداعي 0 the Creative Commons 0 license ملكًا عامًا.

تتيح لك معظم محركات البحث تصفية filter نتائج الصور حسب الترخيص license. هناك أيضًا مواقع مثل Pixabay و Unsplash، والتي توفر صورًا مجانية free-to-use images. انتبه دائمًا لحقوق النشر copyright والترخيص licensing عند استخدام أي صورة في موقعك الإلكتروني.

ج. ما هي ملفات SVGs، ومتى يجب استخدامها؟

أولاً، عليك فهم آلية عمل الصور. تُصنف صيغ الصور الشائعة Common image formats، مثل PNG وJPG، كصيغ نقطية raster formats. هذا يعني أساسًا أنها تعتمد على "البكسل" pixel-based، حيث تتبع البيانات data قيمة اللون في كل "بكسل" pixel.

من عيوب الصور النقطية أنها لا تُحسّن من جودة الصورة do not upscale well. إذا حاولتَ تكبير صورة PNG، فربما لاحظتَ أنها أصبحت مشوّشة pixelated أو ضبابية blurry.

SVG هو نوع مختلف من الصور. SVG هو اختصار لـ Scalable Vector Graphic "رسومات متجهة قابلة للتحجيم". يتتبع الرسم المتجه A vector graphic البيانات بناءً على مسارات paths ومعادلات equations لرسم النقاط points والخطوط lines والمنحنيات curves. هذا يعني في الواقع أنه يمكن تحجيم الرسم المتجه vector graphic، مثل SVG، إلى أي حجم دون التأثير على الجودة quality.

تتميز ملفات SVG بميزة تخزين البيانات بتنسيق XML. هذا يعني أنه يمكنك استخدامها مباشرةً في الكود الخاص بك كملفات اتش.تي.إم.إل HTML خام باستخدام عنصر svg. كما يمكنك تغيير لون الصورة برمجيًا programmatically.

لتغيير الوجه المبتسم إلى اللون الأحمر، قم بتغيير "fill="yellow إلى "fill="red

الكود :

code 

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="yellow" />
  <circle cx="35" cy="40" r="5" fill="black" />
  <circle cx="65" cy="40" r="5" fill="black" />
  <path d="M35 65 Q50 80 65 65" stroke="black" stroke-width="4" fill="transparent" />
</svg>
	

قبل التغيير :

بعد التغيير :

وفيما يلي العناصر الأساسية للمثال :

• عنصر svg هو الحاوية container للرسم بأكمله. فهو يُهيئ المساحة space التي تظهر فيها جميع الأشكال shapes. كل ما تريد رسمه باستخدام SVG، مثل الدوائر circles والخطوط lines والمسارات paths، يوضع داخل عنصر svg.
• يُستخدم عنصر الدائرة circle لرسم الوجه والعينين. تُشكّل دائرة كبيرة الوجه الأصفر، ودائرتان صغيرتان تُشكّلان العينين.
• يُستخدم عنصر المسار path لرسم الابتسامة، ويُنشئ خطًا منحنيًا curved line للفم.
• يحتوي كل عنصر SVG على سمات attributes تتحكم في مظهره وموقعه داخل منطقة الرسم drawing area.

إليك بعض الأمثلة الإضافية. لتغيير لون أيٍّ من الأمثلة، حدّث قيمة سمة التعبئة fill إلى أي لون مُسمّى، مثل الأحمر red، والأخضر green، والأزرق blue ، والأصفر yellow، إلخ.

الكود :

code 

<!-- Star Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="gold" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L14.9 8.6L22 9.3L17 14.1L18.3 21.2L12 17.8L5.7 21.2L7 14.1L2 9.3L9.1 8.6L12 2Z"/>
</svg>

<!-- Heart Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="crimson" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 6 4 4 6.5 4C8 4 9.5 4.8 10.5 6.09C11.5 4.8 13 4 14.5 4C17 4 19 6 19 8.5C19 12.28 15.6 15.36 10.45 20.04L12 21.35Z"/>
</svg>

<!-- Checkmark Icon -->
<svg width="50" height="50" viewBox="0 0 24 24" fill="green" xmlns="http://www.w3.org/2000/svg">
  <path d="M20.29 5.71L9 17L3.71 11.71L5.12 10.29L9 14.17L18.88 4.29L20.29 5.71Z"/>
</svg>
	

متى ترغب باستخدام ملفات SVG ؟ تُعدّ الأيقونات icons من أفضل الاستخدامات. إذا كنت ترغب في إنشاء نقاط تعداد نقطية مخصصة، أو إضافة أيقونات إلى روابطك links لتمثيل منصات التواصل الاجتماعي، فإن استخدام ملفات SVG هو الخيار الأمثل. تستخدم Font Awesome، إحدى أشهر مكتبات الأيقونات، صور VG لأيقوناتها. كما تُعد ملفات VG رائعة لشعارات logos صفحات الويب، نظرًا لدقتها في القياس. تتيح لك هذه الملفات تكييف تصميمك layout مع أي تصميم متجاوب responsive تحتاجه. في المرة القادمة التي تمتلك فيها ملف SVG محليًا، حاول فتحه باستخدام محرر نصوص text editor والتعديل على الكود playing with the code.