Tween

دارم به لیست نرم‌افزارها و تکنولوژی‌هایی نگاه می‌کنم که دارم سعی می‌کنم یاد بگیرمشون:
Adobe ColdFusion
Adobe Flex
Adobe AIR
همه‌ش ادوبی شد؟ آخه من عاشق ادوبی‌ام!
HTML5 & CSS3
Microformat: درباره این بعداً بیشتر می‌نویسم.
ARIA: یا همون Accessible Rich Internet Application، ایضا این نیز توضیحات بیشتر بعدا.
جوملا و دروپال: با جوملا قبلا سایت راه‌اندازی کردم منتهی در کار با جوملا حرفه‌ای نیستم. درباره دروپال هم که کلاً تعطیلم. گفته شده که دروپال Content Management System نیست و Content Management Framework هست. باید حتماً سلام‌علیکی خدمتش داشته باشم.
دات نت مایکروسافت: عقیده‌ی غالب اینه که هم درآمد دات‌نتی بیشتره و هم بازار کارش (در ایران منظورمه). ولی فکر می‌کنم بی‌خیال این بشم چون وقت و انرژی زیادی می‌خواد تا مهارت کافی در برنامه‌نویسی دات‌نت به دست بیارم.

قبل از ورود به طراحی وب، مشغول کاوش «شبکه»های رایانه‌ای، مباحث امنیت و مدیریت سیستم‌ها بودم. فکر می‌کردم شبکه مبحث‌ایه که هرچی در موردش مطالعه می‌کنی باز هم کمه. باید اقرار کنم وب هم مثل همون و شاید بدتره. “روزانه” در حال تغییره.

ضرب‌المثلی داریم که به زبون بومی می‌گه: «چَش اَتِرسِه، دس کار اَکُد» یعنی فرد با دیدن حجم کاری که باید انجام بده می‌ترسه ولی بعد که انجامش می‌ده می‌بینه چیز سختی هم نبوده. تا ببینیم چه شود.

مدتی قبل ایده‌ای داشتم برای ساخت برنامه‌ای برای نگه‌داری snippetها (قطعه کدهای قابل استفاده مجدد) و تصمیم گرفتم از AIR برای برنامه‌نویسیش استفاده کنم. ایر امکان استفاده از پایگاه داده‌ای SQLite رو می‌ده، یه دیتابیس کم‌حجم که قابل انتقال به همراه برنامه نیز هست. حالا، مرجع مورد استفاده من AIRforJSDevPocketGuide بود (در سایت ادوبی پیدا می‌شه) که احتمالاً قدیمیه چون کدهای مربوط به اتصال به دیتابیس حتی وقتی از روی مرجع عینا کپی می‌کردم نیز فایده‌ای نداشت و اتصالی برقرار نمی‌شد. تا این‌که مقاله jQuery and AIR – Moving from web page to application در سایت insideRIA رو دیدم. در این مقاله سعی شده یه بازی مبتنی بر جاوااسکریپت و با کمک AIR ساخته بشه. روش اتصال به دیتابیس طبق توضیحات این مقاله مقداری متفاوت هست:
دیتابیس رو در ابتدای شروع برنامه کپی می‌کنیم به App Storage folder (که هر نرم‌افزار مبتنی بر AIR یه دونه برای نیازهاش داره) و بعد از کپی کردن به اون‌جا به پایگاه داده وصل می‌شیم:

[js]
//I handle copying the db from local to storage dir
var installTo = air.File.applicationStorageDirectory
var installToFile = installTo.resolvePath("words.db")
if(!installToFile.exists) {
air.trace("Copying db file to "+installToFile.nativePath)
var installFromLoc = air.File.applicationDirectory
var installFromFile = installFromLoc.resolvePath("database/words.db")
air.trace("from "+installFromFile.nativePath)
try {
installFromFile.copyTo(installToFile,true)
} catch(error) {
//Total Failure…
alert(error.message+’\n’+error.details)
air.NativeApplication.nativeApplication.exit()
return
}
}

//connect to db
try {
dbcon = new air.SQLConnection()
var dbFile = air.File.applicationStorageDirectory.resolvePath("words.db")
dbcon.open(dbFile)
} catch(error) {
//Total Failure…
alert(error.message+’\n’+error.details)
air.NativeApplication.nativeApplication.exit()
return
}
[/js]
قطعه کد از همون مقاله بالا آورده شده.

