UX یا UI مساله این است ، روز جهانی کاربردپذیری

by MDP 17. October 2011 18:40

این روز ها همه وبسایت طراحی می کنند ، شما چه طور ؟

این مطلب رو به دو دلیل میخوام بنویسم.

اولیش همایشیه که به دلیل روز جهای کاربرد پذیری قراره برگذار بشه و من به شخصه امید وارم که مطالب خوبی توش بیان بشه.امیود وارم شما رو اونجا ملاقات کنم.فقط اگه دوست دارید بیاید حتمی زودتر ثبت نام کنید.چون ظرفیت محدود است !

دومین دلیلش هم اینه که من برای وبلاگم دنبال یه طراح UI که به UX وارد باشه می گردم.

شما کسی رو می شناسید ؟

Tags:

General

ASP.Net Custom Server Control Property Collection

by MDP 16. October 2011 11:56

بیشتر شرکت ها معمولا برای کار هاشون یک سری کنترل طراحی میکنن که سرعت کارشون رو افزایش بده.

مثلا کنترل های 

  • Grid
  • Search Textbox
  • ...
برای این کار شما فقط باید داخل یک کلاس از کلاس والدی مثل WebControl ارث بری کنید.
 
برای مثال شما برای کارتون قراره یک TextBox ایجاد کنید که با تایپ درونش قبل از LostFocus شدن از تکراری نبودن اطلاعات  درونش اطمینان حاصل کنید.
به طور پیش فرش میشه این کار رو با چند خط کد جاوااسکریپت و یک سرویس ساده پیاده سازی کرد.
ولی شما به این کنترل احتیاج دارید و استفاده زیادی ازش می کنید.ژس منطقی نیست که هر دفعه این کد ها نوشته بشه.
شما می تونید به راحتی این کار رو انجام بدید.با یم سرچ ساده به اطلاعات کامل و خوبی می رسید.
 
احتمالا تا حالا به Property های داخل یک کنترل برخوردید که داخل بدنه کنترل نوشته میشن.
مثل این :
 
<asp:BulletedList runat="server" ID="bltList">
        <asp:ListItem Enabled="true" Selected="False" Text="text1" Value="text1value" />
        <asp:ListItem Enabled="true" Selected="False" Text="text2" Value="text2value" />
        <asp:ListItem Enabled="true" Selected="False" Text="text3" Value="text3value" />
 </asp:BulletedList>
 
