ترفندهاي طراحي وب

You are here: خانه

آخرين مطالب

پر طرفدار ترين موضوعات

شما معمولا چجوري المنتهاي يك صفحه رو كنترل ميكنيد ؟
getElementById و getElementsByTagName دو تا تابع خوب هستند براي اين كار اما باز هم دست آدم خيلي بسته هست .
فكر كنيد چند تا فيلد متني داريد كه نياز داريد گروه بندي بشن و مثلا در يك لحظه 10 تا شو disable كنيد !
استفاده از getElementsByTagName باعث ميشه همه فيلدهاي TEXT غير فعال بشن و استفاده از getElementById هم ميتونه خيلي وقت گير باشه .
در صورتي كه فرم شما قابليت اضافه كردن فيلد رو هم داشته باشه و از قبل مشخص نباشه ID فيلد چيه اونوقت ديگه هيچي . البته بازم راه داره اما خيلي سخت ميشه .
خوب به نظر شما چرا تابعي با نام getElementsByClass وجود نداره ؟
فكرشو كنيد ! كارهاي زيادي ميشه انجام داد .
خوب اشكال نداره چون يكي از دوستان اين تابع رو به صورت دستي ايجاد كرده . البته به صورت متد از كلاس document نبايد استفاده بشه بلكه به صورت يك تابع معولي .
در زير كد اين كلاس رو ميبينيم :

<script language="javascript">
function getElementsByClass( searchClass, domNode, tagName) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1)
      el[j++] = tags[i];
  }
  return el;
}
</script>

نكته : نمونه هاي ديگري هم هستند كه تفاوت زيادي با اين كد ندارند :
http://javascript.internet.com/snippets/getelementsbyclass.html
http://www.dustindiaz.com/getelementsbyclass/
http://domscripting.com/blog/display/18

Javascript compressors

چند وقت پيش كه يك كتابخانه جاوا اسكريپت رو ميخواستم دانلود كنم ديدم دو تا نسخه داره يكي مخصوص دولوپرز و ديگري فقط براي استفاده .
برام جالب بود كه حجم دومي پايين تر از اولي بود . من نسخه دولوپرز رو دانلود كردم چون فكر كردم مثلا توضيحات زيادي داره اما ديدم چيز اضافه اي در اون فايل وجود نداره !
به خاطر همين كنجكاو شدم ببينم فايل فشرده شده چجوري كم حجم شده . ترفند جالبي بود با استفاده از eval كد جاوا اسكريپت رو كمپرس كرده بودند !
يادمه چند وقت يكي از دوستان ميگفت چون فايل جاوا اسركيپتم خيلي حجيمه ميخوام با امكانات PHP اونو فشرده كنم . خوب اونم راه حل خوبيه اما وقتي از هر دو روش استفاده بشه ديگه خيلي فشرده سازي خوبي ميشه .
در حال حاضر سه تا كمپرسور رايگان هست كه اولي خيلي راحت تره نمونه كارش هم تبديل فايل 51 كيلو بايتي به 21 كيلو بايت هست:

http://javascriptcompressor.com
http://alex.dojotoolkit.org/shrinksafe
http://www.saltstorm.net/depo/esc/introduction.wbm

XUL parser for PHP-GTK

اگه با برنامه نويسي رابط كاربري جاوا آشنا باشيد ميدونيد كه جاوا مستقل از سيستم عامل هست كه اصطلاحا كراس پلتفرم گفته ميشه و برنامه اي كه در ويندوز اجرا در لينوكس هم اجرا ميشه .
البته PHP هم به واسطه PHP-GTK ميتونه اين طور باشه . اما ميخوام مبحث فراتري رو مطرح كنم . مستقل از اساس يا كراس بيس .
شما وقتي يك صفحه HTML طراحي ميكنيد ميشه برنامه Web Base و وقتي برنامه اي با مثلا CBuilder مينويسيد ميشه Desktop App
در واقع اولي مخصوص وب هست و دومي روي دسكتاپ اجرا ميشه اما برنامه كراس بيس برنامه اي هست كه هم روي وب و در مرورگر اجرا ميشه و هم روي دسكتاپ !
البته مايكروسافت هم قبلا براي اين كار تلاش كرده بود و شما كافيه يك فايل HTML رو با پسوند HTA ذخيره كنيد تا شبيه به يك برنامه دسكتاپ باز بشه و براي برنامه نويسي اون هم بايد از JScript استفاده كنيد يا VBScript.
اما هيچوقت نتونست محبوبيتي بين كاربران كسب كنه .
خوب همه شما ميدونيد XUL چيه : Xml-based User interface Language
اين قابليت باعث ميشه كه يك صفحه وب ايجاد كنيد كه كاملا شبيه به يك برنامه كاربردي هست اما web base . خوب يه نفر كه خيلي آدم خوبي بوده اومده XUL Parser درست كرده براي PHP-GTK. يعني شما يه صفحه XUL درست ميكنيد و بعدش هم تو مرورگر اجرا ميشه و هم ميتونيد به صورت يك برنامه PHP البته قابل اجرا بر روي دسكتاپ با استفاده از PHP-GTK اجراش كنيد !
اين به نظر من خيلي خوبه كه آدم بره XUL ياد بگيره و تو محيط وب باهاش كار كنه و بعد هر موقع خواست بياردش روي دسكتاپ و تبديلش كنه به يك برنامه اجرايي .
اين پروژه كه GUL نام داره در حال حاضر 75 درصد از تگهاي XUL رو پردازش ميكنه .
در تصوير زير مشاهده ميكنيد كه برنامه اجرا شده در دسكتاپ و مرورگر فرقي با هم ندارند :

