المحتوى عن 'هاتف'.



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

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

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

نوع المُحتوى


التصنيفات

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

التصنيفات

  • 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

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

  1. من المؤكد أنك قمت بتصفح الإنترنت من هاتف محمول، ستلاحظ في كثير من المواقع زر فتح قائمة التنقل الموجود في أعلى الموقع الذي بمجرد أن تضغط عليه يقوم بفتح قائمة تنقل الموقع. إضافة هذا الزر إلى موقع ووردبريس الخاص بك سوف تحسن تجربة المستخدم بشكل كبير للمستخدمين الذين يزورون الموقع من أجهزة الهاتف المحمول أو الأجهزة اللوحية. صحيح بأنه يمكنك استعمال إضافة ووردبريس جاهزة للقيام بهذه المهمة أو تنصيب قالب يحوي هذه الميزة ولكن ماذا لو كنت تستعمل قالب خاص بك وتريد إضافة هذه الميزة بنفسك؟ في هذه المقالة سوف أريك كيف تقوم بعمل هذا بمساعدة ووردبريس وبعض تعليمات css وjavascript وتحويل القائمة إلى الشكل المطلوب. ماذا ستحتاج لتتابع مع هذا المقال، ستحتاج إلى: موقع ووردبريس على حاسوبك الذي يحتوي قائمة. قالب ابن للقالب الذي تعمل عليه من أجل أن تبقى تعديلاتك في مكانها عندما يتم تحديث هذا القالب من الإنترنت. سأقوم بتنفيذ هذه التعليمات على موقعي الخاص، الذي يستهدف قائمة التنقل الرئيسية والتي في موقعي الخاص تملك اسم صنف css وهو menu.main ، إذا كان اسم هذا الصنف مختلفًا في موقعك فسوف تقوم بتطبيق التعليمات على اسم الصنف الخاص بقائمتك. القائمة الحالية قائمتي تبدو على أجهزة الحاسب بهذا الشكل: لكن على شاشة الهاتف ليست جميلة: يمكنني تحسين ذلك بجعل محاذاة القائمة إلى المنتصف لكن ذلك سيأخذ الكثير من مساحة الشاشة لذلك سنقوم بعمل زر القائمة الذي بمجرد الضغط عليه سوف تظهر القائمة التي سنقوم بإخفائها في أجهزة الهاتف المحمول. إضافة زر القائمة الخطوة الأولى هي إضافة أيقونة زر القائمة. سوف نقوم بذلك في ملف header.php في قالبك أضف رابط تحت قائمة التنقل الرئيسية ها هو الخاص بي: <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> <a class="toggle-nav" href="#">☰</a> هذا الرابط سيقوم بعمل زر الذي يقوم بفتح وإغلاق زر القائمة وله اسم الصنف togglenav وبداخله الأيقونة وهي في هذه الحالة رمز html. هذا كل ما يتطلب إضافته إلى ملف header.php إذا قمت بإعادة تحميل صفحتك سترى بأن زر القائمة قد ظهر على الشاشة: إخفاء زر القائمة على الشاشات الكبيرة لنبدأ مع شاشات الحاسب ونضيف هذه التعليمات، لكن لا تنسى وضع هذه التعليمات ضمن media query المناسبة لعرض الشاشة: .toggle-nav { display: none !important; } هذا يجعل الرابط الذي يحوي الأيقونة بداخله يختفي. لقد أضفت كلمة important! حتى تبقى هذه التعليمة هي الأقوى و لا يتم الكتابة عليها من قبل التعليمات الآخرى. لقد اختفى. سوف نقوم بإخفائه أيضًا في الشاشات الأصغر من ذلك و لكن سنأتي لهذا لاحقًا. إضافة تنسيقات css لزر القائمة الأن نحن نحتاج لإضافة بعض التنسيقات إلى القائمة في شاشات الهاتف والتي تظهر عندما يضغط المستخدم زر القائمة. أولًا، في ملف css الخاص بك أضف media query المناسبة: @media screen and ( max-width: 480px) { } لقد استهدفت الشاشات التي يبلغ أكبر عرض لها 480px ولكن يمكنك اختيار الأبعاد المناسبة لقائمتك. الآن لنقم بإضافة بعض تعليمات css في media query أولًا سنقوم بإظهار الأيقونة مجددًا و نقوم بوضع تنسيقات لها لتبدو أفضل: .toggle-nav { padding: 15px; margin: 15px; display: inline-block !important; color: #8D7F68; color: #fff; transition: color linear 0.15s; } .toggle-nav:hover, .toggle-nav.active { text-decoration: none; color: #8D7F68; } الأن لنقم بتنسيق القائمة نفسها و إضافة هذه التعليمات في نفس media query : .menu.main { display: inline-block; position: relative; background: #fff; } .menu.main ul { display: none; position: absolute; top: 80%; left: 0px; padding-left: 15px; background: #fff; } .menu.main li { display: block; float: none; } والآن الخطوة الأخيرة هي إضافة javascript المسؤولة عن إظهار القائمة عندما يضغط المستخدم على زر الأيقونة. إضافة سكربت javascript هذه الخطوة تتألف من خطوتين استدعاء السكربت وإضافة التعليمات له. لنقم أولًا باستدعائه. في قالبك أضف مجلدًا جديدًا يسمى scirpts وفي داخله ملف فارغ باسم burger-menu-script.js. الآن افتح ملف functions.php في قالبك وأضف التالي إليه: function wpmu_burger_menu_scripts() { wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpmu_burger_menu_scripts' ); /* الآن قمنا باستدعاء الملف بشكل صحيح وسنضيف التعليمات البرمجية له، افتح ملف وأضف التالي */ jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery('.menu.main ul').slideToggle(500); e.preventDefault(); }); }); هذه التعليمات استهدفت العنصر الذي له اسم الصنف toggle-nav. و هو في حالتنا الزر و الذي سوف يتم تنفيذ التعليمات عليه عند الضغط عليه من قبل المستخدم و ستعمل دالة slideToggle الخاصة بمكتبة jquery لإخفاء زر القائمة و إظهاره عند الضغط عليه من قبل المستخدم. والآن لنرى النتيجة: وعندما أضغط على الأيقونة تظهر القائمة: وهذا فيديو يوضح كيف تجري العملية: استخدام زر القائمة سيحسن تجربة المستخدم على جهاز الهاتف المحمول إذا اتبعت الخطوات السابقة، سيصبح لديك زر قائمة بسيط والذي سيحسن تجربة المستخدم بشكل كبير عندما يزور المستخدمون موقعك من شاشات صغيرة. ويمكنك فعل ما تشاء لتحسن مظهر هذا الزر وجعله مناسبًا لموقعك. ترجمة -وبتصرّف- للمقال How to Create a Custom Animated Burger Menu for WordPress لصاحبته Rachel McCollin حقوق الصورة البارزة محفوظة لـ Freepik
  2. تحتل جيوبَنا تلك الأجهزة التي يمكنها الوصول إلى معلومات العالم كلّها. فالهواتف تجعلك على اتصال دائم بأصدقائك، عائلتك، وزملائك، وترفّه عنك بينما تنتظر دورك للدفع في محل البقالة. حتّى أنّها تمكّنك من دخول عالم افتراضي بنظارة مصنوعة من الورق المقوّى. وكلّ ذلك يقتل إنتاجيتك. شاركتُ قبل بضعة أشهر في أحد مؤتمرات التسويق الرقمي في Calgary، وأتيحت لي الفرصة للتحدث عن اتجاهات التسويق الرقمي. تحدثنا عن أتمتة Automation التسويق، العمل مع المؤثرين، والذكاء الاصطناعي. ثم بدأت المواضيع تأخذ منحى أكثر خطورة بالحديث عن ظاهرة الإدمان على الهواتف الذكية وكيف يؤثر ذلك على حياتنا. أُجريَتْ لحدّ الساعة الكثير من الدراسات على موضوع التشتيت أو الإلهاء الرقمي، وتحديدًا فيما يتعلّق بالهواتف. ومن الدراسات التي أجدها مثيرة للاهتمام على نحو خاص تلك التي أجرتها مجلة علم النفس التجريبي Journal of Experimental Psychology في عددها لـشهر أغسطس/آب 2015. أجرى الباحثون هذه الدراسة على 212 طالبًا جامعيًّا، حيث عُرِّضوا إلى محفّزات وإشعارات متنوّعة مماثلة لتلك القادمة من الهواتف، وقد توصّلوا إلى النتائج التالية: التشتيت بالإشعارات ما يعنيه هذا بالنسبة لنا، نحن الأشخاص العاديين، أنّ التركيز، الانتباه، والاهتمام تتأثّر كثيرًا. وكمثال على ذلك، سأشارككم بموقف بسيط من حياتي اليومية يمكن أن ينطبق على الكثير منا. بينما كنتُ أقرأ إحدى الدراسات وأعدّ مخططًا لتدوينة صوتيّة Podcast، كانت زوجتي خارجة مع ابنتي وترسل لي باستمرار صورًا وفيديوهات قصيرة لتخبرني عمّا تفعلانه. لم أستطع مقاومة رغبتي في التحقق من هذه الإشعارات، حيث كان بإمكاني رؤية الشاشة تضيء بطرف عيني. وبالرغم من مقدار التركيز الكبير الذي أنا بحاجة إليه، ينتهي بي المطاف بالخضوع ورؤيتها، أضف إلى ذلك الرد عليها برسالة سريعة. بعد ذلك أعود إلى جهاز الحاسوب، لأجد نفسي أطالع صور Kimberly الجميلة على إنستغرام، أو ألقي نظرة سريعة على تويتر ولينكدإن. وبذلك تكون قد مرّت ثلاثون دقيقة على وقت بدء الإشعار، وهذا يعدّ أيضًا تضييعًا للوقت الإنتاجي، الأمر الذي يتفق كثيرًا مع ما وجده الباحثون. يمكن أن تتعرّض بسهولة لمثل هذا التشتيت سواء كنت جالسًا تعمل في مكتبك، خارجًا للتنزّه، في النادي الرياضي، أو أثناء استماعك لتدوينات صوتيّة. إذ تتوفر في هواتفنا العديد من طرق وتقنيات الاتصال بشبكة الإنترنت، مثل شبكات الجيل الثالث 3G، شبكات LTE، وغيرها، ناهيك عن النقاط الساخنة لشبكات WiFi اللاسلكية WiFi Hotspots المتاحة بكثرة في أمكان متعددة. في المحصّلة فإنّ أي إشعار بسيط يمكن أن يلهيك عن المهام التي تركّز عليها، مهما كانت، والذي بدوره يقتل إنتاجيتك. الإدمان على التشتيت لم نأت إلى حد الآن إلى ذكر عناصر الإدمان التي تتمثل بالتطبيقات، المواقع، الألعاب، وشبكات التواصل الاجتماعي. هذه العناصر تستفيد من منهجيات بالغة التعقيد، وعلى علماء أذكياء في مجالات النفس والأعصاب والمقاييس الحيوية من أجل بناء عوامل جذب أو سلوكيات للإدمان على منتجاتهم. لهذا السبب غالبًا ما نرى الناس يتصفحون هواتفهم حتّى بدون أن تحفّزهم الإشعارات، فهم يتحققون ويبحثون في شبكاتهم الاجتماعية عن أي إشارات حول منشوراتهم التي شاركوها. أي أنّهم مدمنون على فكرة الاتصال الاجتماعي من خلال الجهاز. والحديث في هذا الموضوع يطول ويحتاج إلى مقال لمناقشته. حارب التشتيت بتغيير عاداتك من الرائع أن يمكّنك هذا الجهاز الصغير في جيبك من الوصول إلى كم هائل من المعلومات، التواصل مع الأصدقاء، العائلة، والزملاء، الاطلاع على الأخبار وما يدور حول العالم، أو حتّى اصطياد البوكيمون في طريقك. لكن كلّ ذلك مصمم ليستولي على جزء من انتباهك. وكل جزء من انتباهك يتشتّت سيؤدي إلى تأثيرات سلبية على إنتاجيتك عند أداء المهام التي تتطلّب منك الانتباه والجهد المركّز. إذًا، كيف يمكنك أن تتغلب على هذا التشتيت؟ يتطلب حلّ هذه المشكلة أن تجري تغييرات على عاداتك وسلوكك. يمكنك مثلًا أن تبدأ بتشغيل وضع الطيران في هاتفك عندما تعمل على أمر مهم. ويمكن القيام بذلك أيضًا في الأوقات التي تحتاج فيها إلى إراحة عقلك وتفكيرك لاستيعاب فكرة ما أو دراستها. فالدماغ يحتاج إلى الراحة لتجديد الانتباه، ممارسة التركيز، وتوليد الأفكار الإبداعية. جرّب أن تخرج للتنزه بدون أن تأخذ هاتفك ولاحظ تأثير ذلك. وصدّقني، لن يفنى العالم إن لم تتصفح تويتر في هذه الدقائق الثلاثين، الأربعين، أو حتّى الستين. ترجمة- بتصرّف - للمقال YOUR PHONE IS KILLING YOUR PRODUCTIVITY لصاحبه Ernest Barbaric. حقوق الصورة البارزة محفوظة لـ Freepik
  3. هيأنا في الجزأين الأول والثاني من هذا الدرس شكل الهاتف وأزراره وأضفنا الأرقام. سنضع في هذا الجزء الأخير من الدرس اللمسات الأخيرة على الهاتف لنحصل على شكله النهائي. أنشئ شعار الهاتف 1: حان الوقت لإنشاء شعار الهاتف. افتح لوحة الأحرف Window> Type> Character وأدخل القيم المبيّنة أدناه. بعد ذلك استخدم أداة الكتابة T، انقر على لوح الرسم، اكتب النص المرغوب، ثم ضعه في الموضع الذي تراه في الصورة ادناه. أنشئ أيقونة الساعة 2: الخطوة التالية هي إنشاء أيقونة الساعة. استخدم أداة رسم المستطيلات M لإنشاء مستطيل بأبعاد 6 × 8 بكسل وبلون R=225، G=225، B=225. حدّد النقطة العلوية اليمنى للمستطيل الجديد وقم بإزالتها. بعد ذلك حدّد النقطة العلوية اليسرى وحرّكها بمقدار 3 بكسل إلى اليمين لتحصل على شكل مثلث. أنشئ دائرة بأبعاد 71 × 71 بكسل باستخدام أداة رسم البيضوي L وتأكّد من أنّها محدّدة ثم اذهب إلى Object> Path> Offset Path. أدخل القيمة -33 بكسل في حقل Offset ثم انقر على OK. الآن حدّد الدائرة الكبيرة التي أنشأتها في هذه الخطوة، اضغط على Shift، انقر على المستطيل، أفلِت المفتاح Shift، قم انقر على الدائرة الكبيرة مجددًا لتثبيت موقعها. بعد ذلك افتح لوحة المحاذاة Window> Align، انقر على زر Horizontal Align Center، ثم على زر Vertical Align Top. 3: اسحب دليلين أحدهما أفقي والآخر عمودي من المساطر. بعد ذلك حدّد الدائرة الكبيرة التي أنشأتها في الخطوة 31، اضغط على Shift، انقر على الدليلين الجديدين، أفلِت المفتاح Shift، ثم انقر على الدائرة الكبيرة مجددًا لتثبيت موقعها. بعد ذلك انقر على زرّي Horizontal Align Center وVertical Align Center من لوحة المحاذاة. الآن حدّد المثلث، اختر أداة التدوير R، اضغط على المفتاح Alt وانقر على نقطة تقاطع الدليلين الجديدين. في مربع الحوار Rotate، أدخل القيمة 30 في حقل Angle وانقر على Copy، ثم اضغط على Ctrl +D عشر مرّات للحصول على النتائج المبيّنة في الصورة الثالثة أدناه. وأخيرًا حدّد الدائرة الصفراء الكبيرة وقم بإزالتها. 4: الخطوة التالية هي رسم عقارب الساعة، وسنقوم أولًا برسم عقرب الدقائق. استخدم أداة رسم المستطيلات M لإنشاء مستطيل بأبعاد 12 × 53 بكسل وبلون R=109، G=110، B=113. حدّد النقطة العلوية اليمنى للمستطيل وقم بإزالتها، ثم حدّد النقطة العلوية اليسرى وحرّكها بمقدار 6 بكسل إلى اليمين للحصول على شكل مثلث. اسحب دليلًا عموديًا من المسطرة، حدّد المثلث الجديد الذي أنشأته في هذه الخطوة مع الدليل العمودي الجديد، ثم انقر على زر Horizontal Align Center من لوحة المحاذاة. قم بإضافة نقطة مميزة بالأصفر للمثلث (كما تلاحظ في الصورة الرابعة ادناه) ثم حرّكها بمقدار 3 بكسل إلى الأسفل. أعِد تحديد الشكل الذي أنشأته في هذه الخطوة وانسخه. غيّر اللون الحالي لنسخة الشكل إلى اللون R=209، G=211، B=212. بعد ذلك حدد النقطة اليسرى للشكل الجديد وقم بإزالتها. وأخيرًا، أعِد تحديد الشكلين الذين أنشأتهما في هذه الخطوة وحوّلها إلى مجموعة، ثم قم بتسمية المجموعة بالاسم “دقائق”. 5: حدّد المجموعة “دقائق” وانسخها، ثم ضع النسخة في موضع آخر. الآن ركّز على المجموعة الجديدة، اختر أداة التحديد المباشرDirect Selection Tool A واسحب الفأرة باتجاه السهم الأصفر لإنشاء شكل يشبه الخيمة كما مبيّن أدناه في الصورة الأولى. بعد ذلك حرّك النقاط المحدّدة بمقدار 26 بكسل إلى الأسفل. قم بتسمية هذه المجموعة باسم “ساعات”. نأتي الآن إلى عقرب الثواني. أنشئ مستطيلًا بأبعاد 1.5 × 68 بكسل باستخدام أداة رسم المستطيلات M ثم طبّق عليه اللون R=209، G=211، B=212 وقم بتسميته بالاسم “ثواني”. 6: حدّد المستطيل “ثواني” واذهب إلى Object> Transform> Rotate، ثم أدخل القيمة 106 في حقل Angle وانقر على OK. ضع المستطيل الناتج في الموضع الموضّح في الصورة أدناه. بعد ذلك حدّد المجموعة “ساعات” وقم بتدويرها بزاوية -120 درجة تقريبًا، ثم ضع المجموعة في الموضع المناسب كما موضّح في الصورة الثانية أدناه. وأخيرًا، حدّد المجموع “دقائق” وضعها في الموضع الموضّح في الصورة الثالثة أدناه. 7: لإعطاء لمسة أكثر واقعية للساعة، سنقوم بإضافة بعض الظلال على عقارب الساعة. حدّد عقارب الساعة الثلاثة واذهب إلى Effect> Stylize> Drop Shadow. ثم قم بإدخال البيانات المبيّنة في الصورة أدناه وانقر على OK. بعد ذلك حدّد الدائرة الصفراء واجلبها إلى المقدمة Ctrl +Shift+ [، ثم املأها باللون R=128، G=130، B=133 وقم بإزالة لون الحدّ. وأخيرًا حدّد جميع العناصر التي أنشأتها منذ بداية الخطوة 31 حتّى هذه الخطوة وحوّلها إلى مجموعة Ctrl +G، ثم ضع هذه المجموعة في الموضع الموضّح في الصورة الأخيرة أدناه. أنشئ الانعكاس على الشاشة 8: حدّد الشكل العلوي الذي أنشأته في الخطوة 5، انسخه، وحرّك هذه النسخة إلى المقدمة. استخدم أداة إضافة النقاط + لإضافة نقطة مميّزة بالأخضر للشكل الجديد. بعد ذلك حدّد النقاط الثلاثة المميزة بالأحمر وقم بإزالتها. الآن، ركّز على الصورة الثالثة أدناه، واستخدم أداة تحويل النقاط Convert Anchor Point Tool Shift +C لإزالة المقبضين الأيسرين للنقطتين العلوية اليسرى والسفلية اليسرى للشكل الجديد (اجعل طول المقبضين مساويًا للصفر). أعِد تحديد الشكل الذي قمت بتعديله في هذه الخطوة ثم غيّر لونه إلى اللون R=225، G=225، B=225. بعد ذلك غيّر نمط الدمج للشكل الناتج إلى Overlay وقلّل قيمة Opacity إلى 30%. 9: حدّد جميع العناصر التي أنشأتها منذ بداية الخطوة 2 حتّى هذه الخطوة، ثم اجمعها Ctrl +G وقم بتسميتها بالاسم “هاتف_خلوي”. أصبح الهاتف جاهزًا الآن وسيبدو كالتالي: أنشئ الخلفية 10: لقد انتهينا من رسم الهاتف، وسنقوم الآن بإنشاء الخلفية. استخدم أداة رسم المستطيلات M وأنشئ مستطيلين بأبعاد 1308 × 363 بكسل و1308 × 321 بكسل. بعد ذلك حدّد المستطيلين الجديدين، افتح لوحة المحاذاة Window> Align، انقر على زر Horizontal Align Center وزر Vertical Align Bottom. واصل العمل بأداة رسم المستطيلات وأنشئ مستطيلًا بأبعاد 1308 × 611 بكسل، ثم ضعه في الموضع المبيّن في الصورة الثالثة أدناه. الآن حدّد المستطيل الأزرق الذي أنشأته في هذه الخطوة، اضغط على Shift، انقر على المستطيل الأسود الجديد، أفلِت المفتاح Shift، وانقر على المستطيل الأزرق مجددًا لتثبيت موضعه. بعد ذلك انقر على زر Horizontal Align Center في لوحة المحاذاة. 11: املأ المستطيل الأحمر بتدرّج قطري كما موضّح أدناه ثم قم بإزالة حدّ الشكل. بعد ذلك حدّد المجموعة “هاتف_خلوي” واجلبها إلى المقدّمة وضعها في الموضع الذي تراه في الصورة الثانية أدناه. وأخيرًا، حدّد المستطيل الأسود واملأه بتدرّج قطري كما موضّح في الصورة الثالثة أدناه، ثم قم بإزالة حدّ الشكل. 12: حدّد المجموعة “هاتف_خلوي” واذهب إلى Object> Transform> Reflect. حدّد الخيار Horizontal من مجموعة Axis ثم انقر على Copy. اسحب النسخة التي أنشأتها للتو إلى الأسفل إلى الموضع الموضّح أدناه، ولا تنسَ أن تضغط على المفتاح Shift أثناء السحب لضمان تحريكها بشكل مستقيم. الآن حدّد المستطيل الأزرق الذي أنشأته في الخطوة 39 واجلبه إلى المقدّمة Ctrl +Shift+ [. بعد ذلك املأه بتدرّج قطري كما مبيّن في الصورة الثانية أدناه ثم قم بإزالة حدّ الشكل. 13: لإضافة بعض التفاصيل، قم أولًا بإنشاء شكلٍ أحمر اللون كالمبيّن في الصورة أدناه باستخدام أداة القلم P. بعد الانتهاء من ذلك، املأ الشكل بتدرّج قطري كما مبيّن في الصورة الثانية أدناه، ثم قم بإزالة حدّ الشكل. طبّق التأثير Gaussian Blur بقيمة 91 بكسل على الشكل الناتج وقلّل قيمة Opacity إلى 20%. أعِد تحديد الشكل الذي طبقت عليه تأثير التمويه في هذه الخطوة ثم قم بعمل نسخة منه Ctrl +C، Ctrl +F. وبينما لا يزال هذا الشكل محدّدًا، قم بعمل انعكاس reflect له بشكل عمودي، ثم ضعه على الجانب الآخر من الهاتف الخلوي. وأخيرًا، حدّد الشكلين الذين أنشأتهما في هذه الخطوة وقم بإخفائهما خلف الهاتف الخلوي. وبذلك نكون قد انتهينا. ترجمة-وبتصرّف-للمقال How to create a Realistic Cell Phone لصاحبه: Bao Nguyen
  4. تعرّفنا في الجزء الأول من هذا الدرس على كيفية إنشاء الشكل الأساسي للهاتف وزرّ التحكّم. نواصل في هذا الجزء مع أجزاء أخرى من الهاتف. أنشئ زر الاتصال وزر الإلغاء 1: باستخدام أداة القلم Pen Tool P قم بإنشاء شكلٍ أخضر اللون كما موضّح أدناه، وبمجرد الانتهاء من الرسم املأه بلون شفاف ثم قم بإضافة حد بسمك 1 بكسل ولون R=0، G=0، B=0. حدّد الشكل الجديد مجددًا واذهب إلى Object> Path> Offset Path. أدخل القيمة -1.5 بكسل في حقل Offset وانقر على OK. املأ الشكل الجديد باللون R=109، G=110، B=113 واستبدل لون الحدّ الحالي باللون R=225، G=225، B=225. وأخيرًا غيّر نمط الدمج Blending Mode للشكل الناتج إلى Overlay. 2: استعن بأداة القلم P وأداة رسم البيضوي L لرسم شكلين باللون الأخضر كما تلاحظ في الصورة أدناه. حدّد هذين الشكلين من جديد ثم اذهب إلى Effect> Stylize> Outer Glow. أدخل القيم المبيّنة في الصورة الثانية أدناه وانقر على OK. 3: ارسم الشكل المبيّن في الصورة أدناه باستخدام أداة القلم P. بعد ذلك املأه باللون R=147، G=149، B=152 وقم بإضافة حدّ بسمك 1 بكسل ولون R=88، G=89، B=91. لا تلغِ تحديد الشكل الناتج، واعمل نسخة ثانية منه Ctrl +C، Ctrl +F. بعد ذلك حرّك النسخة الجديدة بمقدار 2 بكسل إلى الأسفل ثم 3 بكسل إلى اليسار. وأخيرًا، غيّر نمط الدمج للشكل الجديد إلى Overlay وقلل قيمة Opacity إلى 60%. 4: قبل أن تواصل الرسم، حدّد كل الأشكال التي أنشأتها منذ بداية الخطوة 13 حتّى هذه الخطوة ثم حوّلها إلى مجموعة Ctrl +G. حدّد هذه المجموعة ثم اذهب إلى Object> Transform> Reflect. اختر Vertical من مجموعة Axis ثم انقر على Copy. اسحب النسخة التي أنشأتها للتو إلى جهة اليمين، ولا تنسَ الضغط على المفتاح Shift أثناء السحب لتضمن تحريكها بشكل مستقيم. بعد ذلك اختر أداة التحديد Selection Tool V، انقر بشكل مزدوج على المجموعة الجديدة، واستبدل اللون الحالي للشكلين الأخضرين باللون الأحمر. أعِد تحديد الشكلين الأحمرين وافتح لوحة المظهر Window> Appearance، ثم انقر على قسم Outer Glow. في مربع الحوار Outer Glow، قم بإدخال القيم المبيّنة في الصورة الثانية أدناه. عند هذه الخطوة يجب أن يبدو شكل الهاتف كالذي في الصورة الأخيرة أدناه. أنشئ المنطقة التي تحتوي أزرار الأرقام والرموز 5: اسحب دليلًا أفقيًا من المسطرة إلى الموضع المبيّن أدناه. حدّد الشكل الأسود الذي أنشأته في الخطوة 5 وانسخه، ثم حرّك النسخة إلى المقدمة. قم بإزالة لون التعبئة لهذه النسخة وإضافة حدّ بسمك 1 بكسل ولون أحمر. استخدم أداة إضافة النقاط + لإضافة نقطتين مميزة باللون الأخضر للشكل الأحمر. بعد ذلك حدّد النقطتين العلويتين للشكل الأحمر وقم بإزالتهما لتحصل على الشكل المبيّن في الصورة الثانية أدناه. الآن حدّد الدليل العمودي الذي أنشأته في الخطوة 2 وانسخه مرّتين Ctrl +C، Ctrl +F، Ctrl +F. حدّد أحد الدليلين الجديدين وحرّكه بمقدار 73 بكسل إلى اليسار. ثم حدّد الدليل الجديد الآخر وحرّكه بمقدار 73 بكسل إلى اليمين. بعد ذلك قم بإضافة ثلاث نقاط للشكل الأحمر؛ نقطتين مميزتين بالأصفر وأخرى بالأخضر كما موضّح في الصورة الثالثة أدناه. الآن حدّد النقطتين المميزتين بالأصفر وحرّكهما بمقدار 35 بكسل إلى الأسفل، ثم حدّد النقطة المميزة بالأخضر وحرّكها بقدار 25 بكسل إلى الأسفل. 6: حدّد الدليلين الجديدين وقم بإزالتهما، ثم قم بإخفاء الدليل العمودي الذي أنشأته في الخطوة 2. الآن حدّد النقطة المميزة بالأخضر على الجهة اليسرى من الشكل الأحمر وحرّكها بمقدار 1 بكسل إلى اليسار. ثم حدّد النقطة المميّزة بالأصفر على الجهة اليسرى وحرّكها بمقدار 2 بكسل إلى اليسار. طبّق الخطوات نفسها على الجهة اليمنى من الشكل الأحمر لتحصل على الشكل المبيّن في الصورة الثانية أدناه. وأخيرًا، أعِد تحديد الشكل الأحمر ثم قم بإزالة لون الحدّ واملأ الشكل بتدرّج خطّي حسب القيم الموضّحة في الصورة الثالثة أدناه. 7: باستخدام أداة القلم P ارسم مسارًا متعرّجًا كما موضح أدناه، وبعد الانتهاء تأكد من تحديده ثم اذهب إلى Object> Transform> Scale. قم بتأشير الخيار Uniform، أدخل القيمة 93 في حقل Scale وانقر على Copy. حرّك النسخة الجديدة إلى الموضع المبيّن في الصورة الثانية أدناه. قم بإعادة تحديد المسارين الجديدين واذهب إلى Object> Blend> Blend Options. قم بإدخال القيم الموضّحة في الصورة الثالثة أدناه وانقر على OK، ثم اذهب إلى Object> Blend> Make Ctrl +Alt +B. استخدم أداة القلم مجددًا P لرسم مسارين جديدين بالشكل المبيّن في الصورة الأخيرة أدناه. أنشئ الأزرار 8: استعِن بأداة رسم البيضوي L وأنشئ أربع دوائر بإبعاد 30 × 30 بكسل وبلون أرجواني. حدّد اثنين من هذه الدوائر واستبدل لون الحد الأرجواني باللون الأحمر، ثم حرّك الدوائر الأربعة جميعها إلى الموضع المناسب، كما مبيّن أدناه. بعد ذلك حدّد الدائرتين الأرجوانيتين، اذهب إلى Object> Blend> Blend Options، أدخل القيم الموضّحة في الصورة الثانية أدناه، وانقر على OK، ثم اذهب إلى Object> Blend> Make Ctrl +Alt +B. بعد ذلك كرر الخطوة السابقة على الدائرتين الحمراوين. الآن، حدّد الدوائر المكررة الحمراء والخط المنحني الأصفر، ثم اذهب إلى Object> Transform> Reflect. حدّد الخيار Vertical من قسم Axis ثم انقر على Copy. اسحب العناصر التي قمت بنسخها للتو إلى اليمين، ولا تنس أن تضغط على Shift أثناء السحب لضمان تحريكها بشكل مستقيم. 9: حدّد العناصر المكررة الزرقاء والخطوط المنحنية الصفراء التي أنشأتها في الخطوة السابقة ثم حوّلها إلى مجموعة Ctrl +G. بعد ذلك املأ المجموعة الجديدة بلون شفاف وقم بإضافة حدّ بسمك 4 بكسل ولون R=167، G=169، B=172. تأكّد من تحديد هذه المجموعة، افتح لوحة المظهر Window> Appearance، ثم انقر على زر Add New Stroke (في الزاوية السفلية اليسرى من لوحة المظهر). ستضيف هذه الخطوة حدًّا ثانيًا للمجموعة. املأ الحد باللون R=88، G=89، B=91 وغيّر سمكه إلى 1 بكسل. الآن حدّد الشكل الذي أنشأته في الخطوة 18، انسخه، وحرّك النسخة إلى المقدّمة Ctrl +Shift+ [. بعد ذلك حدّد النقاط العلوية الخمس للشكل الجديد وحرّكها إلى الأعلى بمقدار 10 بكسل. قم بإعادة تحديد هذا الشكل مع المجموعة التي أنشأتها في هذه الخطوة، ثم اذهب إلى Object> Clipping Mask> Make Ctrl +7. وأخيرًا، قم بإخفاء المجموعة التي قمت بعمل Clipping Mask لها خلف الدوائر الاثني عشر التي أنشأتها في الخطوات السابقة. 10: حدّد العنصرين الأحمرين المكررين والعنصر الأرجواني المكرر، ثم اذهب إلى Object> Expand. انقر على OK عند ظهور مربّع الحوار Expand، ثم اضغط على المفاتيح Ctrl +Shift +G لإلغاء تجميع المجموعات الثلاث الناتجة. تأكّد من تحديد الدوائر الجديدة واملأها باللون R=167، G=169، B=172، ثم قم بإزالة الحدود منها. واصل تحديد الدوائر الناتجة، ثم اذهب إلى Object> Path> Offset Path. أدخل القيمة -1.5 بكسل في حقل Offset ثم انقر على OK. بعد ذلك غيّر لون التعبئة الحالي للدوائر الجديدة إلى اللون R=88، G=89، B=91. تأكّد من أنّ الدوائر الناتجة ما زالت محدّدة ثم اذهب إلى Object> Path> Offset Path. أدخل القيمة -1 بكسل في حقل Offset ثم انقر على OK. بعد ذلك قم بإضافة حدّ بسمك 1 بكسل للدوائر الجديدة ثم أزِل لون التعبئة الخاص بها. الآن، حدّد الدائرة الحمراء في وسط الجزء العلوي واملأها بتدرّج قطري كما موضّح في الصورة الرابعة أدناه، ثم قم بإزالة لون الحدّ منها. وأخيرًا، حدّد كلّ الدوائر الحمراء المتبقية، اختر أداة القطارة Eyedropper Tool I وانقر على الدائرة التي ملأتها للتو بالتدرّج القطري. عند هذه الخطوة يجب أن يكون شكل الأزرار كما في الصورة الأخيرة أدناه. أضِف الأرقام 11: افتح لوحة الأحرف Window> Type> Character وأدخل القيم المبيّنة أدناه. بعد ذلك افتح لوحة الفقرات Window> Type> Paragraph وانقر على زرAlign Center. الآن استخدم أداة الكتابة Type Tool T وببساطة اكتب الأرقام على لوحة الرسم ثم ضعها في الموضع المناسب كما تلاحظ في الصورة الأولى أدناه. وأخيرًا قم بإضافة رمزي النجمة والمربّع كما مبيّن في الصورة الثانية أدناه. أضِف الحروف 12: كرّر الخطوة السابقة نفسها لإضافة الحروف على المنطقة التي تحتوي الأزرار، لكن استخدم نوع خط مختلف هذه المرّة. بعد ذلك قم بإضافة بعض الرموز كما تلاحظ في الصورة الثانية أدناه. 25: عند هذه الخطوة يجب أن يكون شكل الهاتف كالتالي: أنشئ شاشة الهاتف 13: حدّد الشكل العلوي الذي أنشأته في الخطوة 5 ثم اذهب إلى Object> Transform> Scale، قم بتأشير الخيار Non-Uniform، أدخل القيمة 93 في حقل Horizontal، والقيمة 87 في الحقل Vertical، ثم انقر على Copy. بعد ذلك حدّد النقطة العلوية للشكل الجديد وحرّكها إلى الأسفل بمقدار 19 بكسل. أعِد تحديد الشكل الجديد وقم بإزالة لون الحد الخاص به، ثم استبدل لون التعبئة الحالي بتدرج خطي جديد كما مبيّن في الصورة الثالثة أدناه. وبينما الشكل الناتج لا يزال محددًا، قم بعمل نسخة منه Ctrl +C، Ctrl +F، ثم غيّر لون التعبئة الحالي للنسخة بتدرّج قطري كما مبيّن في الصورة الأخيرة أدناه. أنشئ سماعة الهاتف 14: اختر أداة رسم المستطيلات مدورة الحواف Rounded Rectangle Tool، انقر على منطقة الرسم، ثم أدخل القيم الموضّحة في الصورة أدناه وانقر على OK. اذهب إلى Object> Path> Offset Path ثم أدخل القيمة -2 بكسل في حقل Offset وانقر على OK. بعد ذلك غيّر لون الحدّ الحالي للشكل الجديد إلى الأحمر. أعِد تحديد المستطيل الأزرق واملأه باللون R=35، G=31، B=32، ثم قم بإزالة لون الحدّ للمستطيل الناتج. 15: باستخدام أداة رسم الخطوط المستقيمة Line Segment Tool \ قم بإنشاء خط عمودي شفاف اللون بطول 24 بكسل، وحدّ بسمك 0.5 بكسل ولون R=230، G=231، B=232. بعد ذلك قم بتدوير هذا الخط بزاوية -44 درجة تقريبًا. قم بعمل نسخة من هذا الخط Ctrl +C، Ctrl +F ثم ضع الشكلين على المواضع الموضّحة في الصورة الثانية أدناه. أعِد تحديد الخطين واذهب إلى Object> Blend> Blend Options ثم أدخل القيم المبيّنة في الصورة الثالثة أدناه وانقر على OK. أبقِ على الشكل المكرر محددًا واذهب إلى Object> Transform> Reflect ثم قم بتأشير الخيار Vertical وانقر على Copy. الآن حدّد المستطيل الأحمر الذي أنشأته في الخطوة 27، انقله إلى المقدمة Ctrl +Shift+ [، انسخه، ثم قم بإخفاء النسخة Ctrl +3. أعِد تحديد المستطيل الأحمر الأصلي، اضغط على Shift، وانقر على العنصرين المكررين الذين أنشأتهما في هذه الخطوة، ثم اذهب إلى Object> Clipping Mast> Make Ctrl +7. 16: حدّد المستطيل الأسود الذي أنشأته في الخطوة 27، انسخه، ثم انقل النسخة إلى المقدمة. حدّد النسخة الجديدة، أزِل لون التعبئة، ثم قم بإضافة حدّ بسمك 3 بكسل ولون R=209، G=211، B=212. وقبل المواصلة، اضغط على المفاتيح Ctrl +Alt +3 لإظهار المستطيل الأحمر الذي أخفيته في الخطوة 28. بعد ذلك غيّر لون الحدّ الحالي للمستطيل الأحمر إلى اللون R=0، G=0، B=0، ثم طبّق التأثير Gaussian Blur بقيمة 2 بكسل على المستطيل الناتج، وغيّر قيمة Opacity إلى 60%. وأخيرًا، حدّد جميع العناصر التي أنشأتها من بداية الخطوة 27 حتّى هذه الخطوة وحوّلها إلى مجموعة Ctrl +G، ثم ضع هذه المجموعة في الموضع الموضّح في الصورة الأخيرة أدناه. ترجمة-وبتصرّف-للمقال How to create a Realistic Cell Phone لصاحبه: Bao Nguyen
  5. سنتعلم في هذا الدرس – المكوّن من أجزاء - كيفية إنشاء هاتف محمول واقعي باستخدام الأشكال والتدرجات البسيطة في إلستريتور. وسنقوم باستخدام لوحات المحاذاة Align، مستكشف المسار Pathfinder والحدود Stroke بالإضافة إلى دمج العناصر للحصول على النتيجة النهائية. لنبدأ! تبدو النتيجة النهائية على النحو التالي. أنشئ ملفًا جديدًا 1: افتح برنامج إلستريتور ثم اضغط على Ctrl+ N لإنشاء ملف جديد. اختر Pixels من القائمة المنسدلة Units، أدخل 1308 في حقل العرض width و876 في حقل الارتفاع height ثم انقر على زر Advanced لفتح الخيارات المتقدمة. اختر RGB، Screen (72ppi)، وتأكّد من إلغاء تأشير مربّع الخيار Align New Objects to Pixel Grid قبل أن تنقر على OK. أنشئ الشكل الأساسي للهاتف 2: باستخدام أداة رسم المستطيلات Rectangle Tool (M) قم بإنشاء مستطيل بأبعاد 247 × 222 بكسل. بعد ذلك أظهر المساطر عبر المسار View> View Rulers> Show Ruler أو باستخدام مفتاحي الاختصار Ctrl +R، ثم قم بسحب دليل guide عمودي من المساطر (إذا كانت الدلائل مقفلة، إذا اذهب إلى View> Guides> Lock Guides أو اضغط على Ctrl +Alt + ; حدّد المستطيل الأحمر، اضغط على Shift، ومع الاستمرار بالضغط انقر على الدليل الذي أنشأته للتو، أفلت المفتاح Shift ثم انقر على المستطيل الأحمر مجددًا لتثبيت موضعه. بعد ذلك افتح لوحة المحاذاة Align عبر المسار Window> Align وانقر على زر Horizontal Align Center. الآن اختر أداة إضافة النقاط Add Anchor Point (+) وانقر على النقطتين المميزتين بالأزرق. بعد ذلك قم بتحديد النقطة العلوية الوسطى وحرّكها إلى الأعلى بمقدار 50 بكسل، ثم اضغط على زر Covert selected anchor points to smooth من شريط الخصائص Properties. بعد ذلك قم بتعديل مقابض النقاط التي قمت بتحريكها لتصبح بالشكل الموضّح في الصورة التالية مستخدمًا أداة التحديد المباشر Direct Selection Tool (A) والمفتاح Shift. الآن حدّد النقطة السفلية الوسطى وحرّكها بمقدار 12 بكسل إلى الأسفل. وأخيرًا اختر أداة تحويل النقاط Convert Anchor Point Tool (Shift +C)، انقر على النقطة التي قمت بتحريكها للتو واسحبها إلى اليسار أثناء الضغط على المفتاح Shift. في النهاية يجب أن يصبح العنصر الجديد كما موضّح في الصورة الأخيرة أدناه. 3: قم بإنشاء مستطيل بإبعاد 215 × 220 بكسل باستخدام أداة رسم المستطيلات (M) وضعه في الموضع الموضّح أدناه. الآن حدد العنصر الأحمر الذي قمت بإنشائه في الخطوة 2، اضغط على Shift، انقر على المستطيل الأزرق الذي أنشأته في هذه الخطوة، أفلت المفتاح Shift، وانقر على العنصر الأحمر مجددًا لتثبيت موضعه، ثم انقر على زر Horizontal Align Center من لوحة المحاذة Align. حدد النقطة العلوية اليسرى للمستطيل الأزرق وحرّكها بمقدار 15 بكسل إلى اليسار، ثم حدد النقطة العلوية اليمنى وحرّكها بمقدار 15 بكسل إلى اليمين: 4: باستخدام أدار رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 100 × 50 بكسل وبلون أسود، ثم ضعه في الموضع الموضّح أدناه. الآن حدّد العنصر الأزرق الذي قمت بإنشائه في الخطوة 3، اضغط على Shift، انقر على المستطيل الأسود الذي أنشأته في هذه الخطوة، أفلت المفتاح Shift، وانقر على العنصر الأزرق مجددًا لتثبيت موضعه، ثم انقر على زر Horizontal Align Center من لوحة المحاذاة. وبمساعدة الأداة Add Anchor Point Tool (+)، قم بإضافة نقطتي ربط باللون الأحمر للعنصر الأزرق. بعد ذلك قم بإزالة المستطيل الأسود ثم أعِد تحديد النقطتين التي أنشأتهما للتو وحرّكهما بمقدار 48 بكسل إلى الأسفل. استخدم الأداة Convert Anchor Point Tool (Shift +C) وانقر على النقطة السفلية اليسرى للعنصر الأزرق، ثم اسحب النقطة إلى اليمين بينما تضغط على المفتاح Shift. كرّر نفس الخطوات للنقطة السفلية اليمنى. بعد ذلك استخدم أداة إضافة النقاط (+) وقم بإضافة نقطة مميزة بالأحمر وحرَكها إلى الأعلى بمقدار 2 بكسل للحصول على الشكل الموضّح في الصورة الأخير أدناه. 5: بعد الانتهاء من تعديل الشكل الأزرق، قم بإعادة تحديد هذا الشكل واملأه باللون R=35، G=31، B=32. بعد ذلك حدد العنصر الأحمر واملأه بلون متدرّج خطي linear كما موضّح أدناه، ثم قم بإضافة حدّ بعرض 2 بكسل وبلون R=65، G=64، B=66. 6: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 290 × 6 بكسل وبلون أحمر، ثم ضعه في الموضع الموضّح أدناه. حدّد الشكل الأسود الذي أنشأته في الخطوة 5 واعمل نسخة ثانية منه (Ctrl +C، Ctrl +F). ثم حدّد هذه النسخة من الشكل الأسود، اضغط على Shift ثم انقر على المستطيل الأحمر الذي أنشأته في هذه الخطوة. بعد ذلك افتح لوحة مستكشف المسار Pathfinder (Window> Pathfinder) وانقر على زر Intersect. استخدم أداة إضافة النقاط (+) لإضافة نقطة مميزة بالأصفر للعنصر الأحمر، ثم حرّك النقطة الجديدة بمقدار 70 بكسل إلى الأسفل. استعِن بالأداة Convert Anchor Point Tool (Shift +C) لتعديل شكل العنصر الأحمر ليصبح كالذي تراه في الصورة السادسة أدناه. بعد الانتهاء من تعديل شكل العنصر الأحمر، قم بتطبيق تدرّج خطي جميل كما موضّح في الصورة الأخيرة أدناه. 7: في هذه المرحلة يجب أن يبدو شكل الهاتف كالتالي: أنشئ زر التحكّم 8: ابدأ برسم دائرة بلون أحمر وبأبعاد 56 × 56 باستخدام الأداة Ellipse Tool (L)، ثم ضع هذه الدائرة في الموضع المناسب كما موضّح أدناه. املأ الدائرة باللون R=35، G=31، B=32 ثم قم بإضافة حدّ لها باللون R=167، G=169، B=172 وبسمك 3 بكسل. واصل تحديد هذه الدائرة ثم افتح لوحة الحدود (Window> Stroke) وانقر على أيقونة Align Stroke to Inside. بعد ذلك افتح لوحة المظهر (Window> Appearance)، انقر على زر Add New Stroke (يوجد هذا الزر على الزاوية السفلية اليسرى من لوحة المظهر). هذه الخطوة ستضيف حدًّا ثانيًا للدائرة. املأه باللون R=188، G=190، B=192 وغيّر سمك الحدّ إلى 1.5 بكسل. 9: حدد الدائرة التي أنشأتها في الخطوة 8 ثم اذهب إلى Object> Transform> Scale، قم بتأشير الخيار Uniform ثم أدخل القيمة 16 في حقل Scale، وانقر على Copy. لا تُلغِ تحديد الدائرة الجديدة وافتح لوحة المظهر (Window> Appearance) ثم قم بإزالة الحد ذي السُمك 3 بكسل لهذه الدائرة. بعد ذلك استبدل لون الحدّ الحالي باللون R=128، G=130، B=133 واستبدل لون التعبئة الحالي باللون R=209، G=211، B=213. تأكد من أنّ شكل الدائرة الناتج ما زال محدّدًا، افتح لوحة الحدود (Window> Stroke) وانقر على أيقونة Align Stroke to Outside. 10: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 1.5 × 50 بكسل وبلون R=65، G=64، B=66. حدّد الدائرة التي أنشأتها في الخطوة 9، اضغط على Shift، انقر على المستطيل الذي أنشأته للتو، أفلِت المفتاح Shift، ثم انقر على الدائرة التي أنشأته في الخطوة 9 مجددًا لتثبيت موضعها. بعد ذلك افتح لوحة المحاذاة (Window> Align) وانقر على زر Horizontal Align Center، قم انقر على زر Vertical Align Center. حدّد المستطيل الذي أنشأته في هذه الخطوة من جديد ثم اذهب إلى Object> Transform> Rotate، أدخل القيمة 90 في حقل Angle وانقر على Copy. وأخيرًا، حدّد المستطيلين الذَين أنشأتهما في هذه الخطوة وقم بإخفائهما خلف الدائرة التي أنشأتها في الخطوة 9. 11: باستخدام أداة رسم المستطيلات (M) أنشئ مستطيلًا بأبعاد 14 × 9 بكسل وبلون R=199، G=190، B=192. حدد النقطة العلوية اليسرى للمستطيل الجديد وأزِلها. ثم حدد النقطة العلوية اليمنى وحرّكها بمقدار 7 بكسل إلى اليسار. ضع المثلث الجديد في الموضع المناسب كما موضّح في الصورة الثالثة أدناه. باستخدام أداة إضافة النقاط (+) انقر على مركز الجزء السفلي من المثلث ثم حرّك النقطة الجديد بمقدار 5 بكسل إلى الأعلى. بعد ذلك اسحب دليلًا أفقيًا من المساطر. حدّد الدائرة التي أنشأتها في الخطوة 9، اضغط على مفتاح Shift، انقر على الدليل الأفقي، أفلِت المفتاح Shift، ثم انقر على الدائرة التي أنشأتها في الخطوة 9 مجددًا لتثبيت موضعها. بعد ذلك افتح لوحة المحاذاة (Window> Align) وانقر على زر Vertical Align Center. الآن أعِد تحديد الشكل الأبيض الذي أنشأته في هذه الخطوة، اختر أداة التدوير Rotate Tool (R)، اضغط على المفتاح Alt وانقر على نقطة التقاطع للدليلين. في مربّع الحوار Rotate، أدخل الزاوية 90 في حقل Angle وانقر على Copy، ثم اضغط على Ctrl +D مرّتين للحصول على النتيجة الموضّحة في الصورة السادسة أدناه. 12: حدّد الدائرة التي أنشأتها في الخطوة 8 واذهب إلى Object> Transform> Scale. قم بتأشير الخيار Uniform وأدخل القيمة 95 في حقل Scale وانقر على Copy. حرّك هذه النسخة إلى المقدمة (Ctrl +Shift+ [)، املأها بتدرّج قطري radial كما مبيّن أدناه، ثم احذف الحد منها. بعد ذلك غيّر قيمة Blending Mode للدائرة الناتجة إلى Soft Light. عند هذه الخطوة، يجب أن يبدو شكل الهاتف كما مبيّن في الصورة أدناه. ترجمة- بتصرّف - للمقال How to create a Realistic Cell Phone لصاحبه Bao Nguyen.
  6. سنبدأ في هذا الدرس من سلسلة تعلّم برمجة تطبيقات أندرويد باستخدام Xamarin.Forms ببناء تطبيق عملي بمعايير تقنيّة عالية. حيث سنستخدم المعارف التي حصلنا عليها من الدروس السابقة في بناء تطبيق جهات اتصال بسيط لكنّه يستخدم تقنيّات ومفاهيم متقدّمة نسبيًّا. سنتناول هذا التطبيق على ثلاثة أجزاء متتالية، إليك وصف مختصر لمحتوى كلّ منها: الجزء الأوّل: شرح الغاية من التطبيق، وتوضيح فكرة نموذج المستودع Repository في بناء التطبيقات، مع بناء الهيكل العام للتطبيق، وهذا هو محتوى هذا الدرس. الجزء الثاني: تجهيز النواحي الوظيفيّة للمستودع وجعله قابلًا للاستخدام. الجزء الثالث: تنفيذ واجهتي التطبيق الرئيسية والفرعيّة الخاصّة بعرض التفاصيل. وتنفيذ عمليّة التنقّل بين الواجهتين الغاية من التطبيق وكيف يعمل فكرة التطبيق بسيطة للغاية، تتلخّص بعرض جهات اتصال موجودة مسبقًا وإمكانية البحث ضمنها، مع إمكانيّة إضافة جهات اتصال جديدة وتحريرها وحذفها. يعتمد التطبيق على وجود واجهتين. الواجهة الأولى هي الواجهة الرئيسيّة وتحتوي على قسم خاص بالبحث حسب الاسم أو الكنية عن أيّ جهة اتصال موجودة مسبقًا، بالإضافة إلى قائمة لعرض جهات الاتصال الناتجة عن عمليّة البحث، وأخيرًا زر خاص بإضافة جهات اتصال جديدة. انظر الشكل التالي الذي ينتج عند ضغط زر البحث FIND عند عدم تحديد أي معيار للبحث: عندما يقوم المستخدم بنقر زر البحث FIND دون أن يحدّد أي معيار، سيقوم التطبيق بعرض جميع جهات الاتصال الموجودة لديه، والتي ستكون في هذه النسخة من البرنامج عبارة عن بيانات وهمية موجودة ضمن ذاكرة التطبيق. أمّا عند تحديد المستخدم للاسم أو الكنيّة فسيعمل التطبيق على البحث مستخدمًا منطق AND. أمّا الواجهة الثانية، فتظهر عندما يلمس المستخدم إحدى جهات الاتصال من القائمة السابقة، حيث تعرض هذه الواجهة بيانات تفصيليّة حول جهة الاتصال هذه: الاسم والكنية ورقم الهاتف وعنوان البريد الإلكتروني والهوايات. انظر إلى الشكل التالي: من الممكن تعديل أيّ من هذه البيانات ثم ينقر المستخدم زر الحفظ لحفظها، أو أن ينقر زر الرجوع إلى الواجهة السابقة الموجود في الأعلى بجانب أيقونة البرنامج في حال لم يرغب بتعديل البيانات. كما يمكن للمستخدم أن يحذف جهة الاتصال هذه بنقره على زر الحذف Delete كما يظهر من الشكل السابق. وهذه ببساطة فكرة التطبيق. نموذج المستودع Repository عندما تكبر التطبيقات وتتنوّع المهام المطلوبة منها تبرز الحاجة لوسيلة لتنظيم العمل داخل التطبيق. في الحقيقة توجد العديد من النماذج التي تدعمها Xamarin لهذه الغاية مثل نموذج MVVM الذي يستخدم بفعالية ضمن Xamarin لتنظيم وفصل الأجزاء المسؤولة عن الواجهات عن الأجزاء المسؤولة عن منطق العمل عن تلك المسؤولة عن التعامل مع مزودات البيانات البعيدة أو المحلية باختلاف أنواعها. من النماذج التي أفضلها شخصيًّا هو نموذج المستودع Repository الذي أستخدمه على نحو واسع في جميع أنواع التطبيقات التي أعمل عليها. فهو أسلوب جميل ومنطقي ويسمح بتطوير التطبيق بشكل سلس وسريع للعمل في مختلف أنواع البيئات، وهو متوافق للعمل مع نموذج MVVM. يسمح نموذج المستودع بعزل الشيفرة البرمجيّة المسؤولة عن التعامل مع البيانات عن منطق البرنامج business logic. وفي هذا الأمر عدة فوائد من أهمّها: تنظيم البرنامج، وجعله أكثر قابليّة للفهم والتطوير. إجراء تطوير على أسلوب التعامل مع البيانات دون إجراء أي تغيير في منطق عمل البرنامج. إمكانيّة إجراء تغيير جذري لنوع الخدمة التي نستخدمها لتخزين البيانات دون تغيير يُذكر في منطق العمل. سأخوض مباشرةً في كيفية اعتماد هذا النموذج في تطبيقنا هذا. حيث سنحتاج إلى استخدام واجهة واحدة Interface مع صنف واحد يُحقّقها. لتنعش ذاكرتك حول الواجهات انظر هذا الدرس. لنبدأ الآن في بناء هذا التطبيق وذلك في الفقرة التالية. بناء التطبيق ابدأ بإنشاء مشروع جديد من النوع Blank App (Xamarin.Forms Portable) وسمّه ContactsApp ثم أبق فقط على المشروعين ContactsApp (Portable) و ContactsApp.Droid كما وسبق أن فعلنا في هذا الدرس. من نافذة مستكشف الحل Solution Explorer انقر بزر الفأرة الأيمن على المشروع ContactsApp واختر من القائمة التي ستظهر الخيار Add ثم من القائمة الفرعية الخيار New Folder لإضافة مجلّد جديد. سمّ هذا المجلّد بالاسم Entities، وبعد أن يظهر في نافذة الحل Solution Explore انقر عليه بزر الفأرة الأيمن واختر الخيار Add ومن القائمة الفرعية اختر Class. ستظهر نافذة تسمح لك بتعيين اسم لهذا الصنف. اختر الاسم Contact له. هذا الصنف هو حجر البناء الأساسي لهذا البرنامج والذي يمثّل منطق العمل فيه. احرص على جعل محتويات الملف Contact.cs كما يلي: namespace ContactsApp.Entities { public class Contact { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Tel { get; set; } public string EMail { get; set; } public string Hobbies { get; set; } public override string ToString() { return string.Concat(FirstName, " ", LastName); } } } يحتوي الصنف Contact كما يظهر من الشكل السابق على البيانات الأساسيّة التي تحتاجها أيّة جهة اتصال، بالإضافة إلى خاصيّة الهوايات Hobbies التي قد تبدو غريبة قليلًا بالنسبة لجهة اتصال. انقر مرّة أخرى بزر الفأرة الأيمن على المشروع ContactsApp ثم اختر من القائمة التي ستظهر الخيار Add ثم من القائمة الفرعية الخيار New Folder لإضافة مجلّد جديد. سمّ هذا المجلّد بالاسم Abstract، وبعد أن يظهر في نافذة الحل Solution Explore انقر عليه بزر الفأرة الأيمن واختر الخيار Add ومن القائمة الفرعية اختر New Item. ستظهر نافذة تسمح لك بتعيين نوع العنصر المراد إضافته. اختر واجهة Interface وعيّن الاسم IContactsRepository لها. واحرص على أن تكون محتويات الملف IContactsRepository.cs كما يلي: using System.Threading.Tasks; using System.Collections.ObjectModel; using ContactsApp.Entities; namespace ContactsApp.Abstract { public interface IContactsRepository { Task<ObservableCollection<Contact>> GetContactsAsync(string firstName, string lastName); Task<bool> AddContactAsync(Contact contactToAdd); Task<bool> UpdateContactAsync(Contact contactToUpdate); Task<bool> DeleteContactAsync(Contact contactToDelete); } } تُستَخدَم الواجهات عمومًا عندما نرغب بتجريد Abstraction الأمور وجعلها عموميّةً وفي ذلك فائدة كبيرة في جعل الشيفرة البرمجيّة أكثر قابليّة للفهم ولإعادة الاستخدام. وهذا سبب إضافة هذه الواجهة إلى المجلّد Abstract. لا تحتوي الواجهات على أيّة شيفرة برمجيّة كما نعلم، فكل ما تحتويه هو عبارة عن تصاريح لتوابع يجب تحقيقها ضمن أيّ صنف يرغب بتحقيق هذه الواجهة. تحتوي هذه الواجهة باختصار على العمليّات الأساسيّة التي يحتاجها تطبيقنا لإنجاز المهام المنوطة به وهي: الحصول على جهات الاتصال حسب الاسم والكنية GetContactsAsync، وإضافة جهة اتصال جديدة AddContactAsync، وتحديث جهة اتصال موجودة مسبقًا UpdateContactAsync، وحذف جهة اتصال DeleteContactAsync. أمّا سبب وجود الكلمة Async في كلّ من هذه التوابع فهو للإشارة إلى أنّه يُفترض بها أن تستخدم تقنيّة البرمجة غير المتزامنة Asynchronous Programming التي تحدثنا عنها في هذا الدرس. المثير في الأمر أنّ هذه الواجهة لا تهتم بمكان وجود البيانات أو كيفيّة الحصول عليها والتعامل معها. إنّما تهتم فقط بما يحتاجه التطبيق وبشكل مجرّد. سنكرّر الآن نفس العمليّة لإضافة مجلّد جديد ضمن المشروع ContactsApp.cs واسمه Concrete وهو الذي سيحتوي على الصنف الذي سيحقّق الواجهة IContactsRepository السابقة. انقر بزر الفأرة الأيمن على هذا المجلّد واختر Add. ومن القائمة الفرعية اختر Class. سمّ هذا الصنف بالاسم MemoryContactsRepository واحرص على أن تكون محتوياته كما يلي: using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.Collections.ObjectModel; using ContactsApp.Abstract; using ContactsApp.Entities; namespace ContactsApp.Concrete { public class MemoryContactsRepository : IContactsRepository { private ObservableCollection<Contact> contacts; public MemoryContactsRepository() { contacts = new ObservableCollection<Contact>() { new Contact() { Id=1, FirstName = "Ahmad", LastName="Saeed", Tel="123456", EMail="admin@example.com", Hobbies="Swimming" }, new Contact() { Id=2, FirstName = "Mahmood", LastName="Maktabi", Tel="852136", EMail="info@example.com", Hobbies="Reading" }, new Contact() { Id=3, FirstName = "Mazen", LastName="Najem", Tel="987456", EMail="it@example.com", Hobbies="Swimming" }, new Contact() { Id=4, FirstName = "Sawsan", LastName="Hilal", Tel="741258", EMail="sales@example.com", Hobbies="Writing, Reading" }, new Contact() { Id=5, FirstName = "Musab", LastName="Aga", Tel="357159", EMail="admin@example.com", Hobbies="Sport" } }; } public async Task<ObservableCollection<Contact>> GetContactsAsync(string firstName, string lastName) { throw new System.NotImplementedException(); } public async Task<bool> AddContactAsync(Contact contactToAdd) { throw new System.NotImplementedException(); } public async Task<bool> UpdateContactAsync(Contact contactToUpdate) { throw new System.NotImplementedException(); } public async Task<bool> DeleteContactAsync(Contact contactToDelete) { throw new System.NotImplementedException(); } } } الأمر الملفت للنظر هنا أنّ بيانات جهات الاتصال موجودة ضمن هذا الصنف بالفعل وتحديدًا ضمن بانيته. وهي مخزّنة ضمن المتغيّر contacts وهو معرّف على مستوى الصنف ومن النوع العمومي ObservableCollection الذي سنتحدّث عنه في الدرس التالي. يكفي الآن أن تعرف أنّه عبارة عن مجموعة عناصرها كائنات من النوع Contact وهي تُفيد في التطبيقات التي تُستخدَم فيها البرمجة غير المتزامنة. من غير الواقعي بكل تأكيد وجود البيانات مخزّنة في الصنف بهذه الطريقة، فالمفترض أن تكون ضمن قاعدة بيانات محليّة أو بعيدة أو حتى ضمن ملف عادي. في الواقع تبرز هنا قوّة نموذج المستودع Repository في عزل أسلوب الحصول على البيانات عن البرنامج الفعلي. من الواضح أيضًا أنّ التوابع الموجودة هنا تحتوي في الحقيقة على شيفرة برمجيّة تؤدّي إلى رمي الاستثناء NotImplementedException وذلك لتذكرينا بعدم جاهزيتها بعد. سيبدو مستكشف الحل في نهاية المطاف شبيهًا بالشكل التالي: الخلاصة هذا الدرس هو المقدّمة لتطبيق جهات الاتصال الذي سنتابع بناءه على مدى الدرسين التاليين. تناولنا في هذا الدرس فكرة التطبيق الأساسيّة، وتوضيح فكرة نموذج المستودع Repository من خلال بناء واجهة تمثّله بالإضافة إلى صنف يحقّقها. سيمكننا من خلال هذا الصنف (صنف المستودع) التعامل مع بيانات موجودة ضمن ذاكرة التطبيق فقط. ورغم كون هذا الأسلوب غير واقعي، إلَّا أنّه ضروري في تبسيط الأمور وجعلها أسهل للفهم. كما أنشأنا صنف يمثّل جهة الاتصال في التطبيق. ورأينا ماهية العلاقة بينه وبين صنف المستودع، من خلال الاستدعاءات إلى التوابع الموجودة ضمن الصنف الأخير. حقوق الصورة البارزة محفوظة لـ Freepik
  7. من الخصائص المفيدة جدًا التي توفّرها أجهزة Apple هي خاصية Find My iPhone. تساعدك هذه الخاصية في العثور على هاتفك (أو أي جهاز iOS آخر) في حال فقدانه أو سرقته. وحتّى وإن نفد شحن بطارية الهاتف، ما زالت هناك احتمالية للعثور عليه بتحديد آخر موقع كان فيه الهاتف قبل أن ينفد الشحن. سنتعلّم في هذا المقال كيفية استخدام خاصية Find My iPhone للعثور على هواتف iPhone الضائعة وكذلك كيفية استخدام التطبيق المكمّل لهذه الخاصيّة. كيف أفعّل خاصيّة Find My iPhone؟ من السهل جدًا تفعيل هذه الخاصية وضبط إعداداتها، وكل ما يتطلّبه الأمر هو أن يكون لديك حساب iCloud. إذا لم تسجّل الدخول إلى خدمة iCloud على هاتفك، اذهب إلى إعدادات Settings> iCloud> أدخل عنوان البريد الإلكتروني لمعرّف Apple وكلمة المرور، ثم سجّل الدخول: بعد ذلك انقر على Find My iPhone وتأكّد من تشغيل الزر الأخضر: يتوفّر خيار آخر ضمن إعدادات العثور على الـ iPhone، وهو إرسال آخر موقع Send Last Location، وهو يقوم بإرسال بيانات آخر موقع إلى Apple عندما يكون شحن البطارية منخفضًا ويوشك على الانتهاء. عند تفعيل هذه الخاصية، سيرسل الهاتف بيانات موقعه إلى Apple طالما كان متصلًا بشبكة الإنترنت. وبإمكانك استخدام تطبيق Find My iPhone المثبّت على أي جهاز iOS آخر أو موقع www.iCloud.com لتحديد موقعه على الخارطة أو تنفيذ إجراءات أخرى سنأتي إلى شرحها في الفقرة التالية. كيف أستخدم تطبيق Find My iPhone؟ يوفّر تطبيق Find My iPhone بعض الأدوات المفيدة لتعقّب هاتفك وللتحكّم به عن بعد. وقد تم تضمينه كتطبيق قياسي مع مجموعة التطبيقات الإضافية المثبّتة مسبقًا على جهازك في إصدار النظام iOS 9 فما فوق. وإذا كنت تستخدم إصدار أقدم من iOS 9، بإمكانك تحميله من متجر iTunes. إذا كان هاتفك مفقودًا، افتح التطبيق من أي جهاز iOS آخر (مثلا جهاز iPad) وقم بإدخال معلومات تسجيل الدخول نفسها لحساب iCloud المستخدم على هاتفك الضائع، وهذا شرط ليتمكّن التطبيق من تعقّب هاتفك. عند تسجيل الدخول سيبدأ التطبيق بالبحث عن الأجهزة التي تستخدم نفس حساب Apple، المفعّلة لخاصية العثور على iPhone والمتصلة بالإنترنت. علمًا أنّه يجب تفعيل خدمات الموقع لكي يتمكّن التطبيق من العمل. لتفعيل خدمات الموقع لتطبيق العثور على iPhone، اذهب إلى إعدادات Settings> الخصوصية Privacy> خدمات الموقع Location Services> العثور على iPhone (Find iPhone) > أثناء استخدام التطبيق While Using the App: بعد أن يعثر التطبيق على موقع الجهاز/الأجهزة انقر على اسم جهازك المفقود. سيعرض التطبيق خريطة مبينًا عليها موقع جهازك، مع إشارة إلى الشحن المتوفّر في بطاريته بأيقونة صغيرة في أعلى يسار الشاشة. انقر على الإجراءات Actions: الخيارات المتوفرة هي: أيقونة السيارة: عند النقر عليها، سيتم توجيهك إلى تطبيق الخرائط ورسم طريق مباشر من موقعك إلى موقع الهاتف المفقود. تشغيل الصوت Play Sound: يجعل هذا الخيار هاتفك المفقود يصدر نغمة بأعلى مستوى صوت. ويكون مفيدًا على وجه الخصوص إذا كان الهاتف مفقودًا في مكان قريب في الأرجاء ولا تعرف مكانه بالضبط، أو عندما تصل إلى الموقع المؤشر على الخارطة ولا تستطيع تحديد مكانه بشكل دقيق. ويمكنك الاستفادة من هذا الخيار حتّى وإن كان هاتفك مفقودًا داخل منزلك. وضع الفقدان Lost Mode: يتيح هذا الخيار قفل وتتبع هاتفك عن بعد. وعند النقر عليه سيُطلب منك إدخال رمز سري لقفل الهاتف المفقود عن بعد (إن لم يكن مقفلًا برمز سرّي من الأصل)، كما يطلب منك بشكل اختياري إدخال رقم هاتف معيّن ورسالة معيّنة تظهر على شاشة الهاتف المفقود لتساعد من عثر عليه على الاتصال بك. وبذلك لا يمكن فتح هاتفك إلا بإدخال الرمز السرّي الذي حدّدته عند تفعيل وضع الفقدان. مسح الـ الآيفون (Erase iPhone): يجب أن تكون حذرًا عند استخدام هذا الخيار، فهو يقوم بمسح كافة محتويات وإعدادات الهاتف المفقود عن بعد. ولا يمكن بعدها تتبّع موقعه. يمكنك استخدامه إذا كان هاتفك يحتوي على ملفات حساسّة من ناحية الخصوصية أو ملفات سرّية ولا ترغب في أن يتم الاطلاع عليها. وكذلك في حال فقدت الأمل في العثور على هاتفك. ماذا لو لم أكن أملك جهاز iOS آخر لاستخدامه في العثور على هاتفي؟ هذه ليست بمشكلة على الإطلاق، توجّه إلى صفحة iCloud للقيام بذلك. قم أولا بتسجيل الدخول بحساب Apple ID نفسه المستخدم على هاتفك الضائع. بعد ذلك انقر على Find iPhone: قد يطلب منك إدخال كلمة المرور مجددًا عند النقر على Find iPhone، قم بإدخالها وسيتم البحث والتحديد مواقع الأجهزة التي تستخدم نفس حساب Apple. اختر اسم جهازك من قائمة All Devices وسيتم عرض موقعه على الخارطة بالإضافة إلى إتاحة نفس الخيارات الثلاثة المذكورة أعلاه: ماذا لو نفد شحن البطارية؟ عندما يُقطع الاتصال بالإنترنت بسبب نفاد الشحن أو غيره، سيتوقف الجهاز عن إرسال إشارة تساعد في العثور على موقعه. لكن ما زالت لديك فرصة أخيرة إذا كنت محظوظًا كفاية وقمت بتفعيل خاصية Send Last Location التي تقوم بإرسال بيانات الموقع عندما يكون شحن البطارية منخفضًا جدًا. وبما أنّ هذه الخاصية غير مفعّلة افتراضيًا، تأكّد من تفعيلها بالذهاب إلى إعدادات Settings> iCloud> العثور على الـ iPhone لتدارك الأمر قبل حدوثه ولتعرف على الأقل المكان الذي كان هاتفك فيه عند انتهاء الشحن:
  8. سنقوم في هذا الدرس بشرح كيفية نقل الملفات من الهاتف المحمول إلى الحاسوب وبالعكس باستخدام برنامج ADB. حيث أن لبرنامج ADB استخدامات عديدة ومتنوعة كتثبيت التطبيقات على نظام الأندرويد وإزالتها وإعادة تشغيل النظام في وضعية الاستعادة وغيرها. ما هو ADB؟ هو برنامج يعمل بإدخال الأوامر البرمجية من خلال برنامج سطر الأوامر في نظام الحاسوب للقيام بمهمات يتم من خلالها التحكم بالهاتف المحمول الذي يعمل بنظام الأندرويد، أو حتى أي أداة موصولة إلى الحاسوب بواسطة USB تعمل بنظام الأندرويد كالحواسب اللوحية. ويعتبر الرمز ADB اختصارًا لعبارة Android Debug Bridge ومعناها جسر تنقيح أندرويد، ويأتي ضمن حزمة تطبيقات تطوير الأندرويد Android Software Development Kit (SDK). وأما هذه الحزمة الأخيرة فيمكن تحميلها بشكل منفرد أو يمكن الحصول عليها كجزء من مجموعة برامج Android Studio لتطوير وبرمجة تطبيقات وألعاب الأندرويد. يمكنك تحميل ما تريده بالتحديد من خلال هذا الموقع الرسمي. ويمكن تنصيبها لتعمل على مختلف أنظمة الحاسوب كنظام ويندوز وماكنتوش وأنظمة لينكس، وسأشرح هنا كيفية تنصيبها لنظام الويندوز بما أن السواد الأعظم من المستخدمين يستخدمون هذا النظام. تنصيب ADB ادخل أولًا إلى صفحة تحميل حزمة برامج Android Studio وستجد في آخر الصفحة خيارات التحميل المتاحة. بالإمكان تحميل الحزمة كاملة وسيتجاوز حجمها 1 جيجابايت أو تحميل حزمة أدوات سطر الأوامر Command Line Tools في الجدول السفلي والتي لن يتجاوز حجمها 200 ميجابايت، ولدى النقر على رابط التحميل ستظهر نافذة تتضمن الشروط والأحكام وبعد موافقتك عليها تستطيع البدء بالتحميل. هناك رابطان للتحميل لنظام الويندوز الأول لتحميل الحزمة جاهزة للتنصيب مباشرة والثانية تتضمن الحزمة مضغوطة بدون ملف التنصيب، لايهم أيهما تختار فكلاهما يتضمنان الملفات ذاتها ولكن المهم هو تحديد أين سيتم تنصيب أو فك ضغط هذه الحزمة لنتمكّن من إيجاد ملف ADB وتشغيله. فإذا حمّلت الحزمة من الرابط الأول فسيظهر لك ملف التنصيب، قم بالنقر المزدوج عليه فتظهر نافذة التنصيب انقر على Next ليقوم بالتحقق من وجود Java Runtime environment أو Java Developing kit على حاسوبك اضغط على Next وصلنا هنا للنقطة المهمة وهي تحديد المسار الذي سيتم فيه التنصيب حيث أننا سنحتاج إلى مسار سهل يمكننا الوصول إليه بسهولة لنتمكن من العمل على ABD فيما بعد، لذلك اختر المسار بنفسك أو احفظ المسار الحالي للتنصيب. اضغط على Next وستبدأ عملية التنصيب بعد الانتهاء من التنصيب سيتم تشغيل برنامج إدارة الحزمة، وذلك مهم جدًّا لمعرفة إذا كان ADB مثبتًّا ضمن الحزمة أم لا. والطريقة الثانية هي بتحميل الحزمة مضغوطة كملف ZIP وبعدها نقوم بفك الضغط في مسار سهل أيضًا. في كلا الحالتين قمت بوضع الحزمة في المسار القرص الصلب C لسهولة إيجاده. والآن سنقوم بتشغيل برنامج إدارة الحزمة ليظهر كما في الصورة. يجب الانتباه إلى خيار Android SDK platform tools الذي يجب أن يكون مثبتًّا حيث يحوي هذا الخيار على برنامج ADB فإذا كان مثبّت فيمكنك إغلاق البرنامج والمتابعة، وإذا كان غير مثبّت فسيتوجب علينا تثبيت هذه الأدوات، ستجد أن هناك مجموعة من الخيارات مفعّلة وجاهزة لعملية التحميل أيضًا، ولكننا في الوقت الراهن لن نحتاج إليها لذلك ألغِ التفعيل عنها واحتفظ فقط بخيار تحميل أداوت Android SDK platform tools ثم انقر على Install لتبدأ عملية التثبيت. وبعد الانتهاء نغلق البرنامج. وبذلك نكون قد انتهينا من تثبيت ADB ضمن الحاسوب وأصبح جاهزًا للاستخدام. ويبقى فقط أن نتأكّد من أن ملفات التعريف الخاصة بالهاتف المحمول مثبّتة ضمن الحاسوب وهي تختلف بحسب الشركة المصنعة للهاتف وستجدها في الموقع الرسمي لكل شركة من هذه الشركات أو في بعض الأحيان ضمن القرص المدمج المرفق مع الهاتف. تجهيز الهاتف المحمول يجب أن يكون الهاتف موصولًا بوصلة USB التي تأتي مع الهاتف غالبًا أو ستضطر لشرائها بشكل منفرد من الأسواق. والمهم هنا أن يتم تفعيل ميزة USB Debugging (تصحيح USB) على الهاتف المحمول من ضمن قائمة Developer (خيارات المطوّر). انقر على أيقونة قائمة تطبيقات الهاتف (أيقونة المربعات). ثم انقر على أيقونة الضبط (الإعدادات). الآن ابحث عن Developer (خيارات المطوّر) وإذا كانت هذه القائمة غير ظاهرة فيمكنك إظهارها من خلال التوجه إلى قائمة (حول الهاتف). ثم النقر على سطر Build (رقم الإصدار) الموجود ضمن تلك القائمة لنحو 10 مرات متتالية. ثم العودة لرؤية قائمة Developer (خيارات المطوّر) وقد ظهرت هذه المرة. وبعد أن ظهرت قائمة Developer (خيارات المطوّر) المخفية سنقوم بتفعيل USB Debugging (تصحيح USB). البدء باستخدام ADB بعد أن نجحنا في تثبيت هذا البرنامج ضمن حزمة Android Software Development Kit (SDK) سنبدأ بالتعرّف على كيفية استخدامه عبر شرح أبسط وأهم الأوامر المستخدمة من خلاله. طبعًا هناك الكثير من الأوامر لهذا البرنامج ولكننا لن نتطرّق لها جميعها لأن هذا سيحتاج إلى عدة دروس لتغطيتها جميعها. وللعمل على البرنامج فسنحتاج إلى تشغيل محرر الأوامر الخاص بالويندوز وهو البرنامج ذو واجهة DOS السوداء التقليدية والذي يعمل من خلال الملف CMD.EXE الموجود في مجلد النظام وحتى نتجنب عملية البحث عن هذا البرنامج وإدخال المسار الخاص بملف ADB في كل مرة فسنقوم بوضع ملف تشغيل سريع لمحرر الأوامر يتضمن المسار الصحيح في كل مرة لنضعه على سطح المكتب. افتح برنامج ‘المفكرة‘ ثم اكتب هذا النص بداخله @ECHO OFF CD /D "C:\android-sdk-windows\platform-tools" CMD وسيكون كما في الصورة ولا تنسَ أن تضع المسار الصحيح الذي يتضمن ملف ADB وكما أسلفتُ سابقًا فأنا اخترت له مسارًا سهلًا على القرص الصلب C ثم اذهب إلى القائمة File > Save As أو بالعربي ملف > حفظ باسم ثم اكتب في خانة اسم الملف الاسم "ADB.bat" وضع خانة نوعية الملف على جميع الملفات "*.*" ثم اضغط حفظ. مع التأكد من أن مسار الحفظ هو سطح المكتب. وستجد الآن الملف موجودًا على سطح المكتب كما في الصورة. وبعد النقر المزدوج عليه لفتح سيفتح محرر الأوامر وعليه مسار ملف ADB جاهزًا كما في الصورة. و سنبدأ بتجربة ADB بداية سنبدأ من خلال الأمر adb devices والذي سيعرض الأجهزة المتصلة بالحاسوب والتي تعمل بنظام الأندرويد، طبعًا يجب أن تكون قد وصّلت الهاتف بالحاسوب عبر وصلة USB واستكملت الشروط الأخرى التي تحدثنا عنها في الأعلى. وبالصورة التالية سترى كيفية تنفيذ هذا الأمر والنتيجة التي ظهرت لنا. كما تشاهد فإنّ الهاتف المحمول الموصول تم عرضه بناء على الأمر الذي كتبناه بدءًا بالأمر adb ولو كان هناك أكثر من جهاز أندرويد موصول فسيتم عرضها جميعًا بالترتيب. بعض أوامر ADB الشهيرة سنتعرف الآن على بعض أشهر الأوامر المستخدمة في ADB. وسنبدأ أولًا بالأمر reboot والذي سيقوم بإعادة تشغيل جهاز الأندرويد الموصول بالحاسوب. ويكتب بهذه الطريقة. adb reboot لن تشاهد أي شيء يحصل في نافذة محرر الأوامر كما في الصورة إلا أن الهاتف سيُعاد تشغيله مباشرة وبسهولة مطلقة بعكس ما يحصل عادة لو حاولت إعادة تشغيله بالطريقة التقليدية وهذا يدل على قوة ADB. الأمر reboot recovery والذي يجعل الهاتف يعيد التشغيل مع الإقلاع بوضعية الاستعادة recovery والتي نحتاجها في بعض الحالات مثل جعل الهاتف في وضعية ROOT وهذا ينطبق على بعض الأنواع. ويكتب بهذه الطريقة. adb reboot recovery وهناك سلسلة أوامر Shell الخاصة والتي تتيح التحكم بالهاتف بشكل أوسع كنقل ونسخ وحذف الملفات والبرامج وعرض محتويات المجلدات والكثير غيرها من الأوامر، وصيغة كتابة أوامر Shell على الشكل التالي. adb shell <command> حيث أن<command> هو الأمر الذي نريد تنفيذه. نقل الملفات بين الحاسوب والهاتف المحمول يمكننا باستخدام ADB نقل الملفات من الحاسوب إلى الهاتف المحمول وبالعكس. يتم ذلك عبر استخدام الأمر PULL لنقل الملفات من الهاتف إلى الحاسوب والأمر PUSH لنقل الملفات من الحاسوب إلى الهاتف المحمول. يتطلب هذا الأمر معرفة اسم الملف مع امتداد الملف (الصيغة) بالإضافة إلى موقع الملف المسحوب من على الهاتف أو الموقع الذي سيتم إرساله إليه إضافة إلى الموقع المطلوب أيضًا على الحاسوب. حيث سنستخدم كما قلنا سابقًا برنامج CMD لكتابة الأوامر المطلوبة من خلاله. سنقوم أولًا بسحب ملف من الهاتف إلى الحاسوب. افتح محرر الأوامر CMD واذهب إلى موقع ملف ADB ثم اكتب الأمر adb pull /sdcard/hsoubaca.jpg هذا الأمر سيقوم بسحب ملف الصورة hsoubaca.jpg من على ذاكرة الهاتف من خلال الموقع المحدد إلى موقع المجلد الذي يحوي برنامج ADB على الحاسوب. الصورة التالية توضح العملية. يمكنك طبعًا استبدال موقع الملف المطلوب سحبه كاملًا بحسب موقع ملفك الخاص. سنقوم الآن بإرسال ملف من الحاسوب إلى الهاتف المحمول. ولنفترض أننا سنقوم بإرسال الملف Zaher.txt إلى مجلد Text على ذاكرة الهاتف المحمول بحيث أن هذا الملف موجود على سطح المكتب لدي، وبذلك سيكون الأمر الواجب إدخاله على الشكل التالي. adb push c:/users/Zaher/desktop/Zaher.txt /sdcard/Text وسيظهر من خلال CMD كما في هذه الصورة. كما تشاهد فقد وضعنا أمر نسخ الملف إلى الهاتف adb push أولًا ثم وضعنا كامل موقع الملف المراد إرساله على الحاسوب مع اسم الملف في النهاية ثم وضعنا بعد فراغ واحد الموقع المطلوب نسخ الملف إليه على الهاتف المحمول. وبإمكاننا نسخ مجلدات كاملة بين الطرفين عبر وضع مسار المجلد بدل مسار الملف. الخاتمة لا زال هناك الكثير من الأوامر المفيدة الخاصة بـ ADB كتثبيت التطبيقات على الهاتف وإزالتها بالإضافة إلى سلسلة أوامر Shell الخاصة والمميزة وقد نتطرّق لها في دروس قادمة بإذن الله. حيث يمكن القيام على سبيل المثال إجراء نسخة احتياطية واستعادتها والقيام بإعادة الإقلاع في وضعيات مختلفة بحسب النمط المطلوب تنفيذه بالإضافة إلى غيرها من الأوامر والعمليات التي من الممكن القيام بها من قبل المطوّرين.
  9. كل واحد منّا بحاجة لأن يؤمّن هاتفه لأسباب عديدة وأهمها هو أن يحمي جهازه من التطفّل، فنقوم بوضع كلمة سر لمنع الآخرين من الولوج إليه، هناك طرق تقليدية ضمن نظام الأندرويد توفّر الحماية عبر وضع كلمة سر لشاشة القفل أو نمط معيّن، بالإضافة إلى إمكانية تشفير الهواتف بحيث يتم تأمين الحماية القصوى للهاتف وللبيانات الموجودة ضمنه، كما يوجد تقنيات حماية أخرى مختلفة كنمط الضيف، وتحوي بعض الهواتف على ميزات إضافية كمسح الوجه وبصمة الإصبع، وأخيرًا هناك تطبيقات تساعد على تأمين الهواتف بطرق مختلفة. وسنقوم هنا بالتعرّف على أساليب قفل الشاشة لحماية هاتف الأندرويد. لحماية الهاتف ببساطة سيكون علينا أن نقفل الشاشة بمعنى أنه إذا ما أطفأت الشاشة بنفسك أو انطفأت تلقائيًّا بعد مدة زمنية محددة (عادة ما تكون 10-15 ثانية) فيجب أن يكون هناك قفل للسماح للدخول مجدّدًا إلى الهاتف عند محاولة تشغيل الشاشة مجدّدًا كالضغط على الزر الأوسط الرئيسي أو زر التشغيل بنقرة واحدة ولتحقيق ذلك سيكون علينا القيام بما يلي. أولًا ادخل إلى قائمة التطبيقات بالضغط على زر المربعات أسفل الشاشة: وبعض إصدارات الأندرويد يكون شكل هذا الرمز هكذا: ثم ادخل إلى الضبط (الإعدادات): ثم ابحث في قوائم هذه الإعدادات عن خيار قفل الشاشة (حيث أن هذه القوائم تختلف من جهاز لآخر ومن إصدار أندرويد آخر): سيظهر لك خيار تأمين الشاشة وقد يكون الخيار موضوعًا على (السحب) أو (بلا) بكل الأحوال اضغط على الخيار في السطر الأول ذاته. ستحصل على مجموعة من الخيارات وهي: السحب، النمط، رمز PIN، كلمة المرور و "بلا" وستجد بأنه هناك شرح بجانب كل واحدة من هذه الخيارات تدل على مستوى الأمن الذي ستحصل عليه في حال اخترت أيًّا منها. الآن سنقوم بتجربتها جميعًا لتتعرّف عليها. وسنبدأ بخيار النمط. كما ترى هنا فالنمط يعني رسم توصيل معيّن خاص بك بين النقاط الواضحة في الصورة، يمكنك رسم أية طريقة توصيل تريدها المهم هو أن تحفظ طريقة التوصيل هذه حتى تتمكن من الدخول إلى الهاتف عند قفله. فعند إطفاء الشاشة ومحاولة الدخول إلى الهاتف مجدّدًا سوف تضطر إلى رسم ذات النمط الذي اخترته لتتمكن من الدخول إلى الهاتف ولذلك عليك حفظ النمط الذي ستختاره جيدًا وكلما كان معقّدًا أكثر كان أصعب على المتطفلين رسمه ذاته والدخول إلى الهاتف. وستلاحظ عند رسم النمط أنه لا يمكنك المرور على النقطة ذاتها مرتين ولكن يمكنك رسم أنماط متقاطعة صعبة التقليد إلا أنها ستكون أيضًا صعبة الحفظ للبعض وسيعتاد عليها البعض عند التكرار وهذه عينة. قد تعتقد للوهلة الأولى بأنني رسمت فوق النقطة المركزية أكثر مرة وأنا قلت لا يمكن الرسم على النقطة ذاتها مرتين ولكن الحقيقة أن ما تراه هو تقاطع خطوط ليس إلا فأن لم أرسم على النقطة ذاتها أكثر من مرة. وبعد رسم النمط للمرة الأولى اضغط على خيار المتابعة ثم ارسم النمط للمرة الثانية ثم اختر الخيار تأكيد لتظهر بعدها شاشة تطلب منك تعيين رقم PIN احتياطي وهذا ضروري في حال نسيت هذا النمط حتى تستطيع فتح القفل. أدخل رمز PIN وهو عبارة عن أربعة أرقام على الأقل ولكن ليس أكثر من ثمانية ثم اضغط متابعة وبعدها سيطلب منك تأكيد الرمز فقم بإعادة كتابته مجدّدًا واضغط موافق. هناك عدة خيارات للتحكم بمظهر شاشة القفل في كل حالة من الحالات والنمط واحدة منها كأن تجعل رسم النمط مخفي وهذا سيجعل من معرفة هذا النمط أمرًا شبه مستحيل خصوصًا إذا كام معقّدًا بالإضافة إلى خيارات أخرى يمكنك اكتشافها بنفسك منها وضع عبارة معينة على الشاشة ووضع ساعة أو غيرها. أو يمكنك اختيار رمز PIN وهو عبارة عن أرقام عددها بين الأربعة والثمانية تختارها بنفسك وبها تقفل شاشة الهاتف وللدخول مجدّدًا إليه سيتوجب عليك إدخال هذا الرمز. ويمكنك اختيار نفس الرقم مرتين، ذلك سيرفع من الحماية لأنه من سيشاهد آثار الأصابع على الشاشة لن يعرف أي رقم يجب أن يُكرّر. والأمر ذاته ينطبق على خيارات شاشة القفل وتخصيصها كما في النمط. وأخيرًا أهم وأقوى هذه الخيارات هو إدخال كلمة المرور والتي سيكون من الصعب جدًّا على المتطفلين معرفتها وإدخالها حتى لو كانوا بقربك في حال أدخلت كلمة طويلة ومتنوعة ما بين أرقام وحروف وبسرعة الإدخال بأصابعك عندها سيكون من الصعب جدًّا إيجاد هذه الكلمة. ماذا لو نسيت كلمة المرور أو رمز PIN أو نمط القفل فكيف سنتمكن عندها من فتح الهاتف؟ بعد عدّة محاولات فاشلة لفك القفل بما أنك نسيت الرمز أيًّا كان فسوف تظهر لك رسالة تخبرك بأنك أدخل الرمز أو النمط بشكل خاطئ عدّة مرات خلال فترة زمنية قصيرة لذلك حاول مجدّدًا بعد ثلاثين ثانية. ثم ستظهر لك ثلاثة خيارات إضافية في الأسفل. الأولى هي (رقم PIN للنسخ الاحتياطي) وهنا يمكنك إدخال رمز PIN الذي أدخلته عند رسم النمط. ماذا لو نسيته أيضًا، عندها نحتار الخيار الأوسط (نسيت النقش) وفيه نقوم بإدخال بريدنا الإلكتروني على GMAIL مع كلمة المرور ليتم إلغاء قفل الهاتف وتستطيع الدخول وتغيير رمز القفل مجدّدًا. أمّا إذا نسيت كلمة المرور لحسابك على GOOGLE فعليك بالتوجه إلى الحاسوب ومحاولة استعادة كلمة المرور ثم العودة مجدّدًا لفتح قفل الهاتف. ولو لم تكن قد ربطت هاتفك بحساب GOOGLE أو لا تتوفر أية شبكة إنترنت لأي سبب كان فهناك طرق عدة كربط الهاتف بالحاسوب واستخدام برامج معقّدة لفتح القفل أو استخدام ملفات الريكفري (الاستعادة) أو طرق أخرى ولكن هذه الطرق في معظمها ستفقد بياناتك على الهاتف بالكامل وجميعها معقد وقد يسبب التلف والأعطال للهاتف في حال لم تتقن القيام بها بالشكل الصحيح لذلك أنصحك وبشدّة باللجوء إلى أقرب مركز لصيانة الهواتف المحمولة أو إلى مركز الصيانة المعتمد لهاتفك وسيقوم بفتح قفل هاتفك بسهولة وسرعة وبدون التسبب بالأضرار للهاتف أو للبيانات التي عليها. ويجب التنبُّه في النهاية إلى مسألة زمن قفل الهاتف، فالهاتف لا يقفل خلال لحظة بعد بعد مدّة زمنية محدّدة وهي زمن تُحدّده أنتَ بعد توقف الشاشة عن العمل. بالنسبة إلى زمن توقّف الشاشة عن العمل فيمكن تحديده عبر الدخول إلى قائمة الضبط مجدّدًا ثم الدخول إلى قائمة (الشاشة). بعدها ندخل إلى قائمة (زمن توقف الشاشة). ثم نختار أحد الأزمنة المحدّدة بالقائمة. وبذلك ستتوقف الشاشة عن العمل وتنطفئ تلقائيًّا بعد المهلة الزمنية التي ستحدّدها في القائمة السابقة. والآن سنحدّد زمن قفل الهاتف وذلك بعد الدخول إلى قائمة الضبط مجدّدًا واختيار قائمة (قفل الشاشة). ثم الدخول إلى قائمة (القفل التلقائي). ثم نقوم بتحديد الزمن المطلوب ليتم قفل الهاتف بعده وذلك بعد توقف الشاشة عن العمل. أي بمعنى، هناك زمن تبقى فيه الشاشة مُضاءة وتعمل في حال لم تلمس الهاتف أو تعمل عليه سيتم توقف الشاشة عن العمل وتنطفئ بعد هذه المهلة المحدّدة ثم سيبدأ عدّاد زمني آخر بعد توقف الشاشة عن العمل في حال لم تلمس الهاتف أو لم تعمل عليه فسوف يتم بعدها قفل الهاتف بطريقة القفل التي اخترتها سابقًا كالنمط أو كلمة المرور مثلًا. هذا الأمر سيكون مطلوبًا في حالات خاصة، كأن تقوم مثلًا بالتجوّل باستخدام برنامج الخرائط في مكان ما وتحتاج في كل بضع دقائق أن تنظر إلى الخريطة مجدّدًا وتتأكّد من أنّك في الاتجاه الصحيح، عندها سيكون مُزعجًا فك القفل في كل مرّة خصوصًا إذا كانت كلمة مرور طويلة ومعقّدة أو نمطًا صعبًا، لذلك يمكننا تأخير قفل الهاتف بشكل لا نضطّر فيه إلى فتح الهاتف في كل مرّة في هذه الحالة. خاتمة البعض قد يختار طريقة النمط لسهولتها وسهولة حفظها نظرًا لأن طبيعة العقل تحفظ الرسوم أكثر من الكلمات والرموز والبعض الآخر يختار طريقة رمز PIN لأنها أسرع وأقصر ولكن الأفضل هو اختيار كلمة المرور لأنها الأقوى والأكثر أمانًا مما سبق. في كل الأحوال يبقى المهم هو تأمين الحماية للهاتف في حال وقع بأيدي أي شخص حتى لا يتمكن من فتح الهاتف وتصفح المحتوى الخاص بك بدون إذنك. هناك طرق أكثر قوة للحماية وطرق حماية أخرى تتعلق بنوع هذه الحماية والحالة التي نحتاج فيها إلى هذه الأنواع، سنتطرق إليها في دروس قادمة.
  10. أصبحت قابلية الوصول 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.