شرح تشفير أكواد جافا سكربت و فك تشفيرها

بعد طول غياب نأمل أن يكون الأخير , نعود إلى الدروس و المقالات المفيدة على مدونة "مدون بلوجر" .

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

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

موقع javascriptobfuscator :

ربما هو الأشهر و الأكثر رواجا و استعمالا .

سأقوم بكتابة كود بسيط بالجافاسكربت و سنرى الكود المشفر .

هذه التشفيرة الجديدة للكود أعلاه :


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

نعم , الكود ينفذ بشكل سليم !
ممتاز !

الأن ستنعرف على طريقة فك تشفير هذا الكود .

فك تشفير javascriptobfuscator 

أقدم لك عزيز هذا الموقع الرائع وهو موقع dcode .

بعد الدخول إلى الموقع , يمكنك وضع الكود المشفر كما هو موضح بالصورة :

مهم جدا : الكود المراد فك تشفيره لا ترفقه بتاغ ال script .

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

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

شكرا لكم .

موسوعة موضوع مبادرة مهمة لدعم المحتوى العربي

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

تسعى بعض المبادرات الى إغناء المحتوى العربي الرقمي و إثراءه كمّا و نواعا لتوفّر لك المعلومة المفيدة بأسلوب مميز .

موقع موضوع.كوم يعتبر أحد أهم هذه المبادرات حيث تمكن و عن جدارة من الحصول على لقب "الموسوعة العربية رقم 1" !

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

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

تم إنشاء الموسوعة سنة 2010 ليتم إطلاقها رسميا سنة 2012 مركزة على جودة المحتوى لتحقق في فترة قصيرة إنجازات كبيرة أبرزها المركز الأول في "جائزة الملكة رانيا الوطنية للريادة" سنة 2011 .

تضم الموسوعة مئات الكاتبين و الناشرين من موظفين قارين أو بدوام حر .

نسعى و بكل فخر إلى إعادة المعرفة إلى العرب .

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

خطوة بسيطة و حيدة تمكنك من النشر في الموقع .

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

1 - إنشاء حساب جديد

إنشاء حساب جديد في موقع موضوع لن يأخذ منك دقيقة واحدة ,

بعد الدخول للموقع يمكنك الضغط من أعلى على كلمة تسجيل , أو مباشرة التوجه نحو هذا الرابط :

تسجيل حساب في موضوع.كوم

إملأ الخانات بما يناسبك و من ثم أثبت ملكيتك لبريدك الإلكتروني عبر تفعيله

 (ستصلك رسالة التفعيل على إيميلك)

مبروك الأن حسابك مفعل و يمكنك النشر في موسوعة موضوع.كوم !

2- نشر المواضيع

من أعلى أنقر على "أكتب موضوعك" , لتظهر لك قائمة غنية بالمواضيع المقترحة , إختر منها واحدة حسب رغبتك , أو أكتب عنوانك بنفسك .

بعد كتابة موضوعك و ملأ الخانات , إضغط على "احفظ الصفحة" .

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

تهانينا ! لقد نشرت أول مقال لك على موقع "موضوع.كوم" .. ننتظر منك المزيد ! :)

للمبرمجين : 6 طرق لتسويق و ترويج خدماتك أو منتوجاتك !

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

و أبرزها عدم القدرة على تسويق خدماته و الإستفادة من خبرته .

أخي / أختي المبرمجـ(ـة) , إليك 6 طرق فعالة لتسويق و ترويج منتوجاتك و خدماتك :

1 - إستخدم مواقع العمل الحر 

أن تكون حرا في عملك على الأنترنت يعني أن تكون مديرا لنفسك .

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

إليك مجموعة من المواقع التي ستساعدك على العثور على زبائن في أسرع وقت :

موقع freelancer

موقع fiverr

موقع خمسات 

موقع مستقل 

2 - إستغل الشبكات الإجتماعية كما يجب

شبكات التواصل الإجتماعي ليست فقط للهو و الدردشة .

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

شارك روابط خدماتك و خبراتك و أعمالك السابقة مع أصدقائك أو على صفحاتك و المجموعات المشترك بها .

أجعلها تخدمك عوض أن تضيع وقتك !

3 - إبن علاقات متينة مع زبائنك السابقين 

ربما قد لا تلاحظ أهمية هذه النقطة إلا بالتجربة .

ببساطة العميل أو الزبون يمثل النقطة الأهم هنا .

بغيابه لا يوجد أي أهمية لعملك .

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

