A new begining
AHHP presents

آیا Application من خوب نوشته شده؟
07 شهریور 1389 ساعت 11:10

از اونجایی که برنامه نویسی انتها نداره و هیچکس درش کامل نیست، وقتی برنامه ای میسازیم واسمون سوال پیش میاد که آیا این Application به روش خوبی نوشته شده؟ آیا مشکل ساختاری نداره؟
نکنه روش من با روش استاندارد و معیار کاملا متفاوت باشه یا براحتی هک بشه!

برای اینکه بفهمیم یک Application خوبه یا نه، چند تا شرط رو باید داشته باشه:

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

• دوم. مشکل ساختاری اساسی و معضل امنیتی نداشته باشه.
  باید همیشه به روز باشیم یا با شیوه های نوین آشنا باشیم (در حد توان) ولی در حالت کلی باید ساختار رو کامل تحلیل کنیم و اشکالاتش رو کشف کنیم.
  مثلا یک سیستم مدیریت کاربر نوشتیم که کاربر میتونه هر کاراکتری رو به عنوان نام کاربری انتخاب کنه. وقتی چنین قابلیتی رو داریم تعریف می کنیم باید فکر این رو هم بکنیم یه نفر چنین Usernameای رو انتخاب کنه: "          " یعنی 10 تا Space و این ناجوره! باید چنین مواردی رو کشف کنیم و راه کشفش هم تحلیل سیستمه.

• سوم. توسط نویسنده اش قابل فهم و توسعه باشه.
  کدی که خود من (نویسنده اش) امروز یا چند وقت دیگه ازش سر در نمیارم، به درد سطل آشغال میخوره! یا اگه ازش سر دربیارم ولی نتونم توسعه اش بدم هم همون وضعیت رو داره.

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

• پنجم. دمده و عهد بوقی نباشه ، بروز باشه.
  هر ساختاری یک عمر داره وقتی عمرش بگذره دیگه جوابگو نیست و باعث میشه شرایط بالا نقض بشه.

برچسب ها: solution

•  
•  
•  
•  
•  
•  
•  

باز شدن خودکار لینکهای خارجی در پنجره جدید توسط JavaScript
02 تير 1389 ساعت 11:00

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

var hostname = window.location.hostname;
var anchors = document.getElementsByTagName("a");
for(var i=0; i<anchors.length; i++) {
	if(	anchors[i].href
		&& anchors[i].href.indexOf(hostname) == -1
		&& !anchors[i].target
	) {
		anchors[i].target = "_blank";
	}
}

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

var hostname = window.location.hostname;
var selector = 'a[href]:not([href*='+hostname+']):not([target]';

• MooTools:

  $$(selector).set('target', '_blank');

• jQuery:

  $(selector).attr('target', '_blank');

من اینجا یکم محدودیت عرضی دارم که طول خطوط کدها طولانی نشه وگرنه این کدها رو میشه تو یک خط اجرا کرد بجای اینکه هر تیکه اش رو تو یه متغیر بریزیم.

برچسب ها: javascript,solution

•  
•  
•  
•  
•  
•  
•  

روش بکارگیری Timestamp در PHP و MySQL و JavaScript
30 خرداد 1389 ساعت 01:44

یکی از روشهای خیلی خوب بدست گیری زمان در برنامه نویسی، استفاده از زمان به شکل Timestamp تعریف شده در Unix است.

Timestamp ثانیه های طی شده از 00:00 1970/01/01 تا الانه. همونجوری که واضحه، زمان به این شکل، یک عدد صحیح خواهد بود و مهمترین خاصیتش سهولت نگهداری و مقایسه است.

زمان در PHP بر پایه Timestamp تعریف شده ولی در MySQL و JavaScript چنین نیست و معمولا برای هماهنگی این سه زبان، مجبوریم کدهای اضافی داشته باشیم درحالیکه هر سه این زبانها، امکاناتی برای کار با Timestamp بر پایه Unix دارند.

در زیر یک مثال در هر کدوم از این زبانها قرار گرفته:
• PHP:

  $timestamp = time();
  $date = date('Y F d', $timestamp);

• MySQL:

  timestamp = UNIX_TIMESTAMP()
  date = FROM_UNIXTIME(UNIX_TIMESTAMP(), '%Y %D %M %h:%i:%s %x')

• JavaScript:

  var timestamp = parseInt(new Date().getTime()/1000);
  var date = new Date(new Date().getTime()).getDay();

برچسب ها: javascript,mysql,php,solution

•  
•  
•  
•  
•  
•  
•  

HTML TABLE، خوب یا بد؟
19 خرداد 1389 ساعت 01:27

