المحتوى عن 'حاسوب'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 3 نتائج

  1. اتبع الخطوات في هذا الدرس لتعلم كيفية تصميم فكتور شاشة الحاسوب الشعبي الشهير iMac. باستخدام الأشكال البسيطة والأدوات يمكننا تصميم أيقونات وأشكال مسطحة بسيطة كما في هذا الدرس. افتح برنامج أدوبي إليستريتور وأنشئ مستندًا جديدًا. استخدم أداة المستطيل مستدير الزوايا Rounded Rectangle Tool لرسم القاعدة الأساسية لشاشة iMac. استخدم مفاتيح الأسهم للأعلى والأسفل لضبط استدارة زوايا المستطيل أثناء سحب الشكل. لوّن المستطيل باللون بتدرج لوني رمادي خفيف من اليسار لليمين. ارسم مستطيلًا مستدير الزوايا آخر ضمن الشكل السابق ليكون كإطار لهذا الشكل واضبط استدارة الزوايا أصغر قليلًا حتى تكون متوازية مع زاويا الشكل السابق. لوّن المستطيل بالأسود. ارسم مستطيلًا ثالثًا ولوّنه بالأبيض ليكون الشاشة الرئيسية. وسّط الأشكال معًا من لوحة المحاذاة Align. ارسم مستطيلًا آخر مستدير الزوايا ليكون الحافة الأمامية للقاعدة مع استدارة بسيطة جدًّا للزوايا. استخدم نفس التدرج اللوني الرمادي المستخدم سابقًا. اذهب إلى القائمة Object > Envelope Distort > Make with Warp لتطبيق الانحناء المناسب للقاعدة، استخدم القيمة -3% للانحناء Bend والقيمة -2% للانحراف العمودي Vertical Distortion. استخدم أداة القلم Pen Tool لترسم يدويًّا شكلًا متدفقًا من القاعدة إلى أعلى الوحدة الرئيسية. ركّز على إتقان الانحناء الخارجي ثم تابع باقي الشكل بشكل تقريبي. انسخ وألصق الشكل الجديد بدقّة في الجهة المقابلة. املأ باقي الفجوة بين الشكلين بشكل آخر باستخدام أداة القلم. ثم أرسل الأشكال الثلاثة معًا للخلف. ثم حدّد الأشكال الثلاثة وأدمجهم بالخيار Merge من لوحة Pathfinder. لوّن الشكل الجديد المدمج بسلسلة من التدرجات اللونية الرمادية الممتدة من الفاتح إلى الداكن لإعطاء الانطباع عن انحناء الشكل مع الظلال. ضع الشعار أسفل الشاشة الرئيسية. أنا استخدمت شعارًا دائريًّا عاديًّا وأنت بإمكانك استخدم شعارك الخاص أو شعار شركة Apple أو أي شعار في العالم من موقع Brands of the World. لوّن المستطيل الأبيض للشاشة الرئيسية بتدرج لوني أزرق متدفق بشكل قُطري عبر المستطيل. باستخدام ذات الألوان قم برسم شكل بيضوي فوق شكل الشاشة مع خصائص مزج Overlay وتعتيم بنسبة 50%. ضاعف الشكل الأخير واجعل النسخ الجديدة باتجاهات وزوايا مختلفة مع التأكيد على عملية التداخل فيما بينها لمحاكاة خلفية سطح مكتب شاشة iMac التقليدية. اجمع Group جميع الأشكال البيضوية ثم ألصق نسخة عن الشاشة الرئيسية الزرقاء فوق باقي الأشكال. حدّد الشكل المنسوخ الجديد مع مجموعة الأشكال البيضوية واستخدم الخيار Crop من لوحة Pathfinder لحذف الزوائد حول شكل الشاشة. أصبح النموذج العام للتصميم جاهزًا ولكننا سنضيف بعض الانعكاسات الضوئية التي تميّز أجهزة شركة Apple دائمًا. انسخ المستطيل الأسود وألصقه في المقدمة ثم ارسم شكلًا مؤقتًّا يمنح النصف العلوي من المستطيل انحناء خفيفة. واستخدم خيار Intersect من لوحة Pathfinder لإكمال الشكل. لوّن الشكل الجديد باللون الأبيض وخفّف التعتيم حتى الدرجة المناسبة كما في الصورة. وفي النهاية سنضيف بعض الإحساس بالأبعاد عبر إضافة ظلال بسيطة تحت الشاشة. ارسم دائرة ولوّنها بتدرج لوني دائري من الأسود إلى الأبيض. اضغط الدائرة وضعها تحت الشاشة وتحديدًا تحت القاعدة بشكل تظهر منتشرة تحت كامل مساحة الشاشة الرئيسية. خفّف التعتيم قليلًا لمنحها شعور الظلال الخفيفة. ترجمة -وبتصرّف- للمقال: How to Create a Vector iMac Graphic in Illustrator لصاحبه: Chris Spooner
  2. في درسنا هذا سنحاول تصميم مكتب أنيق باستخدام برنامج أدوبي اليستريتور، يمكن استعمال هذا التّصميم للتعبير عن العمل الحر Freelance أو يمكن وضعه في إنفوجرافيك infographic يعبّر عن الدّراسة أو الجامعة. أهم مهارة سنتعلّمها في درسنا هي طريقة استخدام الأشكال الأساسيّة لعمل تصاميم احترافية، وفي المقابل فإنّ استخدامنا لأداة القلم pen tool سيكون محدودا جدًا. بداية نقوم بفتح ملف جديد عن طريق الضّغط على CTRL+N. بالنّسبة للمقاسات ونمط الألوان فهي اختيارية. رسم المكتبباستخدام أداة المستطيل مدوّر الحواف rounded rectangle tool نرسم مستطيلا عرضه: 819px وارتفاعه: 42px، أمّا قيمة corner radius فنحدّدها بـ: 20px: نرسم خطًا طوله 819px ونضعه وسط الشّكل السّابق، بعدها وباستخدام أداة live paint bucket tool نقوم بتلوين الجزء السّفلي من الشّكل باللّون 745F4A# والجزء العلوي باللّون B08B70 # كما هو موضّح في الصّورة: نرسم مستطيلا باستخدام الأداة m) rectangle tool) عرضه 18px وطوله 287px نختار له اللّون 745F4A #، ثمّ وباستخدام أداة التحديد المباشر A) direct selection tool) نقوم بإمالة الخط السّفلي والخط العلوي قليلا كما هو موضح في الصورة. نرسم مستطيلا آخر بنفس الطول لكن عرضه: 9px ونملأه باللون B08B70 #. نضاعف الشّكل الذي تحصّلنا عليه ctrl+c ثم ctrl+v ثم نقوم بقلبه باستخدام أداة التّدوير (R) ونضع كلا الشكلين (النسخة والأصلي) أسفل الشّكل الأوّل فنحصل على رسم مبدئي للمكتب: رسم جهاز الحاسوب المكتبيباستخدام أداة المستطيل مدوّر الحواف rounded rectangle tool نرسم مستطيلا عرضه 398px وارتفاعه 253px، أمّا قيمة corner radius فنحدّدها بـ: 20px ونملأه باللون الأسود: أسفل المستطيل الأسود نرسم خطًا، نحدد الخط مع المستطيل ثم نملأ المساحة الناتجة عن تقاطع الشكلين باللون F7F7F7 #، وذلك باستخدام أداة live paint bucket tool. داخل المستطيل الأسود نرسم مستطيلا آخر باستخدام الأداة m) rectangle tool) عرضه 365px وطوله 197px، نختار له اللّون 2386C8 # أو أي لون آخر تريده. أخيرا نرسم دائرة صغيرة في الأسفل ونختار لها لونا يختلف عن لون الخلفية: الآن سنقوم برسم ركيزة جهاز الحاسوب ولفعل ذلك نتبع الخطوات التالية: نرسم مستطيلا صغيرًا كما يظهر في الصورة، لا يهم المقاس لأنه بإمكاننا تغييره في أي وقت، أمّا بالنسبة للألوان فيُفضّل استعمال درجات اللون الرمادي سواء لهذا المستطيل أو لبقيّة الأشكال التي سنستخدمها لتصميم الركيزة (الشكل1).باستخدام أداة القلم pen tool نضيف نقطتين على الحافّة العلوية للمستطيل (الشكل 2).باستخدام أداة التحديد المباشر A) direct selection tool) نضغط وسط النقطتين ونسحب إلى الأعلى (الشكل 3).نرسم مستطيلين آخرين الأوّل كبير والثّاني أصغر منه، ونختار لهما درجتين مختلفتين من اللّون الرّمادي (اللّون الغامق نختاره للمستطيل الصّغير).تحصّلنا على ثلاثة أشكال. نحاول ترتيبهم لنحصل على الشكل النّهائي كما هو موضح في الصورة: نضيف بعض اللّمسات في أعلى شاشة الحاسوب وذلك برسم ثلاث دوائر مختلفة الألوان ومتناسقة، وسهم صغير نضعه على الشاشة. أخيرا نضع الرّكيزة في الأسفل فنحصل على شكل حاسوب: رسم ساعة الحائطنقوم برسم دائرة مقاسها 153px*153px نملأها باللون الأبيض، أما قيمة stroke فنحددها بـ12px ونختار لها اللون C93A63 #. نضاعف الدائرة ونحدد لون النّسخة الجديدة بـ: BCBCBC# مع تصغيرها قليلا. ( لا تنسى الضغط في نفس الوقت على المفتاح shift حتى يكون التصغير متناسق من جميع الجوانب) ثمّ نضع الدائرة الأصلية فوق النسخة لكن مع سحبها قليلا إلى الأعلى: نقوم الآن برسم التدريجات وعقارب الساعة. نرسم أوّلًا مستطيل صغير لعمل أوّل تدريجه بعدها نحدّد التدريجة ونضغط على حرف "R"، ثم نُمرر الفأرة في وسط الشّكل حتى نحصل على كلمة "CENTER". نضغط في المَركز و في نفس الوقت على ALT فتظهر علبة حوار، نقوم بتحديد الزاوية ب 45 درجة ونضغط على COPY ثم نحدد آخر تدريجة و نضغط على CTRL+D. كل ما سنحتاجه لرسم عقارب السّاعة، هو دائرة صغيرة نضعها في المركز ومستطيلات، نقوم بتعديلها كما في الصورة الموضحة، أيضا يمكنك استخدام خاصية التدوير كما تعلمناها ونحن نرسم التدريجات وذلك بالضغط على R. وهذا الشكل النهائي للساعة: بالنسبة لتصاميم كوب القهوة ورف الكتب سبق لي وشرحت الطريقة، يمكنك الاطلاع عليها في الدروس التالية مع إضافة إبداعاتك الخاصّة: كوب القهوة: كيف ترسم كوب قهوة مسطح باستخدام adobe illustrator.رف الكتب: كيف تصمم رف كتب باستخدام adobe illustrator.نقوم بترتيب جميع الرسومات التي قمنا بعملها لنحصل على مكتب عصري وأنيق. وهذه هي الصورة النهائية للتصميم:
  3. أصبحت قابلية الوصول accessibility من أبرز المواضيع والنقاشات تداولًا بين مطوّري الويب، وازداد اهتمام أصحاب المواقع حول قابلية الوصول ومدى تكيّف مواقعهم مع أغلب الأجهزة والشاشات، وأعطى هذا الاهتمام المتزايد المجال لبزوغ شكل جديد كليًا من أشكال التصميم وحمل الاسم ‹‹تصميم المواقع المتجاوبة Responsive Web Design››، فمع زيادة حصّة أجهزة الهاتف والأجهزة اللوحيّة، أصبح من الضروري التأكّد من تجاوبيّة وتوافقيّة الموقع مع أي جهاز يستطيع الوصول إلى الإنترنت. يهتم كل من التصميم الُمتلائم AWD والتصميم الُمتجاوب RWD في كيفيّة عرض صفحة الموقع على مختلف الأجهزة والشاشات، إذا ما الذي يجعل لكل منهما كينونة خاصة به؟ هذا ما سيُجاب عليه في السطور القادمة في توضيح للفروقات الجوهرية بين التصميم المتجاوب RWD والتصميم المتلائم AWD. ما هو التصميم المتلائم (Adaptive Web Design (AWD؟يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا. ما هو التصميم المتجاوب (Responsive Web Design (RWD؟يَستخدم التصميم المُتجاوب شيفرة CSS محدّدة لتعديل مظهر الموقع وفقا للجهاز الذي يستعرض الموقع، والبيانات المرتبطة بكل جهاز تُحمّل بصرف النظر فيما إذا كانت تُستخدم أم لا، وتمامًا عكس المواقع المصممة باستخدام التصميم المتلائم، فإن المواقع المصممة باستخدام التصميم المتجاوب تُحمّل بسرعة منخفضة نسبيًا. ما هو الفرق إذا؟يكمن الاختلاف الجوهري بين التصميم المتلائم والتصميم المتجاوب في أن المتلائم سيتغيّر تغيّرًا كليًّا لكي يُلائم أبعاد الشاشة المختلفة، بينما المتجاوب سيتغيّر بانسيابية ليتجاوب مع مجموعة من الأجهزة وقياسات الشاشات، وعليه سنستعرض بقيّة الفروقات التفصيليّة بين التصميم المتلائم AWD والتصميم المتجاوب RWD: يَستوجب استخدام التصميم المتلائم تطوير موقع منفصل إما عن طريق عناوين URLs منفصلة أو عن طريق تطوير شيفرة HTML/CSS منفصلة، وبالمقارنة بالمثل، فإن التصميم المتجاوب RWD يعتمد على HTML/CSS3 و جافا سكريبت كليًّا، مما يوفّر على المطوّر تطوير وصيانة عناوين URLs منفصلة و/أو HTML/CSSs.إن صُمّم الموقع باستخدام التصميم المتلائم، فإن إجراء التعديلات سيَستوجب مراجعة SEO (تحسين محركات البحث) والمحتوى وبُنية الموقع، وبعكس ذلك فإن صُمّم الموقع باستخدام التصميم المتجاوب، فإن إجراء التعديلات سيكون سهلًا للغاية لأن إجراءات تحسين محركات البحث والمحتوى والروابط links موجودة جنبًا إلى جنب مع HTML/CSS وجافا سكريبت JavaScript.بينما يَعتمد التصميم المتلائم على قياسات الشاشة المحددة مسبقًا، فيعتمد التصميم المتجاوب على شبكة grid مرنة وسلسة، بمعنى آخر، يتطلّب التصميم المتجاوب مزيدًا من الشيفرة البرمجية ليلائم صفحات الويب مختلفة القياسات، بينما يملك التصميم المتلائم تصميم معدّ مسبقًا تحدده برمجية معينة من جهة الخادوم في سبيل ملائمة قياسات الشاشة المختلفة.يقع الحمل الأكبر على عاتق الخادوم في معالجة تجاوبيّة الصفحات مع التصاميم المتلائمة، بينما يقع الحمل الأكبر على عاتق المُتصفّح (جهة العميل) في معالجة تجاوبيّة الصفحات.يستغرق التصميم المتلائم وقتًا أطول في التطوير، على عكس التصميم المتجاوب والذي يتطلّب وقتًا أقل نسبيًا.إن المواقع المصممة باستخدام التصميم المتلائم AWD تتعامل مع صور محسنة ومعدّلة لكل جهاز وقياس شاشة، بينما المواقع المصممة باستخدام التصميم المتجاوب RWD تحمّل الصور أوّلًا على المتصفّح ومن ثم يُعاد تحجيمها لتُلائم الجهاز الموافق لها.خاتمةبصرف النظر فيما لو اختير التصميم المتلائم Adaptive Web Design أو التصميم المتجاوب Responsive Web Design، فمن المهم وجود استراتيجية معينة من أجل أجهزة الهاتف، والتأكّد دائمًا من أن محتوى الموقع مُحسّن للزوّار مهما كان الجهاز المستخدم في تصفّح الموقع، طبعًا مع الحفاظ على موقع جميل ومتناغم الألوان والعناصر. ترجمة وبتصرّف للمقال Responsive Web Design vs Adaptive Web Design - Whats the Difference لصاحبه Mike Swan.