Archive for the ‘opensource’ Category

$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.
و لتحميل هذا المثال البسيط من هنا.

Advertisements

State Pattern

2009/05/05

أي، مرحبا
اليوم كان عندي تقديم جزء* من محاضرة في هندسة البرمجيات، كنت سأتحدث عن النموذج State و هذا ما حصل.

هنا PDF (صفحتين) و هنا مثال Java

مختصر جدا، لكن هذا رأيي (مختصر مفيد).


* استغرقت 7 دقائق تقريبا

Install XAMPP, Java, Python3.0 On Linux

2009/05/02

XAMPP
الحصول على آخر إصدار من XAMPP الخاص بنظام التشغيل لينكس، حاليا هو هذا.
فك ضغط الملف إلى المسار /opt:

sudo tar xvfz xampp-linux-1.7.1.tar.gz -C /opt

فقط.
لتشغيل XAMPP:

/opt/lampp/lampp start

و ملفاتك سوف يجب أن تضعها في المسار /opt/lampp/htdocs
ملحوظة: قد يظهر أن سيرفر آخر يعمل، و لذلك تحتاج لإغلاق هذا الأخير، يمكن استخدام التعليمة ps -A لاستعراض العمليات تمهيدا لإنهاء العملية التي نبغي.
المزيد هنا حول XAMPP.

Java

sudo apt-get install sun-java6-jdk

Python3.0

sudo apt-get install build-essential libncursesw5-dev libreadline5-dev libssl-dev libgdbm-dev libbz2-dev libc6-dev libsqlite3-dev tk-dev g++ gcc
wget http://www.python.org/ftp/python/3.0/Python-3.0.tgz
tar xvzf Python-3.0.tgz
cd Python-3.0/
./configure
make
sudo make install

محرر nicEdit

2008/08/30

محرر نصوص أو ما يسمى بـ WYSIWYG التي تعني What You See Is What You Get جديد كما أعتقد هو nicEdit ، يتميز بأنه بسيط و صغير جدا ، المحررات الأخرى المعروفة ذات حجم كبير يزيد عن الـ 2 ميغا بعد فك الضغط و يصل للـ 5 ميغا بايت أما هذا فحجمه بعد فك الضغط 34 كيلو بايت و يتألف من ملف جافا سكريبت و صورة gif فقط.
قابل للتخصيص بشكل جيد و مناسب للكثير من المناطق ، فكثيرا ما تكون الحاجة لمحرر بسيط و بإمكانات محدودة و لا داعي عندها لتركيب محرر مثل TinyMCE أو غيره …

هذه صورة للمحرر

يمكن تجربته و تحميله من موقع المنتج.

للمهمات الأكبر أنصح باستخدام openWYSIWYG.

يكفي منتديات

2008/04/13

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

الحالة تتكرر، في كل مرة أبحث باللغة العربية أغلب النتائج تكون من نوع showthread.php?t=x منتديات VB مسروقة أولا و نفس المواضيع المنقولة و نفس عبارات الشكر، تفتح مشاركة يقوم العضو البطل بوضع برنامج مثلا يحتاج لـ serial number و يضع الرقم المطلوب ( سرقة يعني ) و تكون الردود مشكور أخي الكريم ، جزاك الله خيرا ! ، جعله الله في ميزان حسناتك … إلى ما هنالك

لاحظت أنه يأتي شخص ما فيدخل للانترنت مبتدئا بعد أيام يسجل في منتدى أو عدة منتديات ، تأتي على باله فكرة إنشاء منتدى خاص به يبحث فيجد الـVB مسروق في كل مكان و نسخ ماسية و ذهبية و … و مواقع استضافة تضع عروض من نوع : تركيب منتدى VB النسخة الماسية مع ستايل احترافي

يعني شيء مثير جدا للسخرية ، متى سننتهي من هذا ؟ المنتدى له فوائد في بعض الحالات مثلا عندما يكون منتدى تابع لمنتج مثل Drupal يكون وقتها جيد ففيه تتم مناقشات حول المنتج و تبادل معرفة.

أما المنتديات التي لا عداد لها و كلها تحوي نفس الأقسام مع بعض السخافات في التسميات فكلها : المنتديات العامة ، الترحيب بالأعضاء الجدد ، الكمبيوتر و الانترنت ، الأسرة ، المرأة [1] ، منتدى الشكاوي و الاقتراحات …

