البحث في الموقع

الكثير من الصور الفوتوغرافية المُلتقطة تبدو إبداعية من الوهلة الأولى لكن قد يتبادر إلى أذهاننا سؤال مُتكرّر "الصورة جميلة إنما ينقصها أمر مُعين لتكتمل!" خاصة تلك الصور التي يتم التقاطها في ظروف مناخية غير مُستقرة أو التي تُلتقط تحت الماء، كذلك الصور التي يكون شخصياتها أطفال أو حيوانات يصعب التحكم بثباتهم عند التصوير، وبالتالي وبتدقيق بسيط سنلحظ تشوهات قد ظهرت في الصور كنتيجة لتلك العوامل. سنأخذكم بجولة سريعة نستعرض خلالها خطوات بسيطة باستخدام أحد فلاتر filters برنامج Adobe Photoshop والتي تُساهم في توضيح الصور وزيادة دقتها بشكل مُذهل. الصورة المُراد التطبيق عليها: مصدر الصورة مراحل التطبيق1- نفتح الصورة المُرفقة باستخدام برنامج Photoshop من خلال استدعائها باتباع File ثُم Open (بالإمكان الاستعانة بالاختصار Ctrl+O). 2- نتوجّه إلى نافذة الطبقات Layers ونعمل على نسخ الصورة بطريقة السحب والإسقاط من خلال إتباع ما هو موضّح بالصورة (بالإمكان الاستعانة بالاختصار Ctrl+J). بعد نسخ الصورة 3- نُحدّد الصورة المنسوخة ثُم نتوجّه إلى القائمة Filter ثُم إلى Other ثُم نختر منها High pass. 4- ستظهر لدينا قائمة High pass المُنبثقة والتي سنضبط إعداداتها كما هو موضّح (Radius = 1.3 Pixels). تلميح: لا تُوجد قاعدة ثابتة للقيمة فهي تُحدّد بحسب كُل صورة، والطريقة تتم بتحريك المؤشر حتى تظهر لدينا حدود الصورة فقط كما هو مُوضّح حيث ضبطنا القيمة في مثالنا على 1.3) 5- نتوجّه إلى نافذة الطبقات layers ثُم نختر من قائمة الخيارات الإعداد "Overlay" كما هو موضّح 6- النتيجة النهائية للتطبيق قبل وبعد تطبيق الحيلة على مجموعة مُختلفة من الصور مصادر الصّور: http://www.morguefile.com/archive/display/844366http://www.morguefile.com/archive/display/906123http://www.morguefile.com/archive/display/913800http://www.morguefile.com/archive/display/889982

هذا الدرس الأول من سلسلة نصائح وحيل فوتوشوب، التي سنتعلم من خلالها العديد من الحيل والأدوات عند التصميم ببرنامج فوتوشوب بالإضافة إلى مجموعة من النصائح حول الإستخدام الأمثل للبرنامج. سنتعلم في هذا الدرس كيفية تصميم شريط إعلاني (Banner) متحرك صغير وبسيط بخطوات سريعة وبسيطة. افتح ملفا جديدا في برنامج فوتوشوب بحجم 400×75 بكسل. طبّق على الخلفية تدرّج لوني كما في الصورة. ارسم تحديد دائري يظهرُ طرفهُ فقط في الجزء الأيسر من الشريط. امسح هذا الجزء المحدد. أبقِ على التحديد وارسم بداخله تدرج لوني مطابق للخلفية مع عكس اتجاهه. أبقِ على التحديد أيضًا ثم اذهب للقائمة: Select > Modify > Contract وأدخل القيمة 5 وبعدها اضغط OK ثم طبّق تدرّج لوني على ما بقي من التحديد من الرمادي الفاتح إلى الأبيض كما في الصورة. أدخل الشعار في هذا الجزء الرمادي الفاتح. أدخل عنوان الشريط الرئيسي في الموقع الذي تراه مناسبًا. أدخل العنوان الفرعي في المساحة المتبقية مع جعلها بحجم خط أصغر وبألوان متناسقة مع التصميم بصورة عامة (علمًا أنّه يوجد العديد من العناوين الفرعية ولكننا سنقوم بإدخالها لاحقًا). انسخ طبقة النص الفرعي بالضغط على Ctrl+J بعد تحديد طبقة النص طبعًا ثم حدد النسخة واذهب للقائمة: Filter > Blur > Motion Blur ثم أدخل القيمة 12 وبعدها OK (سيسألك لدى تنفيذ هذا الفلتر عن موافقتك على تحويل الطبقة إلى صورة نقطية فاضغط موافق). أخفِ هاتين الطبقتين ثم أدخل العنوان الفرعي الثاني في طبقة جديدة وكرّر عملية تطبيق الفلتر عليه بذات الأسلوب. كرّر العملية مع جميع العناوين الفرعية ثم فعّل نافذة TimeLine من قائمة Window ثم أدخل الأطر تباعًا مع إظهار النص الفرعي أولًا فقط ثم النص الفرعي الأول مموّه بالفلتر ثم النص الفرعي الثاني وهكذا حتى النهاية مع جعل مدّة عرض إطار النص الفرعي العادي 1 ثانية ومدّة عرض النص الفرعي المموّه 0.1 ثانية. اذهب إلى القائمة: File > Save to Web ثم احفظ الملف بصيغة GIF مع تخصيص الإعدادات المناسبة والنتيجة ستكون كالتالي:

