عمل بنر إعلاني متحرك/ثابت إحترافي لموقعك أو مدونتك في دقائق و مجانا (لا تحتاج خبرة !)

هل تود الحصول على بنر إعلاني إحترافي متحرك أو ثابت حسب رغبتك دون دقع سنت واحد , أو أي خبرة في التصميم ؟

يمكنك من الأن البدأ في تصميم البنرات الإعلانية لمواقعك و مدوناتك , أو تقديم خدمات في هذا المجال في مواقع الخدمات المصغرة و البدأ في تحقيق مدخول من الأنترنت .

عبر المواقع المذكورة أسفله , إدخر جهدك , أموالك و وقتك و احصل على بنراتك إعلانية بتصميم و ذوق مميزين و بالأحجام التي تريدها .

1- موقع bannerfans

يمكنك من خلاله إختيار الأحجام و القياسات التي تودها للبنر , مع إمكانية تعديل النص و الخلفية و الإطار و غيرها من المميزات التي أتركك لتكتشفها بنفسك .

و من ثم يمكنك تحميل البنر أو أخذ الرابط المباشر له لإستخدامه.

(يتوفر على قسم قوالب للبنرات لم يتم إطلاقه بعد إلى تاريخ كتابة التدوينة)

2- موقع fotor

موقع غني عن التعريف للتعديل عن الصور و إضافات تأثيرات جميلة لها .

به أيضا قسم مخصص للبنرات . بعد الدخول له , إختر الحجم الذي تريده عبر النقر عليه .

ستظهر لك قائمة كبيرة من الأمثلة و القوالب الجاهزة التي يمكنك التعديل عليها ببضع نقرات .

ستستفيد منه حتما !

3- موقع canva

لا يقل روعة من المواقع المذكورة سابقا , فقط عليك إنشاء حساب جديد بالموقع للتمكن من الإستفادة منه (يمكنك ربطه بحسابك على الفيسبوك أو جيميل ) .

4- موقع flashvortex

إن كانت الإعلانات الثابثة لا تمثل حلا ناجحا لك , يمكنك الإلتجاء إلى البنرات الإعلاناية المتحركة عبر هذا الموقع الرائع .

يتوفر في الموقع أكثر من مثال عن البنرات و بتأثيرات جميلة و خفيفة .

و يكون بذلك حصلت على banner رائع , مجانا , و دون خبرة ! مبروك !!

في الختام , أدعوك أخي الكريم إلى نشر المقالة على حساباتك على مواقع التواصل الإجتماعي , فتعليقك المشجع و مساعدتك البسيطة تعني لي الكثير ! :)

ماهو التصميم المادي (material design) و الفرق بينه و بين التصميم المسطح (flat design)

بالنسبة لمستخدم عادي , أو شخص غير مهتم بالتصميم و أنواعه , فلا يوجد فرق بين التصميم المادي (material design) و الذي سنتعرف عليه في هذه التدوينة و سنكتشف مميزاته و بين التصميم المسطح  "الفلات" (flat design) و الذي تم التطرق إليه في تدوينة سابقة .
يستحق الذكر أن كلا الطرفين يميلان إلى البساطة و الخفة .

حيث أن نقاط الإختلاف بينها طفيفة جدا لدرجة أنه يصعب للبعض التفريق بينهما .

لكن هل تسائلت لم أغلب التطبيقات اليوم و بعض المواقع (أمثلة : تطبيقات :يوتيوب , جيميل , دراف , كروم.. وغيرها من تطبيقات جوجل)  تستخدم التصميم المادي ؟

دعنا نتعرف أولا على Material design ..

فماهو التصميم المادي ؟

هي مجموعة من القواعد في التصميم تم تقديمها من طرف جوجل تنفّذ على واجهة المستخدم الرسومة و التي يعبر عنها بـ "GUI"
(Graphical User Interface) للبرامج و التطبيقات .
و قد قدمت شركة "جوجل" هذا النمط من التصاميم خلال مؤتمر Google I/O في 25 يونيو (جوان) 2014 .

