لوحة المتصدرين

هل جالت هذه الأفكار في خاطرك من قبل؟ تردّدت أصداء هذه الأفكار في رأسي عندما طلبت منّي شركةٌ ناشئة أن أكتب عن تحليل البيانات الضخمة (big data analytics) لتجارة التجزئة الإلكترونية- الموضوع الذي أعرف القليل عنه. بالتأكيد لديّ معرفةٌ بالشركات التقنية، لكنني لست بعالِم بيانات ولم أعمل من قبل على الإطلاق في بيع التجزئة، لذا لم أكن متأكدًا إن كان باستطاعتي أن أقوم بهذا العمل بكفاءةٍ وعلى أكمل وجه. كان لدي اهتمام حقيقيٌّ بالموضوع وهذا ما شجّعني على الخوض فيه. طالما سمعت عن البيانات الضخمة في التجارة الإلكترونيّة، وأردتُ أن أقتحم هذا المجال؛ لذلك قمتُ باستغلال هذه الفرصة. وقد أدركتُ لاحقًا أن هذا كان أحد أفضل القرارات التي اتخذتها؛ فقبول تلك الوظيفة، الأمر الذي لم يدع أمامي خيارًا إلا أن أُصبِح خبيرًا في ذلك المجال –الذي لم أكن أعرف الكثير عنه- فتح لي الكثير من الأبواب. ليس فقط بأن جعل تلك الشركة توظّفني مرّاتٍ أخرى، استطعت أيضا استعمال خبرتي لجذب الشركات الأخرى في هذا المجال، مما أدى إلى توسيع قاعدة عملائي. هذا المقال سيخبرك كيف يمكنك فعل الشيء نفسه، إليك 3 نصائح يمكنك تطبيقها لتنمية معرفتك بأيّ مجال وبالتالي زيادة مقدرتك على -وأيضًا عوائدك من- كتابة مقالاتٍ عميقة وقيّمة فيه، افعل هذه الأمور الثلاثة بانتظام، وستتحول من مبتدئٍ لخبير في أي مجال (وآملُ أن يكون المجال الذي تحبّه) في عدة شهور قليلة أو أسابيع: 1- اطلع بانتظام على المستجدات في ذلك المجاللكي تصبح خبيرًا في أيّ مجال، يجب أن تقرأ عن مستجدّاته وأن تقرأ موضوعاتٍ حوله بشكلٍ منتظم، ولا يكفي مجرّد قراءة القليل من المقالات عنه من وقتٍ لآخر. كيف؟ بأن تحوّل هذا الأمر إلى عادةٍ لديك، تابع التحديثات والعناوين الرئيسية باستمرار في الموضوع الذي تريد أن تكون خبيرًا كما تفعل عادة لدى التّصفح وقراءة مواضيع مُختلفة على الشّبكات الاجتماعية. لتسهيل الأمر عليك، اشترك في المدونات والنشرات الإخبارية المتعلقة بالمجال، فتستطيع بذلك أن تحصل على جميع التحديثات في مكانٍ واحد- بريدك الإلكتروني. وإليك بعض المواقع التي يمكن أن تستعين بها في هذا الأمر: SmartBriefهذه الموقع يقدّم خدمة تجمع وتنظّم لك الدراسات، المقالات الإخبارية، والتدوينات من المصادر المختلفة وفي المجالات المختلفة (لتختار منها ما تحتاجه) وترسلها مباشرةً إلى بريدك الإلكتروني. يمكن الاستعانة بالموقع في مجالاتٍ عديدة، مثل الأمور الماليّة، التعليم، الصحة، التقنية والمزيد. وهي أداة جيّدة لتبقى على اطّلاعٍ بمستجدات حقول اهتمامك. فقط اختر المجالات التي تريدها، اشترك في النشرات المتعلقة بها، وستبدأ في تلقي محتوىً ينمّي معرفتك. Alltop و Technoratiتُعتبر هذه المواقع أدوات عظيمة لإيجاد المدوّنات في أي مجال وتخصص. أدخل موضوعًا أو كلمة مفتاحيّة في حقل البحث، تصفّح النتائج واشترك في تلك التي تعتقد أنها ستكون مصدرًا جيّدا لك. Forbesفوربس معروفة بتغطية الأعمال والأمور الماليّة، لكن بها أيضًا محتوىً جيّدة في مجالات مُختلفة من السياسة إلى التسلية. ابحث عن مجال اهتمامك، جِد مقالاتٍ حولها، وتابع كُتّابها. افعل الأمر ذاته مع the New York Times ، Huffington Post، و Business Insider. LinkedInقم بالانضمام إلى مجموعاتٍ متعلقة بمجالك، اشترك في التحديثات، وشارك في المحادثات. 2- اطلع على دراسات الحالات والتطبيقات العمليةالقراءة عن مستجدّات وقضايا مجالك عظيمٌ بلا شك، لكن ستستطيع تعلّم المزيد برؤية هذه الأمور على أرض الواقع. على سبيل المثال، أقرأُ بعض دراسات الحالة عن البيانات الضخمة، التجارة الإلكترونية، وبيع التجزئة لأستطيع رؤية كيف يستخدم أصحاب الأعمال الآخرين هذه التقنيات. وعندما تعلّمت كيف تستخدم المتاجر مثل Macy’s و Nordstrom البيانات الضخمة لجمع وتنظيم المعلومات المتعلقة بالمستهلكين وإضفاء الطابع الشخصي على تجارب التسوّق، ذهبت مباشرةً إلى أقرب فرع Nordstrom لي ولاحظت كيف تتم إدارة المتجر. تصفحت أيضًا موقعهم الإلكتروني واخترت العديد من المنتجات لشرائها لأستطيع خوض تجربةٍ مباشرة. هذا جعلني أتعلم المزيد عن هذا المجال ومنحني رؤيةً عميقة لم أكن لأحصل عليها من قراءتي للمواقع والمجلّات. خطّط لفعل شيءٍ مماثل في عملك كمدوّن مستقل. عندما تحاول أن تتعلم المزيد عن موضوعٍ معيّن، تجاوز مرحلة مجرّد قراءة مقالاتٍ عنه. جِد دراسات حالات case studies تعرض توجّهات مُعيّنة أو تجارب واقعيّة ما. وإذا استطعت الذهاب وخوض التجربة بنفسك فلا تتردد. 3. اسأل عملاءك عن المصادر المناسبةلا تخشَ أن تطلب المساعدة من عملائك. عندما أردتُ تعلّم المزيد حول البيانات الضخمة والبيع بالتجزئة، تحدّثت مع عميلي وطلبت منه أن يوصيني بالمواقع، الكتب، والمجلّات التي يمكن أن تساعدني في تعلّم المزيد عن ذلك المجال. كان سعيدًا بتقديم الاقتراحات لي حتّى أنه سمح لي بالاطّلاع على أبحاث شركتك وتقنياتها الخاصة. إضافةً إلى ذلك فقد وفرت لي الشركة حسابًا تجريبًا لأستطيع تسجيل الدخول إلى نظامهم ورؤية كيف سارت الأمور من منظور عملائهم. ونتيجةً لذلك فقد استطعت تعلم المزيد عن مجال عمل الشركة واكتسبت نقاطًا إضافية مع العميل لأنني أبديتُ اهتمامي وأبديتُ رغبةً في التعلم. تذكر دائما: يجب على العمل أن يكون هادفا ومنتظمافي أكاديميّة حسوب، دائمًا ما نشجعكم على التطوّر المستمر والمبادرة بالعمل. وأنا أترككم هنا مع النصيحة ذاتها، لكن مع تنبيهٍ واحد: العمل بهذه النصائح وحده لن يجعلك خبيرًا في أيّ مجال، وإنما الاستمرار والانتظام في اتّباعها. ليس بإمكانك أن تصبح خبيرًا بالتهام المعلومات في ليلةٍ وضحاها أو حتّى في أسبوع. الخبرة الحقيقية تأتي من التعلّم المستمر وتطبيق ما تعلّمت. سيسعدني ليس فقط أن تعمل بهذه النصائح، باستمرارٍ وانتظام، لكن أيضًا أن تعيد اتباعها كلّما أردت اكتساب الخبرة للتدوين في مجالٍ ما. هل لديك نصائح أخرى بهذا الصدد؟ شاركنا بها في خانة التعليقات. ترجمة –وبتصرف- للمقال 3Things You Can Do to Be an Expert Blogger in Any Niche لصاحبته Francesca Nicasio. حقوق الصورة البارزة: Designed by Freepik.