إن كنت من الذين يستخدمون خدمة Buffer للنشر على وسائل التواصل الإجتماعي وكنت تبحث عن أفكار وحيل لجعل تجربة استخدامك لهذه الخدمة أفضل وأسرع، فإليك بعضًا منها. سأقدم إليك 12 فكرة يمكنك الاستفادة منها في جعل تجربتك في استخدام Buffer أكثر انسيابية من ذي قبل. 1- حدد الحسابات الافتراضية هل هناك شبكات اجتماعية معينة في حسابك على Buffer تضع فيها مشاركاتك بصورة مستمرة؟ هنالك طريقة سهلة لاختيار هذه الحسابات بشكل تلقائي في كل مرة تفتح فيها إضافة Buffer أو مربع الكتابة (المُحرّر) Composer. وللقيام بذلك يمكنك وبكل بساطة النقر على المساحة الخالية بجوار أسماء الحسابات التي ترغب في جعلها حسابات افتراضية. ستلاحظ ظهور علامة إلى جانب الحساب المحدد كحساب افتراضي، وإن كنت ترغب في إزالة التحديد عن الحسابات الافتراضية يمكنك بكل بساطة النقر على العلامة الجانبية. 2- إغلاق الجدول الزمني للمنشورات هل ترغب في إيقاف المشاركات المجدولة بشكل مؤقت دون أن تفقد المواعيد التي حدّدتها مسبقًا؟ هنالك طريقة سهلة للقيام بذلك، اذهب إلى تبويب (Schedule) ثم اضغط على جميع أيقونات أيام الأسبوع لتتحول إلى اللون الأبيض، وبهذا ستتوقف المشاركات المجدولة بشكل مؤقت إلى أن تصبح جاهزًا للبدء بنشر المشاركات من جديد. ولإعادة تشغيل الجدول الزمني، اضغط على أيقونات الأيام للتحول إلى اللون الأزرق وسيعود كل شيء إلى ما كان عليه في السابق. 3- تغيير المنطقة الزمنية يمكنك تغيير المنطقة الزمنية لكل حساب من حساباتك وحسب الحاجة. لنفترض أنّك تسافر إلى أماكن ذات مناطق زمنية مختلفة وترغب في أن يتغير الجدول الزمني للمنشورات وفقًا لذلك. يمكنك التوجّه إلى تبويب (Schedule) وستجد فوق الجدول الزمني حقلًا نصّيًا لتغيير المنطقة الزمنية. اكتب اسم المدينة (أو أقرب مدينة كبيرة) في هذا الحقل ثم اختر المدينة المطلوبة من قائمة الاختيارات التي سيقدّمها لك الموقع. وإن كنت ترغب في تطبيق هذه المنطقة الزمنية على جميع حساباتك، يمكنك النقر على النص أسفل الحقل "?Change all accounts to this timezone" وسيتمّ ضبط جميع حساباتك إلى المنطقة الزمنية الجديدة. 4- اضغط على أي تاريخ لمشاهدة المنشور إن احتجت إلى إيجاد المنشور الخاص بتحديث قمت بإرساله مسبقًا، فتوجّه إلى تبويب Analytics ثم ابحث عن التحديث وانقر على الوقت الذي تمّت فيه مشاركة التحديث، وستتوجه حينها إلى الشبكة الاجتماعية التي شاركت التحديث فيها. 5- تبديل نظام الساعة بين 12 و 24 ساعة يمكنك التبديل بين نظام 12 و 24 ساعة حسب رغبتك، وللقيام بذلك توجّه إلى تبويب Schedule ثم انقر على الرابط النصي الموجود في أعلى الجدول الزمني. سيوجّهك هذا الخيار إلى صفحة إعدادات الوقت حيث يمكنك اختيار التنسيق الذي تفضّله عن طريق النقر على الأيقونة. 6- سحب المحرر في أرجاء الصفحة يمكنك سحب صندوق المُحرّر في أرجاء الصفحة، فعلى سبيل المثال قد تحتاج إلى تدقيق شيء ما في المقالة التي سوف تشاركها عبر وسائل التواصل الاجتماعي ولكن صندوق الكتابة يغطّي جزءًا من المقالة. ولتحريكه، يمكنك وضع مؤشر الفأرة فوق أي مساحة فارغة ليتحول إلى سهم رباعي الرؤوس، يمكنك حينها سحب النافذة إلى أي مكان في الصفحة. يمكن لهذه الخاصية أن تفيدك أيضًا عندما تصبح أيقونة "Add to Queue" خارج الصفحة، فبمقدورك أن تسحبها مجددًّا إلى داخل الصفحة. 7- رفع صور مخصصة يمكنك اختيار صوّر مخصّصة ليتم مشاركتها على Facebook و LinkedIn عندما تقوم بمشاركة رابط معيّن، ويكون ذلك عن طريق النقر على الصورة المرفقة مع الرابط الذي ترغب في مشاركته، ثم اختيار الصورة الخاصّة التي ترغب في رفعها. (ملاحظة: لا تعمل هذه الميزة عند مشاركة الروابط على +Google في الوقت الحاضر). 8- أعد خلط عناصر قائمة الانتظار عشوائيا قد تحتاج في بعض الأحيان إلى إعادة خلط العناصر في قائمة الانتظار، ويمكنك القيام بذلك عن طريق أيقونة Shuffle والموجودة فوق قائمة الانتظار الخاصّة بك. سيؤدّي النقر على هذه الأيقونة إلى خلط عناصر قائمة الانتظار وتغيير ترتيبها عشوائيًا. 9- تحريك تحديث معين إلى بداية قائمة الانتظار قد تدرك في بعض الأحيان عند إضافتك لتحديثات جديدة إلى قائمة الانتظار رغبتك في أن يضاف التحديث الذي تعمل عليه في الوقت الحاضر في بداية قائمة الانتظار ليكون هو المنشور القادم. هناك طريقتان يمكنك اتباعهما لتحقيق ذلك: إن كنت لم تضف بعد المنشور إلى قائمة الانتظار ولا زلت في طور كتابته، يمكنك النقر على أيقونة "Add to Queue" لتظهر لك خيارات ثلاث. انقر على "Share Next" وسيُضاف التحديث تلقائيًا إلى بداية قائمة الانتظار. إن كنت قد أضفت المنشور إلى قائمة الانتظار، فضع مؤشر الفأرة عليه ثم انقر على "Move to Top"، وسيتحوّل العنصر إلى بداية قائمة الانتظار ليكون هو المنشور القادم. يمكنك الاستفادة من هذه الطريقة أيضًا إن كنت ترغب في مشاركة المنشور فورًا، فبدلًا من النقر على "Share Next" أو "Move to Top" يمكنك النقر على "Share Now"لتتم مشاركة المنشور على الفور. 10- اختصارات لوحة المفاتيح ستستفيد كثيرًا من هذه الخاصّية إن كنت من الذين يحبون التعامل مع البرامج عبر لوحة المفاتيح، إذ يقدّم Buffer عددًا من الاختصارات التي يمكنك الاستفادة منها في تسريع عملية النشر، وإليك بعضًا منها: Alt+B (لنظام ماك Option+B) لفتح صندوق المشاركة في لوحة التحكم. Alt+B (لنظام ماك Option+B) لفتح إضافة Buffer (الخاصة بمُتصفّحك) في أي موقع. CTRL+Enter (لنظام ماك CMD+Enter) لإضافة عنصر إلى قائمة الانتظار. Alt + (رقم) للتنقّل بين الحسابات الخاصّة بك. إن كنت ترغب في مشاهدة تطبيق عملي لهذه النصائح يمكنك متابعة مقطع الفيديو التالي: هناك المزيد من المقاطع المفيدة في قناة Buffer على موقع YouTube. 11- إعادة مشاركة المنشورات بواسطة تقويم وسائل التواصل الاجتماعي أطلق موقع Buffer مؤخّرًا ميزة جديدة وهي تقويم وسائل التواصل الاجتماعي Social Media Calendar والتي تسمح بمشاهدة وإدارة منشوراتك في الشبكات الاجتماعية وبصورة سريعة. وبالإمكان إعادة مشاركة المنشورات القديمة عن طريق التقويم وبصورة مباشرة، وسيوفّر عليك هذا الكثير من الوقت لأنّك ستتمكن من تعديل منشور قديم لإعادة مشاركته بدلًا من كتابة منشور جديد كلّيًا. من قائمة الانتظار اختر نمط العرض Calendar. توجّه نحو الأسابيع السابقة وعندما تجد المنشور الذي ترغب في مشاركته مرة أخرى، ضع مؤشر الفأرة عليه واضغط على أيقونة Re-Buffer، ليظهر لك مُحرّر Buffer وستتمكن من كتابة التحديثات بصورة اعتيادية. 12- اصنع صورة تعدّ الصور وسيلة عظيمة لزيادة التفاعل في وسائل التواصل الاجتماعي، (بيّنت الدراسات أن الصور تزيد من نسبة التفاعل مع المنشورات) ويمكنك أن تصنع صورتك الخاصة بسهولة ويسر باستخدام الأداة Pablo. إن كنت تكتب منشورًا جديدًا وأردت أن تضيف صورة إليه، انقر على رابط "Create an image" (ستجد رابطًا في أعلى يمين الصفحة وآخر أسفل صندوق الكتابة). ستفتح نافذة جديدة لـ Pablo. يمكنك الآن إنشاء صورتك وتحميلها وإرفاقها مع المنشور الخاصّ بك. آمل أن تساعدك هذه النصائح على تحقيق المزيد من الإنتاجية مع Buffer، وآمل كذلك أن تزداد سرعتك في مشاركة المنشورات بالاستعانة بهذه النصائح. هل لديك نصيحة أخرى يمكنها أن تساعد في جعل التعامل مع Buffer أكثر سرعة وسهولة؟ لم لا تشاركنا إيّاها في التعليقات؟ ترجمة -وبتصرّف- للمقال 12Tiny Buffer Tweaks to Shave Even More Time Off Your Social Media Sharing لصاحبته Sandrine Sahakians.