مشکل اتصال حل شد، ولی من دیگه قصد تکمیل برنامه رو ندارم!
می‌تونید پیش‌نمایش اولیه اینترفیس رو ببینید:

مشاهده دمو :: توجه کنید که در دمو فقط سه گزینه اولی شامل محتوا هستند.

لطفاً مشترک http://feeds.feedburner.com/tweener شوید!

اهمیت داشتن URLهای تمیز نیازی به توضیح نداره، علاوه بر این‌که کاربران راحت‌تر اون‌ها رو به‌خاطر می‌سپارن و اهمیتش از نظر SEO، مشکلات آدرس‌های پویا رو ندارند.

در پیاده‌سازی پروژه جدیدم از PHP خشک و خالی برای راه‌اندازی وب‌سایت استفاده کردم، بنابراین نیاز به راهی داشتم تا آدرس‌ها رو تمیز کنم. دو قطعه کد htaccess فوق‌العاده پیدا کردم ولی متاسفانه منبع‌شون رو یادداشت نکردم.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.php [L,QSA]

این، آدرس‌های مشابه domain/about.php رو به domain/about تبدیل می‌کنه.
و،

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

آدرس‌های domain/index.php?q=about رو به domain/about

چطور استفاده کنم؟

در ریشه وب‌سایت یک فایل با نام .htaccess بسازید و این‌ها رو توشون کپی کنید یا اگه این فایل موجود بود این‌ها رو به اول فایل اضافه کنید.

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

در این آموزش می‌خوایم جلوه‌ای که در طراحی وب بسیار معمول شده رو پیاده کنیم. بیاید از جعبه بزنیم بیرون!
ابتدا باید جعبه و روبان‌مون رو طراحی کنیم. یه آموزش تصویری خوب در این رابطه رو در این‌جا ببینید.
این آموزش هم نحوه ساخت روبان‌هایی با گوشه‌های نرم رو آموزش می‌ده.

خوب، الان باید به فکر یه ساختار منطقی برای ارائه محتوا باشید. مثلاً این:

[html]
<div class="widget">
<h3>پیوندها</h3>
<ul>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
<li><a href="#">Tween</a></li>
</ul>
</div>
[/html]

تصویر روبان‌مون رو به عنوان پس‌زمینه h3 معرفی می‌کنیم. تکنیک اینه که به h3مون position:relative بدیم. position:absolute و position:fixed عنصر رو از ساختار فعلی سند (جریان سند = documnt flow) خارج می‌کنن ولی با position:relative عنصر هنوز در همون موقعیت فعلیش می‌مونه و می‌تونیم شی رو نسبت به موقعیت فعلیش به میزان دلخواه جابه‌جا کنیم. این جابه‌جایی رو با top, right, bottom, left تعریف می‌کنیم. پس به‌جز تعریف‌های آرایشی، برای به‌دست آوردن این جلوه به تعریف‌های زیر نیاز داریم:

[css]
h3 {
width: 200px; /* به میزان دلخواه */
position: relative; /* مورد نیاز */
left: -30px; /* یعنی شی رو به میزان سی پیکسل به سمت چپ بکش */
background: url(images/ribbon.png) no-repeat; /* تصویر روبان */
}
[/css]

این width رو باید به اندازه (طول جعبه + اندازه‌ای که می‌خوایم از دو طرفه بیرون بزنه) باید تعریف کنیم. دقت کنید که در css بالا ما مقدار right رو تعریف نکردیم. اگه می‌خوایم از سمت راست هم بیرون بزنه باید مقدار width رو زیاد کنیم و نباید right رو تعریف کنیم (از لحاظ منطقی هم این‌کار معنایی نداره). اگه هم مقدار right و هم مقدار left رو تعریف کنیم مرورگر اگه در سند چپ به راست باشیم مقدار left و اگه سند راست به چپ باشه مقدار right رو استفاده می‌کنه و اون یکی رو در نظر نمی‌گیره. اگه هر دو مقدار top و bottom تعریف شده باشه مرورگر همیشه مقدار top رو استفاده می‌کنه.

درباره تفاوت انواع positionها این‌جا رو بخونید: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