شاید توی طراحی قالب، به عبارت Tableless (به معنای "بدون جدول") برخورده باشی یا شنیده باشی که میگن توی طراحی از از جدول کمتر استفاده کنیم.
میخوام توضیح بدم که چرا نباید زیاد از جدول استفاده کنیم یا چرا طراحهای قالب به Tableless بودن قالبهاشون می نازند.

اول از محاسن Table میگم، بعد از معایبش و مقایسه اش با مدل CSS و در آخر یک جدول رو یکبار با تگ TABLE و یکبار توسط CSS خواهی دید. باید و نبایدهای HTMLTABLE

برچسب ها: css,solution

•  
•  
•  
•  
•  
•  
•  

JSON و JSONP
16 اردیبهشت 1389 ساعت 12:39

مقدمه:
"اطلاعات" دارای ماهیت فیزیکی نیست و هر روشی برای نگهداری و انتقالش قراردادی است. در فضای وب هم برای انتقال اطلاعات روشهایی قرارداد شده که اگر مبدا یا فرستنده اطلاعات رعایت کنه، مقصد یا گیرنده کاملا میتونه درکش کنه.

نمونه: من یه لیست از دانش آموزهای یک کلاس دارم به همراه نمره اشون. می خوام به تو بدم که ببینی.
چند مدل می تونم این لیست رو درست کنم؟ یک مدل اینه که اسم هرکس رو می نویسم و نمره اش رو جلوش می نویسم و اسم بعدی در خط بعدی (مثل لیست نمراتی که هممون سراغ داریم). یک مدل اینه که همه رو پشت سر هم می نویسم یعنی اسم دانش آموز، بلافاصله نمره اش، یک نقطه و اسم بعدی. یک مدل دیگه اینکه یه فرمول اختراع می کنم و لیست رو براساس اون فرمول میچینم که لیستم به یک چیز عجیب غریب و غیرقابل فهم تبدیل میشه و برای اینکه بفهمم فلان دانش آموز نمره اش چنده باید از طریق همون فرمول عمل کنم. و ....
نمیشه گفت چند تا راه برای این کار وجود داره. ولی همه از لیست مدل زیرهم استفاده می کنند چون طبق یک قرارداد نانوشته است و همه ازش سر درمیارند.

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

JSON مخفف JavaScript Object Notation است یعنی نشانه گذاری توسط اشیاء جاوااسکریپت. JSON در واقع شیء و آرایه جاوااسکریپت هست که وقتی متن رو به اون شکل مرتب کنیم، در زبان جاوااسکریپت میشه دوباره به Object یا شیء تبدیل کرد و استفاده کرد.

توضیحات بیشتر و معرفی JSONP

برچسب ها: ajax,json

•  
•  
•  
•  
•  
•  
•  

آموزش استفاده از Selectorهای CSS
27 اسفند 1388 ساعت 12:25

Selector یا انتخابگرهای CSS، فرمتهایی برای دسترسی بیشتر به اجزای صفحه است. برای نمونه،انتخابگر زیر:

div:first-child[id*=some] span.someClass + p ,
.someClass#someID {
	color: red;
}

برای اولین P بعد از یک SPAN با کلاس someClass که زیرمجموعه یک DIV باشه DIVای که اولین عضو زیرمجموعه خودش باشه و مقدار مشخصه ID اون کلمه some توش باشه، به اضافه Element با ID برابر someID و class برابر someClass اعمال میشه.
یعنی در کد زیر، P 3 و SPAN 2 و SPAN 4 قرمز میشه.

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			div:first-child[id*=some] span.someClass + p ,
			.someClass#someID {
				color: red;
			}
		</style>
	</head>
	<body>
	
		<div id="someDiv">
			DIV 1
			<p>P 1</p>
			<p>P 2</p>
			<div>DIV 2</div>
			<span class="someClass">SPAN 1</span>
			<p>P 3</p>
			<span id="someID" class="someClass">SPAN 2</span>
		</div>
	
		<div id="someDiv">
			DIV 3
			<p>P 4</p>
			<p>P 5</p>
			<div>DIV 4</div>
			<span class="someClass">SPAN 3</span>
			<p>P 6</p>
			<span id="someID" class="someClass">SPAN 4</span>
		</div>
	
		<p>P 7</p>
	
		<div>
			DIV 5
			<p>P 8</p>
		</div>
	
	</body>
</html>

میخوایم این انتخابگرها رو دونه دونه از ساده به پیچیده با مثال توضیح بدیم. ادامه آموزش

برچسب ها: css,آموزش

•  
•  
•  
•  
•  
•  
•  

Delegation با اسب سفید
16 اسفند 1388 ساعت 11:53