الفرق بين التصميم المسطح و التصميم المادي ؟ (Flat & Material) ؟

من خلال إستجوابات للبعض من كبار المصممين , يمكن أن نجد أن الفرق يكمن في :

1- التصميم المسطح مجرد تماما من البعد الثالث في حين أن التصميم المادي يأخذ هذا البعد بعين الإعتبار .

2- إختلافات بسيطة في حدة الألوان .

3- التصميم المادي عبارة عن تطوير للتصميم المسطح عبر ادراج بعض التفاصيل فيه .

4- التصاميم المادية تقلد الواقع أكثر من التصميم المسطح .

و هنا بعض الصور التي يمكن أن تقربك أكثر من الـ material design

تعليقك المشجع و مشاركتك التدوينة على مواقع التواصل الإجتماعي تدفعني للعمل أكثر فأكثر :) شكرا

ماهو البوتستراب؟ و لماذا عليك إستخدامه كمصمم و مطور مواقع؟ كيف أتعلمه؟

أخي مصمم أو مطور المواقع ..

هل فكرت يوما في اختزال ساعات من عملك في غضون دقائق ؟

هل تريد تنفيذ فكرة قد تراها معقدة , بأسرع وقت ؟

هل تطمح إلى برمجة و تصميم موقع الكتروني متجاوب مع جميع الأجهزة بكل سهول و بساطة ؟

أنت في المكان الصحيح ..

ماهو البوتستراب ؟

البوتستراب أو "bootstrap" أصبح حتما أشهر إطارات العمل للواجهات الأمامية في الويب "frontend framework" منذ إطلاقه سنة 2011 من قبل تويتر .

و بفضل التطورات و التحسينات التي شهدها , أثبت البوتستراب أن أي مصمم مواقع , يمكنه إنشاء موقعه التجاوبي  بتصميم جذاب حتى لو كان لا يجيد إلا القليل من الـ html و الـ css .

بإستعمالك إطار bootstrap , ستوفر وقتك و جهدك و تضمن نتيجة فعالة .

الموقع الرسمي للبوتستراب .

لماذا عليك إستخدامه كمصمم و مطور مواقع

و من بين الأسباب التي تجعلك تتعلم البوتستراب و تستعمله في مشاريعك :

- التجاوب مع الأجهزة اللوحية و الهواتف الذكية

bootstrap سهل و مرن في الإستخدام , و يمكنك من جعل الموقع سهل متوافق ليس مع الحواسيب فقط بل أيضا مع الهواتف و التابليت و الشاشات الصغيرة .

- التوافق مع المتصفحات

البوتستراب متوافق ليس فقط مع المتصفحات الحديثة , بل أيضا يشكل حلا لمستخدمي "interner explorer 8" .

تابع إرشادات البوتستراب و تقيد بها ليكون موقعك متوافقا مع كل المتصفحات .

- مفتوح المصدر

بوتستراب مشروع مفتوح المصدر Open Source .. تم إصدارها تحت رخصة أم أي تي "MIT" .و هو مستضاف على github .

و هذه أسباب تجعل من البوتستراب أداة قد لا يمكن الإستغناء عنها عند عدد هام من مصممي المواقع .

دروس و دورات تعلم بوتستراب bootstrap

الأن أنت تتسائل كيف تتعلم البوتستراب ؟
ممتاز ..

1- هنا دورة بالفيديو , صوتا و صورة من موقع advphp , يتطرق إلى أهم الدروس التي قد تحتاج اليها في تصميم موقع متجاوب و مميز
من هنا 

2- إن كنت من أصحاب الصبيب الضعيف من الانترنت و تحميل الفيديو يأخذ الكثير من وقتك , فلم أنساك أيضا ! :)
دورة كاملة مكتوبة بالانجليزية عن ال bootstrap من موقع w3schools الغني عن التعريف .
من هنا 

