التغطية المصورة ليوم سوالف: الجزء الأول، الجزء الأخير
الفائزون في المسابقة الأصغر لسوالف كاست

 

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

رد  
 
LinkBack أدوات الموضوع
عضو نشيط جدا
تاريخ التسجيل: Sep 2006-
#1 (permalink)  
لمبرمجي ومطوري الويب 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

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






الحق يعلو غير متواجد حالياً   قديم 11-10-2007, 06:30 PM
رد مع اقتباس
عضو نشيط
تاريخ التسجيل: Sep 2006-
#2 (permalink)  

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






mab-dz غير متواجد حالياً   قديم 11-10-2007, 07:12 PM
رد مع اقتباس
عضو نشيط جدا
تاريخ التسجيل: Nov 2005-
#3 (permalink)  

السلام عليكم

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






سلطان الجالي غير متواجد حالياً   قديم 17-10-2007, 07:54 AM
رد مع اقتباس
مراقب
تاريخ التسجيل: Oct 2003-
#4 (permalink)  

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

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






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

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

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

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

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







التعديل الأخير تم بواسطة : الحق يعلو بتاريخ 17-10-2007 الساعة 09:11 PM. سبب آخر: اضافة
الحق يعلو غير متواجد حالياً   قديم 17-10-2007, 09:07 PM
رد مع اقتباس
عضو جديد
تاريخ التسجيل: Aug 2007-
#6 (permalink)  

ما شاء الله..

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

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






__________________
مملكة الموت ـــ خدمات مملكة الموت
مازالت الخطط قيد الانشاء والتطوير
=======================
سبحان الله وبحمده ،،، سبحان الله العظيم
DSQ8.com غير متواجد حالياً   قديم 09-11-2007, 11:43 PM
رد مع اقتباس
رد


 

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

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

كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
هل تعرف ما هي الويب 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


الساعة الآن: 03:59 PM بتوقيت المملكة العربية السعودية