Posts Tagged ‘Javascript’

ملحوظة صغيرة

2010/01/16
يبدو أن مبرمج ملف الـjavascript في موقع نقابة المهندسين كان متعبا أثناء برمجته و يتضح ذلك من خلال الرسالة المستخدمة للتأكد من وصول التنفيذ إلى سطر أو كتلة ما، لاحظ معي الـ واااااااع 😀 :

if (ss.readyState==4){
//alert("waaaaaaa3");

طبعا من الجيد في مختلف لغات البرمجة استخدام فكرة طباعة عبارة (أو إظهار رسالة) معينة في كتلة أو مقطع للتأكد من دخول التنفيذ إليها.
بالنسبة لي أقوم عادة بطباعة 0 ثم 1 ثم … في المنطقة التي أشك بسير التنفيذ فيها فمثلا ليكن كود الجافا التالي:
try{
ResultSet rs =...
System.out.println("0");
if(rs.next()){
System.out.println("1");
if(rs.getString(1) != null){
System.out.println("2");
...
}else{
System.out.println("3");
...
}
}else{
System.out.println("4");
...
}
}catch(SQLException e){
...
}

و ذلك طبعا أثناء العمل و ليس تبقى في التطبيق النهائي.

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

محرر nicEdit

2008/08/30

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

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

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

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

الخطوات المرحلية لتطوير المواقع

2008/03/27

من خلال تجربتي أود أن أكتبي عن الخطوات المرحلية أو المتصاعدة في التعلم الذاتي من أجل تطوير المواقع.

1 – تعلم كيف تنشئ صفحة HTML بواسطة برنامج مثل فرونت بيج أو Nvu أو دريم ويفر أو أي برنامج مشابه (كبداية) ، لا تستمر بذلك ، تعلم فقط كيف تصمم صفحة بواسطة هذه البرامج أو صمم موقع بسيط بواسطة HTML فقط ، حاول أن تطلع على الكود أحيانا مثلا و أن تعدل فيه.

2 – ابدأ بتعلم HTML و هناك الكثير من المواقع التي تحوي دورات تعليمية للـ HTML و بوقت متزامن تعلم مبادئ CSS.

3 – انتقل إلى XHTML و CSS حاول تقليل الكود ، قلل قدر الإمكان استخدام الجداول، تحقق من صحة صفحتك بواسطة XHTML Validator و هو متوفر في موقع w3.org أيضا تحقق من صحة ملف الـ CSS .

4 – ابدأ بتعلم لغة برمجة خاصة بتطوير المواقع مثل PHP أو ASP أو Python ، لعل PHP حاليا الأكثر شهرة و هي مجانية و مفتوحة المصدر و بالتالي فهناك كم هائل من البرمجيات مفتوحة المصدر المكتوبة بلغة PHP ، أنصحك أيضا بتعلم Python فهي لغة لها مستقبل كما أتوقع ، أو Ruby.

5 – تعلم بشكل بسيط JavaScript القياسية ، حاول أن تتعلمها من مراجع تراعي جميع المتصفحات فلا تتعلم مرجع يتحدث فقط عن JS، تعتبر ECMA الأكثر قياسية.

6 – طور نفسك في PHP (فيما لو كنت بدأت بها) ادرس مواضيع متقدمة مثل OOP و API و Security ، حاول أن تفهم برمجيات مفتوحة المصدر و أن تقوم بتطويرها.

7 – تعلم المزيد عن جافا سكريبت ، ادرس مواضيع متقدمة ، و ابدأ بتعلم XML ، حاول أن تنشئ مستندات XML و أن تعرضها بواسطة CSS و في مرحلة مستقبلية بواسطة XSLT ، أنشئ لغة خاصة بك بواسطة XML حاول أن تبني لها ملف إعراب parser بواسطة DTD أو XSD ، أيضا تعلم الرسم ولو بشكل بسيط بواسطة SVG .

8 – اهتم بشكل كبير بالأمان Security ( أمن الموقع أهم شيء فيه ) ، تعلم كيف تتعامل مع ملفات XML بواسطة الـPHP مثالا على ذلك حوّل قاعدة بيانات SQL إلى XML و العكس ، صمم قارئ RSS أو ATOM مثلا.

9 – ابدأ بالـ Ajax و مواضيع أخرى مثل أساليب مصادقة محركات البحث مثل الروابط النظيفة Clean URLs و تعلم عن ملف robots.txt و خريطة الموقع sitemap.xml و ابحث عن قدرات .htaccess

10 – أنشئ تطبيقات ديناميكية و استخدم فيها خبراتك في جافا سكريبت و XML بمعنى استخدام Ajax.

11 – تعرف على مكتبات للجافا سكريبت مثل prototype.js و rico.js و غيرها.

12 – أعد تقييم الكود ، في كل مرة تكتب فيها يجب أن تكون قادرا على اختصاره ، و على أن يكون أكثر قوة ، لا تجعل في تطبيقاتك ثغرات ، اختبر كل شيء ، أنشئ مكتباتك الخاصة بمختلف المجالات.

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

14 – أنشئ مدونتك الخاصة (إن لم يكن عندك) اكتب عن تجاربك ، الأخطاء التي مررت بها و كيف تجنبتها، اكتب عن التقنيات الحديثة، شارك أفكارك القيّمة مع الآخرين.


يبدو أني أطلت بالحكي ، بالنسبة لموضوع XHTML و CSS لا تزال شركات كبيرة تصمم مواقع باستخدام فرونت بيج ، عملت مرة مع شركة و كانت مهمتي هي تحويل القوالب من طويلة منشأة بواسطة فرونت بيج إلى صفحات نظيفة ، أحد المواقع اختصرت الصفحة من 400 سطر إلى 47 سطر !
هالأفكار و المراحل من وجهة نظري و من تجربتي ، قد يكون للآخرين وجهة نظر مختلفة من حيث أن بعض الأمور غير مهمة مثل SVG أو تقليل الجداول أو أي شيء آخر ، و يبقى لكل رأيه.

ملاحظة : لم أضع روابط لمواقع تخص كل موضوع من المواضسيع السابقة لأنه يمكن البحث بسهولة و ربما ما أراه مناسبا قد تراه غير مناسب ، لكن الأفضل التعلم من المصدر ( الأصل !!!).

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

2008/03/04

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

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

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