روش كارش هم خيلي ساده هست فايلهاي زير رو بايد دانلود كنيد :
http://gul.redsofa.net/snapshots/Gulpad-0.0.1rc2.tgz
http://gul.redsofa.net/snapshots/Gul-2.0-snap-070506.zip
فايل اولي كه GULPAD هست خيلي كار رو ساده كرده و در واقع فقط كد XUL توش مينويسيد و با زدن F5 اولا خروجي رو نشون ميده و بعد يك فايل XUL هم ايجاد ميكنه .
شما براي اينكه بتونيد gulpad رو ايجاد كنيد بايد php-gtk رو داشته باشيد من جوري تنظيم كردم كه فايلهاي phpw رو با php-gtk بشه و واقعا مثل يك برنامه كاربردي ميتونه اجرا بشه .
البته متاسفانه مشكل قديمي PHP-GTK هنوز وجود داره و اون هم پشتيباني نكردن از فارسي هست كه همه ما اميدواريم در نسخه 6 اين مشكل رفع بشه .
اين كد باعث ميشه يك دكمه با نوشته Hello World ايجاد بشه :

<?xml version="1.0"?>
 
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window id="window"
        title="Gulpad 2.0 alpha"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="hello world"  style="direction:rtl;"/>
</window>

وقتي اين كد رو gulpad اجرا كنيد دكمه php-gtk هست و البته يك فايل xul هم ايجاد ميشه كه در فاير فاكس قابل اجرا هست .

كسب مقادير از يك كنترل

از يك كنترل موجود در صفحه چه تعداد مقادير رو ميتونيد استخراج كنيد ؟
مشكلي كه ضمن طراحي يك فرم بسيار اينتراكتيو براي من پيش اومد كه با انتخاب يك آيتم از منو بايد اون آيتم به عنوان يك سطر از جدول كه داراي ستونهاي متعددي باشه به فرم اضافه ميشد .

در حالت خيلي كلي مقداري كه ميشه از يك كنترل مثل يك تكست فيلد گرفت متن درون فيلد هست :

<html>
<head>
<title>page title</title>
<script language="javascript"> 
function get(){
var uname=document.getElementById("uname");
var username=uname.value;
alert(username);
}
</script>
</head>
<body>
<form>
<input type="text" id="uname" name="uname">
<input type="button" onclick="get()" value="alert">
</form>
</body>
</html>

اما با توجه به نمونه زير متوجه ميشيم كه تا 5 مقدار رو ميشه به يك كنترل ضميمه كرد تا در صورت لزوم استفاده بشه :

ادامه مطلب...

راه اندازي سايت

با سلام
امروز رسما فعاليت سايت ترفندهاي طراحي وب شروع ميشه و در مورد نوع فعاليت هم نام سايت گوياي همه چيز هست .
خيلي وقت بود تصميم داشتم كليه ترفندهايي كه ياد گرفتم رو در يك فايلي چيزي جمع آوري كنم تا حفظ بشه و البته موقع نياز قابل استفاده باشه . خوب ديدم چه بهتر كه اين اطلاعات در صورت مفيد بودن مورد استفاده همگان قرار بگيره و شايد روزي هم كسي ترفندهايي كه ياد گرفته رو به اطلاعات اين سايت اضافه كنه . به همين دليل آنچنان احساس مالكيتي روي اين سايت ندارم .
البته خيلي وقته كه دامين ثبت شده و هاست هم گرفته شده اما مشكلات عجيب و غريبي و گاهي وسواسهاي شخصي باعث شد كه تاريخ شروع به كار سايت به عقب بيفته .
تصميم اوليه ايجاد سيستم كاملا جديد بود و درواقع نميخواستم از CMS هاي آماده استفاده كنم اما خيلي زود فهميدم كه وقت اجازه اين كار رو نميده .
يه مدتي هم وقتم روي دروپال هدر رفت . كلي باهاش كلنجار رفتم و تمپليت ساختم آخرش يه دفعه اي يه ايرادي پيدا كرد كه ديگه طرفش نرفتم و اومديم سراغ همين جوملا .
به خاطر تجربيات خودم در مورد CMS هاي ديگه و البته توصيه شخصي آقاي بيژن هومند از نسخه اصلي استفاده كردم تمپليت رو هم از ميان 400 تا تمپليت انتخاب كردم چون اكثر تمپليت هاي ساخته شده براي جوملا زيبا اما سنگين هستند . البته تمپليت موجود هم يه خورده كار داره تا بهينه سازي بشه .

با تشكر

حميد رضا طهمورث