Archive for 29 أكتوبر, 2009

موسيقى – مقطع من الأوديسا

2009/10/29

للاستماع

Advertisements

$fx

2009/10/28
نحتاج عند تطبيق مؤثرات باستخدام جافا سكريبت إلى تغيير خصائص عناصر في الصفحة (خصائص CSS للعقد في بنية XML) و يتم ذلك عن طريق DOM و الأحداث.
فمثلا لو فكرنا كيف نصنع حركة تقوم بتكبير صورة بشكل حركي مع تغيير موضعها لتصبح في منتصف الصفحة فوق كل العناصر الأخرى، نجد أن ذلك كفكرة يتم بتغيير كل من width,height,left,top مثلا و هذا التغيير عند جعله تابعا للزمن سيصبح أفضل من تغيير القيم من القيمة البدائية إلى النهائية فقط.
مثال آخر عند استعراض صور متلاحقة مع مؤثر مثل تغيير الشفافية فيمكن النظر لذلك بأننا نقول بتغيير الخاصية opacity للصورة (filter من أجل Internet Explorer) بين قيمتين.
المهم، هناك كثير من المكتبات التي توفر توابع جاهزة للقيام بمؤثرات متنوعة مثل jQuery مثلا و لكن إن كان المطلوب من المكتبة فقط تحقيق مؤثرات و لن نستخدم إمكانياتها الأخرى مثل Ajax أو التحقق من الحقول أو … فالأفضل هو بناء المكتبة فقط لهذا الغرض أو استخدام مكتبة صغيرة.
هنا سأتحدث قليلا عن مكتبة صغيرة هي $fx تحوي بعض التوابع التي تفيد في إعداد مؤثرات حيوية.
لاحظ الصفحة الرئيسية للموقع و حركة الغيوم مثلا، تؤمن هذه المكتبة عدة توابع هي مشروحة هنا.
سأكتب مثالا صغيرا عن كيفية تحريك div إلى موقع آخر في الصفحة مع تغيير الموضع و الأبعاد و الشفافية، إضافة لذلك كيفية تنفيذ تابع آخر عند انتهاء التحريك.

CSS Code:

#p{
position:absolute;
width:100px;
height:100px;
background-color:#F9F1D2;
border:1px solid #F1DF98;
text-align:center;
right:70px;
top:10px;
z-index:10;
}

Javascript Code:

//<![CDATA[
(function(){
window.onload = function(){
var p = document.getElementById("p");
zoomin(p);
function zoomin(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:70,to:410,step:20,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:10,to:66,step:4,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:520,step:30,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:380,step:20,delay:1,onfinish:function(){
zoomout(id);
id.innerHTML = 'Hello !';
}}).fxRun(null,1);
};
}
function zoomout(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:410,to:70,step:-20,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:66,to:10,step:-4,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:100,step:-30,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:100,step:-20,delay:10,onfinish:zoomin(id)}).fxRun(null,1);
};
}
};
})();
//]]

XHTML Code:

<div id="p"></div>

لتحميل مكتبة $fx النسخة المضغوطة من هنا و لتحميل المصدر من هنا، الملفات تخضع لرخصة MIT و GPL.
و لتحميل هذا المثال البسيط من هنا.

مظاهر

2009/10/21
رآني أحدهم أستمتع بالاستماع إلى مارسيل خليفة، و بعض الناس يحبون ما لا يحبون كي يقولوا بما أحبوا لأسباب متنوعة، طلب مني أن أعطيه أغنيات لمارسيل خليفة، و برغم أني لم أكن أنوي أن أعطيه لأنه لن يقدّرها حق قدرها و لسوف تجده يضع منها ما وضح إبداؤه بأنه من ذلكون كـ رنّة لهاتفه القابل للحمل، إلا أني أعطيته مجلّدين كل منهما هو ألبوم للفنان الكبير مارسيل خليفة.
رآني بعد أيام، و في وقت مستقطع للكلام غنّى كلمات لأغنية لمارسيل، و بتلحين خاطئ سألني: بتعرفا لهالغنية؟

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

حدثني صديق لي ساخرا من مديره في العمل كيف حاول ذلك المدير تفويته في الحائط بإنزال ما لزم و ما لم يلزم من المصطلحات نحو “سيستم” و “إن بوت” و “آوت بوت” و “انفورميشن” و “ديفيلوبمنت” و …

كنت ذات مرة سأعمل في شركة صغيرة، و كان أحدهم سوف يحدد لي ما سأفعله، فكان يورد نسيانا لكلمات عربية كلمات مؤدية للغرض انكليزيا فيقول لي بتعمل سلايسنغ للصورة … و هذا إن دل على شيء فهو يدل على كبير معرفته و خبرته.

أحد معارفي القدامى، توظف في إحدى الكليات في الجامعة، وظيفته تقول بأن يفتح باب المخبر و يغلقه كما يُعتبر مسؤولا عن نقصان محتوياته، هذا الأخ لا يوفر مناسبة كي يشرح لي عن معاناته في تدريس الطلاب (ما قبل المهندسين) و كم يعذبونه… و إنك تجد لديه براعة في تحويل أي حديث إلى الحديث عن عمله و معاناته كمعيد في كلية هندسة عند تواجد آخرين.

كي تكون ذا شخصية معتبرة و ملفتة (خصوصا للآنسات) احمل بيديك (موبايل، باكية دخان جيتان أو أعلى، قداحة، نظارات شمسية و رزمة من المفاتيح) هذا معيار لشب فايت بالحياة و هو لها مواكب.

كنت منذ فترة في مجلس متنوع، و حدث أن رغبت بالملاحظة أو المراقبة، كانت إحداهن لا تدع حديثا يطرح إلا و تبدي رأيا فيه و تتركه بمجرد أن سمعت حديثا آخر يدور بين آخرين في محاولة يشوبها الكثير من النفاق لتكون شخصية اجتماعية و “فهمانة”.

بدك تصير “مثقف”؟ بسيطة
احفظ عناوين لمؤلفين مشهورين هذا الوقت أو إذا أحببت اقرأ لهم أو عنهم (أمثلة: أحلام مستغانمي، جبران خليل جبران، …) و حدّث بهم، كما ستكون خطوة قوية أن تنتقد الأدب السوفييتي مثلا.

أما ما هو أسهل من ذلك هو أن تصبح شاعرا، فأما الشعر العربي القديم (شعر الشطرين) لا حاجة لك به انتقده و اعتبره قديما لا يناسب زماننا و اتجه للتعقيد و إخفاء المعاني و المقاصد.

التعقيد يا سيدي هو أن تقول ما لا يفهمه الآخرون فيحسبونه عدوا انطلاقا من أن الإنسان عدو ما يجهل :)، و لا تقلق حول كيف تكتب الغموض، يمكنك أن تشتري جريدة مثلا و تقرأ نماذج في صفحة الشعر و إليك هذين المثالين مني أنا:

بين التلال و ثمرات العناب
كانت تجلس وردة
غطّت أشواكها حصى البحر
و تبكي الغيوم طول الغياب

بين عينيه و يديه كان دُخانْ
قدمت أوراقي و أغصاني حطبا لمدفأته
أحبني من فرط ما أحس بالدفئ
لم يجدني…
فحما كنت قد صرت
استخدمني فحما لأركيلته
و عاد الدُخانْ