تعد مكتبة jQuery واحدة من أكثر المكتبات استخداما للإضافة على الصفحات؛ إذ أنها تجعل من التعامل مع نموذج كائن المستند Document object model, DOM أمرا في منتهى اليسر. لا شك أن السهولة في التعامل سبب أساسي في شعبية jQuery، إذ يبدو بالإمكان فعل أي شيء نريده عن طريق هذه المكتبة. توجد، من بين الخيارات المتاحة أمامنا، مقاطع Snippets تجنح إلى الظهور المرة تلو الأخرى. سنعرِض في هذا المقال إلى عشرة مقاطِع سيستخدمها الجميع، من المبتدئ إلى المتمكن، مرارا وتكرارا. زر العودة إلى الأعلى// عد إلى الأعلى $('a.top').click(function(){ $(document.body).animate({scrollTop : 0}, 800); return false; }); // Anchor tag أنشئ وسما للمربط <a class="top" href="#">عد إلى الأعلى</a>يتضح أننا لا نحتاج إلى إضافة Plugin لـ jQuery من أجل الحصول على تحريك سهل إلى الأعلى؛ يكفي استخدام دالتي animate و scrollTop. يمكن تغيير المكان الذي يحُط فيه شريط التمرير عبر تغيير قيمة scrollTop. في المثال أعلاه استخدمنا القيمة 0 لأننا نريد العودة إلى أعلى الصفحة، لكن لو أردنا زَيحانًا offset بقيمة 100px فيمكن إدراج هذه القيمة. يتلخص ما فعلناه في تحريك جسم المستند Document body طوال 800 ملي ثانيّة حتى يصل إلى القمّة. التحقق من تحميل الصور$('img').load(function() { console.log('image load successful'); });تحتاج أحيانا إلى التأكد من تحميل كل الصور قبل إكمال السكربت؛ تؤدي الأسطر الثلاثة أعلاه هذه المهمة بكل يُسر. يمكن أيضا التحقق من تحميل صورة معينة عبر إبدال وسم tag بمعرِّف ID أو صنف Class. تصحيح الصور المعطوبة تلقائيا$('img').error(function(){ $(this).attr('src', 'img/broken.png'); });تحصل أحيانا أعطاب في روابط الصور على الموقع يكون معها إبدال الروابط يدويا أمرا صعبا. يعمل المقطع أعلاه على إبدال الصور المعطوبة تلقائيا مما ينقِذ من الكثير من المشاكل. تبديل الصنف عند الحومان Hover$('.btn').hover(function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); } );نرغب عادة في تغيير مظهر العناصر القابلة للنقر في صفحة الويب عندما يحوم حولها المؤشر وهو بالضبط ما تفعله الأسطر في المقطع أعلاه؛ فتضيف صنفا للعنصر عند الحوم حوله ثم تزيل الصنف عندما يكُفّ المستخدِم. كل ما عليك فعله هو إضافة التنسيق المرغوب ضمن ملف CSS. تعطيل حقول الإدخال$('input[type="submit"]').attr("disabled", true);قد تريد تعطيل زر الإرسال أو حقل إدخال إلى أن يؤدي المستخدم إجراء معينا (التأشير على صندوق “قرأتُ الشروط”، مثلا). يضيف المقطع خاصية disabled (مُعطَّل) إلى الحقل مما يتيح لك تفعيله عندما تريد. كل ما عليك فعله لتفعيل الحقل هو تنفيذ الدالة removeAttr مع تمرير المُعطى disabled على النحو التالي: $('input[type="submit"]').removeAttr("disabled");إيقاف تحميل الروابط$('a.no-link').click(function(e){ e.preventDefault(); });قد نود أن تؤدي الروابط أعمالا أخرى غير الانتقال إلى صفحة أو حتى إعادة تحميلها، وهو ما تعمل عليه الأسطر أعلاه عبر تعطيل الإجراء الافتراضي Default action. قد يكون السبب - على سبيل المثال - تنشيطَ سكربت آخر. التبديل بين تأثيريْ التلاشي Fade والانزلاق Slide// تلاش $(".btn").click(function() { $(".element").fadeToggle("slow"); }); // تبديل $(".btn").click(function() { $(".element").slideToggle("slow"); });تأثيرا التّلاشي والانزلاق من أكثر التّأثيرات في jQuery استخداما. عندما نريد فقط عرض عنصر عند النقر فإن دالتي fadeIn وslideDown ملائمتان تماما. لكن إن أردنا أن يظهر العنصر بعد النقرة الأولى ثم يختفي بعد الثانية فهذا المقطع يؤدي المهمة بنجاح. تأثير الطّيّ// أغلق كل اللوحات $('#accordion').find(‘.content').hide(); // تأثير الطّيّ $('#accordion').find('.accordion-header').click(function(){ var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });كل ما تحتاجه إلى جانب هذا المقطع هو شفرة HTML المناسبة للتأثير. أولا نغلق كل اللوحات ثم عند حدث النقر click ينزلق المحتوى المربوط بالترويسة accordion-header بالتتابع. هذه طريقة سهلة للحصول على تأثير طي بسرعة. تحديد ارتفاع عنصر div اعتمادا على آخر$('.div').css('min-height', $('.main-div').height());تمكِّن هذه الطريقة من تحديد نفس الارتفاع لعنصريْ div بغض النظر عن محتوى كل منهما. في السطر أعلاه عيّنا ارتفاع عناصر div بحيث يكون لديها على الأقل ارتفاع العنصر main-div. لائحة بألوان مختلفة حسب العناصِر الزوجية والفردية$('li:odd').css('background', '#E8E8E8');يمنح هذا السطر خلفية باللون المحدد للعناصر الفردية من اللائحة؛ مما يمكنك من الحصول على لائحة مخطَّطة - مثل هيئة الحمار الوحشي - عبر إضافة لون خلفية افتراضي في ملف CSS تأخذه العناصر الزوجية من اللائحة. لا يقتصر استخدام هذه الطريقة على اللوائح بل يتعداها إلى الجداول وعناصر div وغيرها. ترجمة بتصرّف لمقال 10 jQuery snippets every designer should know لصاحبته Sara Vieira.