| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
|
| | LinkBack | أدوات الموضوع |
| |||||
| لمبرمجي ومطوري الويب 2.0 , الأدوات اللازمة لضغط الأكواد في الاول اشكر اخي اشرف سمهوري على اتاحة الفرصة للكتابة في سوالف كاتب الموضوع : هاوي ويب 2.0 الان ونحن نتجه الى ترقية مواقعنا الى web 2.0 فاول ما يتبادر الى الذهن لغة الجافا سكريبت وال css لكن من دخل حقا الى هذا المجال مؤكد صادفته كبر حجم ملفات الجافاسكريبت و الcss ما يعني ذلك زيادة مدة تحميل الصفحة و الموقع ككل و لتفادي ذلك تم تطوير بعض الادوات لتساعد في تقليص حجم الملف اقصى حد ممكن لتسريع التحميل لذالك جمعت ما توفر لدي من الادوات التي استخدمها واردت مشاركة تجربتي مع اخوتي في هذا المجال اولا نتعرف على مفهوم الضغط في الجافا سكريبت هو اخر شيء يفكر فيه المبرمج بعد كتابته الكود البرمجي لتقليص حجم الملف و زيادة سرعة تحميل الصفحة ولهذا المفهوم السابق ثلاثة طرق نتطرق اليهم ا- ضغط الملف و ذلك بحذف جميع التعليقات و المساحات البيضاء (white space) مع ترك الكود البرمجي كما هو دون اي تغييراشهر اداة لهذه الطريقة هي المسمات JSMin ناخذ مثال على هذه الاداة كود: var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
} كود: var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;} JSMIN, The JavaScript Minifier ب- ضغط الملف و ذلك بحذف جميع التعليقات و المساحات البيضاء (white space) و مع تغيير اسماء المتغيرات الى اسماء صغيرة كارقام او حروفو اشهر اداة لهذه الطريقة هي المسمات ShrinkSafe وهي اداة تابعة الى framework dojotoolkit و للعمل عليها يلزم تثبيت الجافا في الجهاز و مثال على هذه الاداة كود: function MyClass(){
this.foo = function(argument1, argument2){
var addedArgs = parseInt(argument1)+parseInt(argument2);
return addedArgs;
}
var anonymousInnerFunction = function(){
// do stuff here!
}
}
function MyFunc(){
// this is a top-level function
}
// we've got multiple lines of whitespace here كود: function MyClass(){
this.foo=function(_1,_2){
var _3=parseInt(_1)+parseInt(_2);
return _3;
};
var _4=function(){
};
}
function MyFunc(){
} ثم عن طريق الدوس اكتب الامر التالي مع مراعاة انك في المجلد المحتوي على الاداة كود: java -jar custom_rhino.jar -c infile.js > outfile.js 2>&1 والتحميل الاداة و مزيد من المعلومات يرجى زيارة الرابط التالي ShrinkSafe | The Dojo Toolkit ج- ضغط الملف كما في الطريقة (ب) و اضافة الى ذلك تغيير جميع الكلمات في الكود البرمجي الى كلمات ضغيرة و اشهر اداة لهذه الطريقة هي packer المبرمجة من طرف dean edwards وناخذ المثال الاول كتجربة كود: var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
} كود: eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('u 1={6:2.8==\'h t q\',p:2.m(),4:2.8==\'i\',3:2.g.s(),r:9(2.7.o(n))||9(2.7),l:2.k==\'j\'}1.a=1.3.5(\'a\')>=0;b(1.3.5(\'f\')>=0){1.6=1.4=c;1.f=e}b(1.3.5(\'d\')>=0){1.6=1.4=c;1.d=e}',31,31,'|is|navigator|ua|ns|indexOf|ie|appVersion|appName|parseFloat|mac|if|false|gecko|true|opera|userAgent|Microsoft|Netscape|Win32|platform|win|javaEnabled|21|substr|java|Explorer|version|toLowerCase|Internet|var'.split('|'),0,{})) /packer/ ملاحضات ز اخوتي الكرام ماهذا الموضوع الا مقدمة الى عالم وحده وانا من خلال هذا الموضوع اردت اعطاء فكرة عامة عن هذا المجال لم اتطرق الى كل طريقة بالتفصيل لكي لا اعقد الموضوع كما انني لم اتطرق الى كل الادوات المتوفرة للضغط و لقد تركت لكل اداة الرابط الرسمي لموقعها لاني متاكد من انه لا يوجد احسن من المصدر واود ان انبه ان البعض يستخدم هذة الادوات خاصة الثانية (ب) و الثالثة (ج) لتشفير الكود الخاص به و اي استفهامات فانا في الخدمة واما بالنسبة لضغط ال css في تتم بالطريقة (ا) حيث يتم حذف التعليقات و الwhite space ناخذ المثال التالي الكود قبل الضغط كود: TABLE {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
BODY {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
TD {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
TR {
FONT-SIZE: 8pt; FONT-FAMILY: Tahoma
}
A {
CURSOR: pointer; COLOR: #4885e8; TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
.a1 {
CURSOR: pointer; COLOR: #4885e8; TEXT-DECORATION: none
}
.a1:hover {
TEXT-DECORATION: underline
}
.Def_Table {
BORDER-RIGHT: #c3d6ee 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #c3d6ee 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #c3d6ee 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #c3d6ee 1px solid; FONT-FAMILY: Tahoma; BORDER-COLLAPSE: collapse; cellspacing: 0; cellpadding: 0
} كود: TABLE{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}BODY{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}TD{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}TR{FONT-SIZE:8pt;FONT-FAMILY:Tahoma}A{CURSOR:pointer;COLOR:#4885e8;TEXT-DECORATION:none}A:hover{TEXT-DECORATION:underline}.a1{CURSOR:pointer;COLOR:#4885e8;TEXT-DECORATION:none}.a1:hover{TEXT-DECORATION:underline}.Def_Table{BORDER-RIGHT:#c3d6ee 1px solid;PADDING-RIGHT:2px;BORDER-TOP:#c3d6ee 1px solid;PADDING-LEFT:0px;FONT-SIZE:8pt;PADDING-BOTTOM:2px;BORDER-LEFT:#c3d6ee 1px solid;PADDING-TOP:2px;BORDER-BOTTOM:#c3d6ee 1px solid;FONT-FAMILY:Tahoma;BORDER-COLLAPSE:collapse;cellspacing:0;cellpadding:0} CSS Drive Gallery- CSS Compressor هذا الموضوع ليس كاملا و الكمال لله عز وجل فمن لديه اية اضافات نرجو ان لا يبخل بها علينا وشكرا | |||||
|
| |||||
|
موضوع جميل جداً ويستحق التثبيت حقيقة لكن العنوان يحتاج تعديل من ضغط برامجكم إلى ( أعمالكم , برمجياتكم ,الأكواد ) ![]() أطيب تحية .. واتمنى تستمر على نفس التميز
__________________ ” كذب من قال الدنيا هي نفسها الدنيا بعيني من بعدك ياأبو محمد “ ﴿ كُلُّ نَفْسٍ ذَآئِقَةُ الْمَوْتِ ... ﴾ رحمة الله عليك *عدم ردي على بعض الرسائل لايعني تجاهلي لها | |||||
|
| |||||
| شكرا على الرد
شكرا لكم على الرد اخي mab-dz اقتباس:
اخي سلطان الجالي شكرا على الاطراء و هذا من واجبنا اخي محمد 902 اقتباس:
التعديل الأخير تم بواسطة : الحق يعلو بتاريخ 17-10-2007 الساعة 09:11 PM. سبب آخر: اضافة | |||||
|
| |||||
|
ما شاء الله.. موضوع اكثر من رائع ومعلومات اكثر من قيمة شكرا جزيلا لك اخي الكريم
__________________ مملكة الموت ـــ خدمات مملكة الموت مازالت الخطط قيد الانشاء والتطوير ======================= سبحان الله وبحمده ،،، سبحان الله العظيم | |||||
|
![]() |
| |
| |
| أدوات الموضوع | |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| هل تعرف ما هي الويب 2.0 ؟ | البرواز | تطوير الويب | 37 | 31-05-2008 07:51 PM |
| [ متجدد ] مقالات متجددة عن الـ web 2.0 " ويب تو 2 " | Abu Fahd | تطوير الويب | 2 | 23-09-2007 12:52 AM |
| [مقالة] نظرة شاملة على الويب 2.0 | ايمن جوجل | تطوير الويب | 3 | 12-08-2007 12:26 PM |
| حقيقه حكايه الويب العربى ما بين الإختراق والأكاذيب !! | اسامة الهادى | سوالف عامة | 4 | 24-12-2006 02:26 AM |
| نظرة شاملة على الويب 2.0 | kassab | تطوير الويب | 2 | 05-04-2006 05:42 AM |