شوّيت: شبكة كرة قدم اجتماعية




العودة   سوالف سوفت > سوالف برمجة المواقع وتطويرها > البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها
التسجيل المدوّنات البحث مشاركات اليوم جعل الأقسام مقروءة

الرد على الموضوع
 
LinkBack أدوات الموضوع
عضو نشيط جدا
#1  
لمبرمجي ومطوري الويب 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(){
}
عند تحميل هذه الاداة custom_rhino.jar ضع ملف الجافا سكريبت في نفس المجلد
ثم عن طريق الدوس اكتب الامر التالي مع مراعاة انك في المجلد المحتوي على الاداة
كود:
java -jar custom_rhino.jar -c infile.js > outfile.js 2>&1
حيث infile.js هو ملفك المراد ضغطه outfile.js هو الملف الذي سوف تكون في النتيجة
والتحميل الاداة و مزيد من المعلومات يرجى زيارة الرابط التالي
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

هذا الموضوع ليس كاملا و الكمال لله عز وجل
فمن لديه اية اضافات نرجو ان لا يبخل بها علينا
وشكرا






الحق يعلو is offline   قديم 11-10-2007, 06:30 PM
الرد مع إقتباس
عضو نشيط
#2  

شكرا لك اخي الكريم .. راح اقول بتجربتها ان شاء الله .






mab-dz is offline   قديم 11-10-2007, 07:12 PM
الرد مع إقتباس
عضو نشيط جدا
#3  

السلام عليكم

شكرا لك اخي الكريم درس مميز ومفيد






سلطان الجالي is offline   قديم 17-10-2007, 07:54 AM
الرد مع إقتباس
مراقب
#4  

موضوع جميل جداً ويستحق التثبيت حقيقة
لكن العنوان يحتاج تعديل من ضغط برامجكم إلى ( أعمالكم , برمجياتكم ,الأكواد )

أطيب تحية .. واتمنى تستمر على نفس التميز






__________________
كذب من قال الدنيا هي نفسها الدنيا بعيني من بعدك ياأبو محمد
﴿ كُلُّ نَفْسٍ ذَآئِقَةُ الْمَوْتِ ... ﴾ رحمة الله عليك
*عدم ردي على بعض الرسائل لايعني تجاهلي لها
محمد 902 is offline   قديم 17-10-2007, 10:02 AM
الرد مع إقتباس
عضو نشيط جدا
#5  
شكرا على الرد

شكرا لكم على الرد
اخي mab-dz
إقتباس:
شكرا لك اخي الكريم .. راح اقول بتجربتها ان شاء الله .
جربها اخي و اي استفسارات انا في الخدمة

اخي سلطان الجالي
شكرا على الاطراء و هذا من واجبنا

اخي محمد 902
إقتباس:
موضوع جميل جداً ويستحق التثبيت حقيقة
لكن العنوان يحتاج تعديل من ضغط برامجكم إلى ( أعمالكم , برمجياتكم ,الأكواد )

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







آخر تعديل بواسطة الحق يعلو في 17-10-2007 الساعة 09:11 PM. السبب: اضافة
الحق يعلو is offline   قديم 17-10-2007, 09:07 PM
الرد مع إقتباس
عضو نشيط
#6  

ما شاء الله..

موضوع اكثر من رائع
ومعلومات اكثر من قيمة

شكرا جزيلا لك اخي الكريم






__________________
مملكة الموت
=======================
100(سبحان الله وبحمده ،،، سبحان الله العظيم) = 0 سيئة
DSQ8.com is offline   قديم 09-11-2007, 11:43 PM
الرد مع إقتباس
الرد على الموضوع


 

أدوات الموضوع

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

كود vB متاح
كود [IMG] متاح
كود HTML غير متاح
Trackbacks are متاح
Pingbacks are متاح
Refbacks are متاح


المواضيع المشابهه
الموضوع كاتب الموضوع القسم الردود آخر مشاركة
هل تعرف ما هي الويب 2.0 ؟ البرواز الويب والويب 2.0 والـ Semantic Web 37 31-05-2008 07:51 PM
[ متجدد ] مقالات متجددة عن الـ web 2.0 " ويب تو 2 " Abu Fahd الويب والويب 2.0 والـ Semantic Web 2 23-09-2007 12:52 AM
[مقالة] نظرة شاملة على الويب 2.0 ايمن جوجل الويب والويب 2.0 والـ Semantic Web 3 12-08-2007 12:26 PM
حقيقه حكايه الويب العربى ما بين الإختراق والأكاذيب !! اسامة الهادى القسم العام 4 24-12-2006 02:26 AM
نظرة شاملة على الويب 2.0 kassab الويب والويب 2.0 والـ Semantic Web 2 05-04-2006 05:42 AM


جميع الأوقات بتوقيت غرينتش +3. الوقت الآن هو 07:02 PM.