3- تريد ان تكون الدورة بالعربية و الدروس الانجليزية تربكك و لا تجعلك تتعلم بسهولة ؟
لا يوجد إشكال , كتاب يشرح مواضيعا ستحتاجها في موقعك باللغة العربية .
من هنا

الموضوع متعوب عليه , تعليقك المشجع و مشاركة التدوينة مع أصدقائك على مواقع التواصل الإجتماعي تحفزني نحو النشر أكثر و الإفادة :)

إضافة صندوق الدردشة أو شات إلى موقعك أو مدونتك في بلوجر

السلام عليكم متابعي مدونة مدون بلوجر في شرح جديد و درس بسيط و مفيد لأصحاب المدونات .

صندوق الدردشة الذي ستقوم بإضافته , سيمكن زوار موقعك من التحاور و لم لا تبادل الخبرات في نفس الصفحة دون تحديثها .

من المميزات الرائعة و التي لا يمكنني المرور دون ذكرها , أنّ  :

- صاحب الموقع (صاحب الشات) بإمكانه حظر أي شخص في الشات إذا صدرت منه رسائل سبام أو أي رسائل مزعجة أخرى .

- الحوار مع زوار الموقع فوري و لا يتطلب تحديث الصفحة

- هناك أكثر من تصميم و شكل للإضافة و يمكنك إختيار الألوان التي تريدها و تعديلها متى شئت 

- إظهار عدد المتواجدين في الشات 

إنشاء صندوق دردشة لمدونتك : 

أولا توجه نحو موقع chatango .
ستظهر لك 3 أمثلة لصناديق الشات : Box / Ticker / Tab .
اختر الشكل الذي تفضل ظهوره في مدونتك عبر الضغط عليه .
لتدخل إلى إعدادات الصندوق و هذه صورة تفسر لك كلّ التعديلات التي يمكنك أن تقوم بها :

و من ثم اضغط على Create Group في الأعلى .
ليقوم مباشرة بتوليد كود الإضافة .

قم بنسخ هذا الكود لأنك ستستحقه .

تركيب صندوق الدردشة إلى بلوجر :

الدخول للوحة التحكم في بلوجر

الدخول إلى التخطيط و إختيار إضافة HTML/JAVASCRIPT

إضافة الكود الذي قمت بنسخه

حفظ

مبروك !! الأن أن تشاهد صندوق الدردشة في مدونتك  ^_^ .
تعليقك البسيط و مشاركتك للتدونية على مواقع التواصل الإجتماعي تحفزني للنشر و الإفادة ! :)

إضافة عدد مشاهدات الموضوع لمدونات بلوجر

إضافة عدد مشاهدات الموضوع تعتبر من بين الإضافات المميزة للمدونات على منصة بلوجر , و كون بلوجر لا يوفر هذه الإضافة عكس الووردبريس , فإن علينا الإلتجاء إلى الإضافات و الطرق "الملتوية" عبر الإلتجاء إلى بعض الخدمات المجانية التي تمثل حلا ناجحا , مثل خدمة Firebase التي توفر لك قاعدة بيانات تتسجل فيها عدد مشاهدات الموضوع تصل حتى 5GB !

أخي الكريم , فقط ركز معي و تابع الشرح بالصور :

1- توجه إلى لوجة تحكمك على بلوجر

2- توجه نحو القالب للتعديل عليه , و من ثم قم بأخذ نسخة إحتياطية للقالب (backup) حتى تتفادى أي مشكلة قد تواجهك .

3- تأكد أنك تستخدم مكتبة جيكويري (إبحث عن كلمة JQuery للبحث عن رابط إدراج الجيكويري , لو وجدته ممتاز , لو لم تجده أضف الكود أسفله مباشرة فوق 

)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

4- توجه نحو موقع firebase و أنشئ حسابك عبر هذا الرابط .
5- أنشئ قاعدة بيانات في حسابك على الموقع بالإسم الذي تريده
مثل ماهو موضح بالصورة :

سجل الرابط الذي يظهر لك تحت APP URL , لأنك ستجتاجه فيما بعد .

