تم إصدار kzalek 0.2 beta

السلام عليكم و رحمه الله تعالى و بركاته

منذ نصف ساعه تقريبا ، قمت بإصدار kzalek و أصبح متوافرا الان على http://kzalek.com للتحميل ، قمت ببرمجه kzalek بإستخدام AIR/JavaScript ، يمكنك تحويل إمتداد ملف kzalek.air إلى kzalek.zip ثم فك الضغط و رؤيه الكود ، او بعد تثبيته إفتح ملف keepondev فى مسار programmes files و يمكنك رؤيه كود التطبيق .

تحديث :

من مدونه عالم التقنيه : صدور البرنامج العربى تويتر Kzalek النسخه 0.2 التجريبه المفتوحه للجميع

Kzalek

السلام عليكم و رحمه الله تعالى و بركاته

منذ يومين أعطيت تطبيقى الجديد Kzalek للبيتا تسترز حتى يختبروا التطبيق و اسمع كل اقتراحاتهم و ارائهم ، Kzalek عباره عن تطبيق AIR بالطبع يعمل على ويندوز و ماك و لينوكس وظيفته تسهيل التعامل مع موقع تويتر على سبيل المثال بدلا من فتح المتصفح لعده ساعات و عمل ريفرش لمعرفه كل جديد ، يمكنك وضع التطبيق فى ال TaskBar او ال Dock و سوف ينبهك بكل جديد بتنبيهات شبيهه ب Mac Growl ، يحتوى التطبيق على المميزات الاساسيه لموقع تويتر مصل استقبال و ارسال التويتات و الردود و الرسائل المباشره و وضع التويتات فى المفضله … الخ و يزيد على موقع تويتر ببعض المميزات الغير موجوده فيه مثل دعم اللغه العربيه و ترجمه التويتات من اى لغه إلى العربيه و إطاله و تقصير الروابط و إرسال الصور إلى تويتر و رؤيتها داخل التويت inline و الكثير من المميزات الاخرى .

جاء رد الفعل غير متوقع تماما بالنسبه لى ، هذا حوار مع مدونه عرب كرنش باللغه الانجليزيه و هذا باللغه العربيه ، و هذه تدوينه فى مدونه صديقى شاب مصرى ، و هذه أراء المستخدمين على تويتر ، و هذه تدوينه على مدونه تويتر العرب ، و الإحصائيات جيدة جدا خلال يومين مع العلم ان التطبيق مازال به الكثير من الاخطاء و ميزات ناقصه ،  و رسائل كثير على البريد الالكترونى من شركات تعرض على العمل معهم بأجر و اخرون يتطوعوا فى تصميم و برمجه Kzalek ، و اخرون يريدون المساعده فى دمج API خدماتهم مع Kzalek .

تحديث :

من مدونه عالم التقنيه : تقرير تجربتنا الخاصه حول برنامج kzalek
من مدونه lollwa :  تطبيق kzalek

شارك فى اختيار السلسله القادمه

السلام عليكم و رحمه الله تعالى و بركاته

يمكنكم التصويت على الموضوع الذى ساتناوله إن شاء الله فى سلسله درووس بعد انتهاء السلسله الحاليه – انماط تصميم جافاسكربت JavaScript design patterns – بحيث سيتم شرح اعلى موضوع تصويتا و حذفه من قائمه التصويتات ، و لن ينتهى الامر عند هذا الحد ، سيظل التصويت قائما و سيتم شرح الموضوع الذى سيأخذ اعلى تصويت بعده … الخ ، و يمكنك أيضا اقتراح موضوعات اخرى فى مربع النص اسفل التصويت ليتم إضافتها داخل التصويت ،  يعنى ان شاء الله سيتم شرح كل الموضوعات التى بالقائمه ، إذا كنت تتابعنى من RSS ولا ترى التصويت قم بزياره المدونه ، و يمكنك وضع رابط للموضوع فى اى منتدى او مدونتك حتى يزداد التصويت و يكون القرار عادل ، انا شخصيا مستمتع بهذا الموضوع لأن التدوينه يعطينى الفرصه لدراسه تقنيات لأول مره او المراجعه عليها و غالبا ما تزداد خبرتى ، منتظر تصويتكم و تعليقاتكم .