و كن على يقين أن حسن التعامل قد يتفوق على جودة المنتوج في بعض الأحيان !

4 - امتلك موقعا أو مدونة شخصية 

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

ستقوّي هذه النقطة سمعتك و تجعل الزبون يثق فيك أكثر من أي وقت أخر .

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

5 - إجعل الناس تتحدث عنك

كل نجاح أو تحدي قمت به على أكمل وجه شاركه مع أصدقائك او المجتمع البرمجي من حولك .

سيجعل ذلك الناس تتحدث عنك و تمنحك سمعة أفضل من قبل 

6 - إستغل جزء من أرباحك و أعلن عن شركتك 

أن تحقق مدخولا , هذا لا يعني أن لا تستثمره .

الإعلان لشركتك البرمجية سيجلب لك زبائن أكثر = أعمال أكثر = مدخول أكثر!

مما يجعلك تغطّي ما دفعته في الإعلان بأرباح إضافية !

أليس رائعا !

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

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

إقرأ أيضا :

إعلان عن سلسلة : لقاء مع لغة برمجة !

لماذا يفضل المبرمجون الإشتغال ليلا ؟

4 مميزات موجودة عند كل مبرمج

أسباب تجعل المبرمج يفشل في الحب !

فلم قصير يلخص حياة المبرمجين (5دقائق)

أهمية البرمجة في نظر بيل جيتس و مارك مؤسس الفيسبوك - فيديو

إضافة سلايد شو تلقائي لمدونات بلوجر

أهلا بمتتبعي مدونة مدون بلوجر في درس جديد و مفيد .

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

ستنطرق الأن إلى واحد من أكثر ال slideshows إستعمالا : سلايد شو مدونة المحترف .

و من مميزاته أنه يتناسب مع أغلبية المواقع بمختلف تصاميمها .

معاينة :

طريقة تركيب السلايد شو : 

1- أولا قم بأخذ نسخة إحتياطية لتفادي أي مشكلة قد تواجهها .

2- توجه إلى لوحة التحكم خاصتك على بلوجر 

3- توجه نحو تعديل القالب 

إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)

]]></b:skin>

فوقه مباشرة (قبله) , أضف الكود التالي :

#alwansd{ height: 428px; margin: 0 0 0px 0px; padding: 15px 28px 15px 16px; width: 672px; background: #373737; } .alwanw{ position: relative; height:385px; } .alwanw .contentdiv{ visibility: hidden; position: absolute; opacity: 1; } .alwan-ps{ text-align: right; float: left; width: 670px; height: 11px; margin-left:-43px; } .alwan-ps .toc{ font-size: 0px; width: 102px; height: 11px; float: right; background: #5b5b5b; margin-left: 1px; } .alwan-ps a.selected{ background:#dfdfdf; } .alwan-ps .prev, .alwan-ps .next {display:none; } .alwanip{ width: 618px; padding: 10px !important; bottom: 0; float: left !important; position: absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySjhsAxOuoJbcKSnnajuzo-9a0sC48yvVIGJZ_HfNsHqLAcyDa-3d9djZDWJcFL0Ro9kqQrr4sC6-5dMw9hVptiqo6JWBkIt05cjDLAawfSuexhETb541jeBZWtaL_RiYQqQeng-DyIM/s1600/backslide.png); } .alwanip a{ color:#dcdcdc; font: 12px droidkufi-bold; margin:0; padding:0; line-height: 19px; } .alwanip h6{margin: 0;} .alwanip h6 a:hover {color:#c2df00;} .alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; } .alwanip p{font-size: 13px; margin: 0; color: #a5a5a5; line-height: 23px; } .alwansf a img{float: right !important; } .alwansf {float: right !important; width:680px!important;} .column-center-outer { width: 680px; }

ابحث من جديد , عن :

</head>

قبله مباشرة أضف الكود التالي :
(غير كلمة "كل" بإسم القسم الذي تريده أن يظهر في السلايد شو)

<script> /* Script from:http://computer-for-security.blogspot.com */ imgr = new Array(); imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; numposts1 = 6; label1 = "كل"; function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break; }} var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>' +removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; }} </script>

إبحث الأن عن :

</body>

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

<script src='http://albaadani.googlecode.com/files/contentslider.js'></script> <script> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.5], //[true/false, fadedegree] autorotate: [true, 6000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>

أخر خطوة : إبحث عن :

<div id='main-wrapper'>

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

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='alwansd'><div class='alwanw' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div><div class='alwan-ps' id='paginate-slider1'></div></div></b:if>

قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! :)

إعلان عن سلسلة : لقاء مع لغة برمجة !

البرمجة تغزو عالمنا اليوم و تديره بأتم معنى الكلمة .

أنشطتنا اليومية صار من غير الممكن فيها أن تتخلى عن البرمجة .

هل تسائلت يوما عن أهمية البرمجة ؟

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

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

سلسة "لقاء مع لغة برمجة" هي ببساطة مجموعة من المقالات التي نتطرق من خلالها كل مرة على لغة برمجة معينة , نحدد تاريخها ,  إستعمالاتها و كيفية تعلمها .

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

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

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

يمكنك تحفيزي عبر مشاركة التدوينة مع أصدقائقك عبر مواقع التواصل الإجتماعي أو ترك تعليق مشجع ^_^ ! شكرا !

المحددات (selectors) , كما لم تعرفها من قبل ! - الجزأ الأول

تعتبر المحددات أو ما تعرف بال selectors جزء لا يمكن التخلي عنه عند تصميم موقعنا بال css و جيكويري و غيرها .

و بما أننا أحيانا نطمح للتطوير و ننسى أساسيات مهمة جدا , نجد أن عددا كبيرا جدا من مصممي الويب لا يستعملون إلّا نوعين من المحددات : "class." للكلاس , "id#" للـ ID !

هذه التدوينة ستساعدك حتما و تفيدك في تصميم مواقعك و تطويرها .

سنتعرف معا عن ماهيّة المحددات .

أنواع ال selectors , و طريقة إستعمالهم !

ماهي المحددات selectors ؟

المحددات تستعمل لإدراج بعض التعديلات على عنصر (element) معين دون غيره , أو مجموعة من العناصر في صفحة ويب معينة .

تختلف أنواع المحددات و تتعدد , لذا سنتعرض معا لمجموعة من المجددات مع تفسيرها و أمثلة لها .

1- محدد * :

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

مثال :

*{
margin:0px;
padding:0px;
font-family:tahoma;
font-size:15px;
background:red;
}

في هذا الكود قمنا بإختيار كل عناصر الصفحة , إدارج margin:0px; و padding:0px; و إختيار الخط و حجمه و إضافة خلفية حمراء له ..

2- محدد + :

ربما تكون هذه أول مرة تسمع فيها عن هذا المحدد , وظيفة هذا الأخير المحدد المجاور (adjacent) ,
فإن قلت :

div + p

 فكأنك قلت له حدد لي العنصر p التابع للعنصر div مباشرة .

مهم جدا : 
هذا لا يعني أن p موجود داخل العنصر div , لا  !!
هذا يعني أن العنصر div بعد إغلاقه , إذا كان هناك وسم p , فأضف للعنصر p ذلك مجموعة من التعديلات .
ممتاز !

مثال :

div + p{

background:red;

}

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

2- محدد < :

يشبه إلى حد كبير إلى محدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهما كان المستوى , في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول .

div > p{
background:red;
}

هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .

3 - ["a[href="link

هنا كأنك طلبت كل عنصر a ذو  attribut href بالرابط link .
و إضافة بعض التعديلات عليه .

مثال :

a[href="http://modawin-blogger.blogspot.com"]{
background:red;
}

هذا ليس إلا جزء بسيطا جدا من المحددات في ال css , نتعرف معا إلى أنواع أخرى منها في جزء ثاني قريبا جدا .

تعليقك المشجع , و مشاركة التدوينة مع أصدقائك تشجعني على العمل و النشر و الإفادة .. شكرا ! ^^

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

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

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

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

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/AVvXsEi6de2HIebmFuZI1EeX3PyR_sSuBwDP-weFWHEI3J76Rsu9JXSpd1sWakovoCnf_EAuZaL3U5Hcu4s3wKSjxy3BcuHDK0nbk9uGPrUJ0rTPoULwzFB8B3ubrjuWxOPKzlMs5LyXGrqPAXBK/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- حفظ

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

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

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

تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل

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

و على أساس إيجاد بديل لهذه الإضافة التي تستخدم في الملايين من المواقع , طرح الفيسبوك إضافة جديدة تسمى بـ Page Plugin .

بنفس خصائص الإضافة السابقة , لكن بتصميم جديد .

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

كل ما عليك فعله هو البحث في هذا الكود عن : https://www.facebook.com/modawin.blogger
و تغيره برابط صفحتك على الفيسبوك

<div class="fb-page" data-href="https://www.facebook.com/modawin.blogger" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"></div><div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

لتقوم بتركبه كأي إضافة أخرى عبر : 

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

إضافة أدات html/javascript

لصق الكود

حفظ 

هنا أقدم لك بعض التعديلات التي بإمكانك إجارءها إن كنت تملك خبرة ولو قليلة بالتعامل مع الشفرات البرمجية .

data-show-posts="false"

عند تغيير false بـ true , ستظهر الإضافة المنشورات في الصفحة تحت صندوق الإعجابات.

data-hide-cover="false"

عند تغيير false بـ true , سيتختفي غلاف الصفحة من الإضافة

data-height="250"

لتحديد طول الإضافة

data-width="300"

لتحديد عرض الإضافة 

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

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !

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

و بالتالي عليك توفير أفضل الإضافات و إستعمالها في موقعك مما يجعل تصفح موقعك أسهل و أريح للمتابعين .

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

الإضافة لا تحتاج إلى خبرة أو أي مجهود يذكر , فقط كود بسيط تقوم بإضافته إلى مدونتك و ستجد النتائج مباشرة !

طريقة التعديل :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></center> <script type="text/javascript" > var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh414vpNpmhmqk1o6qNMGavM1_Pn2Zh4SkC30JcRZE81XRaANh6aFbZIb0wziTCSMVKneUiKMqmRM5CsIJS6I7NmSLJktkt_DoI0HzNLEQ_DRNC-fv00f4NenX33m9jW8KaxWHAiYhHZRRU/s1600/Blue-Arrow-Up--BloggerAdsenSeO.BlogSpot.Com.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, /*<a href='http://www.bloggeradsenseo.blogspot.com/2013/10/add-go-up-to-top-arrow-up.html'></a>*/ keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:''}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') /*<a href='http://BloggerAdsenSeO.blogspot.com'></a>*/ if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

بإمكانك تغيير شكل السهم و اختيار أحد النماذج التالية عبر البحث عن :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakkQVqnrd0toMcS71D2WHR2ulHTe6dz_bSgEcGODYkvYTdqQNqjb4rGs7M8BGbVOmIuN3TjEs2pkjocTIMO62U71F3Vmq84fv4YtteF1K6DAK-d6JPwBLAxLxnqzPEsmTM7kRttaHw_Q/s1600/modawin-blogger-top-button-1.png

و تغييره برابط أحد الصور التالية .
(إضغط على الصورة و ستجد الرابط المباشر لها )

نموجذ 1

نموذج 2

نموذج 3

نموذج 4

ممتاز , الأن لم يتبقى إلا التركيب :

طريقة التركيب :

قم بنسخ الكود النهائي بعد التعديل عليه .
- توجه نحو لوحة التحكم الخاصة بك في بلوجر .
- تخطيط .
- إضافة html / javascript

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

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

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

للمصممين : 3 مواقع للحصول على ألوان فلات

لعل أبرز ما يفكر فيه المصممون و مطورو المواقع في أعمالهم إنتقاء و إختيار ألوان لأعمالهم لم له من أهمية كبرى على نتيجة العمل .

و بما أن التصميم المسطح flat design من أبرز الأساليب المعتمدة في التصميم و يسيطر على أعمال المصممين لجماله و بساطته 

(لا تعرف ماهو التصميم المسطح ؟ :) تعرف عليه من هنا : التصميم المسطح : البساطة بطعم الإبداع ).

فإن المصمم عليه أن يكون دقيقا في تحديد ألوانه .

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

(hex color / rgb color)

وهذه قائمة بأفضل المواقع التي ستستفيد منها :

1 - flatcolors

حسب تجربتي , أعتبره الأفضل في مجاله , واجهة الموقع بسيطة و إستعمال الموقع سهل .

كل ما عليك فعله , هو إختيار اللون الذي تريد إستعماله و من ثم تنسخ الكود الموجود فوق اللون .

موقع flatcolors

2- flatuicolors

لا يقل روعة عن الموقع الأول .

إختر اللون المراد إستعماله , إضغط عليه , و سيتم نسخ الكود بطريقة تلقائية .

إضغط على CHOOSE FORMAT لمزيد من الخيارات .

موقع flatuicolors

3- flatuicolorpicker

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

موقع flatuicolorpicker

أم الأن فلم يتبق لك إلا أن تنسق ألوانك , إليك هذه المقالة , ستفيدك حتما ! :)

مواقع لتنسيق الألوان .