یه استفاده معمول از position:relative برای تعریف position:absolute نسبت به یه عنصر دیگه‌ست. توضیحات بیشتر رو در این‌جا ببینید: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

برای طراحی یک وب‌سایت سرگرمی، عبارت joke رو در Google Images جستجو کردم تا به عکسی با عنوان Ill Never Get It رسیدم. ایده‌ی اولیه، ساخت قالبی است که بشود افقی پیمایشش کرد. منتهی این تصویر باید به پایین پنجره مرورگر می‌چسبید (پایین صفحه مرورگر صخره و بالا، آسمان). تکنیک‌ استفاده شده به این صورت هست:

[html]
<div id="wrapper">

<div id="content">
<div class="content first">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content last">
</div>
</div> <!– #content –>

</div><!– #wrapper –>
[/html]

و شیوه‌نامه:

[css]
#wrapper {
position: absolute;
right: 0; bottom: 0;
height: 767px; width: 100%;
}

#content {
background: url(images/bg.png) repeat-x right center;
width: 4000px; height: 767px;
text-align: justify;
color: #d1c9a9;
}
[/css]

#wrapper با position:absolute و bottom:0 به پایین صفحه می‌چسبونیم. با width:100% طولش رو به اندازه عرض پنجره مرورگر تنظیم می‌کنیم. درون این یه div دیگه با شناسه #content هست. طول این با width: 4000px به اندازه مورد نیاز تنظیم شده و اون تصویر اولیه به عنوان تصویر پس‌زمینه به این یکی داده می‌شه. الان هم به پایین صفحه چسبیده و هم می‌شه افقی پیمایش کرد. این شیوه در هر سه مرورگر Opera, FF, IE بدون مشکل کار می‌کنه، در کروم (من از نسخه ۰٫۴ استفاده می‌کنم، شاید در نسخه‌های جدید اصلاح شده باشه) اگه تگ html خاصیت dir=rtl داشته باشه (یعنی سند راست به چپ باشه) خود نوار پیمایش حذف می‌شه ولی اگه چپ به راست باشه این مشکل وجود نداره.
من در این‌جا برای تنظیم مکان جعبه‌هایی که قراره محتوا رو نگه‌دارند (.content) از float استفاده کردم ولی می‌شه مکان اون‌ها رو با position:absolute و یا relative در مکان دلخواه قرار داد.

مشاهده دمو - دریافت فایل

پریروز در Web Resources Depot معرفی مدیا پلیر یاهو رو دیدم. یه فایل جاوااسکریپتی که کاملاً مستقل عمل می‌کنه و به شما امکان می‌ده یه پخش‌کننده صدای خیلی خوشکل توی سایت‌تون داشته باشید. تصمیم دارم از این در پروژه‌ی که فعلاً مشغول کار برش هستم استفاده کنم، بنابراین بد ندیدم این‌جا هم معرفیش کنم.

نحوه استفاده
نحوه استفاده به این صورت هست که ابتدا باید به فایل‌های صوتی که می‌خواهید پخش‌شون کنید لینک بدید. بعد باید فایل جاوااسکریپت رو به صفحه اضافه کنید:

[html]
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
[/html]

همین! این اسکریپت به طور خودکار لینک‌های به فایل‌های صوتی رو پیدا می‌کنه و یه دکمه پخش در کنار اون‌ها قرار می‌ده.
خود پخش‌کننده در گوشه‌ی صفحه قرار می‌گیره بنابراین مزاحم بازدیدکننده نمی‌شه. رابط کاربری هم با فلش نیست و HTML هست بنابراین (اگرچه من امتحان نکردم) ولی باید بشه به‌راحتی با CSS ظاهر رو دستکاری کرد.
خود اسکریپت به‌رایگان در سایت یاهو میزبانی شده. مزایای این میزبانی مشابه میزبانی گوگل از کتابخانه‌های جاوااسکریپتیه. مطلبی از سایت Nano3oft با عنوان «جی‌کوئری سایت من را سنگین و کند می‌کند، نمی‌کند؟» این مزیت‌ها رو شرح داده.

بی‌ربط نوشت:

یه کانتستی بود این‌جا، برنده ۲۵ دلار کوپن برای سایت Point Banners شدم، که همون‌طور که از اسمش مشخصه بنر طراحی می‌کنه. کسی نیاز به طراحی بنر نداره تا کوپن رو براش بفرستم؟

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