المزيد من محاضرات Ajax experience 2008

السلام عليكم و رحمه الله تعالى و بركاته

قد كتب موضوع من قبل عن محاضرات Ajax experience 2008 التى وضعها Dion almear و ben galbraith فى مدونتهما Ajaxian.com ، لكنهما كتبوا يوم الجمعه 27 مارس 2009 موضوع وضعوا فيه روابط لأربع محاضرات بالفيديو جديده ، يمكنك تحميل المحاضرات من هنا ، تتناول الاربع محاضرات المواضيع التاليه :

- Ajax 2.0 with Anne van Kesteren
- Ajax Testing Tool Review with Ted Husted
- Analyzing the Ajax Application Performance with Gaurav Seth
- Building Your First Adobe AIR Application with Kevin Hoyt

اتمنى لكم و لنفسى مشاهده ممتعه .

Canvas

السلام عليكم و رحمه الله تعالى و بركاته

عندما كانت مواصفات SVG يتم كتابتها و مراجعتها و إدراجها فى محركات ترجمه ، كانت شركه Apple تعمل على الكائن Canvas الذى يمكن المحرك WEBKit من عمل Vector graphics ، تم ادراج مواصفات هذا الكائن فى نسخه HTML5 الذى تكتب مواصفاتها مجموعه WHATWG و بالتالى ادراج العنصر <canvas> فى المتصفحات التى تدعمه Firefox 1.5 و Safari2 و Opera9 و بالطبع موجود فى AIR  ، انترنت اكسبلورر لا يدعمه فى الوقت الحالى ، و يبدو انه لن يدعمه لأنه يدعم لغته XAML التى وراء تقنيه SilverLight و يدعم ايضا اللغه القديمه VRML التى تستتخدم لعمل رسومات عن طريق ال XML .

أبرز ما يميز canvas انه لا يوجد به التعقيدات و العناصر الكثيره جدا الموجوده ب SVG و XAML و VRML ، بل يعتمد كليا على الجافاسكربت ، يمكنك من خلال Canvas رسم اشكال معقده جدا من خلال Canvas JavaScript API ، فى الوقت الحالى الاشكال ثنائيه الابعاد فقط لكن فايرفوكس و اوبرا يبحثان ادراج امكانيه الرسم ثلاثى الابعاد بإستخدام OpenGL ، من أبرز الاعمال التى قام المبرمجين بها من خلال canvas : قام John Resig بإدراج اللغه Processing التى هى لغه لل visualization إلى الجافاسكربت عن طريق processing.js ، يمكن رؤيه مايمكن ان يتم عمله من خلال canvas بواسطه processing.js – بالطبع لابد ان تعرض الصفحه فى احد المتصفحات التى ذكرتها بالأعلى أو اجدد منها – ، قام أيضا Dion almaer و Ben Galbraith المدونين ب Ajaxian.com بإطلاق Bespin محرر تفاعلى مبنى على Canvas .

يمكنك رسم القلب اعلاه عن طريق الكود التالى :

<canvas id="heart" width="150" height="150">
<script>
var canvas = document.getElementById("heart");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>

و يمكنك عمل رسومات هذه اللعبه كما توضح هذه الصفحه

تم ذكر Canvas فى بعض الكتب مثل :

SitePoint » The Art and Science of JavaScript فى الفصل 3 .
O’Reilly » Painting the web فى الفصل ال 11 و 12 .
Apress » Pro JavaScript techniques الفصل 14 .

لكنى لن أجد شرح ل canvaas أفضل من شرح Mozilla كما يوضح الرابط بالأسفل

للمزيد :

Mozilla » Canvas tutorial
Canvas cheat sheet
Game using canvas

AIR 1.5 cheatsheet

السلام عليكم و رحمه الله تعالى و بركاته

انتهيت من كتابه AIR 1.5 cheat sheet عباره عن 7 ورقات تضم كل  اصناف و خواص و طرق ال AIR API ، بعد طباعتها و قرائتها وجدتها لا ينقصها شىء ، هناك فقط بعد التكرار الذى لم اتعمده ، لكل المهتمين بتعلم AIR يمكنك تحميلها من هنا air1.5-cheatsheet.