همونطور که مستحضریم، جاوااسکریپت امکان تعیین Event رو به هر Element از صفحه میده که مثلا اگر فلان Element کلیک شد این اتفاقا بیافته و اگر یکی دیگه mouseover شد اون یکی اتفاقا بیفته و غیره. تعیین این Eventها از طریق Frameworkها مثل MooTools و jQuery عجیب آدم رو یاد هلو میندازه. مخصوصا که امکان تعریف Evnet های اختصاصی رو هم میدن مثل OnLoveBoplo، OnVisitBoplo و غیره.

این فریم ورکها، امکانی برای اجرای کد در زمان تکمیل DOM رو دارند که در MooTools رویداد domReady و در jQuery متد ()ready. که به ما امکان قرار دادن کدها رو در <head> صفحه میدن و خیلی کاربرد دارند. مثل کدهای زیر که وقتی هر لینکی کلیک شد، یه alert ناقابل نمایش میده:

// MooTools
window.addEvent('domready', function(){
	$$('a').addEvent('click', function() {
		alert("You've clicked " + this.href + "!");
	});
});

// jQuery
$(document).ready(function(){
	$('a').click(function() {
		alert("You've clicked " + $(this).attr('href') + "!");
	});
});

همونطور که گفتم این کد در زمان تکمیل DOM یکبار انجام میشه و Eventها رو تنظیم می کنه. همه چی آرومه و من خیلی خوشحالم تا اینکه یه جایی یک لینک توسط جاوااسکریپت ساخته میشه یا توسط Ajax به صفحه اضافه میشه و کاملا منطقی خواهد بود که چون موقع اجرای کدهای بالا اون لینک وجود نداشته، Eventاش هم Set نشده و کدهاش هم اجرا نخواهد شد. برای حل این مشکل سه راه وجود داره ....
برای اینکه بفهمی Delegation چیه، چرا خوبه و چطور عمل می کنه، ادامه مطلب رو بخون....

برچسب ها: javascript,jquery,mootools,solution

•  
•  
•  
•  
•  
•  
•  

LazyLoad، یک تنبل دوست داشتنی
13 اسفند 1388 ساعت 11:17

یه زمانی جاوااسکریپت منفورترین قابلیت تحت وب بود ولی بعد از پیدایش MooTools و jQuery و Prototype و غیره، به یه بخش مهم سایتهای حرفه ای تبدیل شده. از اون مهمتر اینکه باعث تحریک ذهنهای خلاق و طراحهای خوش ذوق شده. Lazy Load یکی از این خلاقیتهاست. Lazy Load یه روش جالب برای لود تصاویر در صفحه های بلنده. مثلا سایت SmashingMagazine عزیز پست داره با این عنوان: "80 قالب زیبا برای وردپرس" این یعنی این مقاله قراره 80 تا عکس داشته باشه و از اونجاییکه این سایت یک سایت حسابیه و مخاطبینش هم سرعت اینترنت حسابی دارند (البته غیر من)، با خیال راحت کلی عکس با کیفیت میریزه تو صفحه. اما با وجود سرعت بالا هم لود همزمان این تعداد عکس ناجوره.
اینجاست که تکنیک Lazy Load مثل هوخشتره میاد و راهکار ارائه میده. این تکنیک به این صورته که هیچ عکسی لود نمیشه مگر اینکه توی منطقه قابل دید مانیتور یا Viewport کاربر باشه. این یعنی وقتی صفحه لود میشه، عکسها لود نمیشن و وقتی اسکرول می کنیم روی یک عکس، همون موقع شروع به بالا اومدن می کنه! انگار داریم همون عکسی که میبینیم رو باز می کنیم! اینجوری من با خیال راحت مقاله گنده SmashingMagazine عزیز که LazyLoad نصب کرده رو باز می کنم با این نظر که تا موقعی که پایین صفحه نرم اون عکس پایینی ها لود نمیشن و سرعتم کند نمیشه.

هم jQuery و هم MooTools این پلاگین رو دارند که پلاگین MooTools اش رو آقای David Walsh خیلی عزیز نوشته.

• MooTools LazyLoad Plugin
• jQuery LazyLoad Plugin

یه نکته دیگه اینکه این دو تا پلاگین با اینکه یه کار می کنند ولی یه تفاوت کوچیک دارند و اون اینه پلاگین jQuery وقتی لود تصویر رو شروع می کنه که عکس در Viewport قرار بگیره یا توی کادر مرورگر قابل رویت باشه ولی پلاگین MooTools یکم قبل از رسیدن اسکرول صفحه به محل تصویر عملیات لود رو شروع می کنه که به نظر من بهتره.

شنگول باشید

برچسب ها: framework,javascript,jquery,mootools

•  
•  
•  
•  
•  
•  
•  

CSS و سردرد ناشی از مرورگرهای مختلف
05 آبان 1388 ساعت 01:55