× رخداد مورد استفاده window.load هست چون در این‌جا، باید قبل از اجرای کدها از لود شدن تصاویر اطمینان حاصل می‌شد.

× برای تصادفی کردن مکان تصاویر در DOM ابتدا نظرم این بود که عناصر رو در یه آرایه ذخیره کنیم، ترتیب عناصر آرایه رو به هم بریزیم و بعد دوباره تبدیل به عناصر دامش بکنیم. با جستجوی گوگل متوجه نوشته James در این رابطه و افزونه مفیدی که برای jQuery نوشته بود شدم. اون تابع shuffle از اون‌جا اومده.
× از متغیر stat برای ردگیری تعداد کلیک‌های کاربر استفاده شده، با کلیک اول فقط کارت نمایش داده می‌شه و با کلیک دوم ارزیابی همانندی تصاویر و برنده شدن بازیکن انجام می‌شه.
× تصاویر مورد استفاده در بازی شکل‌های پیش‌فرض فتوشاپ هستند.

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

در هر حال، همان‌طور که گفتم فقط برای تست چند تا تابع jQuery بود بنابراین همین‌جوری که هست ولش می‌کنم.

مشاهده دمو – دانلود سورس بازی

امروز نوشته‌ای دیدم از James padolsey، این‌جا: http://james.padolsey.com/javascript/fun-with-jquerys-animate/
به طور خلاصه گفته استفاده از تابع animate در jQuery محدود به پویاسازی خاصیت‌های CSS نیست و می‌شه ازش برای تغییر مقدار مشخصه‌ها (propery) در یک شی (در جاوااسکریپت اشیا به این صورت تعریف می‌شن: {propery: value} ) استفاده کرد.

مثال:

[js]
var from = {property: 0};
var to = {property: 100};

jQuery(from).animate(to, {
duration: 100,
step: function() {
console.log( ‘Currently @ ‘ + this.property );
}
});
[/js]

مثال گویای همه‌چیز هست ولی چند تا توضیح می‌دم: یه شی بی‌نام به جی‌کوئری داده می‌شه و به عنوان اولین آرگومان تابع animate مقداری که باید به اون‌جا برسه (to) تعریف می‌شه. آرگومان بعدی تابع هم شی بی‌نامیه که سایر تنظیمات تابع animate بهش داده می‌شه. اون duration:100 مقدار زمان به میل‌ثانیه‌ست و می‌شد اونو از این شی بی‌نام خارج کرد و به عنوان آرگومان دوم به تابع داد. ترتیب آرگومان‌ها در animate به یکی از این دو روشه:

[js]
/* #1 */
jQuery(‘something’).animate({prop:1}, duration, easing, callback);

/* #2 */
jQuery(‘something’).animate({prop:1},{
easing: easing,
duration: duration,
complete: callback
});
[/js]

با step یه تابع بی‌نام بهش می‌دیم تا با هر بار تغییر مقدار فراخوانی بشه. در این تابع خود مقدار رو با یه رشته متنی به کنسول می‌فرستیم. دقت کنید که console.log فقط در فایرفاکس و با افزونه فایرباگ کار می‌کنه.

کارهایی که می‌شه با این انجام داد واقعاً نامحدوده (تنها عامل محدوده‌کننده تخیله). با این روش می‌شه هر چیزی رو به صورت انیمیشن درآورد.

[... از دیدگاه فیلیپ پلمن در نیروی اهریمنی اش هبوط نه تنها انسان را به دست رنج ها نسپرد در واقع دریچه ای به سوی آگاهی به روی او باز کرد و او را از زیر تسلط نامشروع ابرنیرو بر خودش آزاد کرد. به هر حال هم در خود جنوسیس یک چیزی مشابه همین می خونیم که خداوند به فرشتگانش [...] می فرماید:” الا بدانید که انسان که امروز تفاوت خیر و شر را می داند یکی از ما شده.” و در واقع مار وقتی حوا را به خوردن سیب ترغیب می کند می گوید:” این میوه دانش خداوندی بر تو عرضه می گرداند.” که شاید منظور پلمن نیز همین است…]

این‌جا: http://www.fantasy.ir/fantasy/plugins/forum/forum_viewtopic.php?61529.0