محمد أبرص

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

    1,311
  • تاريخ الانضمام

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

  • Days Won

    166

كل منشورات العضو محمد أبرص

  1. تطبيق صور الخلفيّة (background images) على العناصر هو أحد أكثر الميزات المُستخدمة في CSS، ولذلك يوجد العديد من الخصائص الّتي تَسمح بالتّحكم بخلفيّة العنصر وعلى أكثر من ناحية. يُمكن أنّ يَملك العنصر أكثر من صورة خلفيّة واحدة، فيُمكن إسناد قيم الصّور كقائمة يُفصل فيما بينها الفاصلة، وذلك للخاصيّة background-image، أما الخاصّيّة background-position فتُستخدم لتحديد مَوضع صورة الخلفيّة، وتَستحق هذه الأخيرة بعض التفحّص، وذلك بسبب أنّ قيمها المُحتملة تُنتج نتائج مُختلفة غير متوقّعة للمطوّر الّذي لم يتعمّق في تفاصيل CSS. سيتمّ استخدام صورة خلفيّة وحيدة طوال هذا المقال، بغرض تبسيط الشرح والشيفرة البرمجيّة، ولكن ما يَنطبق على صورة واحدة، يَنطبق على صور مُتعدّدة. تتمَوضع صورة خلفيّة داخل ما يُسمّى مجال تَمَوْضُع الخلفيّة (background positioning area) لعنصر، وهي كما يَدل اسمها، تُحدّد المنطقة الداخليّة الّتي ستتموضع بها الخلفيّة، وهي تملك نظام إحداثي يُستخدم لمُعالجة التَمَوْضُع. سيتمّ أوّلًا التطرّق إلى مفهوم نموذج الصندوق (CSS box model)، ورؤية تأثيره على تَمَوْضُع صور الخلفيّة داخل العنصر، وذلك قبل الدخول في مفهوم التَمَوْضُع. مجالات نموذج الصندوق (CSS Box Model Areas) تَملك العناصر في CSS ثلاثة مجالات، يُطلق عليها صناديق، مُعرّفة على العنصر: صندوق الحدود (border box) صندوق الحشو/الحشوة (padding box) صندوق المُحتوى (content box) صندوق الحدود هو المنطقة من العنصر الّتي تتضمّن كامل الأجزاء الداخليّة للعنصر بالإضافة إلى المنطقة أسفل تلك الحدود. أما صندوق الحشوة فهو المنطقة من العنصر، والّتي لا تتضمّن الحدود (borders)، وتتضمّن محتويات العنصر والحشوة المُحيطة، وتحدّد قيمة هذه الحشوة باستخدام الخاصيّة padding. صندوق المُحتوى هي المنطقة التي أنشأها محتوى العنصر، ولا تتضمّن الحشوة ولا الحدود. يوجد أيضًا مجال رابع يُدعى صندوق الهامش (margin box)، والّذي يتضمّن العنصر والهامش الخارجي، وتحدّد قيمة هذا الهامش بالخاصيّة margin. إضافة خلفيّة إلى عنصر، سواء كانت صورة أو لون مُصمت (solid color)، سيجعل من هذا الخلفيّة تُرسم ضمن مجال حشوة العنصر افتراضيًا، ويُمكن تعديل هذا السلوك عبر استخدام خاصيّة background-origin. ولكي يتمّ تحديد أين يجب بالضَّبط على صورة الخلفيّة أنّ تتموضع داخل مجال التَمَوْضُع (positioning area)، فإن المجال يحتاج نظامًا إحداثيًّا ليُستخدم في تفسير وترجمة قيم التَمَوْضُع. نظام إحداثيَّات العنصر (Element’s Coordinate System) يَملك كل عنصر بشكلٍ افتراضيٍّ نظامًا إحداثيًا مُنشئ نسبةً إلى ارتفاعه (height) وعرضه (width)، ويعود هذا الأمر إلى طبيعة نموذج صندوق العناصر في CSS، ويُستخدم هذا النّظام في توضيع العنصر نسبةً إلى باقي العناصر، وتوضيع أبناء العنصر نسبةً إلى العنصر نفسه. تَملك عناصر HTML نظام إحداثيَّات في CSS، ولكن لا تَملك عناصر SVG نظامًا مُماثلًا، بسبب أنها لا تُحكم بمفهوم نموذج الصندوق. يُعرّف مبدأ نظام الإحداثيَّات في CSS في أعلى يسار زاوية العنصر. يُحكم مجال تَمَوْضُع الخلفيّة (background positioning area) أيضًا من قبل نظام إحداثيَّات مُنشئ في هذا المجال، ويُستخدم في توضيع صورة الخلفية في هذا المجال، ويكون مبدأ هذا النّظام أعلى يسار زاوية مجال التَمَوْضُع. إن مجال التَمَوْضُع الافتراضيّ هو صندوق الحشوة، إذًا وبشكلٍ افتراضي، فإن مبدأ نظام الإحداثيَّات لمنطقة تَمَوْضُع الخلفية هو أعلى يسار زاوية صندوق الحشوة. يعني هذا أنّه عند تطبيق صورة الخلفيّة على عنصر، سيُوضع المُتصفّح الصّورة الأولى وما هو مُكرّر منها ابتداءً من أعلى يسار زاوية منطقة أو مجال الحشوة. على سبيل المثال، وعلى فرض وجود صورة خلفيّة مطبّقة على عنصر وغير مكرّرة (ستُعرض الصّورة مرّة واحدة) فسيكون تَمَوْضُع صورة الخلفيّة داخل نظام الإحداثيَّات عند مبدأ نظام إحداثيَّات صندوق الحشوة، أي أنّ أعلى يسار زاوية الصّورة ستتموضع عند أعلى يسار زاوية صندوق الحشوة: .element { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 2em; border: 20px solid rgba(0,0,0,0.5); background-color: beige; background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg); background-repeat: no-repeat; } p { text-align: center; padding: .5em; } .element p { text-align: left; background-color: rgba(255, 255, 255, .4); line-height: 1.5; margin: 0; } يُمكن استخدام خاصيّة background-position، وذلك بهدف تغيير مَوضع الصّورة داخل نظام الإحداثيَّات. يُمكن أيضًا تغيير مجال تَمَوْضُع الخلفيّة لتغيير مبدأ الإحداثيات المُستخدم في توضيع الصّورة داخل مجال خلفيّة العنصر. تغيير مجال تَمَوْضُع الخلفيّة ونظام الإحداثيّات باستخدام background-origin تُستخدم الخاصّيّة background-origin لتغيير مبدأ نظام الإحداثيَّات المُستخدم لتوضيع صورة الخلفيّة في مجال تَمَوْضُع الخلفيّة. تَقبل الخاصّيّة background-origin واحدة من هذه القيم: padding-box وهي القيمة الافتراضيّة. content-box border-box سيتغيّر مبدأ نظام الخلفيّة –وهو مبدأ نظام الإحداثيّات المُنشئ في هذا المجال-الموافق بناءً على مجال تَمَوْضُع الخلفيّة المُختار، وكذلك الأمر مع التَمَوْضُع الأوّلي والافتراضي لصورة الخلفيّة. تُظهر الأمثلة الحيّة التّالية الاختلاف عمليًا. .element { box-sizing: border-box; width: 100vw; height: 100vh; padding: 2em; border: 20px solid rgba(0,0,0,0.3); background-color: beige; background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg); background-repeat: no-repeat; } .element-2 { background-origin: content-box; } .element-3 { background-origin: border-box; } p { text-align: center; padding: .5em; } .element p { text-align: left; background-color: rgba(255, 255, 255, .4); line-height: 1.5; margin: 0; } سيتغيّر نظام الإحداثيَّات ليُغطّي كل مجال تَمَوْضُع خلفيّة مُعيّن باستخدام الخاصّيّة background-origin. يُمكن بعد ذلك تحديد مَوضع صورة الخلفيّة في هذا النّظام الإحداثي باستخدام الخاصّيّة background-position. لن يتمّ تغيير مجال تَمَوْضُع خلفيّة العنصر بعد الآن، وذلك بغرض تبسيط الأمثلة والشرح، ولذلك جميع الأمثلة هي على العنصر الّذي مجال الحشوة الخاصّة به هو المجال الّتي ستتموضع على أساسها الخلفيّة. توضيع صور الخلفيّة باستخدام خاصيّة background-position توضّح سابقًا كيف أنّ صورة الخلفيّة تتموضّع افتراضيًّا (بدون إعداد مُسبق) عند أعلى يسار زاوية مجال التَمَوْضُع، يَكمن السبب في ذلك إلى حقيقة أنّ قيمة التَمَوْضُع الافتراضيّة للخاصيّة background-position هي 0% 0%. يُقاس التَمَوْضُع وبشكل افتراضي بالقيمة المئويّة، حيثُ من المُمكن الإسناد إلى background-position إما قيمة مئويّة (percentage value) أو قيمة مُطلقة (absolute value)، والّتي تُحدّد إزاحة (offset) الصّورة من أحد الحوافّ (edges) الأربعة (top, right, bottom, left). يوجد خمس كلمات مفتاحيّة للإزاحة، بالإضافة إلى القيم المئويّة والمُطلقة، وهي: top right bottom left center يُوصف (يُعيّن) التَمَوْضُع عبر: تحديد قيمة إزاحة واحدة، سواءً كانت كلمة مفتاحيّة أو نسبة قيمة مئويّة أو طوليّة. تحديد قيمتي إزاحة، وذلك عبر الجمع بين قيمتين من القيم الثّلاث المُحتملة. تحديد أربع قيم إزاحة، كلمة مفتاحيّة وقيمة عدديّة نسبيّة. background-position: top left; background-position: 50px 30%; background-position: top 25%; background-position: right 10px bottom 20px; background-position: center center background-position: 10px 20px; background-position: 5em 2em; background-position: 75% 50%; إن تحديد قيمة وحيدة فقط، سيجعل من القيمة الثّانية هي center، وعند تحديد قيمتين، سيجعل الأولى تحدّد الإزاحة من الحافّة اليُسرى (التَمَوْضُع الأفقي)، والثّانية هي الإزاحة إلى الأسفل من الحافّة العلويّة (التَمَوْضُع العمودي). background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */ background-position: top; /* equivalent to `top center` */ background-position: 50px; /* equivalent to `50px center` */ يُمكن الخلط والمزج، أي الجمع بين قيم الأطوال مع القيم المئويّة ومع أو الكلمات المفتاحيّة، الجدير بالذكر هنا، أنّه يُمكن إسناد زوج من الكلمات المفتاحيّة بدون النظر إلى الترتيب، ولكن لا يُمكن الجمع بين كلمة مفتاحيّة وقيمة طوليّة أو قيمة مئويّة، وعليه فإن القيمة center left هي قيمة سليمة وصحيحة، بينما القيمة 50% left ليست قيمة سليمة، بل من المُفترض أنّ تكون left 50%، فعندما يتمّ الجمع واستخدام كلمة مفتاحيّة وطول أو قيمة مئويّة، فإن القيمة الأولى دائمًا تعبّر عن الإزاحة الأفقيّة والقيمة الثانية تعبّر عن الإزاحة العموديّة. إن الجدير بالذكر هنا، أن الكلمات المفتاحيّة هي اختزال أو اختصارات للقيم المئويّة: top مساوية للقيمة المئويّة 0% من الحافّة العلويّة. bottom مساوية للقيمة المئويّة 100% إزاحة من الحافّة العلويّة. left مساوية للقيمة المئويّة 0% إزاحة من الحافّة اليساريّة. right مساوية للقيمة المئويّة 100% إزاحة من الحافّة اليسارية. center مساوية للقيمة المئويّة 50% إزاحة من في أي اتجاه تُطبّق عليه. إن آلية عمل كل قيمة والتفريق بينها لأمرٌ هامٌ، خاصّة مع وجود اختلاف جوهري في تعامل المُتصفّحات مع القيم المئويّة والقيم المُطلقة، وذلك في توضيع صور الخلفيّة. آليّة عمل قيم التَمَوْضُع ذات القيم المُطلقة إن تعيين قيمة تَمَوْضُع باستخدام قيم مُطلقة، سيزيح أعلى يسار زاوية صورة الخلفيّة بالقيمة المُحدّدة، بمعنى آخر، ستُنقل الصّورة بحيثُ تتموضع زاويتها اليساريّة العلويّة عند الإزاحة المُحدّدة في قيمة background-position. يُقال إن الصّورة بألف كلمة، حيثُ يتوضّح في الصّورة التّالية مثالان للخاصيّة background-position وبالقيمة المُطلقة، وكيف يُفسر المُتصفّح هاتين القيمتين ليوضع صورة الخلفيّة، علمًا أنّ أبعاد العنصر في المثالين هي: 100px X 80px. يُمكن أنّ يكون التَمَوْضُع المُطلق مُمثّلًا بقيمة سالبة، وفي هذه الحالة ستنزاح الصّورة في الاتجاه المُعاكس من الحافّة. مثالٌ حيّ: http://codepen.io/SaraSoueidan/pen/bfc8b59ddbc9beb63eee9f26e2754ade آلية عمل قيم التَمَوْضُع ذات القيم المئويّة تَنقل قيم الإزاحة الطوليّة المُطلقة زاوية العنصر اليساريّة العليا بالمسافة المُحدّدة، ولكن مع استخدام القيم المئويّة فالأمر مُختلف، فالقيمة X% ستُرصِف (align) النقطة X% من الصّورة مع النقطة X% من حاوية الصّورة (the container) فعلى سبيل المثال، ستُرصِف القيمة المئويّة 0% 0% النقطة ذات الإحداثيّات 0% 0% من الصّورة مع النقطة 0% 0% من نظام الإحداثيّات مجال تَمَوْضُع الخلفيّة، وستُرصِف قيمة التَمَوْضُع 50% 75% النقطة ذات الإحداثيّات 50% 75% من الصّورة (50% إلى اليمين و 75% إلى الأسفل) مع النقطة ذات الإحداثيّات 50% 75% في مجال تَمَوْضُع الخلفيّة. يُطلب بعض التركيز لفهم الكلام النظريّ السابق، ولكن دائمًا ما لا يَتوضّح بالكلمات حتمًا سيتوضّح بالمرئيّات، كل ما يَهم من الأمر هو التركيز على أنّ الانزياح 50% هو نسبة إلى النقطة 50% من الصّورة وليس الزاوية العلويّة اليساريّة، وهنا مَرْبِطُ الفَرس والذي يُوضّح الاختلاف بين القيم المئويّة وقيم الأطوال المُطلقة. يُمكن تحديد قيم إزاحة مئويّة سالبة، كما هو الأمر مع القيم المُطلقة، الأمر الّذي من شأنه أنّ يَنقل صورة الخلفيّة بالقيمة المُحدّدة ولكن بالاتجاه المُعاكس لمحاور الإحداثيّات: تمّت عمليّة التَمَوْضُع في الأمثلة السابقة نسبةً إلى الحافتين العلويّة واليساريّة، ولكن في الحقيقة من المُمكن توضيع الصّور نسبةً إلى أيًا من الحوافّ الأربعة. الإزاحة نسبةً إلى الحوافّ الأربع تمّ تحديد قيم إزاحة في الأمثلة السابقة، واستخدامها في إزاحة الصّورة نسبةً إلى الحافّة العلويّة والحافّة اليساريّة، وهو السلوك الافتراضيّ لقيمة أو قيمتي تَمَوْضُع. إن الجمع بين الكلمات المفتاحيّة مع القيمة العدديّة باستخدام الصياغة (syntax) ذات الأربع قيم، يُمكّن المُطوّر من إزاحة صورة الخلفيّة من الحافّة اليمينيّة والحافّة السُفلى لمجال التَمَوْضُع. يتمّ استخدام صياغة هذا الأسلوب عبر تحديد اسم الحافّة متبوعًا بالقيمة المطلوبة، ويمكن أنّ تكون القيم على الشكلين: قيم مُطلقة أو قيم مئويّة، وذلك كما في الأمثلة التّالية: background-position: top 1em right 3em; background-position: right 1em bottom 1em; background-position: left 20px bottom 50px; يجب الانتباه إلى أنّ إغفال القيمة الرابعة يجعلها تُفرض على أنّها صفر. background-position: bottom 10px right 20px يوضّح المثال السابق كيف أنّ الإعداد أصبح أسهل بكثير عند الرغبة في إزاحة صورة نسبةً إلى الحافّة اليمينيّة والسُفلى بدلًا من حساب قيم الإزاحة نسبةً إلى الحافتين العلويّة واليُسرى. المزيد مع خواصّ الخلفيّة في CSS يُمكن استعمال أكثر من صورة على عنصر، ولكل صورة خلفيّة يُمكن تعيين قيمة تَمَوْضُع، على أنّ يتمّ الفصل فيما بينها باستخدام الفاصلة: .element { background-image: url(path/to/first/image.jpg), url(path/to/second/image.png); background-position: top left, 75% 80%; } يوجد عامًّا تسع خاصِّيَّات تتحكم بتوزّع العناصر (layout)، والتَمَوْضُع، وقياس ورسم صور الخلفيّة، بما في ذلك خاصيّة background، وتقوم كل خاصيّة بعمل شيء واحد مُحدّد مع إمكانيّة الجمع والمزج فيما بينها لإعطاء المُطوّر تحكم كامل في كيفيّة تطبيق صور الخلفيّة على عناصر HTML. ظَهر مؤخرًا خاصيّة إضافيّة لخواصّ الخلفيّة الرئيسيّة، والّتي تسمح في تطبيق تأثيرات المزج (blending) على صور الخلفيّة وبشكل مُشابه لتأثيرات المزج المتوفّرة في مُحرّرات الصّور مثل فوتوشوب، من هذه الخواصّ الخاصّيّة background-blend-mode، ويُمكن الاستزادة حول الموضع بقراءة المزج في CSS. الخاتمة يُنصح بالقراءة والاستزادة حول هذا الموضوع لأهميته، حيثُ أنّ الفهم الصحيح لهذه الخواصّ من شأنه أنّ يُقدّم للمُطوّر مرونةً في الاستخدام وخياراتٍ أوسع في التصميم. ترجمة –وبتصرّف- للمقال A Primer To Background Positioning In CSS لصاحبته سارة سويدان.
  2. نستخدم نحن المطوّرين ومُصمّمي الواجهات CSS في التنسيق والتَمَوْضُع (positioning)، وفي إنشاء مواقع تتسم بالجماليّة والمظهر الخلّاب، ونستخدمها غالبًا في إضافة الحركة إلى الصفحات باستخدام التنقّل (transitions) أو التحريك (animations)، ولكنّنا عادةً لا نتعمّق، ولا ندخل في خفايا خاصّيات CSS المُعقّدة. يُمكن للتحريك أنّ يكون أداةً قويّة في مُساعدة زوّار مواقعنا وعُملائنا على فهم تصميم الموقع بالشكل الصحيح، ولذلك يوجد بعض المبادئ والتي بتطبيقها يمكن الاستفادة من التحريك بالشكل الأمثل. إنّ هذه المبادئ ليست بالجديدة، وهي عبارة عن مُمارسات عمليّة وتجارب طويلة من عالم ديزني، فقد نُشرت هذه المبادئ الاثنا عشر للتحريك بكتاب وهو بعنوان: "وهم الحياة: الرسوم المُتحركة في ديزني" في عام 1981، وصفت وصوّرت هذه المبادئ كيف يُمكن للتحريك أنّ يُستخدم في سلب عقل المُشاهدين في عالم وهميٍّ قابل للتصديق. سأتناول في هذه المقالة، كلًا من المبادئ الاثنا عشر، ومُناقشة كيف لها أنّ تُطبّق في صناعة صفحات الويب مُستخدمًا الأمثلة التوضيحيّة، وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة عبر حساب الأكاديمية في Github. التمدّد والانكماش (Squash and Stretch) إنها المفهوم القائم على أنّ للأجسام كتلة فيزيائيّة، وبتحركها يجب أن تبقى الكتلة ثابتة دون أن تتغيّر، فستتوسّع الكرة عندما تصطدم مع الأرض، ولكنّها أيضًا ستصبح أقصر باعتبار أنّ كتلتها سيُعاد توزيعها. يُمكن الاستفادة من هذا المفهوم عند إنشاء الكائنات الّتي نُريدها أنّ تبدو فيزيائيّة، مثل الأشخاص، الأشياء، أو تنطط الكرات. يُمكن تجاهل هذه المبدأ عند التعامل مع عناصر صفحة الويب، فلا ترتبط عناصر الـ DOM بالضرورة مع الأجسام الفيزيائيّة، ويُمكن لها أنّ تكبر وتتقلّص على المُتصفّح كما تقتضي الحاجة، فعلى سبيل المثال، يُمكن للزر أنّ يكبر ومن ثم يتلاشى، أو يُمكن لرسائل الخطأ أنّ تظهر وتختفي كما يحلو لها. ولكن في حقيقة الأمر، يُمكن الاستفادة من مبدأ التمدّد والانكماش في إعطاء الكائن أو الجسم صفات الكتلة الفيزيائيّة، ويُمكن للتغيرات الصغيرة في الشكل إنشاء تأثيرات طفيفة ولكنّها في نفس الوقت مُلفتة للنظر. التهيئة (Anticipation) لا تحدث الحركات فجأةً، ففي الواقع العمليّ، تَنتج الحركة عادةً تدريجيًا، سواءً كان ذلك في دوران الكرة قبل السقوط من على الطاولة، أو عندما يثني شخصٌ ما قدميه استعدادًا للقفز. يُمكننا استخدام ذلك في جعل التحوّل (transitions) والتحريك (animations) في CSS أكثر حيويّةً وواقعيّة، ويُمكن لهذا المبدأ أنّ يكون على شكل ارتداد خفيف للكرة، ليُساعد المُستخدم على إدراك ما الّذي يتغيّر ويتتبّع مسار الجسم على الشاشة. فعلى سبيل المثال، يُمكن لعنصر من عناصر الصفحة أنّ يتقلّص قليلًا قبل أنّ يكبر في الحجم عند حركة المرور (hover)، أو لنقل مثلًا عند إضافة عناصر قائمة (items) جديدة إلى قائمة، فيُمكن أنّ يُمهد لهذه الحركة عبر إبعاد باقي العناصر وإفساح المجال لها أوّلًا. التقديم (Staging) يتأكّد هذا المبدأ من أنّ الجسم أو الشيء هو عنصر المشهد الرئيسي، وهو عندما تفسح باقي الأجسام الأخرى أو جوانب المشهد المجال لمكان حدوث الفعل الرئيسي، يعني هذا إما وضع الفعل الرئيسي في مكان بارز للعيان، أو حجب باقي العناصر بهدف التركيز على ما يجب للمُستخدم أنّ يراه. إن أردنا قولها بلغة ومُصطلحات الويب، فإن أحد الأساليب قد يكون في استخدام تغشية لمُحتوى مُعيّن دون آخر، أو ربما إضافة طبقة داكنة على الصّفحة، ومن ثُمّ وضع المُحتوى في الواجهة ليَظهر هذا المُحتوى بارزًا للنظر والاهتمام. يُمكن استخدام أسلوب آخر وهو الحركة، فعندما تتحرّك أجسام عدّة، فمن الصعب معرفة أي منها جديرٌ بالاهتمام والمُتابعة، ولكن إنّ توقّفت جميع التحركات وجسم واحد تحرّك، ولو بحركة صغيرة، فمن السهل جدًا اكتشافه. يُستخدم هذا الأسلوب عادةً مع زر الحِفظ (save)، بحيث يتذبذب أو يتمايل أو يومض بخفّة ليوضّح للمُستخدم أنّ عليه حِفظ المُستند قبل المُتابعة، مع الحفاظ على بقية أجزاء الصفحة ساكنة وبدون أدنى حركة، مع العلم أنّ أي حركة ولو طفيفة ستبرز وتكون واضحة للعيان. الحركة المُفصّلة والحركة من توقّف إلى توقّف (Straight-Ahead Action and Pose-to-Pose) إن الفعل straight-ahead يكون عندما يتمّ رسم كل إطار صورة (frame) لإتمام التحريك، أما الفعل pose-to-pose (توقّف إلى توقّف) يكون عندما يتمّ رسم سلسلة من الإطارات المفتاحيّة (keyframes) وتُرسم الفترات فيما بينها لاحقًا، عادةً من قِبل مُساعد. يُستخدم في عالم الويب معظم الأحيان التحريك من نوع pose-to-pose، فمثلًا الانتقال (transition) بين الإطارات المفتاحيّة (keyframes) يُمكن أنّ تتم معالجتها من قبل المُتصفّح، والذي يُقحم الاختلاف بين كل إطار ويرسم عددًا منها أيضًا بهدف جعل التحريك أكثر سلاسةً وواقعيّة. يوجد استثناء وحيد، وهو دالة التوقيت steps، فمع هذه الدالة، سيخطو المُتصفّح خطوات على عدد الإطارات المُحدّدة، وبهذه الطريقة ستتمكن من رسم سلسلة من الصور وجعل المُتصفّح يعرض كل منها تتابُعيًا، ليُنشئ بذلك حركة بالأسلوب **Straight Ahead Action”. توابع الفعل وتداخله (Follow Through and Overlapping Action) لا تحدث الأشياء دائمًا في نفس الوقت، فعندما تتوقّف سيارة فجأةً، فإنّها تميل إلى الأمام، مع تصاعد الدخان نتيجة احتكاك العجلات مع الأرض، ومن داخل السيارة يواصل السائق ميلانه نحو الأمام إلى حين توقّف كل حدث بشكل مُنفصل. إن هذه التفاصيل ما هي إلا أمثلة على توابع الحركة وتداخل الحركة، ويُمكن استخدام هذا المبدأ على الويب للمُساعدة على التأكيد أنّ شيئًا ما قد توقّف الآن لأنّه يجب أن يتوقّف، وليس أنّه قد توقّف عن التحريك بشكل مُطلق، على سبيل المثال، عنصر قائمة أُضيف إلى القائمة قد ينزلق، ليتقدّم شيئًا ما أكثر من اللازم، ومن ثُمّ يُصحّح نفسه إلى التَمَوْضُع الصحيح. إن إنشاء حركة ذات طابع تداخلي، يتطلّب إنشاء عناصر تتحرّك خطًا مُختلفة وذات فروقات طفيفة عن بعضها البعض، وفي الحقيقة هذا الأسلوب مُستخدم بشكل جيّد في أنظمة التشغيل iOS، فعندما يتمّ التنقل بين صفحات التطبيق، بعض الأزرار والعناصر ستتحرّك بمُعدّل مختلف عن بعضها، ليظهر التأثير الكلي في النهاية بشكل مُفعم بالمرونة والسلاسة وأقل سطحيّة من إذا كان كلُ شيءٍ يتحرّك دفعة واحدة وبنفس المُعدّل، وهذا التنقل المتوحد في كينونة واحدة يُعطي المُشاهد أو المُستخدم فترةً زمنيّة ليُدرك هذا التغيير الحاصل بالشكل المطلوب، والابتعاد عن الالتباسات. قد يُستخدم هذا الأسلوب في عالم الويب عبر تجميع التنقلات (transitions) أو التحريك (animations) تتابعيًا، بهدف إنشاء تأثيرات تظهر بمُعدّل سرعة مُختلف فيما بينها. التباطؤ والتسريع (Slow In and Slow Out) لا تنتقل الأجسام من السكون التام إلى السرعة القصوى فورًا، بل تميل الأجسام إلى رفع السرعة تدريجيًا، والتَبْطيء منها قبل التوقّف، فبدون التسارع والتباطؤ، ستكون الحركة وكأنها حركة آلة (روبوتي) يُعرَف التباطؤ والتسريع في عالم CSS بالمُصطلح easing (تسهيل)، ويُستخدم كدالة توقيت (timing function)، وهو طريقة في وصف وتحديد مُعدّل التغيّر خلال مسار التحريك. يُمكن وباستخدام دالات التوقيت جعل الأجسام المُتحركة تبدأ بطيئةً وترفع من السرعة (الدالة ease-in)، أو تبدأ سريعةً وتخفّف من السرعة (الدالة ease-out)، ويُمكن من أجل التأثيرات الأكثر تعقيدًا استخدام دالّة التوقيت cubic-bezier. التقوّس (Arc) لا شك أنّ الأجسام ستبدو أكثر حيويّة باستخدامها حركات التباطؤ والتسريع المُتبعة في المبدأ السابق، ولكن في حقيقة الأمر إن الأجسام نادرًا ما تتحرك بحركة مستقيمة، فهي تميل إلى اتباع انحناءات مقوّسة. يُمكننا تحقيق هذه النوع من الحركات المُقوّسة مع CSS بطريقتين، تكون الطريقة الأولى بالجمع بين أكثر من تحريك، فالحركة الخاصّة بتنطط وارتداد الكرة، يُمكن تطبيقه عن طريق عمل تحريك أوّل يجعل الكرة تتحرّك صعودًا ونزولًا، بينما تحريكٌ ثاني يجعل الكرة تتحرّك إلى جهة اليمين في نفس الوقت، عندها ستظهر الكرة عبر الشاشة وهي ترتد من الأرض وبشكل مقوّس. تكون الطريقة الثّانية عبر تدوير العنصر نفسه، حيثُ بإمكاننا التعديل على مركز دوران الجسم عبر ضبط مبدأ التغيّر (transform origin) ليُصبح خارج جسم العنصر، فعندما ندوّر الجسم، فإنه سيدور في تقوّس. الفعل/الحدث الثانوي (Secondary Action) بينما الحدث الرئيسي يحدث، يُمكن لحدثٍ ثانويٍ أن يُساعد على التأكيد منه أو حتَّى أنّ يزيد عليه، ربما على سبيل المثال، تأرجح ذراعي شخص يمشي (المشي حدث رئيسي والتأرجح حدث ثانوي) أو تنطط كرة (حدث رئيسي) مع ظهور بعض الغبار (حدث ثانوي) عند الارتطام. يُمكن رؤية هذا المبدأ على مواقع الإنترنت، عندما تبعد العناصر من نفسها لإفساح المجال للعنصر الجديد، كما يحدث عند سحب عنصر قائمة ووضعه في منتصف القائمة. التوقيت (Timing) إن توقيت التحريك هو الوقت المُستغرق في إتمام حركته، فيُمكن للتوقيت أنّ يُستخدم في جعل الأجسام الوزنة تبدو بطيئة في حركتها، أو في إضافة طابع مُميّز وحيوي في الحركة نفسها. إن التعديل وتسوية/ضبط الوقت في صفحات الويب بسيطٌ للغاية، فكل ما يتطلب فعله هو التعديل على قيمتي الخاصيتين animation-duration أو transition-duration. المُبالغة (Exaggeration) يُستخدم أسلوب المُبالغة بشكل كبير مع أفلام الرسوم المُتحرّكة، فيُمكن باستخدامه جذب نظر المُشاهد إلى حركات أو أفعال مُعيّنة، لتجعل هذه المُبالغة من الرسومات أكثر إثارة أو ربما في بعض الأحيان أكثر هزليّة، فعندما يُحاول الذئب الانقضاض على فريسته، فربما يجعل الرسام من فكاه مفتوحان على مصراعهما أكثر من المُعتاد بهدف إضافة شيء من الرعب أو الهزليّة إلى المشهد. وفي صفحات الويب، يُمكن للأجسام أنّ تتوسّع وتتقلّص بهدف التأكيد عليها وجذب الانتباه إليها، على سبيل المثال عند ملئ نموذج ما (form)، فيُمكن للقسم النشط أنّ يكبر بينما بقية الأقسام تنكمش أو تتلاشى (fade). الرسم المتين (Solid drawing) عند تحريك الأجسام في الأبعاد الثلاثة (three dimensions)، يجب أنّ يكون الاهتمام مُنصبًا على أنّ هذه الأجسام تتبع قواعد الرسم المنظوري، فالناس مُعتادة على العيش والتعامل مع عالم ثلاثيّ الأبعاد، ولذلك عندما لا يبدو على الأجسام كما لها أنّ تكون في الواقع، فستبدو للمُشاهد غريبةً وغير مقبولة. تدعم آخر إصدارات المُتصفّحات الأبعاد الثلاثيّة جيّدًا، يعني هذا أنّه يُمكننا تدوير وتوضيع الأجسام في الصفحة ليتولّى المُتصفّح عمليّة التحوّل بنفسه. عامل الجذب (Appeal) إن عامل الجذب هو خصائص ومُميّزات العمل الفني وكيف يُمكن له أنّ يجعل منا مُتصلين ذهنيًّا مع مقصد ونيّة الفنان، فهو كجاذبيّة المُمثّل (الكاريزما)، ففي النهاية الانتباه إلى التفاصيل واتحاد الحركات مع بعضها البعض تناغميًا تجعل من النتائج نتائج مُميّزة وذات ظهور خلاب. يُمكن للتحريك المصنوع بأيدٍ احترافيّة وبعناية خاصّة أنّ يُنشئ جاذبيّة ومظهر ذو شأن على صفحات الويب، وقد أدركت بعض الشركات ذلك، فاستفادت Stripe من التحريك وسخرته في إضافة مصداقيّة إلى شاشة الدفع (checkout) الخاصّة بهم. استخدم التحريك إن استخدام المبادئ السابقة له فضلٌ كبير في تحسين التحريك، فالرسوم الّتي تحافظ على الوزن الفيزيائي للأجسام والتغييرات ذات الطابع الحدسي، وتستفيد من الحدث الثانوي مع التوقيت المُناسب سيجعل منها ذو جودة عالية لُساعد في تقديم إضافة نوعيّة وذات جودة إلى المُحتوى. يُنصح، وعندما تكون الفرصة سانحة، في إضافة بعض من التحريك والرسوم إلى صفحات الويب، وخاصّة مع استخدام هذه المبادئ، والّتي ستُضيف شيئًا من الجماليّة والجاذبيّة للموقع ليتميّز عن بقيّة أقرانه. ترجمة – وبتصرّف– للمقال Animation Principles for the Web.
  3. حدّث تويتر مؤخرًا تصميم زر التفضيل "fave" الخاصّ به، وذلك بتقديم تحريكٍ جديد، وبدلًا من الاعتماد على التنقل transitions في CSS، فإن التحريك المُستخدم يعتمد على استخدام سلسلة من الصور، في هذا الشرح سيتمّ إعادة إنشاء التحريك باستخدام CSS وبدالة التوقيت steps. وهم الحركة (Illusion of movement) يُشبه هذا التأثير إلى حدٍ كبيرٍ التأثير المُقدّم بواسطة أجهزة Zoetrope القديمة، حيثُ تعرض سلسلة من الرسومات في حلقة وحول أسطوانة، ولكن ما سيتمّ استخدامه هنا هو عرض سلسلة مُسطّحة من الصور داخل عنصر. عرض المثال مثال على تحريك الزر عند حركة المرور hover: .twitter-fave { width: 70px; height: 50px; background: url("//raw.githubusercontent.com/HsoubAcademy/HsoubAcademy.github.io/master/examples/CSS-animation-series/Twitter%20fave%20animation/twitter_fave.png") no-repeat; background-position: 0 0; } .twitter-fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } يمكن معاينة الملفات المصدرية لهذا الدرس على حساب أكاديمية حسوب على Github. تمّ في البداية إنشاء سلسلة من الصور، والّتي ستُشكل التحريك في نهاية الأمر: يجب وضع هذه الصور/الإطارات على صفّ واحد بهدف إتمام عمليّة التحريك بسهولة أكبر، ليتمّ عندها التحويل من الصورة الأولى إلى الصورة الأخيرة، وذلك عبر التحكم بمكان الخلفيّة باستخدام شيفرة CSS. كيف ستتموضع صور الخلفيّة background image ضمن العنصر: دالة التوقيت ()steps كما هو الأمر مع مُعظم دالات التوقيت مثل ease أو cubic-bezier، فإن الانتقال transition يُحرّك العنصر بسلاسة بين حالة البداية وحالة النهاية، أما دالة التوقيت steps فهي مُختلفة، فبدلًا من ذلك الانتقال (بين نقطتين)، سيتمّ تقسيم التحوّل/الانتقال إلى عدد من الخطوات والتحكم بين هذه الخطوات بشكل مُنفصل. تمثيل دالة ()steps بالرسم البياني، والّتي تَظهر على شكل سلسلة من الخطوات: البداية مع إعداد HTML: <section class="fave"></section> صورة الخلفيّة Background image سيتمّ في الخطوة التّالية تنسيق العنصر السابق وإضافة تَمَوْضُع لصورة الخلفيّة background image: .fave { width: 70px; height: 50px; background: url(images/twitter_fave.png) no-repeat; background-position: 0 0; } سيتمّ إضافة تنسيق لحركة المرور hover، ليتم نقل تَمَوْضُع الخلفيّة إلى نهاية سلسلة الصّور: .fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } تمّ في الخاصّيّة الثانية تعيين قيمة للانتقال transition، وذلك للخاصية background وبمدة انتقال ثانية واحدة، ولدالة التوقيت ()steps القيمة 55، وذلك لأن عدد الصور الكلّي الّتي سيتمّ التبديل بينها هو: 55. لن يحدث التحريك إلّا عند حركة المرور hover، حيثُ سيتمّ الانتقال عبر جميع الصور وبعدد خطوات متساوي (55 خطوة). لماذا لا يتمّ استخدام gif مع التحريك؟ يُمكن في الحقيقة استخدام الصور المُتحركة (gifs)، ولكن لن تكون الاختيار الأمثل في هذه الحالة، حيثُ حجم الملفّ سيكون أكبر، ومن الصعب التحكم بمُعدّل النقل، ولكن بالطريقة المُستخدمة هنا يُمكن عمل: إيقاف مؤقت، إعادة التحريك، وإجراء كافّة التعديلات المطلوبة لإتمام التحريك على الوجه المطلوب. استخدامات أخرى للدالة steps إن تحريك الصور من نوع sprites هو أحد استخدامات دالة التوقيت steps، فأي شيء يحتاج إلى التحريك على شكل سلسلة من الخطوات المُفصّلة، يُمكن له الاستفادة من هذه الدالة. أقصوصة الغش (Cheatsheet) تقدّم الأقصوصة التّالية مُختصر للمقالة، والذي يُمكن الرجوع إليه عند تطبيق الدرس. خاتمة ما أجمل التحريك في صفحات الويب؛ سرعة، خفّة، مرونة، جمال، أنصح بالقراءة عن الأمر والتعمّق في جنباته، فهو الوجه الجديد لصفحات الويب. ترجمة وبتصرّف للمقال Twitter’s "fave" animation.
  4. يُساهم إضافة بعض التحريك (animation) عندما تتغيّر أجزاء صفحة الويب، في مُساعدة المُستخدِم على إدراك ما الّذي يحدث في الصّفحة، فيُمكن للتحريك أنّ يَدل على وصول مُحتوى جديد، أو لفت نظره إلى المُحتوى الّذي هو طور الإزالة. ستتناول هذه المقالة كيف يُمكن للتحريك المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر قائمة من القائمة الخاصّة بهم. See the Pen WvjoXa by Walid (@01walid) on CodePen.
  5. أنصحك بالبحث في منصة مستقل أخي: https://mostaql.com القسم هنا مخصص للأسئلة والأجوبة المحددة: https://academy.hsoub.com/pages/terms
  6. أهلا بك سيف، بدون كود لا يستطيع أحد مساعدتك.
  7. في البداية قمت بإنشاء متغير نصي خارج الحلقة، هذا المتغير هو سلسلة نصية ولكنها في هذه اللحظة لا تحتوي على شيء. قمت بعدها بإنشاء حلقة loop لتدور 100 مرة. في كل مرة سيتم فتح المتغير text والنظر إلى قيمته الحالية ومن ثم إضافة إليها: i + 1 + "<br>" //سطر جديد في النهاية عند الانتهاء من الحلقة سيجمع المتغير text جميع القيم بدء من الواحد وحتى 100 (مع فاصل نهاية السطر بين كل رقم، يعني <br>).
  8. سعيد جدا بسماع ذلك صديقي أحمد. الدورة هي عن "تطوير" الواجهات وليس تصميمها. تصميم الواجهات قد تكون دورة أخرى. نشرح فيها برامج مثل: الفوتوشوب أو Illustrator أو Sketch أو Adobe XD. سنشرح فيها أمور مثل: الألوان، النسبة الذهبية، تصميم الشعارات، تصميم الجرافيك وهكذا.
  9. نعم يمكنك البدء مع أي من الدورات التالية: دورة "تطوير واجهات المستخدم" https://academy.hsoub.com/learn/front-end-web-development تبدأ معك من الأساسيات ولا تتطلب خبرة مسبقة. وتعلمك أساسيات HTML و CSS و JavaScript. وتؤهلك لكي تصبح مطور واجهات أمامية، أي Front-end Developer. يمكنك أيضا البدء مع الدورات التي تؤهلك لكي تصبح مطور نظم خلفية Back-End Developer: دورة تطبيقات الويب باستخدام لغة PHP تبدأ معك من الأساسيات البرمجية وحتى بناء تطبيقات ويب حقيقية: https://academy.hsoub.com/learn/php-web-application-development أو دورة تطبيقات الويب باستخدام لغة Ruby وتبدأ معك من الأساسيات البرمجية وحتى بناء تطبيقات ويب حقيقية أيضا: https://academy.hsoub.com/learn/ruby-web-application-development بإمكانك الجمع بين تطوير الواجهات وتطوير النظم الخلفية لتصبح مطور ويب حزمة كاملة أي Full-Stack Developer إن كنت ترغب بتعلم تطوير تطبيقات الجوال فيمكنك البدء مع دورة واجهات المستخدم ومن ثم التابعة مع دورة تطوير تطبيقات الجوال باستخدام تقنيات الويب: https://academy.hsoub.com/learn/hybrid-mobile-application-developmen الأمر يختلف من شخص لآخر ومن دورة إلى أخرى ولكن شهر قليل لتعلم البرمجة ستحتاج أكثر من ذلك. المهم أن تملك الحماس والرغبة في التعلم وتطبيق محتوى الدروس. إتمامك للدروس العملية وتطبيقها بنفسك سيكون بداية ممتازة لك.
  10. المُقدّمة ‏Foundation هو إطار عمل مُتجاوب (responsive) لجهة العميل (client-side)، أنشأتهُ شركة Zurb عام 2011 لتسهيل إنشاء المواقع، يُمكّنك Foundation من بناء موقعك بشكل سريع ممّا يزيد من إنتاجية التطوير، حيث يُقدم الإطار نصوص CSS جاهزة وقابلة للتعديل لتناسب أغلب المشاريع. تُقدم شركة Zurb حلولًا للمطوّرين بجانب إطار العمل Foundation، حيث هناك العديد من الإضافات التي تختبرها Foundation في مختبراتها والتي تطلق عليها اسم playground والتي تحتوي على خطوط الأيقونات (Icon Fonts)، وأيقونات الشبكات الاجتماعية (Social Web Icons)، والرسوم البيانية، ومخططات لإنشاء نماذج بدئيّة (prototypes)، وقوالب البريد الالكتروني، والعديد منها بإمكانك أن تجده هنا، كما تُقدم شركة Zurb حزمة تطبيقات ويب مجانية ومدفوعة. أصبح Foundation في الإصدار الخامس أسرع وأسهل استخدامًا، وإن كنتَ قد تعاملت مع الإطار في إصداره الرابع فأنت مع الإصدار الخامس وكأنك تنظر إلى إطار مختلف تمامًا، إذ قدّم Foundation في الإصدار الخامس الكثير من التحسينات على مستوى الأداء والمظهر، فانتقل من استخدام مكتبة Zepto إلى jQuery، وهذا الانتقال من شأنه أن يقدمَ أداءً أفضل، والتحسينات طالت حتى التوثيق الرسميّ حيثُ أصبح سهل القراءة وأكثر تنظيمًا. يَدعم Foundation جميع المُتصفحات ما عدا IE في إصداره السابع والثامن، والصورة التّالية من التوثيق الرسميّ تُوضّح توافق الإطار مع مُختلف المُتصفحات. ‏Foundation أم Bootstrap؟ دائمًا هناك مقارنات وحروب لاختيار الأفضل وهذه المُقارنات قائمة منذ الأزل ولن يَربح بها أحد فدائمًا ما تجد أسئلة من نوع: هل متصفح فيرفُكس أفضل أم Chrome؟، هل لغة Ruby أفضل أم PHP؟ (Ruby طبعًا :))، والقائمة تطول، والإجابة تختلف من مجال لآخر، ولكنّ القاعدة العامة أنّه ما من شيء أفضل بالمُطلق، أمّا للإجابة على سؤال هل Foundation أفضل أم Bootsrap؟ فأقول: الإجابة ليست بنعم أو لا، الأفضل هو الأفضل للمشروع، ويجب على المُطوّر الاطلاع على الإطارين معًا والابتعاد عن الاعتماد المُطلق على أحدهما، فالإطاران يَملُكان شهرةً واسعةً تجعل منهما لاعبين قويّين في عالم تطوير الويب، ناهيك على أنّ الإطارين يتشابهان في الكثير من المفاهيم والأفكار، ممّا يجعل تعلّمهما أمرًا يسيرًا، ولكن تذكّر عند اختيار أيّ إطار عمل يجب على الإطار أن يملك توثيقًا رسميًا جيدًا ووجودًا قويًّا على الويب. إن كنت من مُحبي الأرقام، الترتيب التالي يُوضح أشهر أُطر العمل تقييمًا على موقع GitHub: ‏Bootstrap‏: أكثر من 78000 نجمة. ‏Foundation‏: أكثر من 19000 نجمة. ‏Semantic UI‏: أكثر من 15000 نجمة. ‏Pure‏: أكثر من 10000 نجمة. ‏Skeleton‏: أكثر من 7000 نجمة. ‏UIkit‏: أكثر من 4000 نجمة. التحميل بإمكانك تحميل الإطار من هنا بنسخته الكاملة أو تخصيص التحميل حسب الحاجة، في حالتنا سوف نستخدم النسخة الكاملة من الإصدار ذي الرقم 5.5.0. في حال اخترت تخصيص التحميل، وهو أمرٌ قد تفعله لتصغير حجم ملف الإطار، فعليك الانتباه عند تحميل النسخة الأحدث أن تختار ذات التخصيصات التي اخترتها سابقًا. في المجلد المُسمى css يوجد ثلاثة ملفات CSS، وهي foundation.css ويحتوي نسخة كاملة مقروءة من أنماط الإطار، والملف foundation.min.css والذي يحتوي على نسخة كاملة مُقلّصة (minified) من أنماط الإطار، حيث تم حذف جميع الفراغات والتعليقات لتصبح أصغر حجمًا، والملف الثّالث هو normalize.css ويُستخدم عادةً لتسوية المتصفحات على سوية واحدة، وهو ليس خاصًّا بـFoundation. في المجلد js سوف تجد ملفّ JavaScript يحمل الاسم foundation.min.js وهو بشكل مُقلّص، أي غير مقروء، ويحتوي كافّة خصائص الإطار، أمّا المجلد foundation ففيه كافّة مُحتويات المَلفّ السابق ولكن بشكل مُجزّأ، بحيث يكون لكل إضافة ملف مُستقل، وكلّ من هذه الملفّات مقروء وبإمكانك استخدام أيٍّ من هذه الملفات دون الآخر، أمّا المجلد vendor فيحتوي ملفات المكتبات المستخدمة في الإطار مثل مكتبة jQuery ومكتبة Modernizr‏ والتي تُستخدم في استكشاف ميزات HTML5 وCSS التي يَدعمها المتصفح. المتجر سوف نعمل طيلة السلسلة على مشروع متجر بسيط لبيع الصور الفوتوغرافية نُسمّيه "صوّرها"، نستعرض من خلاله ميزات هذا الإطار، والميزات التي يُمكننا تطبيقها عليه، لا تتطرق السلسلة إلى أساسيات CSS ولا JavaScript، وسيقتصر التركيز الإطار نفسه. سنستدعي ملف الإطار والمكتبات المُساعدة في أعلى مُستند HTML في الوسم <head> بالشكل التالي: الإطار مُقلّصًا، لنحصل على أصغر حجم مُمكن. ملفّ CSS الخاصّ بالتعديلات والتي سوف تكون مُستقلة عن الإطار لنُحافظ عليها في حال تحديث الإطار. ملف JavaScript الخاص بمكتبة Modernizr. سنستدعي ملفّ الإطار الكامل وبالحجم المُصغر ومكتبة jQuery في أسفل مُستند HTML، لتحميل الصفحة بشكل أسرع دون انتظار ملفات JavaScript. <link rel="stylesheet" href="css/foundation.min.css"/> <link rel="stylesheet" href="css/mycss.css"/> <script src="js/vendor/modernizr.js"></script> ... <!--أسفل الصفحة--> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> لست مُقيدًا بتحميل كافة ملفّ الإضافات الخاصّ بـJavaScript، بل بإمكانك اختيار إضافة دون أُخرى، فلا حاجة لتحميل ملف الإطار بحجمه الكامل بل يُمكنك اختيار الإضافة التي تريدها لتناسب احتياجات الموقع. <script src="/js/foundation.dropdown.js"></script> <script src="/js/foundation.tab.js"></script> يتكوّن المتجرالذي سوف نعمل عليه خلال هذه السلسلة من خمسِ صفحات هي: الصفحة الرئيسة وتحتوي على عرض بسيط لمزايا المتجر والصور الأكثر مبيعًا. صفحة المعرض التي تحتوي على عرضٍ لجميع صور المعرض. صفحة التسجيل والتي تحتوي على النماذج (forms). صفحة الخطط والأسعار والتي تحتوي على ثلاثة جداول تُمثل الخطط المتوفرة للاشتراك. صفحة المنتج وهي عبارة عن عرض للصورة المُختارة مع بيانات المُصور والتعليقات والتقييم الخاصّ بها. الهدف من المتجر هو عرض ميزات إطار العمل Foundation وليس تصميم المتجر بحد ذاته، فالمتجر مُصمّمٌ بأبسط الإمكانيات وللتوضيح فقط. سوف نستخدم متصفح Chrome طوال السلسلة ولك حريّةُ استخدام متصفحك المُفضل (أقصد Chrome :)) والصور التّالية هي لبعض الصفحات التي سوف نحصل عليها بعد انتهاء السلسلة. تعرّفنا من خلال هذه المُقدمة البسيطة على إطار العمل Foundation بشكل عام، ولما عليك اختياره، وشرحنا التحميل وطريقة الإعداد، وأخذنا فكرة عامّة عن المتجر الذي سوف نتعامل معه طيلة السلسلة. في المقالة الثّانية سوف نبدأ بالدخول في التفاصيل والشرح الفعليّ لميزات الإطار، وسوف نبدأ بالنظام الشبكي وكل ما يتعلق به وكيفيّة التطبيق على متجرنا مع عرضٍ للأمثلة من شيفرةٍ برمجية وصورٍ توضيحية.
  11. يمكنك إنشاء خدمة تدقيق لغوي على موقع خمسات
  12. يمكنك البدء مع هذا الكتاب:
  13. للتنويه، محتوى الدورة وتقسيم الدروس قد تغيير جذريا منذ هذه المراجعة.
  14. ضعي بين كل خاصية والأخرى فاصلة منقوطة (;)
  15. يتوفر هنا في الأكاديمية سلسلة من المقالات حول صناعة الألعاب:
  16. وعليك السلام، هذه عناصر زائقة. تستخدم لإدراج محتوى ما قبل أو بعد العنصر. يوجد في الأكاديمية مقال مفصل حولها:
  17. أهلا بك، يمكنك قراءة هذه المقالة فهي تتوفر على نصائح قيمة وقد تكون مفيدة لك:
  18. يبدو أنك نسيبت إضافة الأقواس المعكوفة {} لكود الدالة: function play(nameOne) { if (3 >= nameOne.length) { alert("صفتك هي الذكاء"); } else if (5 >= nameOne.length) { alert("انت شجاع"); } else { alert("طيب القلب"); } }
  19. هي بالأساس لا تحتاج إلى تحويل، اكتبها كما هي بدون إشارتي التنصيص.
  20. هل تستخدم نسخة مقرصنة؟ أعتقد بأنه هو السبب.
  21. أنصحك بمتابعة الدورة، فبعد أن ننتهي من الأساسيات ستكون كافة الدورس تطبيقية، والتي أنت بحاجتها لترسيخ المبادئ التي تعلمتها. إن كنت مصر على العمل على شيء مختلف فيمكنك تحدي نفسك عبر تكويد تنسيق أي جزء من المواقع التي تزورها باستمرار وتعجبك وعندما تواجه صعوبة فيمكنك الإطلاع على التنسيق الأصلي من المتصفح لتعرف الحل.
  22. أهلا بك أحمد، اجتياز امتحان أكاديمية حسوب والحصول على الشهادة يكون عبر ثلاث خطوات أساسية وبالتسلسل التالي: إرسال روابط المشاريع المنفذة والتي تم تطبيقها خلال الدورة. مقابلة على سكايب، يتم فيها مناقشة المشاريع وطرح بعض الأسئلة. إجراء تعديلات أو اضافات على المشاريع المنفذة. يمكنك استخدام أي مرجع مناسب لك دائما (باستنثاء مرحلة المقابلة).