وقتی میخوای CSS بنویسی حتما می دونی که کدهات توی مرورگرهای مختلف که هر روز دارند بیشتر می شن، متفاوت رندر میشه. مخصوصا اینترنت اکسپلورر که به زبون خودش حرف می زنه! واسه اینکه CSS به اصطلاح Cross-Browser داشته باشیم یعنی توی همه مرورگرها، خروجی ثابتی داشته باشه، دو راه وجود داره:

این دو راه توی ادامه پست توضیح داده شده.

برچسب ها: css,javascript,مرورگر

•  
•  
•  
•  
•  
•  
•  

تغییر رنگ هایلایت متن با CSS
19 شهریور 1388 ساعت 02:09

CSS یه امکان ریزه میزه داره که میشه رنگ highlight متن رو تغییر داد. طبیعتا برای تغییر استایل، فقط رنگ زمینه و رنگ نوشته، تاثیرگذاره. کافیه این دو تا رو توی CSS قرار بدی:

::-moz-selection {
	background:#cc0000;
	color:#fff;
}

::selection {
	background:#cc0000;
	color:#fff;
}

اولی مخصوص فایرفاکس و موزیلاست و دومی رو سافاری و گوگل کروم و اپرا ساپورت می کنند. طبق معمول اینترنت اکسپلورر خرس گنده، این سوسول بازیا تو کت و کولش نمیره!
برای نمونه، متن همین صفحه رو highlight کن یا دکمه های Ctrl+A رو بزن.

شنگول باشید

برچسب ها: css

•  
•  
•  
•  
•  
•  
•  

مقایسه jQuery و MooTools
31 تير 1388 ساعت 09:56

برای استفاده از جاوااسکریپت توی سایت، معمولا jQuery و MooTools گزینه های قابل تأمل تری هستند و اغلــــب ایــن ســــوال پیـــش میــاد که کــــدوم رو باید انتخــــاب کرد؟ چــند روز پیـــش به ســـایـــت jQuery vs MooTools.com برخوردم. یکی از توسعه دهندگان MooTools، یه مقاله بلند بالا، در همین باره در این سایت قرار داده. من هم از اونجاییکه چند وقت بود تو فکر نوشتن همچین مطلبی بودم، تصمیم گرفتم که این مقاله رو ترجمه کنم. این کار رو انجام دادم و صفحه فارسی رو برای نویسنده اش ارسال کردم و اون هم تو سایت قرار داد. به آدرس زیر:

« jQuery vs MooTools .com / index_fa.html »

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

اگر حوصله خوندن اون مقاله رو نداری یا میخوای نظرات خیلی خیلی خیلی مفید من رو هم در این باره بدونی، ادامه مطلب رو بخون ....

برچسب ها: framework,javascript,jquery,mootools

•  
•  
•  
•  
•  
•  
•  

تنظیم شفافیت اجزای صفحه در CSS
27 خرداد 1388 ساعت 01:31

برای محوسازی اجزای صفحه توسط CSS باید از مشخصه opacity استفاده کرد ولی متاسفانه این مشخصه توی برخی مرورگرها(و برخی نسخه ها) درست عمل نمی کنه. این بخاطر این هست که مثلا نسخه های قدیمی تر اینترنت اکسپلورر اصلا همچین مشخصه ای ندارند و از مشخصه alpha استفاده می کنند. رفتار نسخه های قدیمی موزیلا و سفری هم متفاوته.

در زیر مشخصه های همه مرورگرها لیست شده که اگر بخواید عملیات محوسازی رو بصورت بی نقص در همه جا اجرا کنید باید همه این مشخصه ها رو با هم استفاده کنید:

.transparency {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

توضیح بیشتر.....

برچسب ها: css,opacity

•  
•  
•  
•  
•  
•  
•  

بیایم AJAX یاد بگیریم.....
10 اردیبهشت 1388 ساعت 12:55

AJAX چی هست اصلا؟ آژاکـــــــس یا ای-جکــــس مخفف Asynchronous JavaScript And XML به معنی جاوااسکریپت و XML غیرهمزمان هست. به معنیش فکر نکن که چیزی دستگیرت نمیشه! 
آژاکس تکنیکی برای دریافت اطلاعات از سرور بدون بازخوانی یا Refresh صفحه است. اصولش هم به این صورته که جاوااسکریپت به سرور درخواست(Request) ارسال می کنه و نتیجه یا پاسخ(Response) سرور رو دریافت می کنه بدون این که صفحه جاری بازخوانی بشه.

توضیح بیشتر به این صورت هست که ...... ادامه آموزش

برچسب ها: ajax,javascript

•  
•  
•  
•  
•  
•  
•