برای ساختن کنترل هایی که بتونن به عنوان پراپرتی از شما اطلاعات بگیرن و زمان رندر از اونا استفاده کنن روشی وجود داره.
در مثال بالا BulletedList یک کنترل ASP.Net هست که مقادیر خودش رو داره و در کلاس BulletedList وجود دارند.
نکته اصلی اینجاست که ListItem ها هم کلاسی هست که مشخصات و پراپرتی های خودش رو داره.
ولی برای اینکه داخل BulletedList قابل شناسایی باشه شما باید یک پراپرتی از نوع اون کلاس مورد نظر ( در اینجا ListItem( و به صورت List تعریف کنید.
برای اینکه به کنترل بفهمونید که این لیست حاویه اطلاعات مختصل این کنترل هست و باید از توی Designer خونده بشن باید Attribute زیر رو هم به پراپرتی بدید :
 
[PersistenceMode(PersistenceMode.InnerProperty)]
public List<searchTextBoxEvent> SearchTextBoxEvents { get; set; }
 
 
برای اینکه کلاس والد بفهمه که باید پراپرتی های داخلی خودش رو هم چک کنه باید به کلاس والد Attribute زیر رو هم داشته باشه :
 
 
[ParseChildren(true)]
public class SearchTextbox : WebControl
{
 //...
}

Tags:

.Net | ASP.Net

همسان کردن اطلاعات تیم.

by MDP 16. October 2011 11:30

چند وقتیه که توی شرکت ، کلاس هایی برگذار میشه با عنوان های‌:

  • ASP.Net
  • Advanced C#
  • JavaScript
  • MS SQL Server
وقتی برای اولین بار ایمیل برگذاری این کلاس ها برای من اومد به شدت بهم برخورد.مطالب بسیار ساده و عادی بودن که هر برنامه نویس و توسعه دهنده تازه کاری اونا رو می دونست.
ناراحتی من ادامه داشت تا جلسه اول کلاس.
آیدین ( معاون محصول شرکت ، البته اسم ایشون آیدین توکل هست که بچه ها آیدین صداش می کنن ) اول جلسه همین موضوع رو عنوان کرد و گفت ما همه این موضوعات رو بلدیم و اطلاعاتمون کامله ولی هدف اصلی این کلاس همسان کردن دانش افراده و یکی کردن درک ها از موضوعات مختلف.
 
حالا بعد از تمام شدن کلاس های دور اول چیز های خیلی جالبی از بازخورد این کلاس رو من توی شرکت می بینم.
وقتی با همکاری در مورد بخش خاصی صحبت می کنیم همه رفرنس اطلاعات خودشون رو به اون کلاس می دن و در نتیجه بحث زود تر و دقیق تر به نتیجه میرسه.
 
در تیم های بزرگ یکی از اصلی ترین دلایل پیش رفت هم سطح بودن اطلاعات هست.در این جور تیم ها شما لازم نیست وقی به همکارتون برای حل مشکلش راهی پیشنهاد میدید نگران این باشید که فرد مورد نظر از روشی که شما گفتید اطلاعاتی داره یا نه.شما فقط راهکاری که توی ذهن خودتون هست و به ذهن کسی نرسیده و یا راهکاری که بر اساس تجربه به دست اوردید رو به اشتراک میزارید.
 
تنها مساله مهم اینه که هیچ وقت فراموش نکنید ، این جور دوره ها جای جنگ اطلاعات نیست، چون همیشه شرکت ها برای کارشون یک سری محدودیت هایی تائین می کنن که شاید در دنیای واقعی محدودیت نباشه ( مثلا در چارگون استفاده از کوکی حرام است !‌:)‌ )

Tags:

Work

روز سیاه تکنلوژی ، استیو جابز درگذشت.

by MDP 7. October 2011 16:36

 

خیلی کم میشه وقتی کسی از این دنیا می ره ، تمام دنیا به خاطرش ناراحت بشن و براش اشک بریزن.

استیو جابز واقعا یکی از اون افرادی بود که هر کسی که خبر درگذشتش رو شنید ناراحت شد.

شما چه یکی از طرفداران اپل باشید و چه نباشید.حتمی محصولات خارقالعاده اپل رو که حاصل تفکرات جابز بوده دوست داشتید و دارید.

وقتی تصاویر طرفداران جابز رو نگاه می کردم و می دیدم که چه طور براش اشک میریزن ، واقعا دلم گرفت.

روحش شاد.

 

Tags: ,

General

نوشتن افزونه برای jQuery–قسمت صفرم

by MDP 19. July 2011 22:42

دو روزه درگیر نوشتن یه پلاگین هستم که بتونه آخرین Tweet ها رو نشون بده.البته با توجه به فیلتر بودن Twitter باید از یه پراکسی برای این منظور استفاده کرد که کار سختی نیست و راحت میشه نوشتش.به زودی این پلاگین رو که به صورت Open Source می خوام انتشارش بدم رو روی CodePlex میزارم.

برای قشنگ کردن و چند تا افکت حسابی تصمیم گرفتم که از jQuery استفاده کنم و خروجی کار رو به صورت یک Plugin برای jQuery در بیارم.با اینکه خیلی وقته از jQuery استفاده می کنم ولی هنوز اطلاعات مفصلی از پلاگین نویسی نداشتم.به همین خاطر توی گوگل یکم سرچ کردم و به وبلاگ آقای نیما بغدادی رسیدم(+).آموزش سه قسمتی ایشون در نوشتن پلاگین خوب بود ولی یه مشکلی داره به نظر من.

این آموزش ها خیلی سطح بالا نوشته شدن و برای من که تازه کارم یکم سخت بود.به همین خاطر تصمیم گرفتم با زبانی ساده تر نوشتن پلاگین توضیح بدم.

قسمت صفرم :

من به شخصه همیشه از قسمت صفرم کتاب هام متنفر بودم.ولی الان مجبورم که این قسمت رو بنویسم. Smile

برای نوشتن هر پلاگین jQuery شما باید jQuery رو بشناسید و حداقل این مقاله ها رو مطالعه کنید.

 

()jQuery.extend

 

یکی از کتاب روال های اصلی jQuery که حتمی باید اون رو خوب بشناسید jQuery.extend هستش.

این روال همونطوری که از اسمش پیداست وظیفه گسترش(یا به عبارت دیگر ترکیب) چیز هایی(!) رو بر عهده داره.شما با این روال میتونید این فعالیت هارو انجام بدید :

  1. گسترش یک آرایه از Property ها
  2. گسترش یک آرایه از Event ها یا روال ها
  3. هر دو مورد بالا با هم.

ولی گسترش به چه معناست؟

گسترش یک آرایه از Property ها : فرض کنید شما پلاگینی نوشتید که وظیفه تغییر رنگ یک object رو بر عهده داره.اگر شما در نظر داشته باشید که بتونید هر دفعه یک رنگ خاصی مد نظر شما اعمال بشه باید بتونید مقدار رنگ رو به پلاگینتون پاس بدید.مثل این :

$("#someDive").ChangeColorPlugin({
   color:"#f97141"
});

گسترش یک آرایه از Event ها یا روال ها :حتمی توی پلاگین های jQueryUI دیدید که یک سری از Event ها از بیرون کلاس قابل دستیابی هستند.

مثلا شما فرض کنید که پلاگین تغییر رنگ شما باید بعد از تغییر رنگ متد ثالثی رو از فراخوانی کنه.پس شما مجبورید این مورد رو از داخل پلاگین کنترل کنید که بعد از تغییر رنگ این روال خارجی صدا بشه.احتمالاً همچین چیزی :

$("#someDive").ChangeColorPlugin({
   OnCompelete:function(){alert("done")}
});

هر دو مورد بالا با هم: شاید هم هردو مورد باهم :

$("#someDive").ChangeColorPlugin({
   color:"#f97141",
   OnCompelete:function(){alert("done")}
});

روش انجام این گسترش ها با روال jQuery.extend هست.

 

متد jQuery.extend که جزو متد های اصلی jQuery هست به صورت زیر تعریف میشه :

jQuery.extend( [deep,] target, object1, [objectN] )

مشخصات پارامتر ها :

  • deep : طبق گفته سایت jQuery در صورت True بودن انجام گسترش به صورت بازگشتی خواهد بود.یعنی داخل آبجکت ها هم برای ترکیب جست و جو میشه.این گزینه برای گسترش متد ها کاربرد داره.
  • target : آبجکتی که باید گسترش پیدا کنه
  • object1 : مقداری که شما به target میخواید که اضافه بشه.
  • objectN : تعداد آبجکت های اضافه شونده محدود نیست.یعنی شما تا N آبجکت رو میتونید به یک آبجکت گسترش بدید.

برای گسترش سه حالت ذکر شده بالا محتمل هست.همه این حالات رو ما بررسی می کنیم :

روش پیاده سازی گسترش یک آرایه از Property ها :

فرض کنید شما آبجکتی به صورت زیر دارید :

var defaults = {
    Color: '#cccccc',
    Interval: 1000,
};

و لی قصد دارید این آرایه رو با آرایه زیر گسترش بدید

var obj = {
    Color: '#c3c3c3',
    BaseColor :'#ffffff'
};

روش انجام این کار به این صورت خواهد بود :

var obj2= $.extend({}, defaults , obj);

پس از extend کردن آبجکت defaults به obj طبق تعریف متد extend آبجکت defaults به این آبجکت تبدیل میشه :

var defaults = {
    Color: '#c3c3c3',
    Interval: 1000,
    BaseColor :'#ffffff'
};

یعنی علاوه بر جایگزینی مقادیر یکسان در دو آبجکت ، مقادیر جدیدی هم که در آبجکت اول موجود نیست، از آبجکت دوم کپی میشه و با آبجکت اوا اضافه میشه.

روش پیاده سازی گسترش یک آرایه از Event ها یا روال ها:

این روش هم دقیقا مثل روش قبلی پیاده سازی میشه به همین خاطر من فقط با چند تا مثال مفهوم رو ارائه می کنم:

فرض کنید آبجکت اول شما این آبجکت باشه :

var obj3 = {
    show : function(){ /*Some logic goes here*/ },
    Hide : function(){ /*Some logic goes here*/ }
}

و همچنین این آبجکت که قراره به obj3 گسترش پیدا کنه :

var obj4 = {
    Hide : function(){ /*this is another logic*/ },
    Init : function(){ /*Some logic goes here*/ }
}

و حالا گسترش :

var obj5= $.extend(true, obj3 , obj4);

از این به بعد obj3 به این صورت خواهد بود

var obj3 = {
    show : function(){ /*Some logic goes here*/ },
    Hide : function(){ /*this is another logic*/ },
    Init : function(){ /*Some logic goes here*/ }
}

تنها نکته اینجاست که شما باید مقدار پارامتر deep رو به True مقدار دهی کنید تا متد های شما داخل آبجکت شما هم گسترش پیدا کنن.

روش پیاده سازی هر دو مورد بالا با هم:

پیاده سازی اصلی برای Property ها و متد ها رو یاد گرفتیم، ولی حالا چه طور ترکیب این دو رو استفاده کنیم؟

ابتدا اجازه بدید آبجکت های اولیه و فرضی خودمون رو معرفی کنیم :

آبجکت اول که همون آبجکت اصلی هست به صورت زیر فرض می کنیم :

var obj6 = {
    Color : '#f97141',
    interval : 1000,
    show : function() { alert('Show'); },
    hide : function() { alert('hide from obj6'); }
}

و همچنین آبجکت ثانویه :

var obj7 = {
    Color : '#c3c3c3',
    hide : function() { alert('hide from obj7'); }
}

برای ترکیب مثل روش های قبل عمل می کنیم.فقط چون ما در قصد گسترش متد هامون هم داریم باید مقدار پارامتر deep رو به true مقدار دهی کنیم :

var obj8= $.extend(true, obj6 , obj7);


پایان قسمت صفرم.

به روزرسانی :

برای فهم بیشتر یه مثال ساده آماده کردم  که میتونید از فایل زیر دریافت کنید:

Example.zip (32.42 kb)

Tags: ,

jQuery

My Groups

Poll

از چه پلتفرمی برای توسعه استفاده می کنید



Show Results

Month List