حتى بعض المواقع التي تدعي أنها أرقى يكون هناك منتدى لكن مختص بالثقافة مثلا حيث لا يوجد ترحيب ولا موبايل و لا أسرة و مرأة ، طيب لماذا لا تستخدمون نظام آخر غير المنتدى ؟ طيب استخدمتم منتدى لماذا تستخدمون منتج مسروق ؟ يوجد الكثير من أنظمة المنتديات المجانية ، لماذا لا تحاولون تغيير شكله قليلا ؟ كم أكره منظر المنتديات المعروف ، تأخذ كامل الصفحة و تقسيمات عرضانية و … لماذا ؟ لا يتطلب كثيرا تغيير الشكل فقط معرفة بالـ HTML تكفي و لكن هيهات نسخة ماسية و تصميم احترافي !

صحيح أن هناك بعض المنتديات الناجحة و أنا أزورها و أشارك في بعضها و لكن ما النسبة؟ 0.0001 % مثلا ؟

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

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

هناك الكثير و الكثير جدا من البرمجيات مفتوحة المصدر المجانية التي تملك ميزات ممتازة ، جربوها ، جربوا التغيير ، يكفي سرقة و منتديات فارغة ، اعملوا شي مفيد
———–
أنصح بتجربة

Drupal.
UNB Board.
WikyBlog.

برامج مجانية

FreeWareFiles

يعني عنجد لا داعي للسرقة

————-
[1] في كل المنتديات تقريبا تجد منتدى المرأة ! لماذا لا يوجد منتدى الرجل مثلا ؟ تقليد أعمى !

مجموعة تطبيقات Ajax

2008/03/04

مجموعة من تطبيقات الأجاكس الأنيقة :

FrogJS معرض صور بسيط و أنيق.
Swazz أداة لاختيار التاريخ.
Unobtrusive للتقييم.
ajaxim مشابه لبرامج المحادثة.
Suckerfish HoverLightbox يمكنك مشاهدة مثال عنه من هنا.
Ajax Domain Search للبحث عن أسماء النطاقات.
Transparent message يعرض رسائل حول نجاح أو فشل بعض العمليات بطريقة جميلة.
Relay لإدارة المسارات و الملفات بإمكانات كبيرة.

أتمنى أن تنال الإعجاب

إطار مظلل بلا صور

2008/02/21

من خلال مشاهداتي لأساليب التصميم المختلفة المتبعة لإنشاء إطار حول صندوق أو صورة لاحظت أن يتم استخدام طريقتين فقط.

الأولى : تقوم على وجود جدول مقسم إلى خلايا بحيث يوجد في الخلايا المحيطية صور صغيرة هي عبارة عن تقطيعات لصورة أو مقاطع بعرض أو ارتفاع 1 بكسل مكرر أفقيا أو عموديا.

الثانية : هي وجود صورة كخلفية بشكل كامل و بهذا فهي معدّة سلفا لطول و عرض محددين.

لا أعلم إن كنت حتى الآن عرفت عن أي شيء أتكلم ، انظر هذه الصورة و ستعرف عما أتكلم.

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

الطريقة التي خطرت لي هي كالتالي :
div ضمن div ضمن div ضمن … عدد معين منهم و كل واحدة تملك إطار Border لونه أقل من الآخر و بعرض 3 بكسل مثلا ، ستشكل بمجموعها إطار يكافئ الحالات السابقة إلا أنه بدون استخدام صور و ملائم في أي مكان.
إليكم الكود :

CSS

.pict{
width: 100px;
height: 100px;
padding: 0;
background-color: #FFFFFF;
}
.pict div{
border: 3px solid #FEFEFE;
padding: 0;
}
.pict div div{
border: 3px solid #FCFCFC;
padding: 0;
}
.pict div div div{
border: 3px solid #F9F9F9;
padding: 0;
}
.pict div div div div{
border: 3px solid #F5F5F5;
padding: 0px;
}
.pict div div div div div{
border: 3px solid #F0F0F0;
padding: 5px;
}
.pict div div div div div *{
border:0;
padding: 1px;
}

مثال :

مرحبا ، هذه تجربة لصندوق بطول 125 و عرض 125 !

اضغط هنا لتحصل على ملف مضغوط يحوي كود css مع صفحة html تستخدمه.