setters و getters فى الجافاسكربت

السلام عليكم و رحمه الله تعالى و بركاته

بناء على ماتعلمناه فى الدروس السابقه من سلسله OOP javascript يمكننا إدراج setter و getter للخصائص بمنتهى السهوله كما يوضح الكود التالى

function User(name){
    var secret = "Iam Unique"; // private variable
    this.name = name; // public variable
    this.getTheSecret = function(){ // public method
        return secret;
    }
    this.setTheSecret = function(secret){ // public method
        secret = secret;
    }
}

يمكننا تجربه الكود السابق كما يوضح الكود التالى

var me = new User("Mostafa Farghaly");
alert(me.name); // Mostafa Farghaly
alert(me.secret); // Error: secret is undefined
alert(me.getTheSecret()); // Iam Unique
me.setTheSecret("I will dominate the world");
alert(me.getTheSecret()); // I will dominate the world

الخاصيه الخاصه secret يمكن الاستعلام عليها من الوظيفه getTheSecret و يمكن تعديلها من الوظيفه setTheSecret ، هذه الطريقه تعمل فى جميع المتصفحات ، لكن السوال هل يمكن استعلام و تعديل secret بدون استدعاء وظائف مع الحفاظ على كونها private variable كما يوضح الكود التالى :

alert(me.secret); // Iam Unqiue
me.secret = "I will dominate the world";
alert(me.secret); // I will dominate the world

بامكانك الان فى firefox3 و safari3 و opera 9.5 و بالطبع فى AIR/javascript عمل setters و getters فى صوره خصائص من خلال الوظيفتين __defineGetter__ و __defineSetter__ كما يوضح الكود التالى :

function User(name){
    this.name = name;
    var secret = "Iam Unique";
    this.__defineGetter__("secret",function(){ // secret getter
        return secret;
    });
    this.__defineSetter__("secret",function(newSecret){ // secret setter
        secret = newSecret;
    });
}

او يمكنك استخدام الكلمات المفتاحيه get و set اذا كنت تفضل طريقه ال object literal التى من عيوبها عدم امكانيه استخدام private variables كما يوضح الكود التالى :