مثل : https://modawin-blogger.firebaseIO.com

6- توجه إلى قالبك , و ابحث عن : 

]]>

 فوقه مباشرة أضف هذا الكود :

/*-------- Post Views ----------*/ #views-container { width: 85px; float: right; } .DrROloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-UIO5uVcibmM7Jsd-h4mSziRTwYPAjtxARmPcBVuBFgngkH5Kaw8LtM4o-FYfuivDVk6-OW8Ifik1OF-hbSEtFNAlN1lAt89W_dvQLCNgzVaYZwUa8B7qiVX0MMKQwhr0AAxgxOWE-hL/s32-no/Mini+balls.gif') no-repeat right center; width: 16px; height: 16px; } .viewscount { float: right; color: #EE5D06; font: bold italic 14px arial; } .views-text { float: right; font: bold 12px arial; color: #333; } إقرأ المزيد http://www.condaianllkhir.com/2014/09/views-download-counter-blogger.html#ixzz3fxyKn7kd

7- الأن إبحث عن :

فوقه مباشرة , أضف هذا الكود :

<!-- Post Views --> <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace('loading', ''); }, 10); </script> <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> <script> $.each($('a[name]'), function(i, e) { var elem = $(e).parent().find('#postviews').addClass('DrROloading'); var blogStats = new Firebase("https://modawin-blogger.firebaseIO.com/pages/id/" + $(e).attr('name')); blogStats.once('value', function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr('name'); isnew = true; } elem.removeClass('DrROloading').text(data.value); data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data); else blogStats.child('value').set(data.value); } }); }); </script>

مغيرا https://modawin-blogger.firebaseIO.com بالرابط التطبيق الذي أنشأته .

8- أخر مرحلة , إبحث عن المكان الذي تريد أن تدرج فيه الإضافة بعد إقرأ المزيد أو في تحت العنوان ..الخ ,

يمكنك أن تبحث عن  

ستجدها أكثر من مرة , ستحتاج الثانية أو الثالثة حسب قالبك .

فوقه مباشرة , ألصق هذا الكود :

<!-- Post Views Counter --> <div id='views-container'><span class='views-icon'/><div class='views-text'>عدد المشاهدات:</div><div class='DrROloading viewscount' id='postviews'/></div>إقرأ المزيد http://www.condaianllkhir.com/2014/09/views-download-counter-blogger.html#ixzz3fy0bePwB

ثم إضغط حفظ .. ربما تركيب الإضافة معقد قليلا , لذلك أي مشكلة تواجهك أترك تعليقك و سيتم الرد عليه .

تعليقك المحفز و مشاركتك التدوينة مع أصدقائك يعني لي الكثير ! :)

5 قنوات عربية و أجنبية على اليوتيوب عليك متابعتها إن كنت تريد إحتراف الأفتر إفكت !

أدوبي أفكتر إفكت .. ذلك البرنامج الخفيف الجبار من شركة Adobe ..

ستتعرف اليوم أخي الكريم عن كيفية البدأ في تعلمه و إستعماله بإحترافية ^^ .

ماهي إستعمالات أفتر إفكت ؟

يستخدم البرنامج في الفيديو الرقمي , المؤثرات في الأفلام و بعض الأعمال التلفزية مثل الإعلانات و مقدمات البرامج و الموشن جرافيك .

كيف يمكنني أني أستفيد من برنامج أفتر إفكت ؟

على غرار المتعة في إستعمال البرنامج و الإستمتاع في تعلمه و إكتشاف أسراره , يمكنك أن تستفيد من البرنامج في أكثر من مجال كتصميم مقدمات لفيديوهاتك على اليوتيوب أو مواقعك على الأنترنت ,, أو حتى في ربح المال من خلال بيعها لزبائن أو شركات تدفع لك مقابل جهدك ..

لماذا أفتر إفكت ؟  : 

- سهل الإستعمال و التعلم بفضل واجهته البسيطة و كثرة الدروس التي تشرح إستخدامه على الإنترنت ..

