إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    الفرق بين SVG – PNG – JPG – GIF

    الصور التي نوعها PNG

    في البداية كلمة PNG هي إختصار لجملة Portable Network Graphic.

    هذا النوع من الصور يعتبر الأشهر و الأكثر إستخداماً في المواقع لأن هذا النوع من الصور لا يفقد جودته إذا كانت الصورة تعرض بحجمها الطبيعي أو تعرض بشكل أصغر في حال كان حجم شاشة المستخدم صغير كما هو الحال عندما يشاهد الصورة من خلال جواله.

    بشكل عام, صور المستخدمين, المنتجات المعروضة, شعارات المواقع و غيرها من الصور التي نعرضها في المواقع يكون نوعها على الأغلب PNG.

    ميزة أخرى مهمة جداً يوفرها النوع PNG هي إمكانية جعل خلفية الصورة شفافة (Transparent).

    النوع PNG يوجد منه نوعين أيضاً:

    • PNG-8 و يقصد به أن كل بيكسل في الصورة يتألف من 8bit.
    • PNG-24 و يقصد به أن كل بيكسل في الصورة يتألف من 24bit.

    الذي عليك معرفته من هذا الأمر أنه, كلما كان عدد الـ bit للبيكسل أكبر كلما كانت الصورة قادرة على عرض درجات ألوان أكثر. و لكن كلما كان عدد الـ bit للبكسل أكبر كلما كان حجم الصورة أكبر.

    فمثلاً إن كان حجم الصورة التي نوعها PNG-8 هو 4KB فحجم نفس الصورة إذا كان نوعها PNG-24 سيكون تقريباً 6KB.

    كمثال عملي, شعار موقعنا نوعه PNG و لاحظ أن لون خلفيته شفاف.


    الصور التي نوعها JPG

    في البداية النوع JPG هو نفسه JPEG و كلاهما إختصار لجملة Joint Photographic Experts Group.

    هذا النوع من الصور يستخدم في العادة في التصوير الفوتوجرافي و تصوير الأوراق أيضاً لأن هذا النوع لا يهمه فقدان جودة الصورة عند تكبيرها أو تصغيرها بل يهمه حفظها بنفس الجودة التي تم فيها حفظ الصورة في الأساس.

    مما يتميز به هذا النوع هو إمكانية حفظ معلومات أخرى في الصورة مثل متى تم إلتقاطها بالتحديد و الموقع الذي تم فيه إلتقاط الصورة. لهذا نجد أن الصور التي تلتقطها بواسطة الكاميرا العادية أو كاميرا الهاتف غالباً ما يتم حفظها بصيغة JPG.

    بالنسبة لحجم التخزين الذي يحتاجه كل بيكسل في الصورة فهو التالي:

    • إذا كانت الصورة ملونة فهذا يعني أنها تستخدم مزيج من ألوان RGB و هنا سيتم تخصيص 24bit لكل بيكسل في الصورة.
    • إذا كانت الصورة رمادية الألوان (Grayscale) أو كما نقول تتألف فقط من اللونين الأبيض و الأسود, فهنا يتم تخصيص 8bit فقط لكل بيكسل في الصورة.

     

    الصور التي نوعها GIF

    في البداية كلمة GIF هي إختصار لجملة Graphics Interchange Format.

    هذا النوع مخصص للصور المتحركة التي تجدها تتحرك بشكل تلقائي عندما تشاهدها.

    كل بيكسل في الصورة يتم تخزينه في 8bit فقط مما يعني أنه لا يمكنه تخزين درجات عالية من الألوان.

    و الجميل في هذا النوع أيضاً, أنه في حال كان حجم الشاشة أصغر من حجم الصورة الفعلي, فيمكن تقليص حجم الصورة و عرضها بنفس الجودة التي تم حفظها فيها.


    هل الصورة المتحركة هي صورة واحدة أم مجموعة صور؟

    بالمنطق لا يمكن للصورة أن تتحرك, و لا يمكن للحاسوب أن يقوم بتغيير قيمة كل بيكسل في الصورة على حدا لأن ذلك يشكل عبئ كبير عليه. ما يحدث في الواقع هو أن الصورة المتحركة عبارة عن مجموعة صور تعرض بالترتيب الذي تم وضعها فيه و بسرعة منتظمة, و كلما وصلت إلى آخر صورة فيهم ترجع لأول صورة.

    كمثال عملي, هذه صورة متحركة من دورة JavaFX حيث أننا كنا نضع صور متحركة في كل مثال في الدورة مما يجعل الشرح في غاية الوضوح.


    ملاحظة: هذه الصورة بالأساس كانت عبارة عن فيديو مدته ثانية واحدة و لكنا قمنا بحفظها بصيغة GIF حتى تظهر كصورة متحركة. و هذه الصورة عبارة عن 15 صورة على الأقل يتم عرضها بشكل متوالي.


    الصور التي نوعها SVG

    في البداية كلمة SVG هي إختصار لجملة Scalable Vector Graphic.

    هذا النوع الصور يعتبر نقلة نوعية في الصور التي يمكن عرضها في صفحات الويب. و هو بالأساس عبارة عن كود يتم كتابته بأسلوب XML يتم إدراجه في الصفحة و على أساسه يتم رسم الشكل الذي تريد.

    مهما كان الشكل الذي يخطر في بالك معقداً مثل صورة عادية, نص فيه تأثير جميل, صورة عادية و لكن تريد عرض جزء منها إلخ.. تأكد أنه يمكن رسم فعل ذلك بواسطة أسلوب SVG.

    هذا النوع يمكن إستخدامه بشكل خاص, في رسم جداول إحصائية تفاعلية, شخصيات كرتونية, أيقونات, شعار الموقع و أي شكل تريده.

    كمثال عملي, الجداول الإحصائية التي يتم عرضها في المواقع و التطبيقات يتم رسمها كصور SVG بالأساس لأن الجداول قيمها ليست ثابتة. و فعلياً عندما نرى قيم الجدول تغيرت, فهذا يعني أنه تم تحديث كود الصورة.


    مميزات النوع SVG

    • لا يوجد أي حدود لما يمكن رسمه بواسطته.
    • يمكنك جعل الصورة أو الأيقونة أو الشكل الذي ترسمه تفاعلياً.
    • لن تقلق بتاتاً من حجم الصورة التي يمكنك رسمها في الصفحة لأنها مهما كانت كبيرة فالكود الخاص بها صغير جداً مقارنة بصورة عادية كانت ستعطيك نفس الشكل الذي تم رسمه.
    • حجم شاشة المستخدم سواء كانت كبيرة أو صغيرة لن يشكل أي مشكلة على دقة الصورة لأن كل نقطة في الصورة يتم تمثيلها بـ Vector و ليس ببكسل واحد كباقي الأنواع.
    • يمكن تعديل تصميمه بواسطة CSS مثل أي عنصر HTML موجود في صفحة الويب.
    • يمكن التعامل معه بواسطة Javascript مثل أي عنصر HTML موجود في صفحة الويب


    كيف أرسم صور نوعها SVG؟

    الصور التي نوعها SVG في العادة لا يقوم الشخص بكتابة الكود الخاص بها بنفسه, بل يستخدم أحد البرامج التي يمكنه رسم الشكل من خلالها ثم إصدار نسخة من هذا الشكل نوعها SVG.

    بعض البرامج المشهورة في الرسم و التي يمكنك تصدير الرسومات منها كملف نوعه SVG:

    • Inkscape
    • Sketch
    • Adobe Illustrator

    آخر تحديث: 19-12-2021

    الكاتب

    محمد هرموش

    مؤسس و مطور موقع هرمش. مهتم بنشر كل ما أعرفه في مجال البرمجة و الأنظمة و الشبكات.

    موقعي: harmash.com

    تعليقات 1

    أضف تعليق

    يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.
    إعلان
    دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
    دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
    تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
    دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
    دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
    دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن
      إعلان

      Eqla3Tech.com

      شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

      لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

      تقييم المقال

      لم تقم بتقييم المقال بعد!

      الدورات

      أدوات مساعدة

      الأقسام

      دورات
      مقالات أسئلة مشاريع كتب