var o= {
    a:7,
    get b(){
        return this.a+1;
    },
    set c(x){
        this.a = x/2 ;
    }

للمزيد من المعلومات عن ال setters و ال getters :

John Resig » JavaScript Getters and Setters

Mozilla » Defining Getters and Setters

debugger جديد فى aptana لتطيبقات AIR

السلام عليكم و رحمه الله تعالى و بركاته

أعلن فريق محرر Aptana فى مؤتمر Adobe MAX عن debugger جديد لتطبيقات AIR التى يتم برمجتها بال javascript ، لا يختلف كثيرا عن أى debugger اخر ، حيث يمكنك وضع breakpoint و التجول فى scope البرنامج و معرفه قيم المتغيرات عند نقطه معينه … الخ ، يوجد فيديو على aptana.tv يشرح قدرات ال debugger و كيفيه إستخدامه يمكنك مشاهدته من هنا .

data URI فى HTML و CSS

السلام عليكم و رحمه الله تعالى و بركاته

data URI هى عباره عن URI schema تهدف إلى وضع البيانات الخارجيه داخل الصفحه inline بدون الحاجه إلى الإشاره إلى مسار الملف الفعلى الذى يحتوى على هذه البيانات عن طريق src او href فى HTML او url() فى CSS ، و بذلك ستقل عدد ال HTTP request التى يصدرها المتصفح ، و يمكن أن تستخدمه محررات النصوص التى تقبل صور فى محتواها من مصدر خارجى بحيث بعد الحصول على البيانات الخارجيه تتم تحويلها إلى data URI و تلغى الإعتماد علىالمصدر الخارجى ، تؤدى أيضا إلى سرعه تحميل البيانات التى تنتقل عبر HTTPS لأنها تكون مضمنه داخل html او css  مثلا .
أما عيوبها فتتمثل فى أن البيانات التى يتم إستخدامها أكثر من مره – كالصور مثلا – لا تستفيد من الكاش و سيتم تحميلها كل مره من السيرفر ، انترنت اكسبلورر 7 لا يدعم ال data URI – لكن جميع المتصفحات الاخرى تدعمها ، عندما يتم تشفير البيانات بواسطه base64 فإن حجمها سيزيد بنسبه 30% .
و الصيغه العامه لل data URI كالتالى :

data:[<mime-type>][;charset="<encoding>"][;base64],<data>

يبدأ بكلمه data ، ثم : ، ثم نوع البيانات فى صيغه mime-type مثل image/jpeg و هذه الخيار إختيارى ، ثم charset و هو اختيارى إيضا ، و عند ترك الخيار mime-type فإنه ستحول إلى text/plain;charset=US-ASCII ، اما كلمه base64 فى توضح ان البيانات تم تشفيرها بواسطه base64 ، و اخيرا البيانات الحقيقيه التى تمثل صوره او ملف صوتى … الخ و إليك مثال لوضع صوره – عباره عن نقطه حمراء – داخل ملف html بدون الإشاره إلى مسارها عن طريق src :

<img src=”data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==” alt=”Red dot” />

و هذا مثال اخر يوضح كيفيه إستخدام ال data URI فى ال CSS :

li {
margin-left: 20px;
background:url(‘data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC‘) top left no-repeat; }

السؤال الذى يطرأ على ذهنك ، كيف احول صوره او ملف صوتى او أى ملف إلى تلك الصيغه التى فوق و أستخدمها مع data URI ؟
يمكنك إستخدام ال php فى تحويل الملفات التى على السيرفر إلى نصوص مضغوطه بصيغه base64 لكى تستخدم inline مع data URI كما يوضح المثال التالى الذى يقرأ الملف بواسطه وظيفه file_get_contents و يضعه فى متغير بإسم contents ثم يشفره بواسطه وظيفه base64_encode و يضعه فى متغير bas64 ثم يقوم بإرجاع ال data URI كناتج لإستدعاء الوظيفه data_URI التى تقبل الجمله الاولى مسار الملف و الجمله التانيه ال mime-type لنوع البيانات :

<?php
function data_URI($file, $mime)
{
$contents = file_get_contents($file);
$base64 = base64_encode($contents);
return (‘data:’ . $mime . ‘;base64,’ . $base64);
}
?>
<img src=”<?php echo data_URI(‘elephant.png’,'image/png’) ?>” alt=”An elephant” />

إستخدامات ال data URI لا تعد و لكنى أجدها منتشره جدا فى سكربتات grease monkey و أيضا ألعاب الجافاسكربت التى تكون عباره عن هذه اللعبه سوبر ماريو عباره عن ملف جافاسكربت واحد فقط بدون أى صور خارجيه او اصوات او اى شىء ، كما انها متاحه أيضا للإستخدام داخل adobe air ، كما ان steve souders المهندس المتخصص فى ال performance فى جوجل حاليا و ياهو سابقا ينصح بها لجلب الملفات الصغيره كالصور داخل الصفح التى لا تتغير إلا نادرا و يتم إدخالها فى ال cache .

إستخدام كود C و C++ فى AIR

السلام عليكم و رحمه الله تعالى و بركاته

أعلنت شركه أدوبى فى مؤتمر MAX عن مشروع جديد بإسم Alchemy ، يهدف إلى تحويل أكواد ال C و ال C++ إلى كود actionscript و بذلك يمكن إستخدامه فى برامج ال  AIR ، و بما أن برمجيات AIR التى تكتب بواسطه جافاسكربت تستطيع إستخدام flash api ، فأنها تستطيع أيضا إستخدام اكواد C التى تم تحويلها إلى actionscript ، لمزيد من التفاصيل عن المشروع الجديد يمكنك مشاهده صفحه Alchemy فى adobe labs ، أكثر ما أعجبنى فى هذه الموضوع أنك تستطيع إستخدام ملايين المكتبات التى تم كتابتها بال C و التى تقوم بعمل كل شىء و أى شىء لم تمتد إليه ال AIR api .