تُقدّم أشباه العناصر (pseudo-elements) عناصر DOM إضافيّة وبدون عناء يُذكر، فهي تَسمح للمُطوّر في إضافة مُحتوى إضافي إلى الصفحات وبدون إضافة أيًا من عناصر HTML على الصفحة، كما يُمكن لها أنّ تتحرّك (animated). ستتناول هذه المقالة استخدام شبه عنصر (pseudo-element) لإضافة تأثير بصري على زر. Shiny effect شبه العناصر Pseudo-elements يُمكن باستخدام CSS تحديد شبه عنصر باستخدام ::before أو ::after ليتم بعد ذلك إدراج شبه العنصر ضمن العنصر، أو بين العنصر و محتوى ما، وباعتبار أنّ شبه العنصر يعمل عمل أي عنصر، فمن المُمكن أنّ يتمّ تنسيقه، أو توضيعه، وستكون صياغة الشيفرة الخاصّة به على الشكل التّالي: .pebble::before { ... } .pebble::after { ... } يُمكن القول هنا، أنّ العنصر pebble. يملك عنصرين وهميين مُرتبطين به، ويُمكن تنسيقهما أيضًا. ملاحظة حول الفرق بين استخدام "::" و ":" يُقبَل عامًّا استخدام تضعيف النقطتان، وذلك للدلالة على استخدام شبه العناصر، وذلك على عكس شبه الأصناف (pseudo-classes) مثل :hover أو :first-child، ولكن يجب استخدام ( في حال الرغبة في دعم IE8، مع العلم أنّ جميع المُتصفّحات الأخرى وبإصداراتها الأخيرة تدعم النقطتان المُضاعفتان (::). استخدام خاصية content يجب عند استخدام شبه العناصر، ضبط الخاصّيّة content لكي يُصبح شبه العناصر مرئيًا على الصّفحة، ومن المُمكن الاحتيال عليه للظهور عبر استخدام مُحتوى فارغ كما في التّالي: .pebble::before { content: "" ... more styling goes here... } .shiny{-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;display:inline-block}.shiny button{background:#d1703c;color:#fff;font-size:14px;border:none;border-radius:0.5em;height:3em;padding:0 1em;position:relative;overflow:hidden;line-height:2em;-webkit-transition:all 0.5s cubic-bezier(.67,-0.51,.42,1.43);transition:all 0.5s cubic-bezier(.67,-0.51,.42,1.43)}.shiny button:hover,.shiny button:focus{border-color:#d1703c;color:#fff;font-size:24px}.shiny button:hover::after,.shiny button:focus::after,.shiny .demo-container.active button::after{-webkit-animation:sheen 1s 0.5s forwards;animation:sheen 1s 0.5s forwards}.shiny button::after{content:'';position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background:-webkit-linear-gradient(top,rgba(209,112,60,0),rgba(255,255,255,0.5) 50%,rgba(209,112,60,0));background:linear-gradient(to bottom,rgba(209,112,60,0),rgba(255,255,255,0.5) 50%,rgba(209,112,60,0));-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);transform:rotateZ(60deg) translate(-5em,7.5em)}.shiny button.visible{overflow:visible}.shiny button:hover{cursor:pointer}@-webkit-keyframes sheen{100%{-webkit-transform:rotateZ(60deg) translate(1em,-14em);transform:rotateZ(60deg) translate(1em,-14em)}}@keyframes sheen{100%{-webkit-transform:rotateZ(60deg) translate(1em,-14em);transform:rotateZ(60deg) translate(1em,-14em)}} يجب أنّ تجعل الشيفرة السابقة من العنصر مرئيًا على الصّفحة. الزر البراق (Shiny button) سيتمّ استخدام شبه العنصر لإتمام هذا المثال، وذلك عبر إنشاء تأثير اللّمعان عند المرور فوق الزر، كما في المثال. Shiny effect البداية مع شيفرة HTML <button>Oooh SHINY</button> لا يوجد حاجة إلى كتابة المزيد من سطور HTML للمُتابعة، على اعتبار أنّه سيتمّ استخدام شبه العنصر لإضافة بقيّة المُحتوى، ولكن لا بأس من إضافة صنف (class) إلى الوسم <button> لتنسيقه عند وجود أكثر من نوع على الصّفحة، ولكن للمثال الحالي سيتمّ استخدام عنصر الزر على حاله للتبسيط. إضافة التأثير إن التأثير المُراد إضافته ما هو إلا تدرّج خطي (linear gradient) يمر عبر الزر، ولإنشاء هذا التدرّج سيتمّ استخدام شبه العنصر after، وتوضيعه في خارج الزر وفي بدايته. button::after { content: ''; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); transform: rotateZ(60deg) translate(-5em, 7.5em); } يُصنع تأثير اللّمعان من تدرّج اللون الخارجي للزر إلى الأبيض ومن ثُمّ إلى العودة إلى اللون الأصلي. يجب إخفاء طبقة اللّمعان لتظهر فقط عند حركة المرور (hover)، ولعمل ذلك سيتمّ ضبط خاصّيّة overflow إلى hidden للزر، وباعتبار أنّ شبه العنصر هو ضمن الزر، فهذا يعني أنّ تموضعه خارج الزر لن يكون مرئيًّا. button { background: #e5ac8e; color: #fff; font-size: 14px; border-radius: 0.5em; padding: 0 1em; position: relative; overflow: hidden; line-height: 32px; } تمّ إضافة بعض التنسيق إلى الزر لكي يظهر بارزًا وذو منظرٍ خاصٍّ به، تجدر الإشارة هنا إلى استخدام position: relative، وذلك لكي يكون شبه العنصر المتموضع بشكل مُطلق (absolutely) مُتواجدًا داخل الزر، فبدون ضبط هذه الخاصّيّة، سيتموضع العنصر ذو التَمَوْضُع المُطلق ضمن العنصر الأب. إضافة التحريك (Adding the animation) يجب لاستكمال هذا المثال باستخدام التحريك: أوّلًا: إخبار المُتصفّح ليستخدم التحريك عند حركة المرور (hover). ثانيًا: تحديد بالضَّبط ما هو التحريك المطلوب وذلك باستخدام keyframes. يتمّ إضافة حالة المرور عبر إلحاق after إلى hover كما في التّالي: button:hover::after, button:focus::after { animation: sheen 1s forwards; } تمّ في الشيفرة السابقة إخبار المُتصفّح، أنّه عند حركة المرور (hover)، يجب على شبه العنصر after أنّ يُطبّق التحريك animation، ذو الاسم “sheen”، ولمدّة ثانية واحدة، ويتوقف عند النهاية بدون تكرار. يجب الأخذ بعني الاعتبار الترتيب، فاستخدام ::after:hover لن يعمل، حيثُ عندها سيتمّ إخبار المُتصفّح ليتفاعل مع حالة المرور (hover) لشبه العنصر نفسه. تتوفّر الشيفرة السابقة أيضًا على حالة التمركز (focus)، والّتي تعني أنّ المُستخدم الّذي يضغط على زر لوحة المفاتيح tab ضمن الصّفحة سيرى التأثير "sheen" أيضًا عند الوصول إليه، وبدون الحاجة لحركة المرور. سيتمّ في الخطوة التّالية تعيين وضبط keyframes لهذا التحريك: @keyframes sheen { 100% { transform: rotateZ(60deg) translate(1em, -9em); } } تمّ في الشيفرة السابقة كتابة keyframe واحد فقط، وذلك باعتبار أنّ بداية التَمَوْضُع (0%) هي مُضمّنة من قبل تَمَوْضُع بداية شبه العنصر، فكل ما يجب فعله هو ضبط نهاية التَمَوْضُع، والتي ستكون أعلى يمين الزر، ليُحاكي المُتصفح هذا التأثير Shiny effect دعم المتصفحات للتحريك أصبحت الخاصّيّة animation، و شبه العناصر مدعومة بشكل جيّد مع آخر إصدارات المُتصفّحات، ولكن يُستحسن دائمًا إلحاق السوابق webkit و moz من أجل الخاصّيّة keyframes. ترجمة وبتصرف للمقال Animating pseudo-elements.

سنتعلّم في هذا الدّرس كيفية رسم قطرات الماء في على صورة باستخدام برنامج إنكسكيب. سنستخدم في هذا الدرس صورة لشعار أكاديمية حسوب. سنرسم في البداية بواسطة أداة Beziers بقعة دائرية عشوائية. إن لم تكن يداك قد تدربتا على القيام بذلك بعد، يمكنك استخدام ذات الأداة لرسم خطوط مستقيمة ثم سنجعلها منحنية في الخطوة التالية. حدد كل النقاط واجعلها ناعمة باستخدام شريط الأدوات العلوي وبذلك سيصبح لديك حواف منحنية. أزِل الحدود ولوّنها باللون الأسود وخفّف Opacity كما في الشكل. ضاعف البقعة بعد تحديدها من القائمة Edit > Duplicate لوّن النسخة باللون الأبيض مع تخفيف Opacity أيضًا بذات القيمة. قم بتصغير المسار الجديد بالأمر Inset من قائمة Path > Inset (إن اقتضى الأمر قم بذلك عدة مرات). وستبدو بهذا الشكل. ضاعف البقعة البيضاء. والآن حدد النسخة الأخيرة من البقعة البيضاء والبقعة السوداء الأساسية. نفذ الأمر difference لطرح الأشكال من بعضها وذلك من القائمة Path > Difference. لا يبدو أن شيئًا قد تغيّر ولكن في الحقيقة البقعة السوداء أصبحت مجرد حدود تحيط بالبقعة البيضاء. اعتبارًا من هذه الخطوة يجب أن نكون أكثر دقة، سنقوم بتكبير منظور العرض لنتعامل مع التفاصيل بشكل أوضح وأكثر دقة. سنستخدم أداة Beziers لرسم بقعة بيضاء صغيرة متوازية مع الحواف السفلية للبقعة الكبيرة وسنلونها باللون الأبيض. استخدم لوحة التعبئة والحدود Fill and Stroke لضبط Opacity وإضافة بعض التمويه Blur، جرّب بعض القيم حتى تصل إلى نتيجة مرضية، ستكون هذه البقعة انعكاس إضاءة على الجانب السفلي للقطرة. ارسم شكلًا بيضويًّا صغيرًا عند أعلى القطرة ليكون الضوء المنعكس الرئيسي. خفف Opacity وأضف بعض التمويه Blur حتى تصبح Highlight. ولتسهيل باقي العمل قم بجمع كل أشكال القطرة بالأمر Group. يمكنك نسخ هذه القطرة الآن عدة نسخ ويمكنك تغيير أحجامها حيث أن قطرات الماء ليست متطابقة. كرّر كل الخطوات السابقة لإنشاء عدد من القطرات مختلفة الشكل والحجم. وطبعًا يمكنك إنشاء عدد من القطرات المستديرة تمامًا باستخدام ذات الخطوات. يمكنك إنشاء نسخ عدة من القطرات الكروية وتغيير أحجامها أيضًا. النتيجة النهائية ستبدو هكذا: ترجمة -وبتصرّف- للمقال: Waterdrops with Inkscape لصاحبه Nicu Buculei.

كما هو موضح في العنوان فإنّك في هذا الدرس سوف تتعلم كيفية إنشاء تأثير وكأنّك تتصفح كتابًا ما. وسوف نستخدم في هذا الدرس إضافة تدعى BookBlock، والفكرة من هذا الدرس هو أنّك سوف تقوم بإنشاء تأثير يُمكّن الزوار من تصفح موقع ما وكأنهم يتصفحون أحد الكتب. الفكرة هي أنّك سوف تتصفح صفحات الموقع باستخدام سهمين سوف يكونان موجودين في أعلى الصفحة أو أزرار لوحة المفاتيح أو حتى بالسحب باستخدام الفأرة وأيضًا سيكون هناك قائمة جانبية سوف تظهر عندما تقوم بالضغط على أيقونة ما. وسوف تحتوي القائمة الجانبية على روابط لصفحات الموقع وعندما تقوم بالضغط على أحد هذه الروابط فإنّها سوف تنقلك إلى الصفحة المطلوبة. سوف نستخدم أيضًا إضافة اسمها jScrollPane وذلك للحصول على شريط تمرير (scrollbar) يظهر عندما يكون المحتوى أطول من ارتفاع المتصفح. وهذه قائمة بإضافات jQuery التي سوف نستخدمها: BookBlockCustom jQuery++jScrollPanejQuery Mouse Wheel PluginCustom Mdernizerيمكنك معاينة المثال الموضح في هذا الدرس من هنا. كما يمكنك تحميل الملفات المصدرية. بنية ملف HTMLفي البداية يجب أن يكون لدينا حاوٍ رئيسي لاحتواء جميع العناصر، وداخل هذا الحاوي سوف يكون هناك عنصر <div> للقائمة الجانبية وسوف نعطيه فئة (class) بالاسم "menu-panel" وسوف يكون هناك عنصر <div> آخر يحتوي على المحتوى الرئيسي للموقع وسوف نعطيه فئة بالاسم "bb-custom-wrapper". وفي داخل كل قسم سوف يكون هناك حاوٍ للمحتوى وعنصر <div> سوف نحتاجه من أجل شريط التمرير الذي ذكرناه سابقًا. <div id="container" class="container"> <div class="menu-panel"> <h3>Table of Contents</h3> <ul id="menu-toc" class="menu-toc"> <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li> <li><a href="#item2">Why we die</a></li> <li><a href="#item3">The honeymoon</a></li> <li><a href="#item4">A drawing joke</a></li> <li><a href="#item5">Commencing practice</a></li> </ul> </div> <div class="bb-custom-wrapper"> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item" id="item1"> <div class="content"> <div class="scroller"> <h2>Self-destruction</h2> <p>...</p> </div> </div><!-- /content --> </div><!-- /bb-item --> <div class="bb-item" id="item2"><!-- ... --></div> <div class="bb-item" id="item3"><!-- ... --></div> <div class="bb-item" id="item4"><!-- ... --></div> <div class="bb-item" id="item5"><!-- ... --></div> </div><!-- /bb-bookblock --> <nav> <a id="bb-nav-prev" href="#">←</a> <a id="bb-nav-next" href="#">→</a> </nav> <span id="tblcontents" class="menu-button">Table of Contents</span> </div><!-- /bb-custom-wrapper --> </div><!-- /container -->سوف نقوم بربط عناصر القائمة الجانبية بصفحات الموقع (التي تحمل الفئة "bb-item)، وسوف نُضيف أيضًا سهمين في أعلى الصفحة من أجل التنقل بين الصفحات وزر يقوم بفتح وإغلاق القائمة الجانبية. لنقم الآن بإضافة تنسيقات CSS. تنسيقات CSSلن نتحدث هنا عن التنسيقات التي تأتي مع إضافة BookBlock لأنك سوف تجدها داخل ملف bookblock.css، وإنّما سوف نُركّز على التنسيقات الأخرى المهمة. لنبدأ التنسيقات بإضافة سطر يقوم بجلب الخط المسمى "Lato" من خدمة Google web fonts: @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);سوف نقوم بإعطاء الوسم <html> الخاصية height: 100% وذلك لأننا سوف نحتاج أن نجعل بعض العناصر تتمدد على ارتفاع المتصفح كاملًا: html { height: 100%; }سوف نستخدم أيضًا الخاصية box-sizing: border-box وذلك حتى نستخدم قيم مئوية لكل من العرض والإرتفاع أثناء استخدام padding دون القلق حول أبعاد العناصر والقيام بعمليات حسابية نحن بغنىً عنها: *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }لنقم الآن بتعريف الخط الذي سوف نستخدمه في الموقع (العنصر body) ونُعطيه ارتفاع بقيمة 100% (تذكّر أننا نريد ارتفاع بهذه القيمة لأنه سوف يكون هناك عناصر تتموضع بشكل مطلق (absolute positioning) وسوف تحتاج أن تتمدد على ارتفاع المتصفح كاملًا): body { font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: 400; font-size: 100%; color: #333; height: 100%; }سوف نستعمل أيضًا إضافة Modernizr وسوف نُضيف الفئة "no-js" إلى وسم <html>، فإذا كانت الجافاسكربت مفعّلة فإنّ Modernizr سوف يستبدل تلك الفئة بالفئة "js". وهذا سوف يساعدنا على إعطاء خصائص CSS معينة لبعض العناصر التي لا نريدها إذا كانت الجافاسكربت معطّلة. لاحظ أيضًا أننا نحتاج أن يكون عرض الصفحة وارتفاعها بقيمة 100% فقط إذا كانت الجافاسكربت مفعّلة وعندها فقط نريد من العنصر body أن يكون له خاصية overflow: hidden: .js body { overflow: hidden; }وهذه بعض التنسيقات الخاصة بالروابط: a { color: #555; text-decoration: none; } a:hover { color: #000; }نريد من الحاوي الرئيسي أن يكون بعرض وارتفاع المتصفح كاملًا، وسوف نقوم بموضعة القائمة الجانبية خارج هذا الحاوي باستعمال الخاصية left وإعطائها قيمة سالبة تكون بنفس قيمة العرض الخاص بالقائمة الجانبية. والفكرة هي أنّه عند النقر على أيقونة القائمة الجانبية فإنّ الحاوي سوف يتحرك إلى اليمين مما يؤدي إلى ظهور القائمة الجانبية. دعونا إذًا نقوم بإعطاء الحاوي الرئيسي عرضًا وارتفاعًا بقيمة 100% وأن نُضيف الخاصية transition إلى الحاوي container: .container, .bb-custom-wrapper, .bb-bookblock { width: 100%; height: 100%; } .container { position: relative; left: 0px; transition: left 0.3s ease-in-out; }عند النقر على أيقونة القائمة الجانبية فإن فئة (class) أخرى سوف يتم إضافتها إلى الحاوي container والتي سوف تحتوي على الخاصية left: 240px (نفس العرض الخاص بالقائمة الجانبية) وبالتالي فإنّ الصفحة كاملة سوف تتحرك إلى اليمين بمقدار 240px وبالتالي ظهور القائمة الجانبية: .slideRight { left: 240px; }ولكن بدون الجافاسكربت لن نكون قادرين على القيام بما سبق لذلك سوف نقوم بإضافة الخاصية padding-left: 240px: .no-js .container { padding-left: 240px; }ونريد أن تكون القائمة الجانبية ثابتة في الجانب الأيسر بشكل افتراضي: .menu-panel { background: #f1103a; width: 240px; height: 100%; position: fixed; z-index: 1000; top: 0; left: 0; text-shadow: 0 1px 1px rgba(0,0,0,0.1); }وإذا كانت الجافاسكربت مفعلة فسوف نقوم بموضعة القائمة الجانبية بشكل مطلق وإلى اليسار بقيمة -240px: .js .menu-panel { position: absolute; left: -240px; }وهذه هي التنسيقات الخاصة بعناصر القائمة الجانبية: .menu-panel h3 { font-size: 1.8em; padding: 20px; font-weight: 300; color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); } .menu-toc { list-style: none; } .menu-toc li a { display: block; color: #fff; font-size: 1.1em; line-height: 3.5; padding: 0 20px; cursor: pointer; background: #f1103a; border-bottom: 1px solid #dd1338; } .menu-toc li a:hover, .menu-toc li.menu-toc-current a{ background: #dd1338; }وأمّا بالنسبة للقائمة الرئيسية التي سوف تحتوي على السهمين فإننا سوف نقوم بموضعتها بشكل مطلق وفوق جميع العناصر الأخرى: .bb-custom-wrapper nav { top: 20px; left: 60px; position: absolute; z-index: 1000; }كما أنّ روابط السهمين وزر القائمة الجانبية سوف يتموضعان بشكل مطلق (position: absolute) وسوف نعطيها الخاصية border-radius: 50% لنجعلها تظهر كالدائرة: .bb-custom-wrapper nav span, .menu-button { position: absolute; width: 32px; height: 32px; top: 0; left: 0; background: #f1103a; border-radius: 50%; color: #fff; line-height: 30px; text-align: center; speak: none; font-weight: bold; cursor: pointer; } .bb-custom-wrapper nav span:last-child { left: 40px; } .bb-custom-wrapper nav span:hover, .menu-button:hover { background: #000; }سوف يكون الزر الذي يفتح ويغلق القائمة الجانبية موجودًا في أعلى يسار الصفحة وسوف نقوم بإخفاء النص الموجود بداخله (نريد أن تظهر الأيقونة فقط): .menu-button { z-index: 1000; left: 20px; top: 20px; text-indent: -9000px; }لنقم الآن بإنشاء أيقونة بسيطة بدون استعمال أي صور وذلك باستعمال العنصر الزائف :after واستعمال الخاصية box-shadow والتي سوف تعمل على إنشاء الخطين العلوي والسفلي للأيقونة: .menu-button:after { position: absolute; content: ''; width: 50%; height: 2px; background: #fff; top: 50%; margin-top: -1px; left: 25%; box-shadow: 0 -4px #fff, 0 4px #fff; }وفي حالة كان الجافاسكربت معطلًا فإننا نريد أن نخفي هذه العناصر: .no-js .bb-custom-wrapper nav span, .no-js .menu-button { display: none; }لننتقل الآن إلى تنسيق الأجزاء الداخلية لكل قسم من أقسام الصفحة (bb-item). نريد أن يتم موضعة المحتوى (content) بشكل مطلق ونريد ان نستعمل الخاصية overflow: hidden، وهذا مهم لأننا نريد تطبيق شريط التمرير هنا ونريد أن نفعل ذلك فقط عند قلب/تغيير الصفحة. فإذا لم نستخدم الخاصية overflow: hidden فإنّك سوف ترى المحتوى يتداخل ببعضه. وأعيد وأكرر مرة أخرى بأنّ هذا سوف يحدث فقط إذا كان الجافاسكربت مفعلًا ولذلك سوف نستخدم الفئة "js": .js .content { position: absolute; top: 60px; left: 0; bottom: 50px; width: 100%; overflow: hidden; }العنصر <div class="scroller"> هو الذي سوف ينمو مع المحتوى لذلك سوف نعطيه الخاصية padding: .scroller { padding: 10px 5% 10px 5%; }لاحظ أننا استعملنا قيم مئوية للجوانب وذلك حتى نجعل الصفحة تتجاوب مع حجم الشاشة. دعونا نتخلص من الحواف الحادة عندما نقوم بالتمرير (scroll) وذلك باستخدام العناصر الزائفة إلى أعلى وأسفل عنصر المحتوى مع استخدام تدرج بين اللون الأبيض والشّفّاف: .js .content:before, .js .content:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20px; z-index: 100; pointer-events: none; background: linear-gradient( to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% ); } .js .content:after { top: auto; bottom: 0; background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% ); }هذا سوف يجعل النص يظهر بشكل باهت. لنقم الآن بتنسيق عناصر النصوص: .content h2 { font-weight: 300; font-size: 4em; padding: 0 0 10px; color: #333; margin: 0 1% 40px; text-align: left; box-shadow: 0 10px 0 rgba(0,0,0,0.02); text-shadow: 0 0 2px #fff; } .no-js .content h2 { padding: 40px 1% 20px; } .content p { font-size: 1.2em; line-height: 1.6; font-weight: 300; padding: 5px 8%; text-align: justify; }كل ما تبقى علينا الآن من تنسيقات CSS هو استخدام الـmedia queries. فإذا كانت الجافاسكربت معطلة فإننا لا نريد أن تظهر القائمة الجانبية إذا كان العرض أقل من 800px. كان هذا فقط مثالًا بسيطًا على كيفية التحكم بالعناصر تحت ظروف وشروط معينة. الـmedia query الأخيرة سوف تعمل على تكبير الخط قليلًا من أجل الأجهزة صغيرة الحجم كالهواتف. @media screen and (max-width: 800px){ .no-js .menu-panel { display: none; } .no-js .container { padding: 0; } } @media screen and (max-width: 400px){ .menu-panel, .content { font-size: 75%; } }كان هذا كل ما يتعلق بتنسيقات CSS ويتبقى علينا استخدام بعض الجافاسكربت. بعض الجافاسكربتسوف نبدأ اولًا بتخزين (caching) بعض العناصر حتى لا نضطر إلى استدعائها في كل مرة وسوف نقوم أيضًا بتهئية/مناداة إضافة BookBlock. نُريد أيضًا أن نقوم بضبط بعض الأمور بعد كل قلب/تغيير للصفحة وهذه الأمور هي رقم الصفحة الحالية والسلوك الخاص بإضافة jScrollPane. وهذا محدد في الاستدعاء الخلفي (callback) المسمى onEndFlip والممرر إلى إضافة BookBlock. var $container = $( '#container' ), // the element we will apply the BookBlock plugin to $bookBlock = $( '#bb-bookblock' ), // the BookBlock items (bb-item) $items = $bookBlock.children(), // index of the current item current = 0, // initialize the BookBlock bb = $( '#bb-bookblock' ).bookblock( { speed : 800, perspective : 2000, shadowSides : 0.8, shadowFlip : 0.4, // after each flip... onEndFlip : function(old, page, isLimit) { // update the current value current = page; // update the selected item of the table of contents (TOC) updateTOC(); // show and/or hide the navigation arrows updateNavigation( isLimit ); // initialize the jScrollPane on the content div for the new item setJSP( 'init' ); // destroy jScrollPane on the content div for the old item setJSP( 'destroy', old ); } } ), // the navigation arrows $navNext = $( '#bb-nav-next' ), $navPrev = $( '#bb-nav-prev' ).hide(), // the table of content items $menuItems = $container.find( 'ul.menu-toc > li' ), // button to open the TOC $tblcontents = $( '#tblcontents' ), transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, // transition event name transEndEventName = transEndEventNames[Modernizr.prefixed('transition')], // check if transitions are supported supportTransitions = Modernizr.csstransitions;لنقم أولًا بربط الأحداث ببعض العناصر التي تم تهيئتها سابقًا، كما أننا نريد أن نقوم بتهيئة jScrollPane لأول عنصر (العنصر الحالي). function init() { // initialize jScrollPane on the content div of the first item setJSP( 'init' ); initEvents(); }بما أننا سوف نقوم بتهيئة وإعادة تهيئة وتدمير jScrollPane فلنقم بتعريف دالة لذلك: function setJSP( action, idx ) { var idx = idx === undefined ? current : idx, $content = $items.eq( idx ).children( 'div.content' ), apiJSP = $content.data( 'jsp' ); if( action === 'init' && apiJSP === undefined ) { $content.jScrollPane({verticalGutter : 0, hideFocus : true }); } else if( action === 'reinit' && apiJSP !== undefined ) { apiJSP.reinitialise(); } else if( action === 'destroy' && apiJSP !== undefined ) { apiJSP.destroy(); } }سوف نحتاج إلى ربط العديد من الأحداث كالتالي: سوف يتم استدعاء الدالتين ()next و()prev الخاصتين بإضافة BookBlock وذلك عند النقر على أزرار التنقل أو السحب باستخدام الفأرة.سوف يظهر جدول المحتويات أو يختفي عند النقر على زر القائمة (tblcontents$).سوف يتم استدعاء الدالة ()jump الخاصة بإضافة BookBlock وذلك عند النقر على أي عنصر من عناصر جدول المحتويات.سوف يتم تهيئة jScrollPane عند القيام بتغيير حجم النافذة (window resize).function initEvents() { // add navigation events $navNext.on( 'click', function() { bb.next(); return false; } ); $navPrev.on( 'click', function() { bb.prev(); return false; } ); // add swipe events $items.on( { 'swipeleft' : function( event ) { if( $container.data( 'opened' ) ) { return false; } bb.next(); return false; }, 'swiperight' : function( event ) { if( $container.data( 'opened' ) ) { return false; } bb.prev(); return false; } } ); // show TOC $tblcontents.on( 'click', toggleTOC ); // click a menu item $menuItems.on( 'click', function() { var $el = $( this ), idx = $el.index(), jump = function() { bb.jump( idx + 1 ); }; current !== idx ? closeTOC( jump ) : closeTOC(); return false; } ); // reinit jScrollPane on window resize $( window ).on( 'debouncedresize', function() { // reinitialise jScrollPane on the content div setJSP( 'reinit' ); } ); } ظهور أزرار التنقل من عدمه سوف يعتمد على الصفحة الحالية، فإذا كُنّا في الصفحة الأولى فإننا سوف نرى فقط زر "التالي" وإذا كُنّا في الصفحة الأخيرة فإننا سوف نرى فقط زر "السابق": function updateNavigation( isLastPage ) { if( current === 0 ) { $navNext.show(); $navPrev.hide(); } else if( isLastPage ) { $navNext.hide(); $navPrev.show(); } else { $navNext.show(); $navPrev.show(); } }عندما نفتح جدول المحتويات (القائمة الجانبية) فإننا نريد أن تختفي عناصر التنقل وأن تظهر مرة أخرى عندما نقوم بإغلاق القائمة الجانبية. سوف نقوم بتحريك القائمة الجانبية باستخدام خاصية transition، وإذا لم تكن هذه الخاصية مدعومة من المتصفح فإننا سوف نستخدم fallback بسيط: function toggleTOC() { var opened = $container.data( 'opened' ); opened ? closeTOC() : openTOC(); } function openTOC() { $navNext.hide(); $navPrev.hide(); $container.addClass( 'slideRight' ).data( 'opened', true ); } function closeTOC( callback ) { $navNext.show(); $navPrev.show(); $container.removeClass( 'slideRight' ).data( 'opened', false ); if( callback ) { if( supportTransitions ) { $container.on( transEndEventName, function() { $( this ).off( transEndEventName ); callback.call(); } ); } else { callback.call(); } } } خاتمةهذا كان كل شيء يخص هذا الدرس أتمنى أن يكون قد أعجبك وأن تكون قد وجدته مفيدًا. ترجمة -وبتصرّف- للدرس Fullscreen Pageflip Layout لصاحبته Mary Lou.

كنت في الماضي قد قمت بإنشاء العديد من مثل هذا التأثير باستخدام الفوتوشوب، ولكن مع ظهور CSS3 وجلبها للكثير من الخصائص المدهشة فقد قررت أن أقوم بدرس حول كيفية إنشاء ذلك التأثير بمساعدة واستخدام التدرجات (gradients) والمرشحات (filters) الموجودة في CSS3. سوف نستخدم التدرجات (gradients) والمرشحات (filters) الخاصة بلغة CSS لدمج العديد من الألوان المتداخلة لإنشاء التأثير المطلوب. إنّ دعم المتصفحات للمرشحات جيد جدًا فهو مدعوم في جميع المتصفحات الحديثة ما عدا متصفحات Internet Explorer ومتصفح Opera mini (أنقر هنا لمعلومات أكثر عن دعم المتصفحات). كيف تقوم بإنشاء التأثير باستعمال CSS فقط<div class="retro"> <img src="images/retrofy-me.jpg" alt="Retro is cool!" /> </div>حتى نقوم بإنشاء التأثير سنحتاج إلى صورة، لذلك قم بإضافة صورة باستخدام وسم `<img>`. وبما أنّ بعض تأثيرات CSS تعتمد على وجود عنصر حاوي من نوع block فسوف تكون الصورة موجودة داخل وسم `<div>` (يمكنك استخدام `<p>` بدلًا من `<div>` فكلاهما من نوع block ولكني أفضل استخدام div). .retro { -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1); box-shadow: inset 0px 0px 100px rgba(0,0,20,1); background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%); display: table; } .retro img { -webkit-filter: sepia(20%) brightness(10%) contrast(130%); filter: sepia(20%) brightness(10%) contrast(130%); position: relative; z-index: -1; }يمكنك استعمال تنسيقات CSS الموجودة في الأعلى لإنشاء تأثير retro على أي صورة. كيف يعمل كل شيء نبدأ تنسيقات CSS باستعمال خاصية `box-shadow` واعطائها القيمة (inset 0px 0px 100px rgba(0,0,20,1 مما يخلق توهجًا داخليًا بلون أزرق داكن وذلك لمحاكاة الصورة باهتة الحواف. ولكن هناك مشكلة وهو أن التأثير الذي تصنعه خاصية box-shadow لن يظهر لأنه سيكون موجودًا أسفل الصورة وسوف يتمدد على العرض الكامل للصفحة وهو ما لا نريده، ولحل تلك المشكلة سوف نضيف للصورة الخصائص position: relative و z-index: -1 حتى نجعل التأثير يظهر فوقها، كما أننا سوف نعطي الخاصية display: table للعنصر الأب حتى نمنع تمدده على كامل الصفحة ويكتفي فقط بالتمدد على أبعاد الصورة. لاحظ أننا استعملنا تدرجين؛ الأول (linear-gradient(top, rgba(255,145,0,0.2) 0%, rgba(255,230,48,0.2) 60% وسوف يعطي تدرجًا عموديًا من اللون البرتقالي إلى اللون الأصفر، وتسمح لنا قيم rgba بتقليل شفافية الألوان حتى نسمح للتدرج بالظهور وكأنه عبارة عن غشاء شفاف فوق الصورة. أمّا بالنسبة للتدرج الثاني (linear-gradient(20deg, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 35% فقد أضفناه للعنصر الأب (وسم div) ويتدرج من لون أحمر ذو شفافية 50% إلى نفس اللون ولكن بشفافية 0% وبزاوية 20 درجة لمحاكاة تأثير تسرب الضوء الجميل. تعمل التأثيرات حتى الآن بشكل جيد ولكن الصورة تبدو مسطحة كثيرًا، لذلك سوف نستعمل مرشحات CSS كالتالي: (filter: brightness(10%) contrast(130%) sepia(20% للتعديل على الصورة قليلًا حتى تبدو أفضل، فخاصية brightness ستزيد سطوع الصورة بمقدار 10%، وخاصية التباين contrast تقوم بتدكين المناطق الداكنة وتفتيح المناطق الفاتحة، أمّا خاصية sepia فتضيف للصورة درجة من اللون البني المائل للصفار وبقيمة 20% حتى نحافظ على الألوان الأصلية للصورة. خاتمةكما رأيت، فبدمج خاصية gradient مع خاصية filter يمكننا إنشاء تأثيرات جميلة وعصرية وتشبه بدرجة كبيرة تلك التي يمكننا إنشاؤها باستخدام برنامج الفوتوشوب. ترجمة -وبتصرّف- للمقال Create a Trendy Retro Photo Effect Purely with CSS لصاحبه Iggy.

سنقوم اليوم بإذن الله ببناء قائمة أخرى مُطَعَّمة بتأثيرات fancy hover‏. وسأعتمد التصميم ‏المُسطح الشائع مُستخدمًا الألوان الزاهية والأيقونات الرائعة، وأُطبّق تقنيات CSS‏ المتعددة، وبذلك يُصبح هذا الدرسُ ‏مقالةً رائعةً لمصممي الويب.‏ مفهوم القائمةقبل أن نبدأ بأي تنسيقات، سنقوم بإنشاء الهيكل الأساسي للقائمة بـ HTML‏. هناك عناصر جديدة في HTML5‎‏ مثل ‏nav‏ مُتاحة هذه الأيام، حتى أنها تعمل على إنترنت إكسبلورر بمساعدة بعض الإضافات مثل ‏ html5shiv. ‏ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Flat Nav</title> <link href="style.css" rel="stylesheet" /> <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'> </head> <body> <div id="demo"> <nav> <ul> <li> <a href="#"> <span>Home</span> </a> </li> <li> <a href="#"> <span>About</span> </a> </li> <li> <a href="#"> <span>Portfolio</span> </a> </li> <li> <a href="#"> <span>Contact</span> </a> </li> </ul> </nav> </div> </body> </html>يبدأ الكود بتعريف ‏HTML5‎‏ كمرجعية للصفحة عن طريق <doctype html!>‏، عنوان الصفحة ‏‏title‏‏ ورابط ‏ملف CSS‏ ‏الذي سنقوم بإنشائه بعد ذلك ‏‏link>‎>. يأتي بعد ذلك ربط صفحة الويب بخط ‏ ‏Dosis‏‏ من ‏‏‏Google Webfonts‏. تبدأ ‏البُنية الرئيسة في القائمة بعنصر ‏‏nav‏، تكون داخله قائمة ‏ul‏. وكل ‏عنصر داخل ‏ul‏ يحتوي على رابط مرفقًا معه ‏عنصر ‏‎span‎‏ لإظهار تسمية الزر على يمين القائمة عند ‏مرور الماوس عليه.‏ تنسيقات CSSnav ul { list-style: none; overflow: hidden; position: relative; } nav ul li { float: left; margin: 0 20px 0 0; }نبدأ بعمل تنسيق ‏CSS‏ بأن نُزيل رمز النقطة من أمام كل عنصر من عناصر القائمة ‏ul‏، نجعل تلك العناصر ‏‏‏li‏ بجوار بعضها البعض. نضع تعريف التنسيق ‏overflow: hidden‏ للقائمة ‏ul‏ لتظهر تسميات ‏الأزرار متناسقة وغير متداخلة، من ثم وضع التنسيق الخاص بتسميات الأزرار ‏span‏ حتى تكون كلٌ منها ‏متمركزة في مكانها الصحيح على ‏li‏ الخاص بها ضمن القائمة ‏ul‏ الأب. nav ul li a { display: block; width: 120px; height: 120px; background-image: url(icons.png); background-repeat: no-repeat; } nav ul li:nth-child(1) a { background-color: #5bb2fc; background-position: 28px 28px; } nav ul li:nth-child(2) a { background-color: #58ebd3; background-position: 28px -96px; } nav ul li:nth-child(3) a { background-color: #ffa659; background-position: 28px -222px; } nav ul li:nth-child(4) a { background-color: #ff7a85; background-position: 28px -342px; }كل نقطة من نقاط القائمة الأربعة يتم تنسيقها لتظهر كمربع بعد إضافة الطول والعرض لها وهو ‏‎120px‎‏، قابلة ‏للتحول من تنسيق ‏inline‏ إلى تنسيق ‏block‏ باستخدام ‏display: block;‎‏. يتم تصدير جميع الأيقونات ‏من الفوتوشوب في صورة ‏sprite‏ واحدة تحوي خلفيات الصور الأربعة في نفس الملف، لذا فإن ملف ‏‏‏icons.png‏ يُعتبر صورة خلفية لجميع نقاط القائمة باستخدام مُحدِّد ‏nav ul li‏. حيث تقوم بتحديد موقع ‏الخلفية من داخل الملف الواحد حسب تموضعها فيه.‏ يُمكنك إضافة تنسيق مُحدَّد لكل نقطة من النقاط الأربعة على حِدة باستخدام مُحدِّد ‏li :nth-child‏. حيث تستطيع ‏أن تضيف ‏classes‏ لكل عنصر لوحده من عناصر القائمة ‏li‏ حسب رقم هذا العنصر. بالضبط كما حددنا لون ‏الخلفية لكل عنصر منفردًا.‏ nav ul li a span { font: 50px "Dosis", sans-serif; text-transform: uppercase; position: absolute; left: 580px; top: 29px; display: none; }نأتي الآن إلى ضبط موقع تسمية النص لعناصر القائمة، بتطبيق حدث التنسيق ‏on hover‏ لجميع العناصر مرة ‏واحدة، وذلك على ‏span‏ التي أضفناها لكل عنصر من عناصر القائمة. أولاً: نقوم بإضافة خصائص الخط ‏‏‏Dosis‏، وهي حجم الخط، و‏uppercase‏ (تحويل الحروف الصغيرة إلى حروف كبيرة) باستخدام خاصية ‏‏‏text-transform‏. ‏ افتراضيًا، فإن كل تسمية عنصر تتموضع في الزاوية العلوية يسارًا على بلوك عنصر القائمة، ولكننا نريدها أن تكون ‏على يمين القائمة ‏ul‏ خارج إطار العناصر. ببساطة، نضيف خاصية الموضع ‏position: absolute;‎‏ لعمل ‏ذلك. قمنا قبل ذلك بوضع الخاصية ‏position: relative;‎‏ إلى ‏nav ul‏ حتى يكون التموضع الحر مرتبطًا ‏بالقائمة ‏ul‏ (الأب)، عدا عن كونها مرتبطة بالعرض الكامل لشاشة المتصفح.‏ nav ul li a:hover span { display: block; } nav ul li:nth-child(1) a span { color: #5bb2fc; } nav ul li:nth-child(2) a span { color: #58ebd3; } nav ul li:nth-child(3) a span { color: #ffa659; } nav ul li:nth-child(4) a span { color: #ff7a85; }نرى الآن جميع تسميات العناصر ظاهرة فوق بعضها البعض في نفس الوقت، لذا سنقوم بإخفائها باستخدام الخاصية ‏‏‏display:none;‎‏ حتى لا تظهر أي من التسميات إلا حين يمر الماوس فوق عنصرها فقط، بإضافة ‏‏‏display:block;‎‏ إلى حدث التنسيق ‏on hover‏ الخاص بكل عنصر. بقي أن نُعطيَ كلَّ تسمية عنصر لونها ‏الخاص بها والمطابق للون خلفية عنصرها، هذا الأمر يتم في مُحدِّد ‏‎:nth-child‏ لكل عنصر على حدة.‏ النص الكامل لملف CSS‏، بعد أن انتهينا من الخطوات جميعها، سوف يصبح لدينا ملف CSS‏ جاهزًا كما يلي، بإمكانك نسخه من هنا: nav ul { list-style: none; overflow: hidden; position: relative; } nav ul li { float: left; margin: 0 20px 0 0; } nav ul li a { display: block; width: 120px; height: 120px; background-image: url(icons.png); background-repeat: no-repeat; } nav ul li:nth-child(1) a { background-color: #5bb2fc; background-position: 28px 28px; } nav ul li:nth-child(2) a { background-color: #58ebd3; background-position: 28px -96px; } nav ul li:nth-child(3) a { background-color: #ffa659; background-position: 28px -222px; } nav ul li:nth-child(4) a { background-color: #ff7a85; background-position: 28px -342px; } nav ul li a span { font: 50px "Dosis", sans-serif; text-transform: uppercase; position: absolute; left: 580px; top: 29px; display: none; } nav ul li a:hover span { display: block; } nav ul li:nth-child(1) a span { color: #5bb2fc; } nav ul li:nth-child(2) a span { color: #58ebd3; } nav ul li:nth-child(3) a span { color: #ffa659; } nav ul li:nth-child(4) a span { color: #ff7a85; } التصميم النهائي لقائمتنا ذات السِمة المسطحة: يمكن معاينة مثال حي عن الدرس، أو تصفح ملفات العمل الخاصة بالدرس. ترجمة وبتصرف للمقال: How To Create a Trendy Flat Style Nav Menu in CSS.

نعتقد جميعنا أننا نفهم هندسة المعلومات، ومع ذلك فإن هذا المجال مجال خاص نوعا ما والأشياء التي نظنّ أننا نعلمها قد لا تكون صحيحة. لم نعد نسمع عن مصطلح هندسة المعلومات كثيرًا في هذه الأوقات، هناك الكثير من الحديث عن فهم احتياجات المستخدمين وتقديم المحتوى المناسب لهم، ولكن القليل منه حول كيف يجد المستخدم هذا المحتوى. يعود هذا الأمر إلى أنّ هذا الموضوع مغطّى بشكل كامل، يوجد بعض الكتب الرائعة حول الموضوع، وعليه لا يشعر المدونون أنّ هناك المزيد لإضافته. المشكلة هي أنه عندما تتم تغطية الموضوع بشكل جيد، فإنه ينتقل إلى عالم المعرفة العامّة. إن مشكلة المعرفة العامّة أنّه يعلوها الغبار مع مرور الوقت، تظهر معلومات خاطئة وتكبر بعض الخرافات.هذا الأمر يتكرّر دائمًا، مثلما هو عليه الحال مع فكرة أن المُحتوى يجب أن يكون فوق خط الطّي الوهمي above the fold بحجة أن المُستخدمين لا ينزلون أسفل الصّفحة users don’t scroll. للأسف أصبحت هندسة المعلومات مشبعة بمثل هذه الخرافات، ولهذا أود أن آخذ القليل من الوقت لتبديد بعضٍ منها. أريد أن أبدأ مع الاعتقاد السّائد بأنه يُفترض ببنية المواقع أن تكون منطقيّة. يجب أن تكون بنية موقعك منطقيّةعندما أعمل على بنية موقع مُعيّن فعادة ما أدفع العميل وحتى زملائي إلى حافّة الجنون، حيث أنني لا أجعل بنية موقعي منطقية دائمًا. يوهم الناس أنفسهم بأن هندسة المعلومات تدور حول تنظيم المحتوى بطريقة منطقيّة. ولكنّ الأمر ليس كذلك. المشكلة هي أنّ الناس ليسوا منطقيين، نحن ندعيّ ذلك ولكننا نقوم باتخاذ القرارات بناءً على النزعات الثقافيّة، التنشئة، الأفكار المبلورة سابقًا وغيرها من العوامل. خذ على سبيل المثال سوق الخضر. عندما تقوم بزيارته أين تبحث عن الطماطم؟ تبحث عليها في قسم الخضروات أليس كذلك؟ ولكن لماذا لا تضع الأسواق الطماطم في قسم الفاكهة، فهي فاكهة ولا يُمكن تصنيفها مع الخضروات، حيث أن هذا هو التصّرف المنطقي إلا أنهم لا يقومون بذلك لأن الناس تتوقع رؤية الطماطم مع الخضروات وذلك بسبب أفكارهم المبلورة سابقًا. يجب علينا أن نتخلى عن فكرة أن تكون بنية مواقعنا منطقية بالنسبة لعقولنا، وعوضًا عن ذلك يجب أن تتناسب مع النموذج العقليّ لمستخدمينا سواء كان هذا الأمر منطقيًّا أم لا. يجب على المستخدم أن يكون قادرا إلى الوصول إلى المحتوى بثلاث نقراتفيما يخص المنطق دائمًا، هناك خرافة أخرى قد تبدو منطقيّة وتنصّ على أنه يجب على المستخدم أن يصل إلى المحتوى بـ 3 نقرات كأقصى حدّ، قد يبدو هذا الأمر منطقيّا إلا أنه لسوء الحظ ليس كذلك. بدأت هذه الخرافة من الأيام الأولى للويب عندما كان المستخدمون يستخدمون صلات dial-up. جعلت السرعات البطيئة المستخدمين يشعرون بالإحباط أثناء التصفّح بين العديد من الصفحات، وفسّر هذا الأمر بشكل مغلوط على أنّه مرتبط بعدد النقرات. في الواقع لا يوجد هناك أي دليل لدعم هذه الفرضية بل أن هناك من يقترح بأن عدد النقرات لا يهم. ما يهم عوضًا عن ذلك هو الشعور بالتقدّم إلى الهدف المطلوب. فإن شعر المستخدمون بأنهم يتقدمون، سيكونون سعيدين بالتقدّم بشكلٍ جيد بعيدًا عن النقرات الثلاث السحريّة. يجب أن يكون لديك فقط 7 خيارات (زائد أو ناقص 2)إحدى خرافات الأرقام السحرية الأخرى هي فكرة أنه لا يجب أن يكون لديك أكثر من 7 خيارات (زائد أو ناقص 2) أثناء التصفّح. يعود أصل هذا الاعتقاد إلى بحث في علم نفس أعدّه جورج ميلر. يُعلّل جورج ميلر ذلك بأن الأشخاص لا يستطيعون استيعاب أكثر من 7 خيارات (زائد أو ناقص 2) في ذاكرتهم قصيرة الأمد. إلا أنّ هذا الفرضية خاطئة لسببين: أولًا، هناك بحثُ آخر يقول أننا نجد صعوبات لكي نبقي أكثر من 4 أشياء في ذاكرتنا قصيرة الأمد، ولهذا فإن بطاقات الدّفع الإلكتروني تقوم بجمع الأرقام في مجموعات من أربعة أرقام. ثانيًا، إن صفحة الويب لا تطلب من المستخدم أن يقوم بحفظ الخيارات في الذاكرة قصيرة الأمد وذلك لأن المعلومات تظهر أمامه بشكل بصريّ.تكمن المشكلة في أن الأشخاص يحبون مثل هذه القواعد. قواعد يمكنك متابعتها والتي تجنبك القيام بأمور قد لا ترغب فيها مثل اختبار قابلية الاستخدام. ولكن في الحقيقة هذه هي الطريقة الوحيدة للتأكد مما يصلح من غيره. وبحكم أننا نتحدّث عن الأشياء التي يرغب النّاس في تجنّبها، لنُعرّج على ترتيب الأولويات. من المستحيل تجنب تحديد الأولوياتيُدهشني عدد المنظمات التي تكره تحديد الأولويات. سواء تعلّق الأمر بتحديد الأولويات للأهداف التجارية أو الجمهور. وذلك لأن تحديد الأولويات هو أمر مثير للخلاف. وهذا يعني القول إن قسما ما أكثر أهمية من قسم آخر أو مجموعة واحدة من المستخدمين لديها قيمة أكثر من غيرها. يمكن أن يكون هذا الأمر مشكلة في بعض المنظمات والتي يتراجع أداؤها بسبب غياب تحديد الأوليات. والنتيجة هي موقع على شبكة الإنترنت يحاول إرضاء الجميع وينتهي به المطاف بعدم إرضاء أيّ أحد. فتجدهم يُرتّبون عناصر التّصفّح أبجديا لتجنّب الإساءة لطرف أو لآخر، كما أن عناصر الصّفحة الرّئيسية تظهر بنفس الشّكل لتجنب مشكلة تفضيل عنصر على حساب آخر. ما لا تدركه هذه المنظمات أن تجنب تحديد الأولويات هو أمر مستحيل. فحتى ولو تم ترتيب العناصر أبجديّا، فإن العناصر التي تظهر في أعلى القائمة ستكون مُفضّلة على غيرها. بإمكانك عرض جميع عناصر الصّفحة بنفس الشّكل، لكن سيبدأ المستخدمون بتصفّح الموقع من الزاوية العلوية اليسرى. حاول أن تقوم بذلك، لكنه لا يُمكنك تجنب تحديد الأوليات وبالتالي فمن باب أولى أن تُعطي الأولية لما هو أكثر أهمّيّة. لا يهم إن لم يفهم المستخدم مصطلحا ما، ما لم يكن موجها إليهإحدى الجامعات التي كان لي شرف العمل مثال واضح عن هذا المُشكل، كان لدينا بعض التحفظات حول إذا ما كان مصطلح Alumni مناسبا لوضعه في قائمة التّصفّح الرّئيسية حيث توقّعنا أن بعض الزّوار لن يتمكّنوا من فهمه. في بداية الأمر عارضت الجامعة فكرة تغيير المصطلح، بحجة أن الناس الذين لا يقدرون على فهم مصطلح Alumni هم غير مناسبون لمؤسستهم، لكنهم قاموا بتغيير رأيهم عندما أشرنا لهم أن الطّلبة الذين لا تكون الإنجليزية لغتهم الأم لن يفهموا المُصطلح، حيث أن نسبة ليست صغيرة من مداخيل الجامعة مصدرها الطّلبة الأجانب. ثم ما لبثوا أن وقعوا في فخ المُغالطة التي يقع فيها الكثيرون: "سيتجاهل الزوّار المُصطلح إذا لم يفهموه وسيعتقدون بأنّه غير مُوجّه لهم". ولسوء الحظ هذا ليس صحيحا، فإن واجهت الزّائر مجموعة من الخيارات ولم تكن أيها هي الخطوة القادمة (الصفحة القادمة) التي يجب أن يذهب إليها فإنه من المُحتمل جدًا أن يذهب إلى قسم ما حتّى وإن لم يفهم ما يعنيه له ظانا بأنه سيحتوي على الإجابة التي يبحث عنها. والمزيد من الخرافاتخلاصة القول: القليل من المعرفة خطير ومُضرّ والأمر صحيح حتّى في مجال هندسة المعلومات ونفس الأمر مع تجربة المُستخدم. يجب أن نحذر أي النّظريات والقواعد يجب أن نُصدّق ونتّبع، حيث أنه يجب علينا أن نبحث ونحقّق من الأمر بأنفسنا ونُبث صحّته أو خطأه عبر التّجربة. ترجمة -وبتصرّف- للمقال What you know about information architecture, might not be true لصاحبه Paul Boag. حقوق الصورة البارزة: Infographic vector designed by Freepik.