Entesar ElBanna

الأعضاء
  • المساهمات

    511
  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • Days Won

    89

كل منشورات العضو Entesar ElBanna

  1. أهلًا بك، بالنسبة لمجالات العمل على الانترنت فهي متعددة أشهرها التالي: 1- العمل في مجال التصميم: 2- العمل في مجال الكتابة (التايبنج) وإدخال البيانات: 3- العمل في مجال الترجمة: 4- الربح من خلال التسويق بالعمولة: 5- العمل في مجال البرمجة: 6- العمل في مجال التسويق الإليكتروني: 7- إنشاء موقع إليكتروني والربح منه عن طريق وضع إعلانات للزوّار: 8- إنشاء مجموعة (تسويقية) على الفيس بوك: 9- تسجيل شرح لموضوع معين وبيعه (الكورسات الأونلاين): في الواقع حتى كل هذه المجالات تتطلب عملاً وجهداً حتى تستطيع تحقيق دخلاً مناسباً منها أيضًا أرجو أن تتابع الإجابة عن سؤال مشابه في الأكاديمية هنا
  2. أهلا بك، يوجد هناك مربع مخصص لارفاق الملفات والصور.. ارجو ان تلقي نظرة على الصورة المرفقة هنا
  3. أهلًا بك، أقرب المواقع التي في البال بفكرة مقاربة نوعًا ما؛ لكن في مجال البرمجة بالتحديد أعرفها هي موقع freecodecamp حيث أنه عبارة عن دروس في كل درس تحل مشكلة بسيطة وتحصل على نقطة ويتخلل هذه المشاكل بناء مشاريع وبعد كل مجموعة نقاط تنهي مستوى وبعد كل مجموعة مستويات تحصل على شهادة.. موضوع البرمجة هو ويب JS ومشتقاتها.. الموقع الأخر هو codewars هو أيضًا بفكرة مشابهة للأول إلى أنه عبارة عن مشكلات متفاوته في الصعوبة ويمكن للمبرمج اختيار أي لغة برمجة يحل بها وهناك نقاط ومستويات تبدأ من المستوى 8 الأسهل وتتدرج حتى تنتهي بالأول الأصعب.. في هذين الموقعين (ولا بد أن تجد غيرهم بنفس الفكرة) اللذان يقتصران على البرمجة.. يكون الدعم وتدقيق الإجابة والانتقال للتالي أوتوماتيكيًا بحت..
  4. أهلًا بك، تم إبلاغ فريق العمل، أرجو أن تتواصل مع الدعم الفني بفتح مذكرة من خلال هذا الرابط بالتوفيق
  5. أهلًا بك، أجل يمكن، وستجد الطريقة من هنا.
  6. أهلًا بك، الدورات التي تفيدك من الأساسيات بكيف يعمل الحاسوب حتى البرمجة هي دورات computet science (علم الحاسوب) وهي في الأصل تُدرس كمنهاج في الكليات والجامعية لطلاب تكنولوجيا المعلومات وهندسة الحاسوب وتوفرها بعض الجهات كالجامعات الأجنبية على شكل دورات online مثل هذه الدورة (ممكن من خلال البحث تجد غيرها الكثير) أما بالنسبة للمحتوى العربي في هذا المجال فهو على الأغلب مقالات أو فيديوهات متفرقة.. ستفيدك مقالات الأكاديمية في هذا الرابط
  7. أهلًا بك، انتقال البيانات data transmition (ليس علم مستقل بذاته) هو إرسال واستقبال البيانات عبر قناة اتصال تصل بين أطراف الاتصال، وقد تكون قنوات اتصال نقطة إلى نقطة أو متعددة النقاط وهذا المفهوم ممكن يندرج تحت مفهوم انتقال البيانات عدة فروع.. مثلا كيفية انتقال البيانات في شبكة الانترنت وكيفية انتقال البيانات في الحاسوب نفسه وكيفية انتقال البيانات بين الأجهزة المختلفة ووو. تعلم البرمجة يحتاج عدة أمور لكن يمكن تعلمها بدون خلفية عن علوم الحاسوب والبيانات ثم مع الوقت تتعلمها، لكن تعلم تراكيب البيانات والخوارزميات وتحليل الأنظمة قبل تعلم البرمجة يسهل عليك تعلمها ومع الوقت عندما تتعلم الويب مثلًا تتعرف بنفسك على كيفية انتقال البيانات في الويب وكذلك بالنسبة للموبايل عندما تتعلمه مع الوقت ممكن تبحث وتتعرف كيفية انتقال البيانات في الموبايل، وهكذا بالنسبة لأي شيئ تتعلمه (desktop , games) مع الوقت تتعرف على كيف يتم من الأساس
  8. أهلًا بك، في الواقع تعطى شهادة software engineer بعد دراسة مناهج متعلقة بمكونات الحاسوب غير الملموسة من البرمجيات وأنظمة التشغيل والبرامج التي تشغل على الحواسيب ولغات البرمجة لهذه البرامج وكيفية تطوير مثل هذه البرامج وخوارزميات العمليات البرمجية وتراكيب البيانات والشبكات وعالم الويب وعالم الموبايلات وأمن المعلومات وتحليل البيانات والكثير من الأمور الأخرى ذات الصلة. بالطبع لكي تكون مهندس برمجيات يلزمك فعلًا التعرف على كيف يعمل الحاسوب، لكن في معظم تخصصات تكنلوجيا المعلومات (IT) تُدرس أيضًا نفس هذه الأساسيات التي يتعلمها مهندس البرمجيات، أي ليس شرط أن تكون مهندس برمجيات لتكون خبير في مجالات البرمجيات وكيف يعمل الحاسوب! مبدئيًا لتعرف كيف يعمل الحاسوب يمكنك قراءة مقالات ومن ضمن هذه المقالات تتوقف عند نقطة معينة لم تفهمها كثيرًا أو تريد التعرف عنها أكثر فتبحث عنها. هنا بعض المصادر التي يمكن أن تفيدك في الأساسيات http://www.computer-wd.com/2016/12/understand-how-your-pc-work.html https://ar.wikipedia.org/wiki/حاسوب#كيف_تعمل_الحواسيب؟ https://www.ra2ed.com/تكنولوجيا/75993/كيف-يعمل-الكمبيوتر-من-الداخل وستجد من توثيقات موسوعة حسوب وشروحات أكاديمية حسوب ودوراتها مصدرًا مفيدًا للتطوير في عالم البرمجة
  9. أهلًا بك@سعودي وافتخر، هذا الرابط ينقلك لقائمة الدورات التي اشتريتها، يمكنك في البداية الإطلاع على محتوى جميع الدورات وممكن تتابع أو ل فيديو من كل دورة لتتعرف أكثر على محتوى الدورة وطبيعة الشرح فتطمئن.. بذلك تكون نوعًا ما قررت في ماذا ممكن أن تبدأ أولًا.. بعدما ترى أنك اندمجت في أحد الدورات؛ إن أردت أن تتابع مع دورة ثانية من دورات الأكاديمية في نفس الوقت فلا بأس.. لكن لا أنصح بأكثر من دورتين حتى لا تتشتت بأكثر من مجال... ويُفضل أخذ واحدة مع متابعة الدروس والتطبيق مع المدرس باستمرار ثم اخرى مع متابعة الدروس والتطبيق مع المدرس باستمرار ثم غيرها وهكذا للباقيين. جميع الدورات مبنية بحيث تنقل الطالب من الصفر إلى خبير بما يكفي لإنشاء برامج مستخدمًا ما تعلَّم، فلا تقلق إن لم يكن لديك أي خلفية عن أي مجال لأي دورة منهم لأن غالبية الطلاب يبدأون هكذا ويشعرون بنفس هذا الأمر لكن مع الوقت يتأقلمون بسهولة، بالنسبة للتوجيه التقني ستجده كافيًا بعد الإنخراط مع شرح المدرس في الفيديوهات وإن واجهت صعوبة في فهم نقطة معينة في الدرس يمكنك التعليق أسفل الفيديو وسيجيب المدرسون عليك خلال ساعات. إن شاء الله تكون الفكرة وصلت واطمئننت نوعًا ما كل التوفيق
  10. أهلًا بك، جميل أنك تنوي تعلم nativeScript وأتمنى لك كل التوفيق.. في الواقع HTML5 و CSS3 هما امتداد ل HTML و CSS وليس أشياء جديدة؟ أي إذا تعلمت HTML و CSS يلزمك بعدها بضع ساعات لتتعرف على التحديثات التي جاءت بها HTML و CSS. لكن nativeScript تعتمد على XML (بدل HTML) يشترط قبل تعلمها التالي وبمستوى الأساسيات تقريبًا: جافاسكربت ( JavaScript ): يجب أن تعرف المفاهيم الأساسية لجافا سكريبت، مثل كيفية عمل الدوال ( functions ) ، والشروط ( if statements ) ، وحلقات التكرار ( Loops ). صفحات الطرز المتراصة ( سي إس إس او CSS ليس شرط CSS3 ): يجب أن تعرف كيفية كتابة محددات ( Selectors ) صفحات الطرز المتراصة ( سي إس إس او CSS ) بسيطة ، وأن تعرف كيفية تطبيق قواعد CSS كإلحاق القيمة بالمعرف ( مثل `background-color: red;` ) . موجه سطر الأوامر ( Terminal ): يجب أن تعرف كيفية فتح موجه سطر الأوامر ( Terminal أو الطرفية ) على جهاز التطوير الخاص بك ، وكيفية التنقل بين المجلدات والمسارات ، وكيفية تنفيذ الأوامر. محرر نصوص ( text editor ) او بيئة تطوير متكاملة ( IDE ): يجب أن تعرف أساسيات استخدام محرر النصوص ( text editor ) او بيئة تطوير متكاملة ( IDE ) الذي تختارها. يمكنك استخدام أي محرر نصوص لإنشاء تطبيقات NativeScript.
  11. أهلًا بك، يمكنك تثبيت سكريب مجاني (إضافة) في برنامج الأفتر أفكت يسمى animation composer يساعدك في إنشاء فيديوهات موشن غرافيك احترافية؛ إذ توفر هذه الإضافة حركات جاهزة للنصوص وانتقالات بين الصور ومجموعة أصوات جاهزة
  12. كلمة حركات مستمدة من الفعل «حرَّك» والتحرُّك سمةٌ تعطينا الإحساس بالحيوية وتجعل أحداث الطبيعة تبدو أكثر واقعيةً بالنسبة لنا، فالحركات تجذب انتباه الناظر وتجعلة يشعر بإثارة الموقف وتبرز المشاهد الأكثر أهميةً وإقناعًا من غيرها. أمَّا العناصر الساكنة التي تجلس بلا حراك، فتشعرك أنَّها ميتة، حتى وإن كان تصميمها جذابًا. يعدُّ التحريك فنًا مثله كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وصارفي هذه الأيام علمًا يُدرّس وعملًا يُنجَز، حتى أنه أصبح متأصلًا في روح تصميم الويب ويبدو أنه إضافة رائعة إلى العديد من عناصر موقع الويب. هل تجلب الحركات المزيد من الحياة للتصميم أم أنها قد تفسده أحيانًا؟ دعنا نتعرف على الفوائد التي يمكن أن تقدمها الحركات لموقع الويب وما هي الحالات التي يكون من الأفضل تجنبها. كيف ظهرت الحركات في تصميم المواقع ظهرت الحركات في الويب منذ وقت طويل. أولاً، كانت هناك ملفات ‎.gif صغيرة الحجم بها صور متحركة ومقاطع فيديو متنوعة. كانت تلك العصور المظلمة مع الكثير من بطاقات Flash وأشياء نفضل أن لا نراها. في تلك الأيام، لم يكن أحدًا يعتبر الحركات وسيلة لتحسين قابلية استخدام موقع الويب. كانت تستخدم في الغالب للتزين أو للمتعة فقط. اليوم، يمكنك استخدام تأثيرات الحركة لتحسين التنقل والاستخدام لموقعك. منذ وقت ليس ببعيد، أُنشئت جميع العناصر والتأثيرات المتحركة على مواقع الويب بمساعدة تقنية Flash. بالطبع، لقد كانت تقنية ثورية في ذلك الوقت على الرغم من أنها كانت ثقيلة جدًا وزادت من وقت تحميل الموقع بشكل كبير. في هذه الأيام، تُصمّمم الحركات باستخدام شيفرات JavaScript و CSS الخفيفة التي تساعد على إضافة عناصر متحركة إلى الموقع دون زيادة تحميله. والأهم من ذلك، تُستخدم الحركات هذه الأيام لتحسين UX، وليس فقط للمتعة. إنها وسيلة رائعة لمصممي الويب التي تساعد في جعل موقع الويب أفضل وأسهل في الاستخدام. كما في الحالات التالية: تحسين قابلية الاستخدام بالحركات في كثير من الحالات، تُستخدم تأثيرات الحركة لجذب انتباه المستخدم لتفاصيل مهمة تساعده لاتخاذ القرار الصحيح بشأن إمكانية النقر فوق عنصر من بين أشياء أخرى. وبالتالي، تستخدم العديد من مواقع الويب تأثيرًا هزَّازًا في نماذج تسجيل الدخول لتبين للمستخدمين أن هناك خطأ ما وأن المعلومات قد أُدخلت بشكل غير صحيح، مثل كلمة السر الخاطئة. هذا الأسلوب يحاكي هزِّة رأس إنسان يقول "لا". هناك العديد من الطرق الأخرى لاستخدام الحركات لتحسين تجربة المستخدم UX. يمكن استخدامها في أشرطة التنقل لفصل الفئات الرئيسية عن الفئات الفرعية؛ أو ضمن خيارات متعددة، عندما تتلاشى جميع العناصر باستثناء العنصر المختار. موقع Etechevent مع عناصر متحركة يمكن استخدام الحركات لتوجيه المستخدمين حول الموقع وحتى جعلهم يشترون. إن إضافة عناصر تفاعلية وجذب انتباه المستخدمين إليها بمساعدة تأثيرات الحركة يمكن أن يساعد مواقع الويب التجارية على تحسين العقارات وعائد الاستثمار. ويمكن أن تستفيد مواقع رواية القصص أيضًا من تضمين الحركات. حيث يمكنها أن تبين للمستخدمين ما الخطوة التالية التي يجب أن تكون أو كيفية اختيار مكان الانتقال في موقع الويب. استخدام الحركات في التصميم الماديّ (Material Design) أثبتت فكرة الحركات في تصميم الويب أنها مفيدة للغاية إذا لم تستخدم بطريقة تزيينية فقط. غالبًا ما يستخدمها مصممو UI و UX لتحسين سير العمل لديهم. حتى Google تدرك أهمية الحركة لسهولة الاستخدام، وهكذا ظهر التصميم الماديّ. أصبح التصميم المادي أكثر وأكثر عصرية ويُستخدم هذه الأيام في العديد من التطبيقات وتَصاميم المواقع. سر شعبيته هو اهتمامه الكبير بكيفية إدراك الكائن أو العنصر؛ كيف يمكن للحركة أن تخبر المستخدمين أكثر عن هذا العنصر وكيفية استخدامه. تنص Google في دليلها للتصميم المادي على أن الحركة يمكن أن تخبر المستخدمين أن أي كائن هو خفيف أو ثقيل أو مرن أو كبير أو صغير. يجب استخدام الحركات لتزويد المستخدمين بِفهم أفضل لطبيعة الكائن، وبالتالي، كيف يمكن وينبغي أن تستخدم داخل التصميم. تتقدم Google إلى أبعد من ذلك مع الحركات وتوصي باستخدام العناصر المتحركة التي تغير سرعتها ومدتها اعتمادًا على الهدف أو التأثير الذي ترغب في الحصول عليه. وبالتالي، تقدم Google العناصر الواردة والصادرة التي تظهر على الشاشة عندما ينبغي جذب الانتباه، أو إزالته من الشاشة عندما لم تعد هناك حاجة إليه. نصائح لاستخدام الحركات في المواقع عند إضافة الحركات إلى موقعك، يجب أن تفكر جيدًا في جميع مخاطرها أيضًا. العناصر المتحركة يمكن أن تضر بأداء موقع الويب وتجربة المستخدم UX. أولًا، يجب إعادة التفكير في استخدام الحركات إن كانت تبطئ من سرعة تحميل موقعك وأداءه العام. يمكن الكشف عن ذلك بمقارنة بسيطة لموقعك بحركاته مع أداء ألعاب الحاسوب الثقيلة. إذا كانت اللعبة تعمل بسلاسة على سطح المكتب أكثر من موقعك فيجب أن يكون هذا سببًا في إعادة النظر في استخدام الحركات. موقع التوقعات السعيدة استفد من CSS عند إنشاء حركات لموقعك. تعد مكتبة jQuery مثاليةً وتستخدم في العديد من المشاريع، لكنها يمكن أن تبطئ بالفعل من أداء موقعك. تسمح شيفرة CSS بإنشاء حركات خفيفة ستبدو رائعةً على أي جهاز دون إِثْقال التصميم. يجب أن تتأكد أن حركاتك متجاوبةً (responsive). موقع الويب المتجاوب أمر لا بد منه إن كنت ترغب في النجاح. ولكن إذا كان الأداء يبدو رائعًا على شاشة سطح المكتب فقط، فقد تخسر المعركة مع المستخدمين. هناك العديد من الأدوات التي تسمح بإنشاء حركات مُتجاوبة (مثل Adobe After Effects أو Invision) فبُناة مواقع الويب (مثل Webflow أو MotoCMS) تتضمن تأثيرات حركية متجاوبة وتوفر أنواع مختلفة من الحركات التي يمكن استخدامها داخل المواقع لتحسين تصميمها وقابليتها للاستخدام مثل: التلاشي (اليسار ، اليمين ، أعلى ، أسفل) (Fade in). الارتداد(Bounce in). التدوير (يسار ، يمين ، أعلى ، أسفل) (Rotate). الزلق (اليسار ، اليمين ، أعلى ، أسفل) (Slide in). اللمعان والنبض(Flash and Pulse). التذبذب (Wobbling). الاهتزاز (Swinging) وإلى آخره. الحركات يجب أن تلفت الانتباه ولكن ليس كثيرًا. تأكد من أن الحركة لا تستغرق وقتًا طويلاً ولا تدوم طويلًا على الشاشة. هذا هو الحال خاصةً إذا كنا نتحدث عن العناصر التي يجب على المستخدمين التفاعل معها كثيرًا. قد يكون الأمر ممتعًا مرةً أو مرتين، لكن مع الاستخدام المتكرر قد يصبح الأمر معرقلًا للغاية. موقع Laerepenger مع حركات غامضة ابدأ باستخدام العناصر الصغيرة بالحركة على الموقع. في الواقع، الحركات وسيلة للهدف، وليست الهدف نفسه. يجب عليك عدم تضمينها أينما تريد. يجب أن يكون هناك ما يبرر لاستخدامها. من الأفضل تضمين الحركات في عناصر واجهة المستخدم أو العناصر التي يتفاعل معها المستخدمون أكثر، مثل قوائم التنقل أو نماذج الاشتراك. وفكر قبل إضافة حقل قفَّاز وصور منزلقة: كيف ستؤثر على تجربة المستخدم، هل ستحسن التفاعل مع الموقع؟ تعد الحركات رائعةً لصنع تصميم موقع لا ينسَ. فهي لا تزال تستخدم على نطاق واسع في تصميم الموقع على الرغم من النظرات المختلفة حولها مثل سرعة التحميل أو عدم الاستجابة. ولكن الشيء الرئيسي الذي يجب أن تتذكره عند تقديم عناصر متحركة لموقعك هو تأثيرها على قابليتها للاستخدام. الأمر متروك لك - تحديد أين ومقدار دمج الحركة في التصميم الخاص بك. فيما يلي ملخص قصير لمواقع الويب التي تستخدم الحركات لدرجة كبيرة: موقع KiKK تصميم موقع مقهى مثلجات موقع شركة JD للاستشارات موقع VN Star تصميم شركة Soane Capital المالية موقع وكالة Nodeplus الرقمية تصميم موقع Creative Cruise للفنادق تصميم مواقع صناعي مع تحريك تصميم موقع وكالة Pomade الرقمية موقع مجوهرات Puca تصميم موقع Carioca Promo الترويجي موقع Ultranoir مع تحريك إبداعي تصميم موقع Mahno الشخصي تصميم منظر حديقة Vintage المتحرك ترجمة -وبتصرف- للمقال Animation in Web Design: Why and When to Use من موقع line25
  13. سنُأحاول في هذا المنشور الإشادة بجهاز حاسوب Mac Plus الجميل من خلال إنشائه باستخدام CSS. عن تصميم الجهاز دعنا نبني (تقريبًا) جهاز حاسوب. ليس فقط أي حاسوب قديم، ولكن حاسوبًا كان بالنسبة للكثير منا مقدمة في عالم Apple. كانت بداية إطلالة جهاز Macintosh Plus (الاسم المختصرMr. T) لأول مرة في عام 1986 بحزم 1 ميغابايت من ذاكرة الوصول العشوائي ومعالج بسرعة 8 ميجاهرتز؛ وبصرف النظر عن كل هذه القوة، فقد كان تصميمه لطيفًا للغاية، مما جعله أكثر متعة في الاستخدام. في هذا المشروع، سننشئ نموذجًا ثلاثة الأبعاد 3D لجهاز Macintosh Plus وعرضه في بيئة ثلاثية الأبعاد. وسنجعله يتحرك على الشاشة باستخدام حركات الإطار المفتاحي CSS Keyframe animation، لإظهار التأثير ثلاثي الأبعاد بشكل أفضل. لماذا نستخدم CSS؟ لكون CSS هي الطريقة القياسية لتصميم محتوى صفحة الويب؛ يُعالج كل شيء من خطوط وألوان ومواضع عناصر وصور خلفيات بواسطة CSS، وهي تقنية أساسية لإنشاء صفحات الويب الحديثة. هي ليس فقط مخصصة لبناء المحتوى ثنائي الأبعاد، بل باستخدام إنتقالات CSS ثلاثية الأبعاد والمواضع، يمكنك الدخول بِ CSS إلى الأعماق. ينتج ملفات ذات أحجام أصغر من أحجام ملفات الصور عند إنشاء مشاهد باستخدام CSS؛ ففي هذا المثال، يُضغط CSS على 4 كيلوبايت فقط و HTML أقل من 1 كيلوبايت. بينما ستكون الصورة المكافِئة لنفس التنسيق بحجم 100 كيلو بايت أو أكثر. العرض التوضيحي والشِّيفرة المصدرية اطلع على تصميم CSS Mac Plus ويمكنك تحميل الشيفرة المصدرية الكاملة من هنا، ويمكنك عرض ملف CSS الكامل على GitHub.. البادئات قمنا بحذف أي بادئات CSS من شيفرة المثال لتسهيل القراءة. عند العمل على ذلك بنفسك، تأكد من تضمين بادئات للمتصفحات إن لزم، مثل webkit و moz و ms و o. إعداد المرحلة الأولى عند إنشاء رسوم ثلاثية الأبعاد باستخدام HTML، نحتاج إلى المشهد الذي سنقوم ببنائه. سنبدأ بعنصر الحاوية: <div class="stage"></div> هذا عنصر div بسيط بالصنف stage يعمل عمل الحاوية للكائن ثلاثي الأبعاد الخاص بنا، ولتثبيتها كحاوية ثلاثية الأبعاد، قمنا بتعيين بعض خاصياتCSS، الخاصية و perspective perspective-origin. الخاصية perspective تشبه نقطة التلاشي للمشهد، وكلما صغرت القيمة، تكون نقطة تلاشي أقصر وأكثر تأثيرًا. توضح هذه الصورة كيف يؤدي تغيير قيمة هذه الخاصية إلى تغيير شكل المشهد: جربها بنفسك إن كنت ترغب في البدء، فابحث عن ملف screen.css في المسار examples/01-Perspectiv في ملفات المشروع. ستتمكن من تحديث قيمة الخاصية perspective ومعرفة تأثيرها من خلال فتح ملف index.html من نفس المجلد في متصفحك. الخاصية perspective-origin تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، يتيح لك تغيير قيمة هذه الخاصية، أن تنظر إلى المشهد من الأعلى أو من الأسفل أو من الجانب. في هذا المثال قمنا بضبط قيمتها على 1600 pixel، وشيفرة CSS تبدو كالتالي: .stage { perspective: 1600px; perspective-origin: 50% 100px; } يحتوي مجلد stylesheets في ملف المشروع المضغوط على قواعد CSS الكاملة لإعداد الخصائص الأخرى المختلفة للمشهد، بما في ذلك الخلفية والعرض والارتفاع. تصميم الهيكل سنستخدم بعض عناصر HTML لإنشاء الجهاز، بدلًا من محاولة تضمين كل التفاصيل النهائية، سنركز على تفاصيل المظهر الخارجي للجزء الأكبر. الهيكل الرئيسي للجهاز هو مربع صندوق مائل إلى الخلف قليلًا بزاوية ويجلس على قاعدة مسطحة. هذا يعني صنع صندوقين، أحدهما يميل قليلًا ويجلس على صندوق مسطح. لإنشاء هذا التأثير، سنستخدم الخاصية transform (الانتقال) في CSS. إذا كنت ترغب في الإطلاع على شيفرة HTML الكاملة، فيمكنك العثور عليه في ملفات المشروع داخل ملف index.html. الانتقالات الخاصية transform في CSS تسمح بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا. يمكننا الاستفادة من ذلك لإنشاء مشهدنا. يمكن أن تبدو الخاصية transform كالتالي: .example { transform: rotateY(45deg) translateZ(-100px); } يمكنك بناء الانتقال (التحويل) عن طريق سلسلة من الجمل. في هذا المثال، دُوِّر العنصر بمقدار 45 درجة حول محور Y، ثم أزحه بمقدار 100 pixel للخلف على طول محور Z. يجب أن يبدو الشكل شيء مثل هذا: يوجد مثال على تحويلات CSS في مجلد examples/02-Transforms ضمن ملفات المشروع، هناك عنصرين متَموضعين في المثال ويمكنك تغيير موضعهما من خلال تعديل محتوى الملف 02-Transforms/css/screen.css. الخاصية transform-origin عند تدوير العناصر حول المكان، تجدر الإشارة إلى أن التحويلات لها أصل يمكن تعيينه. قيمة هذه الخاصية عبارة عن نقطة يشار إليها بضبط قيم المحاور X و Y و Z، وهذا هو الافتراضي لها: .default-origin { transform-origin: 50% 50% 0; } قد احتفظنا بالوضع الافتراضي في مثالنا، لكن الأمر يستحق أن ننوه لوجود الخاصية. إنشاء الصناديق يمكننا استخدام بعض التحويلات لإعداد الجسم الرئيسي للجهاز. ويمكن أن تكون شيفرة HTML كالتالي: <div class="stage"> <div class="positioning animated"> <div class="mac"> <figure class="back"></figure> <figure class="left"></figure> <figure class="right"></figure> <figure class="top"></figure> <figure class="base-front"></figure> <figure class="base-left"></figure> <figure class="base-right"></figure> <figure class="base-back"></figure> <figure class="front"></figure> <figure class="shadow"></figure> </div> </div> </div> في هذه المرحلة، يوجد حاوية سنستخدمها لوضع الجهاز في الصفحة. داخلها سيكون جهاز mac نفسه. يتكون الصندوقان من عناصر <figure> ، تمثل هذه العناصر الجوانب العلوية والأمامية والخلفية للمربعين. هناك أيضًا عنصر figure لتمثيل الظل. يمكنك العثور على هذا المثال في المجلد examples/03-Boxes. ستبدو النتيجة كالتالي: تُحوَّل كل من المربعات إلى مكانها باستخدام خاصية تحويل CSS، ويتم استخدام تدرجات CSS لإضافة عمق إلى المشهد. شِيفرة CSS تشبه التالي: .front { height: 11.5em; width: 9.6em; background: #e0e0e0; transform: rotateX(5deg) translateZ(5.43em); } .back { height: 11.5em; width: 9.6em; background: linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2); transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg); } .top { height: 10.95em; width: 9.6em; background-color: #ebf0dc; background: linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa); transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em); } .left { height: 11.5em; width: 10.9em; background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3); transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em); } .right { height: 11.5em; width: 10.9em; background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3); transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em); } .base-front { height: 2.1em; width: 9.6em; background: #c2c2c2; transform: translateY(10.7em) translateZ(5em); } .base-back { height: 2.1em; width: 9.6em; background: #b3b3b3; transform: translateY(10.7em) translateZ(-5em) rotateY(180deg); } .base-left { height: 2.1em; width: 10em; background: #b3b3b3; transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em); } .base-right { height: 2.1em; width: 10em; background: #b3b3b3; transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em); } .shadow { width: 10em; height: 11em; background: transparent; transform: rotateX(90deg) translateZ(-7.4em) translateX(20em); box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4); } تم إعطاء كل عناصر figure عرضًا وارتفاعًا، بالإضافة إلى تدرج أو لون خلفية CSS ثم تتَموضع باستخدام خاصية transform (التحويل). مثلًا، يتم تدوير الجانب الأيسر بمقدار 90 درجة قبل نقله إلى الخلف بنصف عرض الجهاز. يُنقل عنصر figure الأمامي للأمام، على طول المحور Z بنصف طول الجهاز ويُدوَّر الظهر 180 درجة قبل نقله مرة أخرى. بالنسبة لأجزاء المربع العلوي، يُدوّر كل عنصر من عناصر figure بمقدار 5 درجات حول المحور X. هذا يعني أن الجزء الأساسي من Macintosh Plus مائل إلى الخلف. أخيرًا، يستخدم عنصر figure الخاص بالظل الخاصية Box-shadow لإنشاء ظل من إطار العنصر يجعله يبدو كما لو كان الصندوق يجلس على سطح مستوٍ. الحَوَاف إحدى ميزات هذا الحاسوب هي الحواف المنحدرة حول المقدمة، تساعد هذه الحواف على تخفيف الزوايا الصلبة في المربع وجعله يبدو أقل تشبُّهًا بالصندوق. لتحقيق ذلك ندرج بعض العناصر الإضافية لعنصر figure الأمامي، مثل: <figure class="front"> <span class="bezel-top"></span> <span class="bezel-left"></span> <span class="bezel-right"></span> <span class="bezel-bottom"></span> </figure> تمثل كل عنصر من عناصر داخل عنصر figure الأمامي أحد هذه الحواف، مع إضافة بعض الأنماط، ستبدو كما يلي: يمكنك العثور على هذا المثال في المجلد examples/04-Bezels. شِيفرة CSS التالية تستخدم حيلة بخاصية border-width (عرض الحدود) لإنشاء حواف منحدرة. .front .bezel-top { border-top: 0.75em solid #f2f2f2; border-right: 0.5em solid transparent; border-left: 0.5em solid transparent; width: 8.6em; } .front .bezel-left { border-top: 0.5em solid #d9d9d9; border-right: 0.75em solid transparent; border-left: 0.75em solid transparent; width: 10em; transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em); } .front .bezel-right { border-top: 0.5em solid #d4d4d4; border-right: 0.75em solid transparent; border-left: 0.75em solid transparent; width: 10em; transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em); } .front .bezel-bottom { border-top: 0.75em solid #cccccc; border-right: 0.5em solid transparent; border-left: 0.5em solid transparent; width: 8.65em; transform: rotateZ(180deg) translateY(-10.76em); } كل حافة لها ثلاثة حدود، بالنسبة للحافة العلوية، وضعنا حدًا ملونًا في الجزء العلوي، ثم وضعنا حدين شفافين على الجانبين الأيسر والأيمن. في CSS، عندما يلتقي حد مع حدود بلون آخر، يكون الخط الذي يتقابلون فيه قطريًا. هذا يعني أن الحدود الشفافة تُنتِج حوافًا قطرية للحدود الملونة. يتم تطبيق هذه التقنية على كل الحواف، مما يؤدي إلى ظهور الحواف منحدرةً. تُطبق التحويلات على الحواف أيضًا لجعلها تتناوب وتتموضع في جانب عنصر figure الأمامي. المزيد من التفاصيل مع وجود المربعات الرئيسية لِنمط حاسوبنا، يمكننا إضافة العديد من التفاصيل التي تجعله يبدو وكأنه جهاز Macintosh Plus، مثل الشاشة والرمز ومحرك الأقراص. يحتوي عنصر figure الأمامي لِ HTML على التالي: <figure class="front"> <span class="bezel-top"></span> <span class="bezel-left"></span> <span class="bezel-right"></span> <span class="bezel-bottom"></span> <figure class="screen-container"> <span class="screen"> <p>hello, Dave</p> <span class="sheen"></span> </span> </figure> <figure class="logo"> <span class="image"></span> <span class="text">Macintosh Plus</span> </figure> <figure class="floppy"></figure> </figure> يمكنك العثور على هذا المثال في المجلد examples/05-Completed. الشاشة تتكون الشاشة من عدة عناصر، بما في ذلك الحاوية وما يغطيها من الطبقة المضيئة. لذلك تستخدم CSS قيمة gradients (التدرجات اللونية) لجعل الإضاءة تبدو داخلية في الجزء الأمامي من الحاسوب، بينما يستخدم عنصر اللمعان span تدرجًا شبه شفاف لإعطاء الشاشة بعض الإشراق. الشعار يتكون الشعار من جزأين، صورة وبعض النصوص، يحتوي امتداد الصورة على صورة خلفية لشعار Apple القديم الملون، ويتم وضع النص بجانبه. يمكن العثور على شِيفرة CSS لهذا في الملفات المصدرية. لإنشاء الشكل الصحيح، يتم إضافة خط مضمن. تستخدم CSS لهذا القاعدة ‎@font-face (واجهة الخط). هناك العديد من الطرق للقيام بذلك، لكن ربما من الأسهل استخدام خدمة مثل خدمة Font Squirrel’s @font-face generator لإنشاء شِيفرة CSS التالية: @font-face { font-family: "apple_garamondregular"; src: url("../fonts/apple_garamond-webfont.eot"); src: url("../fonts/apple_garamond-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/apple_garamond-webfont.woff") format("woff"), url("../fonts/apple_garamond-webfont.ttf") format("truetype"), url("../fonts/apple_garamond-webfont.svg#apple_garamondregular") format("svg"); font-weight: normal; font-style: normal; } يساعدنا Font Squirrel عن طريق إنشاء الملفات المختلفة (eot ، woff ، إلخ) التي يمكن وضعها بعد ذلك في المشروع واستدعائها داخل قاعدة font-face@ في شيفرة CSS كما هو موضح. والنتيجة هي الخط الذي يطابق الأصلي كثيرًا. القرص المرن محرك الأقراص المرنة (Floppy drive) هو عنصر أحادي، ويستخدم حدود CSS لجعله يبدو كما لو كان مضبوطًا في الواجهة. تبدو شيفرة CSS التي تحدث التأثير كما يلي: .floppy { height: 0.2em; width: 2.8em; transform: translate3d(4.8em, 8.9em, 0); background: #555555; border-top: 0.1em solid #cccccc; border-right: 0.3em solid #e6e6e6; border-bottom: 0.1em solid #f2f2f2; border-left: 0.3em solid #e6e6e6; border-radius: 0.25em; } محرك الأقراص المرنة لديه لون خلفية رمادية، وأربعة حدود، الحدود العليا هي الأغمق، حيث تكون الحدود السفلية أكثر إشراقًا لجعلها تبدو مُضاءة من الأعلى. أخيرًا، نقوم بتدوير أركان الإطار قليلًا من خلال الخاصية border-radius. دمج القطع معًا عند دمج جميع القطع معًا سيكون الشكل الناتج كالتالي إضافة الحركات على الرغم من أن مظهر الحاسوب جيد جدًا، إلا أنه يمكننا إظهار أنه كائن ثلاثي الأبعاد حقيقةً عن طريق تحريكه. للقيام بذلك، سوف نستفيد من حركات الإطار المفتاحي CSS keyframe. هناك نوعان من الحركات في CSS هما: transition (تأثيرات الإنتقال)، يتم فيها تحريك العناصر في الصفحة من نمط أو موضع إلى آخر، و keyframes (الإطارات المفتاحية)، التي تمثل سلسلة أكثر تعقيدًا من خطوات التحريك. يمكن وصف سلسلة من الإطارات المفتاحية على أنها سلسلة من النسب المئوية، وتصف شيفرة CSS كل خطوة. يمكن أن يبدو شكلها كالتالي: @keyframes back-and-forth { 0% { transform: rotateY(40deg); } 40%, 50% { transform: rotateY(-40deg); } 90%, 100% { transform: rotateY(40deg); } } في المثال السابق، تُسمى الحركة "back-and-forth" ، وتتكون من ثلاث خطوات، تبدأ بالدوران بزاوية 40 درجة، ثم عند نسبة 40٪ ، يتم تدويرها إلى 40 درجة بالإتجاه المعاكس، تبقى في هذه الدورة حتى النسبة 50٪ ، ثم تعود إلى الموضع الأصلي عند النسبة 90 ٪. يقوم المتصفح تلقائيًا بسد عجز انقطاع التسلسل، عن طريق تنشيط الخصائص، ووقتها سيتم تشغيل زاوية الدوران. تطبيق الحركات لتطبيق هذه الحركة بواسطة CSS نستخدم الخاصية animation وهي تبدو كالتالي: animation: back-and-forth 14s ease-in-out infinite; تُدمَج عدة أشياء بسطر واحد هنا. تشير الشيفرة السابقة إلى أن اسم الحركة هو "back-and-forth"، ومُدتها 14 ثانية، وتكرر لانهائيًا، وسرعة تغييرها هو القيمة المحجوزة ease-in-out أي ستبدأ الحركة ببطء، ثم تتسارع، ثم ستنتهي ببطء. بتطبيق هذه الحركة على الحاوية ذات الصنف "positioning"، ينتج التالي: ماذا تعلمنا؟ بإنشاء كائن ثلاثي الأبعاد باستخدام CSS وتحريكه، غطَّينا بعض التقنيات وقمنا بضبط الخاصيتين perspective و perspective-origin، واستفدنا من الخاصية transform لتدوير العناصر وتحريكها وتحديد موضعها، وأضفنا تدرجات من خلال نوع البيانات <gradient> لإعطاء تأثير ثلاثي أبعاد أكثر واقعيةً، واستخدمنا بعض حيل CSS الحدودية لإعطاء شعور بالعمق، وأخيرًا استخدمنا إطارات مفتاحية وحركات CSS لإعطاء حياة للمشهد. توافقية المتصفح لا يمكن لجميع المتصفحات التعامل مع التحويلات (CSS transforms) سيصارع Internet Explorer في ذلك، ولكن هناك أمل في أن يصل الدعم إلى الإصدار11 منه. جميع الاصدارات الحديثة من Chrome وSafari وFirefox ستنجح في التعامل مع الإنتقالات. توفر مكتبة Modernizr مجموعة من أدوات JavaScript للكشف عن إمكانيات المتصفح ويمكن استخدامها لإظهار محتوى بديل في الحالات التي يتعذر فيها على المتصفح دعم خاصيات CSS معينة. في شيفرة مثالنا، ستجد أننا استفدنا من Modernizr للكشف عن وجود تحوُّلات ثلاثية الأبعاد، في الحالات التي لا وجود لها، تُعرض صورة بدلاً من ذلك. التقدُم للأمام رغم أن هذا المثال قد لا يبدو شيئًا تستخدمه في مواقع الويب العادية، لكن يمكنك تطبيق التقنيات على جميع أنواع السيناريوهات. مثلًا، يمكن استخدام تحويلات CSS لإضافة العمق إلى انتقالات الصفحة، والعروض المتكررة (carousels)، والشعارات والأزرار، على سبيل المثال لا الحصر. يمكن استخدام حركات CSS لإضافة المزيد من الانتقالات والبراعة في التحويلات، ويمكن لتدرُجات CSS إضافة عمق للصفحات دون الحاجة إلى استخدام الصور. ترجمة -وبتصرف- للمقال Mac Plus CSS من موقع cssanimation
  14. اهلا بك، اجل هو اختياري مطلوب فقط إذا قمت بالتسجيل في خيار "نقل البيانات" على حساب PayPal الخاص بك ؛ يمكن استخدامها للتحقق من المدفوعات إذا كان لديك مشاكل IPN.
  15. يعد WebKit مُحرِّك متصفح ويب (web browser engine) يستخدمه كلٌّ من Safari، و Mail، و App Store، وغيرها من التطبيقات والمتصفحات التي تعمل على macOS، و iOS، ولينكس. ويعرض Webkit صفحات الويب التي تحتوي على تعليمات مكتوبة بِشيفرات Javascript و HTML و XML، ويدير أيضًا تاريخ الصفحات التي تمت زيارتها مؤخرًا. هناك الكثير من الانتقالات المميزة و تأثيرات الحركات المتاحة للاستخدام على محرك webkit من شأنها تنشيط تجربة الويب لمستخدمي متصفح Safari. في ما يلي لمحة بكيفية إحداث إحدى هذه التأثيرات. سيُوضح هذا المقال طريقة إنشاء تأثير انعكاس من خلال الخاصية rotateY، وكيف يمكن استخدامه لإنشاء تقليبات في العديد من الصور، هذا مناسب كأفضل تنسيق لإحداث تأثيرات للأوراق الرابحة. اضغط هنا لعرض التجربة الحية. يُتطلب متصفح Safari لتجريب تأثير انعكاس Webkit المتحرك. يوضح المثال المذكور كيف يمكن استخدام تأثير التقليب لإظهار البيانات في كلا الوجهين من خلال قلب البطاقة. قم بتمرير مؤشر الفأرة فوق بطاقتي Optimus Prime و Megatron الرابِحتين في الأعلى لمشاهدة النتيجة. الآن، دعنا نلقي نظرةً على كيفية صنع حركة التقليب هذه. شيفرة HTML <div id="transformers-rule"> <div class="container megatron"> <div class="card"> <div class="face front"> </div> <div class="face back"> </div> </div> </div> </div> شيفرة HTML بسيطة للغاية، وتتكون بشكل أساسي من مجموعة حاويات تشكل كل بطاقة. <div class="face front"> <img src="megatron.png" alt="Megatron CSS flip effect" /> </div> <div class="face back"> <h2>Megatron</h2> <img src="decepticons.png" alt="Decepticons logo CSS flip effect" /> <p>Megatron is the primary antagonist and leader of the evil Decepticons.</p> <dl> <dt>Skill</dt> <dd>7</dd> <dt>Power</dt> <dd>8</dd> <dt>Agility</dt> <dd>5</dd> <dt>Bravery</dt> <dd>7</dd> <dt>Speed</dt> <dd>4</dd> </dl> </div> يُقسَّم الوجه الأمامي والخلفي للبطاقات إلى حاويتين فرعيتين ويوضع بداخلهما المحتوى المناسب. يوجد في الوجه الأمامي صورة واحدة، في حين يوضع في الوجه الخلفي المواصفات الكاملة لشخصية البطاقة. نستخدم عدة عناصر ِلوصف موجز الشخصية، فعنصر <h2> يستخدم لإضافة عنوان و <p> لإضافة فقرة و <img> لعرض صورة، ثم تُدرج الأهداف المسجلة للشخصية في قائمة تعريف من خلال عنصر <dl>. شِيفرة CSS .megatron { float: left; position: absolute; top: 30px; left: 20px; } .megatron .front { } .megatron .back { width: 284px; height: 372px; padding: 20px; background: #a3a3a3 url(texture.png); } .megatron .back h2 { width: 287px; height: 42px; margin: 0 auto 20px auto; background: url(megatron-title.png); text-indent: -9999px; } .megatron img { float: right; } .megatron p { float: left; width: 185px; margin: 0 0 20px 0; font-size: 17px; line-height: 28px; color: #4c4c4c; } تُعطَى خلفية البطاقة أولاً بُنية رمادية متكررة، ثم نبدأ بتصميم عناصر HTML. يُستبدل العنصر <h2> بصورة بنفس نصه مع بعض تأثيرات Photoshop المضافة. يتم تعيين حجم الخط واللون لعناصر الفقرة ثم نُموضعهم جنبًا إلى جنب مع شعارَي Autobots و Decepticons. .megatron dl { font-size: 30px; font-weight: bold; line-height: 40px; color: #717171; width: 264px; padding: 5px 10px; overflow: hidden; background: #cfcfcf url(gradient.png) repeat-y; -webkit-box-shadow: 0 1px 5px #888; text-shadow: 0 1px 1px #f5f5f5; } .megatron dl dt { float: left; clear: both; } .megatron dl dd { float: right; } لِعرض مواصفات الشخصية جنبًا إلى جنب، يوضع عنوان التعريف لجعل كل شيء يعمل على ما يرام؛ نستخدم مجموعة من حركات webkit مع خصائص التقليب في الشيفرة. ابتداءً من الجزء العلوي، يتم إعطاء الحاويات الخاصية ‎-webkit-perspective مسندةً للقيمة 1000 لإضافة شيئٍ من الواقعية لحركة التقليب، بينما يبدو كل شيء غير ذلك مسطحًا قليلًا. ثم نضيف الخاصيتين ;‎-webkit-transform-style: preserve-3d و ;‎-webkit-transition: 0.5s لحاوية البطاقة؛ حيث يضمن نمط التحويل ثلاثي الأبعاد (preserve-3d) ببساطة أن العناصر الفرعية تتبع الحركة ثلاثية الأبعاد بدلًا من أن تبقى مسطحة، وأن قيمة الانتقال البالغة 0.5 ثانية تحدد سرعة التأثير الكلي. على اليسار ووصف التعريف (dd) يوضع على اليمين. يُعطَى عنصر قائمة التعريف (العنصر ) خلفية متدرجة وتَصميم نص مناسب، يورَّثان لِلعنصرين <dt> و <dd>. الحركة مع webkit .container { width: 324px; height: 412px; -webkit-perspective: 1000; } .card { width: 324px; height: 412px; border: 8px solid #fff; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .container:hover .card { -webkit-transform: rotateY(180deg); } .face { position: absolute; -webkit-backface-visibility: hidden; } عند تحريك مؤشر الفأرة على البطاقة يضاف تحويل webkit بتدوير (rotateY(180deg قيمته 180deg، والتي تقوم بتدوير الكائن 180 درجة حول المحور Y. الخاصية ‎-webkit-backface-visibility: hidden;‎ هي خاصية أخرى ممتازة لِ webkit، تُستخدم على وجه كل بطاقة. هذا يضمن أن الجانب الآخر من البطاقة لم يعد مرئيًا، وبدون هذا، سينقلب الكائن إلى صورة معكوسة بدلاً من عرض الجانب الآخر. شيفرة HTML الكاملة شِيفرة CSS الكاملة اضغط هنا لعرض التجربة الحية. ترجمة -وبتصرف- للمقال Super Cool CSS Flip Effect with Webkit Animation من موقع line25.
  16. أهلًا نسرين، في البداية أنصحك بالإطلاع على مقال قواعد الكتابة في أكاديمية حسوب ومقال اكتب معنا، في الواقع تقوم الأكاديمية بالنشر على منصة مستقل من أجل توظيف الكتّاب. يمكنكِ متابعة مشاريع الكتابة والترجمة على مستقل من أجل تقديم عرضك على مشاريع الأكاديمية وقتما تُتاح، ويمكنك التواصل مع مركز المساعدة من خلال فتح تذكرة بقسم أكاديمية حسوب >> الكتَّاب والمُساهمون من خلال هذا الرابط. ارجو أيضًا أن تقرأي الإجابة على هذا السؤال
  17. أهلًا بك، بالنسبة لدروس أكاديمية حسوب حول wordpress فهنا ستجد أساسيات تفيدك وهنا ستجد جميع مقالات الأكاديمية حولووردبريس. إذا كنت تفضل دورات فيديو فيمكنك الإطلاع على هذه الدورة. بالتوفيق..
  18. نعرض في هذا المقال أمثلةً لحركات مستعملة في تطبيق جوال وطرقًا لكيفية تحسين تصميم التطبيق. هذه تجميعة رائعة من 20 مثال لكيفية استخدام العناصر المختلفة لجعل تطبيقك أكثر تفاعلًا وسهولةً في الاستخدام. أَلْهِم نفسك بهذه الأمثلة لحركات تطبيق الجوال! هذه التصاميم الإبداعية لحركات تطبيقات الجوال ستساعدك على إنشاء تطبيقات مذهلة بخصائص تفاعلية حيوية يحبها الجميع. يمكنك استخدامها لتحسين سلاسة الاستخدام والمحافظة على مشاركة مستخدمي تطبيقك. اطَّلع على هذه الأمثلة الممتازة لحركات تطبيق الجوال التي ستحفزك. ستتعلم كيفية إضافة أزرار شريط التنقل المتحركة، والقوائم الهلامية، وتحديث الحركات، وتأثيرات اختلاف المنظر (parallax)، ومعارض الصورغير المنتهية، والترويسات المضبَّبة (blurred headers) وتذييل الصفحات المتحرك وغيرها الكثير. شريط التنقل المتحرك هذا زر قائمة متحركة رائع يساعدك في التنقل عبر التطبيق بطريقةٍ مُبتَكرة. فكرة القائمة الهلاميَّة اللمسيَّة هذه حركات بهيجة لتطبيق الجوال؛ سيجعل التمرير أكثر متعةً بالتأكيد. هي فكرة هلامية رائعة وستعجب مستخدمي تطبيقك. فكرة حركات بتسجيل الدخول والخروج هذه تحريكات تطبيقات جوال مهمة تشمل ميزات تسجيل الدخول والخروج، جاء مصممها بفكرةٍ جميلةٍ تبدو مذهلة. تحديث البريد الوارد هذا أحد أصول تطبيق الجوال المحببة الذي يكون في متناول يديك عند قراءة بريدك الإلكتروني، هي حركات رائعة تسمح لك بتحديث البريد الوارد بسرعة من خلال تمرير إصبعك لأسفل بكل بساطة. فيديو واجهة المستخدم هذه حركات رائعة أيضًا لتطبيقات الجوال يمكنك إدراجها بسرعة في تطبيقك. استخدم فيديو واجهة المستخدم هذا للمحافظة على مشاركة مستخدمي تطبيقك. التصميم الخفيّ هذه حركات رائعة ستوسع وظائف تطبيقك دون أن تأخذ مساحة كبيرة من واجهة المستخدم، يمكنك رؤية الميزات المخفية كلما احتجت إلى ذلك. حركات بطاقات التوصيل هذه الحركات الملونة تتيح لك طريقة بهيجة وممتعة لاستخدام تطبيقك، الحركة تحدث بالإختيار وتتوقف على العنصر الذي كنت تبحث عنه. تأثير اختلاف المنظر تأثير تغيير منظر التطبيق (Farmer Parallax) هي لمحة ثلاثية الأبعاد 3D رائعة، تبدو مذهلة لأي مشروع تملكه، هذا مثال جميل لكيفية استخدام تأثير اختلاف منظر التطبيق framer parallax في تطبيقك. حركات تراكيب التصميم المادي هذه حركات بسيطة لكنها فعالة، يمكن إضافته لتطبيقك. تعرف ما إذا كانت فعَّالة لتصاميمك! فكرة السحب المرن للتحديث هذه فكرة سحب جميلة أخرى يمكنك استخدامها للمحافظة على معلوماتك محدثةً. حركة معرض الصور غير المنتهي هذه الحركة التلقائية تنشئ معرض صور غير منتهي يمكنك التمرير عبره حتى تجد الصورة التي تريدها بالتحديد. قائمة واجهة التطبيق قائمة واجهة مستخدم التطبيق هذه تبدو رائعة، توضح طريقة مؤثرة حول كيفية تقديم قائمتك الكاملة دون أن تأخذ مساحة كبيرة. تصميم مادي SVG مرن للأشرطة الجانبية هذه حركة رائعة يمكنك إضافتها بسرعة لتصميم تطبيقك. هي ميزة بهيجة وممتعة للاستخدام. قائمة الشريط الجانبي الثلاثي (Webkit فقط) يتميز تصميم القائمة المتحركة هذا بترتيب فريد يبدو مذهلًا لأي تطبيق. راجع العرض التوضيحي لتعرف ما إذا كان يمكنك استخدامها في مشاريعك المستقبلية. مفكرة ملونة باستخدام css فقط هذا تصميم جميل لمفكرة أنشئ باستخدام css. هو ترتيب ملون يستخدم ألوان جذابة ما يجعل تجربة المستخدم أكثر متعةً. تجربة مستخدم مع حركات لتطبيق بريد إلكتروني إليك حركات رائعة يمكنك استخدامها لتحسين واجهة المستخدم لتطبيق البريد الإلكتروني الخاص بك. اطلع عليها وانظر ما إن كانت تناسب نمط تصميمك. سحب القائمة - مفهوم القائمة التفاعلية هذا تصميم مذهل لمفهوم القائمة المتحركة الذي يستخدم فكرة فريدة؛ يمكنك الكشف عن المحتوى الكامل للقائمة عن طريق السحب لأسفل. الترويسات الضبابية iOS 7 هذه حركة رائعة يمكنك استخدامها لإضافة تأثير ضبابي لترويسات (headers) تطبيق iOS الخاص بك. قائمة تذييل تطبيق الجوال المتحركة هذا تصميم رائع آخر لتذييل التطبيق، سوف يعجب مستخدمي تطبيقك وبالتأكيد يحافظ على مشاركتهم. التصميم الدَّوامِي للتطبيق هذا تخطيط دوَّامي بسيط لكنَّه مؤثر جدًا يمكنك استخدامه في العديد من تطبيقات الجوال. اطلع عليه وانظر ما إذا كان يناسب نمط تصميمك. ترجمة -وبتصرف- للمقال Mobile App Animation | 20 Excellent Examples من موقع line25
  19. أهلًا بك، أنشأنا مقالًا بعنوان سؤالك طبق الأصل من كثرة ورود هذه الأسئلة علينا.. أرجو أن تقرأ هذا المقال وتقرأ الإجابة عن الأسئلة المشابهة لسؤالك
  20. اهلا بك هذا الفيديو معد حديثا هذا العام 2019 باصدار اندرويد ستديو حديث ايضا.. لذلك انصحك بتجريبه https://youtu.be/lo2z7JJ0L9Y
  21. اهلا بك، الاصل ان يتم تسليم الموقع من خلال رابط حي (غير اذا كان العميل لا يريد الرفع على استضافة)، في البداية عليك اختيار شركة استضافة مناسبة ثم انشاء حساب على موقع شركة الاستضافة واختيار خطة plan من الخطط المتاحة في الموقع، طريقة رفع ملفات موقع على استضافة متشابهة لجميع الاستضافات، فبعد تسجيل الدخول تتجه لجانب file manager وتقوم بتحميل ملفات موقعك داخل المجلد المجهز public_html اما عن طريق ضغطهم zip ثم فكهم داخل لوحه تحكم الاستضافة او تدير عمليه رفعهم باستخدام ftp manager، ثم تذهب لجزئية قاعدة البيانات وتستورد ملف DB الخاص بموقعك.. تختار domain ليصاغ لك رابط موقعك.. بعد انتهاء رفع كل شيئ ستعطى رابطا لموقعك بالدومين الذي اخترته يفتح على الصفحة الرىيسية لموقعك وتتنقل كما برمجته وغالبا نجد شركات الاستضافة قد دونوا خطوات رفع الموقع عندهم، فعندما تتاكد من اسم الاستضافة التي ستستخدمها فبكل سهوله تبحث بمحرك البحث عن كيفية رفع موقعك على هذه الاستضافة وستجد في نتائج البحث الاولى اجابة من مركز المساعدة الخاص بالاستضافة التي ذكرت اسمها.. وكذلك فيديوهات على اليوتيوب توضح الطريقة بالنسبة لكيف سيدخل العميل للملفات.. فانت دورك اعطاء العميل بيانات تسجيل الدخول التي سجلت بهم على الاستضافة + الرابط الذي تفعل لديك في الفقرة السابقة .. يدخل العميل بيانات تسجيل الدخول ويتمكن من الانتقال لجزئية file manager و DB ويشاهد الملفات وال DB بالتوفيق..
  22. اهلا احسان، هذا يماثل السؤال عن أحسن فاكهة من الفواكة او حتى سؤالك أعم من ذلك، كأنك تسألين عن احسن مخلوق من المخلوقات المائية.. فبعضهم سيقول السمكة وغيرهم سيقول الدولفين وستسمعين بمخلوقات جديدة لم تمر عليكي مسبقا كإجابة لهذا السؤال. المهم انا حاولت ان اوصلك الفكرة ان هذا السؤال ليس له جواب.. او إذا اردنا الإجابة سنحتاج عدة صفحات وربما كتاب او روايه او... سؤالك يكون صحيحا وممكن ان نجيب عنه ان كان مصاغا كالتالي: ما هي افضل لغة برمجة لبرمجة تطبيقات الجوال الهجينة!! او ما هي افضل لغة برمجة تستخدم في برمجة الخلفيات backend لموقع ويب هدفة تعليمي!! اتمنى ان تكوني قد لاحظتي مدى التخصيص في المجال اللازم حتى نتمكن من ايجاد اجابه، إذا ارجو ان تطلعي على مجالات عالم البرمجة ثم تقرأي عن كل مجال وتحددي بناء على هوايتك + طلب السوق اي مجال ممكن تدخلين ثم تخصيص اكثر للغات ب مجة المجال ثم تخصيص اكثر لإطارات عمل كل لغة برمجة ثم القراءة عن هذه الإطارات للتعرف على نقاط القوة والضعف.. من هنا ممكن ترشحي إطارين (من اصل كم كبير من frameworks) كل منهم يندرج تحت لغة برمجة مختلفة او لنفس اللغة.. المهم تكوني قلصتي على نفسك الفجوة.. ستفيدك بعض الأسئلة التي طرحت مرارا في الاكاديمية وهي مشابهة لسؤالك. كل التوفيق...
  23. أهلًا بك، ستجدين عدة مصادر من دورات وكتب لتعلم صناعة الألعاب، يمكنك الإطلاع عليهم واختيار ما يريحك منهم أمثلة لمصادر تعلم adobe flash: دورة من موقع كورسات دورة من أكاديمية لقمان https://www.tasmeemme.com/دورات/614/برمجة-الاألعاب-والرسوم-المتحركة-ببرنامج-ادوبي-فلاش-أنميت أمثلة من الكتب كمصادر تعلم adobe flash: https://www.noor-book.com/كتاب-برمجة-الألعاب-في-أدوبي-فلاش-Adobe-Flash-سلسلة-تصميم-الألعاب-على-الفلاش-pdf http://academyati.blogspot.com/2015/04/a-beginners-guide-to-making-flash-game.html بالنسبة ل unity3D فستجد مقالات لها في أكاديمية حسوب بالإضافة للمصادر التالية: دورة انجليزية من يوديمي دورة عربية من يوديمي https://www.m3aarf.com/course/91/كورس-Unity-كامل-شرح-عربى-للمبتدئين
  24. تتغير العناصر البصرية حولنا مع الزمن، ونحس بهذا التغيير كحركة. تكمل عقولنا العناصر المفقودة في مقاطع الفيديو أو اللوحات الفنية باستخدام تصورنا، من أجل إنتاج شعور بالحركة. نستخدمُ الرمز في كثير من الأحيان لنقل فكرة، إذ نحاول تقديم غاية القصة بصريًا لنمنح غيرنا فهمًا أعمق. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } فكرة جيدة أن نستخدام نوعًا من التصوُّر لرسم صورة كاملة للقصة التي نحاول سردها، إلا أن استخدام الحركات لتوصيل الرسالة يمكن أن يكون أفضل؛ إذا كانت الصورة تستحق ألف كلمة، فكم ستستحق من الحركات لوصفها؟ الحركات في الويب تؤدي ذلك الغرض؛ فهي تحاول أن تصور القصة، باستخدام رمز أو تخُّيل الحركة، مثل الضغط على زر، وفتح صفحة جديدة. نحاول تصوُّر الخطوات والعمليات لجعلها تبدو طبيعيةً أكثر، لاستدعاء حدث أو لجعل التطبيق يبدو أكثر جاذبيةً. كيف بدأت حركات الويب منذ أيام شبكة الويب القديمة، كان هناك جهودًا لتنفيذ العناصر المتحركة في نوافذ منبثقة لأجزاء مهمة من الموقع؛ ليبدو أكثر ديناميكية وجاذبية، كما في موقع Jeffrey Zeldman لِباتمان 95، إذ كان تحليق باتمان نحو المستخدم عبارة عن حركة مؤلفة من سلسلة من الصور، كانت GIF واحدة من الرسوم المتحركة الأولى على صفحة الويب وفي ذلك الموقع الذي كان واحدًا من أكثر الصفحات شيوعًا في ذلك الوقت، ما أَلْهم مطوري الويب للجمع بين الرسوم المتحركة GIF كعنصر مُراوغة في مواقعهم. الصور التي من النوع GIF مناسبة لتكرار قصير لحركة تمتد على نطاق ضيق من البكسلات، أو حتى بعض الفيديوهات. لكن ليس لديها شفافية متغيرة، ولا تدعم قناة الشفافية (alpha) في لوحة ألوانها، وجميع البكسلات فيها إما غير شفافة أو شفافة تمامًا. حركات GIF كانت البداية في نهضة تصميم الويب لكنها لم تكن مثالية. صور GIF ثقيلة نسبيًا؛ فالنتيجة عادة ما تكون دقة منخفضة، وتسلسل غير متساوي في توزيع الضوء و لوحة ألوان ذات 8 بت محدودة، ما أدى إلى القليل من التردد للمصممين بخصوص عدد الألوان اللازم استخدامها في المشهد. حدث ازدهار كبير في الحركات مع رسوم Flash المتحركة التي تتمتع بالبناء بسيط، والحركات المستندة إلى المتجهات (vector) عبرت مواقع الويب بالكامل، وإمكانيات إضافية للتفاعل، فقد كانت مثل الباروك (أسلوب فنى في القرنين السابع عشر والثامن عشر تمير بالزخرفة) في ثقافة الويب مع العديد من العناصر المتحركة أيضًا. قدَّم Flash لمحة عن إمكانيات تصميم الويب الديناميكي، الذي يتيح للمصممين إعادة الفحص وتجريب الأأداء ما سبب فترة من التطور السريع في حركات الويب. رسوم Flash المتحركة بُنيَت بِواسطة Flash أو برمجات التحريك المماثلة، وغالبًا ما يتم توزيعها بتنسيق ملف SWF، وهي خفيفة الحجم وسهلة الصنع. فملف يستخدم الصوت مع وضوح وبدون فقدان في دقة رسومات المتجهات وبحجم كيلوبايتات قليلة يجعل التحريك عملية بسيطة ولا تضيف كثيرا إلى وقت تحميل الصفحة. التفاعل في Flash ممكنًا من خلال (Action Script (AS، لغة برمجة كائنية التوجه مثل javascript. تم تصميم AS في البداية لتدير تحريكات المتجهات ذات بعدين (2d). حركات Flash لم تصمَّم لتكون متجاوبة مع جميع أحجام الشاشات، و لم تعمل بشكل جيد على جميع الأجهزة وفي النهاية استُبعدت من الأجهزة المحمولة الشهيرة. رغم كون حجم الملف صغيرًا موازنةً بغيره، إلا أن Flash لم تكن هي الأمثل، نظرًا لبعض المشكلات التي شملتها، أهمها المتعلق بالاستهلاك الكبير لوحدة المعالجة المركزية (CPU)، فقد كانت هذه بالطبع مشكلة على الهواتف الذكية والأجهزة الأخرى. جاءت نهاية عصر Flash بعدما قرر Steve Job عدم دعمها على أجهزة Apple المحموله. قال Jobs: حركات الويب هذه الأيام لدينا في هذه الأيام احتياجات مختلفة ويجب أن تكون أدوات تصميم الحركات مرنة وخفيفة. يجب على المطورين إنشاء محتوى للعرض على أجهزة مختلفة، ومراعاة طرق الإدخال المختلفة، والمتصفحات، ونسب الارتفاع، وكثافة نقاط الشاشة (pixel)، وهلم جرًا. من الواضح أن الحركات يجب أن تعمل تمامًا ابتداءً من هاتف ذكي بدقة 720 بكسل 5 بوصة وحتى جهاز QXGA بحجم 9.7 بوصة أو شاشة UHD مقاس 29 بوصة. لدينا أيضًا الكثير من حركات التمرير السريعة للتفاعل مع البرمجيات، إذ لم تعد تلك الإنتقالات، والتحْريكات، وحركات التمرير السريعة، محفوظةً للأجهزة المحمولة فقط. اعتادت عقولنا عليها كثيرًا؛ لذلك، لا يكون الأمر على ما يرام عندما يكون هناك شيء ثابت ولا يمكن تحريكه بلمسة إصبع. يُتَحقق أفضل حل لتصميم الحركات باستخدام HTML5 و CSS3 و JavaScript ورسومات قابلة للتطوير (مثل SVG). نضجت التكنولوجيا هذه الأيام لدرجة كبيرة، فحتى الأجهزة المحمولة التي تعاني من نقص في الطاقة، لديها قدرة عرض نطاق وقوة معالجة مناسبين للتعامل مع الحركات المستهلكة للعتاد، ومحتوى الفيديو عالي الدقة. لا يعني هذا أن المواقع يجب أن تكون مشغولة بالحركات كثيرًا؛ فكما هو الحال دائمًا، يتعلق الأمر بتحقيق التوازن الصحيح بين التفاعل الديناميكي والعناصر الثابتة. في الواقع، إمكانية تنفيذ الكثير من الحركات لا يعني أنه يجب عليك ذلك. شيء آخر يؤخذ بالحسبان عند تصميم حركات الويب وهو دعم تعدد المنصات. منذ عشر سنوات، لم يكن على المصممين التأكد من أن تصاميمهم ستبدو جيدة على مجموعة واسعة من الأجهزة. هذه الأيام، يجب أن تعمل الحركات بكفاءة على كلًا من الهاتف الذكي وجهاز التلفزيون الضخم. Aspect ratio(نسبة العرض للارتفاع) والصور الشخصية، والاتجاه العرضي للجوالات، وكذلك يجب مراعاة الكثافات المختلفة لنِقاط الشاشة ومسافات المشاهدة. هذا يبرز المصمم مع مجموعة جديدة من التحديات ويخْلق مصاعب إضافية. اختبار التصميم يستهلك وقتا ثمينًا، هناك المزيد من الأشياء التي يمكن أن تسوء بتعدد المنصات، والحركات يجب أن تكون أكثر تفصيلًا من السابق. الخبر السار هو أن HTML5 و CSS3 و JavaScript تساعد في معالجة معظم هذه المشكلات، وليس كلها. ومع ذلك، من الأفضل دائمًا أن تخطو بحذر، خاصةً إن كنت في دائرة مفتوحة تعرض حلولًا لكل منصات الحوسبة الجديدة. لماذا تستخدم الحركات في المواقع هناك قصة وراء استخدام الحركات، فالأمر كله يتعلق بإعطاء روح لتصميم العناصر. تتشابك الحركات على شبكة الإنترنت مع حركة المستخدم من خلال الموقع، وتوفِّر حركة العضوية للعناصر إلى الموقع. يحتاج مبرمج حركات الويب إلى إدراك تجربة المستخدم وتوقع المسارات التفاعلية المحتملة. يجب أن تكون التجربة سلسة ومنطقية. أحد أهم الأمور المتعلقة بالحركات هو التوقيت. يعطي التوقيت معنى حسِّيًا وانفعاليًا للتحريك. مصمم الحركات يحتاج لاستخدام التوقيت لإعطاء المستخدم الشعور الصحيح والإدراك العالي. هل الحركات سلسة؟ ما مدى سرعتها؟ ما هو نوع وعدد الإطارات المفتاحية التي يجب استخدامها في الحركات؟ ما رد الفعل الناجم عن التفاعل معها، وما مدى سرعة رد الفعل بعد التفاعل؟ إن لم تكن الحركات سلسة، يمكن أن ينظر إليها المستخدم على أنها خطأ ويَفقِد الحافز لمزيد من الاستكشافات حول الموقع نفسه. من وجهة نظر منطقية، يمكننا تقسيم الحركات على شبكة الإنترنت إلى نوعين أساسيين: الحركات الثابت مع منطق بسيط، لا توجد معايير ديناميكية معقدة، على سبيل المثال الرسوم المتحركة ‎.gif. الحركات الديناميكية مع نوع من مشاركة المستخدم، يعتمد على إدخال المستخدم، والمتغيرات الأخرى، ويمكن أن يكون له العديد من النتائج المختلفة. الحركات الديناميكية لها منطقها الخاص، محددةً كيفية جريان الحركة. أفضل مثال على الحركات الديناميكية هو الألعاب، حيث يتعامل المستخدمون مع المحتوى على الشاشة. مثال بسيط هو تغيير مواضع العناصر من خلال التمرير الذي يتحكم فيْه المستخدم حسب مكانه في الموقع، هذا يستفتح سلسلة من الحركات. هنا أمثلة واضحة. غالبًا ما يستخدم هذا النهج لتقديم الرسوم البيانية على موقع الويب، لذلك يعطي المستخدم المزيد من الاهتمام أثناء التصفح. إنها طريقة ديناميكية لتسليط الضوء على المعلومات ذات الصلة. الحركات الديناميكية وسيلة جيدة للحفاظ على تركيز الانتباه على الأجزاء المهمة من موقع الويب، ومن الواضح، يتيح للمصممين تقديم المنتجات والخدمات بطريقة أكثر جاذبية. لإنشاء حركات ديناميكية في مواقع الويب، نحتاج إلى المزيد من المعرفة بِ CSS و HTML. إيجابيات وسلبيات حركات الويب دعونا نتعرف على إيجابيات وسلبيات تقنيات الحركات، بما في ذلك الحلول القديمة التي لم تعد قيد الاستخدام. التقنية الإيجابيات السلبيات GIF بسيطة ومتاحة للجميع؛ لأنها تتيح تسلسل الصور المتحركة، ويمكن أن تكون مثل الفيديو وزن ملفات gif المتحركة ضخم. الشفافية مروعة. لا تدعم مجرى ألفا. لديها ضغط منخفض. ومنقطة. APGN يدعم قناة ألفا. غير معتمد في جميع المتصفحات. Flash ملف (swf) المتحرك له وزن منخفض. سريع وتفاعلي. تتيح تحريك المتجهات. التحريك العضوي في بيئة مستخدم بسيطة، لا عشوائية أو تخمين في الكود. يمكن أن يتم ذلك بشكل متجاوب. لم تعد مدعومة على منصات الهواتف المحمولة. HTML/CSS بسيطة وسهلة التعلم. جيدة للتحويلات والانتقالات. تُنفذ الرسوم المتحركة لـ HTML / CSS على الأجهزة المحمولة. تتيح التحريك للمتجهات أو نقاط الشاشة pixel. يمكن معالجة رسومات (SVG) لا يمكن تنشيط جميع خصائص SVG باستخدام CSS. لديها إمكانيات محدودة لِجافا سكريبت و SMIL .تفعل ما يُبرمجه مصممها ولذلك فهي أحد التقنيات الثابتة، لا يمكن الاستجابة للمدخلات الجديدة أو البيئة المتغيرة (التحريك الديناميكي). SMIL مدمجة وقادرة على تنشيط الخصائص التي لا تستطيع CSS التعامل معها. يُحافَظ عليها عندما يتم تضمين SVG كصورة. غير مدعوم في جميع المتصفحات. JavaScript يجعل التحريك سهل إذا كنت تستخدم مكتبة رسوم متحركة لـ SVG تنشئ تسلسل صور (تسلسل .png) لا يُحافَظ عليه عندما يتم تضمين SVG كصورة ولكن ماذا عن إيجابيات وسلبيات حركات الويب بشكل عام؟ حتى الحركات جيدة التنفيذ يمكن أن تبدو في غير محلها بعض الأحيان، لذلك من الأفضل دائمًا أن تطرح بعض الأسئلة على نفسك (والعميل) قبل مواصلة إضافه الحركات في تصميمك. بالنسبة للمبتدئين، تحتاج للتحقق ما إن كانت الحركات تؤثر على تجربة المستخدم أم لا. هل سيحسن التجربة بالفعل؟ للقيام بذلك تحتاج إلى: تفحُّص عن كثب للتصميم الحالي (إن وجد). تفحص الجمهور المستهدف ومنصات أجهزته. تحقق من زمن تحميل الموقع وتحمُّل وحدة المعالجة المركزية CPU. استعرِض البدائل الأخرى. دائما ضع خاصية سهولة الإستخدام في الحسبان. قرار استخدام الحركات يجب أن يكون كأي قرار تصميم آخر؛ عليك أن تزن الإيجابيات والسلبيات وتتأكد من أن تجربة المستخدم لا تتأثرسلبًا، وأنك لن تتعثر مع الكثير من التعليمات البرمجية غير الفعالة (والتي قد تضطرك لإضافة شيفرة جديدة والتحديثات في وقت لاحق). بشكل عام، استخدام الحركات من أجل التحريك ليس فكرة جيدة. صحيح أن الحركات نضجت على شبكة الإنترنت، لكن كون توفرها على نطاق واسع لا ينبغي أن يكون السبب الوحيد وراء قرارك بتنفيذها. لا تنظر إلى الحركات من منظور تقني بحت، عليك أن تفعل ذلك من منظور المستخدم. ترجمة -وبتصرف- للمقال Web Animation In The Post-Flash Era لصاحبته Ana Gregurec
  25. أهلا بك، هناك اكثر من طريقة لذلك ويمكنك اختيار انسب حل بالنسبة لحالتك اولا يمكن ان تستغني عن انشاء تطبيق جوال لموقعك إن كان تصميمه responsive أي متجاوب مع جميع الاجهزة والشاشات فيفتح طبيعي على الجوال بشكل لائق ثانيا ان كان موقعك ذو لوحات تحكم متداخلة وقاعدة بيانات كبيرة فوقتها ستحتاج عمل api لموقعك وتبني واجهات تطبيق جوال تتواصل مع روابط ال api تلك لارسال وتخزين البيانات في قاعدة البيانات الموجودة على الويب (لان تطبيقات الجوال لا تستحمل قاعدة اللبيانات الكبيرة الحجم) ثالثا يمكنك عمل تطبيق جوال بقاعدة بيانات له (sqlit) وواجهات من الصفر تكون بنفس هيئة الموقع وتصميمه والوانه وذلك إذا كان موقعك ذو قاعدة بيانات صغيرة الحجم هناك افكار اخرى لذلك لكن ابسهم الثلاثة في الاعلى