- يخول لك التحكم في العمل 2D أو 3D .

- إمكانية التعامل  و التكامل مع منتجات أدوبي الأخرى مثل الفوتوشوب , بريميير برو , فلاش .. 

- يمكنك أن تستعمل البرنامج إن كنت من مستخدمي الويندوز أو الماك .

- فضلا عن ال plugins و ال presets و غيرها من الأدوات التي تسهل لك عملك .

كيف يمكنني تحميل after effects :

يمكنك تحميل أفتر إفكت من خلال الموقع الرسمي لأدوبي من صفحة : تحميل After effects

و من ثم تحميل النسخة التجربية من البرنامج , أو عبر شراءه .. أو عبر البحث عنه من جوجل على أساس تحميله نسخة كاملة .

كيف أتعلم أفتر إفكت ؟

و هو أهم جزء في التدوينة ..

أخي الكريم , هذه من بين أفضل القنوات التي أتابعها و التي أضمن لك من خلالها الوصول إلى الإحترف , فقط شاهد الشروحات و طبقها ..

1- أولا تعلم الأساسيات , فحجر الأساس هو مايجعلك تطور من مستواك و تتعلم بسرعة .

دورة أساسيات الأفتر افكت من expressionalex 

دورة بالعربية , مشروحة بشكل سلس , شاهد الفيديوهات كما هي مرتبة و بإذن الله سنكون قد بنينا حجر الأساس .

دورة أساسيات after effect

تعلمت الأساسيات ؟ 

ممتاز ! الأن يمكنك المرور إلى المرحلة المقبلة : التطوير ^^

الأن هذه القنوات الأجنبية الرائعة يمكنك أن تستفيد منها لتصبح محترفا في هذا المجال !

2- After Effects Tutorials w/ Mikey

3- Surfaced Studio

4- ECAbrams

5- Mt. Mograph

قناة مختصة في الموشن جرافيك , يمكنك متابعتها إن كنت من أصحاب المستويات المتقدمة ;)

الموضوع متعوب عليه , تعليقك السبيطة و مشاركتك مع أصدقائك تعني لي الكثير ! :) شكرا ^^

منع سرقة و نسخ المواضيع من مدونتك على بلوجر

مرحبا بك أخي الكريم ..

هل مللت من سرقة تدويناتك التي تضع فيها جهدك و وقتك قبل أن يمر صاحب أي مدونة أخرى لينسخها و ينشرها في مدونته , بل و يزعم أنه من كتبها حتى ؟

بتطبيقك لهذا الدرس , ستساهم بطريقة غير مباشرة أيضا في الإرتقاء بالمحتوى العربي و وضع حد لكل من لا يعتمد إلا النسخ و اللصق في مدوناته .

دعنا ندخل في صلب الموضوع , الإضافة التي ستقوم بإستعمالها في مدونتك بلوجر , لا تمنع نسخ النصوص فقط , بل أيضا الصور !

مراحل تركيب الإضافة : 

1- الدخول إلى لوحة تحكمك في بلوجر  

2- إختر المدونة التي تود تطبيق الشرح فيها

3- التعديل على القالب

4- Ctrl + F و كتابة وسم :

فوقه مباشرة , قم بلصق الكود أسفله :

<script type="text/javascript">// From : www.modawin-blogger.blogspot.com var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reEnable(){ return true } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reEnable } </script> <script type="text/javascript">//<![CDATA[ function nocontext(e) { var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName; if (clickedTag == "IMG") { alert(alertMsg); return false; } } var alertMsg = "لا يمكنك نسخ الصورة"; document.oncontextmenu = nocontext; //]]></script>

5- حفظ

لتكون بذلك منعت كل من يحاول سرقة جهدك ! :)

 مشاركتك البسيطة و تعليقك المشجع يدعمنا لمواصلة النشر و الإفادة ! ^_^

 (أزرار المشاركة أسفل التدوينة ::) )