یک طراح وب

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

خب مسئله اینجاست که احتمالا فکر می‌کنید دارم شوخی می‌کنم با شما، اما در ادامه متوجه می‌شوید که به وقوع پیوستن ِ چنین رویایی برای‌مان، همچین هم دور از ذهن نیست!

مدت‌ها پیش قصد داشتم در رابطه با سرویس imified بنویسم که تا همین حالا وقت نشده بود. imified برای‌مان کار بزرگی انجام می‌دهد و این امکان را فراهم می‌کند که بتوانیم رُبات‌هایی با وظایف دل‌خواه بسازیم و از طریق مختلف به این رُبات‌ها دستور بدهیم. درواقع اصل ماجرا و کار بزرگی که imified می‌کند همین است. ما می‌توانیم از طریق مسنجرهایی مثل جی‌تاک، یاهو یا ام‌اس‌ان و یا با توییتر و یا حتی با اس‌ام‌اس، به رُبات‌مان دستور بدهیم. به‌نظر من که خیلی جالب است.

بخش برنامه‌نویسی رُبات، پای خودمان است. البته خبر خوش این هست که با هر زبان سمت سروری می‌شود برای رُبات‌مان برنامه بنویسیم. پی‌اچ‌پی، پرل، پایتون و … .

شروع کار با imified

قبل از هرچیز باید در imified عضو بشوید (از اینجا). بعد از عضویت وارد اکانت خود شوید. در سمت راست صفحه، دکمه‌ی Create a new bot را بزنید.

Bot Name: در این قسمت یک نام برای رُبات‌تان انتخاب کنید.
Screen Name: نامی که در این قسمت وارد می‌کنید نامی است که برای ارتباط با رُبات از طریق مسنجرها، به آن اضافه می‌کنید. یعنی یک همچین چیزی: mybot@bot.im و این را در مسنجر خود اد می‌کنید تا بتوانید با این رُبات ارتباط برقرار کنید.
Bot URL: در این قسمت، باید آدرس فایلی که برنامه‌ی رُبات‌تان در آن نوشته شده است را بدهید. برای مثال اگر با پی‌اچ‌پی برنامه نوشته‌اید و نام فایل برنامه mybot.php هست، باید یک همچین آدرسی وارد کنید: http://yourdomain.com/bots/mybot.php. و گفتن هم ندارد که ما برنامه‌مان را باید روی سروری آپلود کنیم که پی‌اچ‌پی روی‌ش اجرا شود (باتوجه به مثال بالا پی‌اچ‌پی را عرض کردم. با هر زبانی که برنامه را نوشته‌ایم، سرورمان باید بتواند آن زبان را اجرا کند).

بعد از پُر کردن این سه فیلد، روی Create new bot کلیک کنید تا رُبات ساخته شود. این کل ماجرا بود. حالا با هم یک رُبات کوچک درست می‌کنیم؛

ساخت رُبات Hello World با پی‌اچ‌پی

اول مانند بالا یک رُبات جدید ایجاد کنید و بعد یک فایل با نام helloworld.php بسازید و کد زیر را در آن قرار دهید و بعد روی یک سروری که پی‌اچ‌پی را اجرا می‌کند آپلودش کنید (و آدرس این فایل را هم که قبلا در Bot URL رُبات‌تان وارد کرده‌اید):

<?php
switch ($_REQUEST['step']) {
case 1:
echo "Hi, what's your name?";
break;
case 2:
echo "Hi " . $_REQUEST['value1'] . ", where do you live?";
break;
case 3:
echo "Well, welcome to this hello world bot, " . $_REQUEST['value1'] . "<br>from " . $_REQUEST['value2'] . ".<reset>";
break;
}
?>

در ابتدا شما یک پی‌ام در مسنجر به رُبات می‌دهید. مثلا سلام می‌کنید و رُبات در جواب، جمله‌ی ” Hi, what’s your name?” را می‌فرستد (خط 4). حالا شما اسم‌تان را به رُبات می‌گویید و او هم با تابع $_REQUEST نام شما را می‌گیرد و این جمله را می‌فرستد: “Hi [your name], where do you live?” (خط 7). باز هم شما در جواب نام جایی که در آن زندگی می‌کنید را می‌دهید و باز رُبات با تابع $_REQUEST اسم مکان زندگی‌تان را می‌گیرد و این جمله را می‌فرستد: “Well, welcome to this hello world bot, [your name] from [your city].” (خط 10). یک تابع هم خود imified دارد که در انتهای خط 11 می‌بینید. <reset>. این تابع باعث می‌شود تا رُبات ریست شود و کارش را دوباره از اول شروع کند.
یک بخش Debugger هم در imified وجود دارد برای خطایابی برنامه‌ای که برای رُبات‌مان نوشتیم و خیلی به‌درد بخور است.

با این رُبات‌ها خیلی کارها می‌شود کرد. کافی است کمی ایده و خلاقیت داشته باشید و بتوانید این ایده را پیاده کنید و رُبات‌هایی با کارایی‌های جالب بسازید. مثلا از طریق API مترجم گوگل، یک رُبات مترجم بسازید. خود من همان چندوقت پیش که با imified آشنا شده بودم یک رُبات ساختم که می‌شود با آن توییت کرد، ایمیل فرستاد و به فرندفید مطلب ارسال کرد. کافی است این را در یک مسنجری اد کنید aliha@bot.im و به‌ش سلام کنید و بعد از اینکه پرسید چه کاری می‌خواهید انجام دهید، تایپ کنید twitt یا email یا friendfeed.

خب دیگر کافی‌ست؛ بروید رُبات بسازید ببینیم چه‌کار می‌کنید :)

برچسب ها: bot, gtalk, imified, messenger, msn, php, robot, sms, twitter, yahoo, اس ام اس, ایمیل, توییتر, ربات, ربوت, فرندفید, مسنجر, پی اچ پی
منتشرشده در August 13, 2010 به دست علیها روی معرفی سایت

بعضی‌ها فکر می‌کنند که مثلاً جی‌کوئری فقط برای درست‌کردن ِ افکت‌ها و این‌چیزهاست، درصورتی که اصل ِ جی‌کوئری، ماجرای فرستادن درخواست و گرفتن پاسخ از سمت آقای سرور به‌صورت ای‌جکس می‌باشد که الان می‌خواهیم به یک مورد کوچکی از آن اشاره کنیم. این‌که چه‌طور یک رکورد از بانک‌اطلاعاتی‌مان را بدون بارگذاری‌شدن ِ هیچ صفحه‌ای حذف کنیم. این‌کار را بر پایه‌ی پی‌اچ‌پی انجام می‌دهیم.

اتصال به بانک‌اطلاعاتی

برای وصل‌شدن به بانک‌اطلاعاتی، قبل از هرکاری، یک فایل با نام config.php می‌سازیم و آن را با ادیتورمان باز می‌کنیم و کد زیر را در آن می‌نویسیم:

<?php
$db_host = 'localhost';
$db_name = 'your database name';
$db_user = 'your username';
$db_pass = 'your password';
?>

کار خاصی نکردیم، فقط چند متغیر به‌نام‌های db_host، db_name، db_user و db_pass تعریف کردیم که مقادیر آن‌ها را به‌ترتیب، نوع هاست (که اصولا همان localhost می‌باشد)، نام بانک‌اطلاعاتی، نام‌کاربری‌ای که با آن به بانک اطلاعاتی دسترسی پیدا می‌کنیم و در آخر هم رمزعبور را دادیم.

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

حذف رکورد

ابتدا باید یک صفحه‌ای برای نمایش رکوردها داشته باشیم. پس یک فایل با نام index.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<html>
<head>
<title>حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/delete.js" type="text/javascript"></script>
</head>
<body>
<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Database Connection Error!');
@mysql_select_db($db_name);

$query = "SELECT * FROM my_tbl ORDER BY id DESC";
$result = @mysql_query($query) or die(mysql_error());
while($row = @mysql_fetch_array($result))
{
?>
<div class="record">
<div class="content"><?php echo($row[content]); ?></div>
<div class="date"><?php echo($row[content_date]); ?></div>
<div class="tools"><a class="delete" id="<?php echo($row[id]); ?>" href="#">حذف</a></div>
</div>
<?php
}
mysql_close($connect);
?>
</body>
</html>

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

حالا دیگر فقط دو مرحله پیش ِ رو داریم. اولی نوشتن اسکریپت ِ حذف رکورد با پی‌اچ‌پی و دومی نوشتن کد جی‌کوئری‌ای که درخواست ِ ما (همان حذف رکورد) را بفرستد به اسکریپتی که در مرحله‌ی اول نوشتیم و آن را اجرا کند.

پس اول یک فایل با نام delete.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Connection Error');
@mysql_select_db($db_name);

$id = $_GET['id'];

$query = "DELETE FROM my_tbl WHERE id = '$id'";
mysql_query($query);

mysql_close($connect);
?>

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

حالا می‌رویم سراغ کد جی‌کوئری‌مان. یک فایل با نام delete.js می‌سازیم و آن را با ادیتورمان باز می‌کنیم. کدهای زیر را در آن می‌نویسیم:

$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
 if(confirm("مطمئنید که قصد حذف این رکورد را دارید؟ این غیرقابل‌بازگشت خواهد بود!"))
		  {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });
	$(this).parents(".record").css({ backgroundColor: "red" }, "fast")
	.animate({ opacity: "hide" }, "slow");
 }

return false;
});
});

اگر دقت کرده باشید، در صفحه‌ای که رکوردهای‌مان نمایش داده می‌شوند یک دکمه‌ای قرار دادیم که کلاس ِ آن delete هست. به همین خاطر در کد بالا، قبل از هرچیز می‌گوییم که وقتی روی دکمه‌ی حذف کلیک شد، آن‌وقت اتفاقاتی که در ادامه می‌گویم، بی‌اُفتند.

اولین‌کاری که باید بکنیم این هست که شناسه‌ی رکوردی که دکمه‌ی حذف ِ آن را زده‌ایم، مشخص شود. برای این‌کار، در صفحه‌ای که رکوردها نمایش داده می‌شوند، در آی‌دی ِ هر رکورد، شناسه‌ی آن را برمی‌گرداندیم. حالا دیگر کارمان راحت شد و در کد بالا می‌بینید که شناسه‌ی رکورد را خیلی راحت در می‌آوریم (خط‌های 3 تا 5). یادتان هست که در فایل delete.php، متغیر ِ $id را ایجاد کرده بودیم؟ مقدار آن برابر با شناسه‌ی رکورد که در کد بالا مشخصش می‌کنیم می‌شود. حالا باید یک پیغام به کاربر بدهیم که اگر آن را تایید کند، آن‌وقت عملیات ِ حذف ِ رکورد انجام بشود.

اصل ماجرا این‌جاست. ما از تابع $.ajax() برای ارسال اطلاعات به اسکریپتی که برای حذف رکورد نوشته بودیم استفاده می‌کنیم. مقدار ِ متد ِ url، را برابر با آدرس فایل delete.php قرار می‌دهیم. این تابع یک متدی دارد به‌نام success. کار اصلی این متد این است که وقتی عملیات با موفقیت انجام شد، یک رویدادی انجام گیرد. مثلاً یک پیغام نمایش داده شود و بگوید که رکورد حذف شد یا یک همچین‌چیزی.
یک افکتی هم در آخر درست می‌کنیم که وقتی رکورد حذف شد، از دید‌مان پنهان شود که در خط‌های پانزده و شانزده، کد ِ مربوط به افکت را می‌بینید. ابتدا رنگ‌زمینه‌ی رکورد را قرمز و بعد از آن، مخفی‌اش می‌کنیم. همین!

این‌جا دمو را ببینید و این نمونه را دریافت کنید:

برچسب ها: ajax, database, delete record, jquery, mysql, php, record, ای جکس, بانک اطلاعاتی, جی کوئری, حذف رکورد, دیتابیس, مای اس کیو ال, پی اچ پی
منتشرشده در April 15, 2010 به دست علیها روی ای جکس, جی کوئری, پی اچ پی

ساعت‌ها وقت می‌گذاریم برای نوشتن دستورات ِ سی‌اس‌اس ِ پوسته‌مان. مسلماً دوست نداریم یک نفر بیاید در عرض چند ثانیه کدهای‌مان را کش برود. حالا ما می‌خواهیم یک کاری بکنیم که وقتی آقای دزد، پرونده‌ی سی‌اس‌اس را در مرورگرش باز کرد، به‌جای کدها، مثلاً یک شکلک عین بُز لبخند بزند برایش :)

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

فرض می‌کنیم یک صفحه‌ای داریم به‌نام index.php؛ کدهای اچ‌تی‌ام‌ال زیر را هم در آن داریم:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
سلام جهان!
</body>
</html>

حالا کد پی‌اچ‌پی زیر را به بالای index.php اضافه می‌کنیم، یعنی قبل از شروع شدن <html> باید قرار بگیرد:

<?php
session_start();
$_SESSION["csskey"] = "user";
?>

با این‌کار برای کاربر در هنگام ورود یک سشن با نام csskey که برابر با user است، ست کردیم.

سپس یک فایل با نام style.php می سازیم و تکه‌کد پی‌اچ‌پی زیر را در ابتدای آن قرار می‌دهیم و بعد از آن، دستورات سی‌اس‌اس‌مان را اضافه می‌کنیم:

<?php
session_start();
header("Content-type: text/css");
if ($_SESSION["csskey"] != "user") {die(":-)");}

$_SESSION["csskey"] = "somethingelse";
?>

body {background-color: #000; color: #fff; direction: rtl;}

فکر کنم متوجه شده باشید که چه اتفاقی قرار است بی‌اُفتد. Content-type را از نوع text/css می‌گذاریم تا مرورگر آن را به‌عنوان یک فایل سی‌اس‌اس تفسیر کند.
سپس می‌گوییم اگر csskey برابر با user نبود، دستورات سی‌اس‌اس را بارگذاری نکن و در خروجی «:-)» را چاپ کن.
اما اگر csskey برابر با user بود، آن‌وقت دوباره csskey را برابر با somethingelse می‌کنیم و در خروجی دستورات سی‌اس‌اس را برمی‌گردانیم.

و در آخر فقط کافی است دو خط زیر را به فایل .htaccess اضافه کنیم:

RewriteEngine on
RewriteRule style.css style.php

درواقع ما عملاً هیچ فایلی به‌نام style.css نداریم و با کمک اچ‌تی‌اکسس style.php را تبدیل به style.css می‌کنیم.

شاید تنها ایرادی که این روش داشته باشد این است که برای هربار بارگذاری شدن سایت، باید تعدادی دستور پی‌اچ‌پی اجرا و کامپایل شود و این برای سایت‌هایی که بازدید بالا دارند اصلاً خوب نیست چرا که فشار زیادی به سرور وارد می‌شود و مورد دیگر اینکه حتی با استفاده از این روش نیز دستورات سی‌اس‌اس‌مان همچنان با فایرباگ قابل روئیت می‌باشند!

این روش را ایشان ارائه کرده‌اند.

برچسب ها: css, css protection, htaccess, php, اچ تی اکسس, دزد پوسته, محافظت از استایل, پی اچ پی
منتشرشده در February 21, 2010 به دست علیها روی سی اس اس, پی اچ پی

با یک‌خط کد ِ سی‌اس‌اس می‌خواهیم یک افکت ِ جالب برای تصاویری که در صفحات وب قرار می دهیم درست کنیم. مراحل ِ کار بسیار ساده هست.

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

<div id="content">
<div id="dot-effect"></div>
<img src="img.jpg" />
</div>

سپس فتوشاپ‌مان را آتیش می‌کنیم و یک سند جدید با طول و عرض مثلا 3 پیکسل ایجاد می‌کنیم و دقیقا در وسط ِ آن یک نقطه‌ی ریز با طول و عرض 1 پیکسل و رنگ ِ مشکی قرار می‌دهیم. به‌تر هست که شفافیت نقطه را تا حدودی کم کنیم. مثلا روی 60 درصد بگذاریم! البته این نقطه را من قبلا درست کرده‌ام و در فایلی که دریافت می‌کنید، موجود است، و می‌توانید از همان استفاده کنید.
خب، حالا این نقطه‌ای که طراحی کرده‌ایم را با پسوند ِ پی‌ان‌جی (png) ذخیره می‌کنیم. یادتان هم باشد که این نقطه نباید زمینه داشته باشد، یعنی Transparent باشد.

حالا نوبت به دستورات ِ سی‌اس‌اس می‌رسد:

#dot-effect {background: transparent url(dot.png) repeat; position: absolute; width: 500px; height: 374px;}

نقطه‌ای که درست کرده بودیم را در زمینه‌ی dot-effect قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

تمام شد. به همین راحتی یک جلوه‌ی زیبا برای تصاویرمان درست کردیم. از این افکت به‌نظرم به‌تر هست که در نمایش‌های اسلایدی یا چیزهایی شبیه آن استفاده شود. مثلا همان نمایش اسلایدی‌ای که چند وقت پیش یاد گرفتیم. این افکت را به آن اضافه کنید و نتیجه را ببینید که چقدر جالب می‌شود :)

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

برچسب ها: css, dotdot effect, افکت, جلوه, سی اس اس, نقطه نقطه
منتشرشده در January 7, 2010 به دست علیها روی سی اس اس

یکی از تلخ‌ترین حوادثی که ممکن است برای اطلاعاتی که مدت‌ها برای جمع‌آوری‌شان زحمت کشیده‌ایم پیش بی‌آید، این است که به هر دلیلی آن‌ها را از دست بدهیم. مثلا هنگام پارتیشن‌بندی هارد یا نصب یک سیستم‌عامل، اشتباها بخشی از این اطلاعات و یا همه‌ی آن از بین برود. عکس‌ها، ویدئوها، آهنگ‌ها، پروژه‌ها و خیلی اطلاعات ِ حیاتی دیگر…

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

در این پست سه‌تا از قدرتمندترین ِ آن‌ها را بررسی می‌کنیم که البته یک تفاوت بزرگ هم با سایر برنامه‌های مشابه ِ خود دارند و آن این است که رایگان هستند.
به‌تر هست از مقدمه‌چینی بگذریم و برویم سراغ اولین برنامه…

Recuva

ریکووا یکی از به‌ترین‌هاست. محیط ساده و کاربرپسند ِ آن باعث می‌شود خیلی سریع کار با آن را یاد بگیرید و شروع به بازگردانی اطلاعات ِ ازدست‌رفته بکنید. در همان ابتدا می‌توانید نوع ِ فایل‌ها اعم از عکس یا ویدئو یا موزیک و یا موارد دیگر را مشخص کنید. سپس مسیر ِ تقریبی و یا دقیق ِ فایل‌های پاک‌شده را به‌ش بدهید. و اینکه هرگونه فایلی را می‌تواند برای‌تان برگرداند. ضمنا وقتی آن را تست می‌کردم، متوجه‌ی بالاتر بودن ِ سرعت ِ آن به نسبت ِ دیگر برنامه‌ها هم شدم و خب این خیلی خوب است.

Undelete Plus

این برنامه نیز بسیار کارآمد و قدرتمند است. یک ویژگی خیلی خوب دارد و آن ایجاد ِ فیـلتـر برای دقیق‌تر شدن ِ جستجو در بین ِ اطلاعات ِ پاک شده است. مثلا می‌خواهید از بین اطلاعات ِ پاک‌شده، فقط فایل‌های مهم‌تان را بازیابی کنید که در این‌صورت، اطلاعاتی مانند ِ بخشی از نام ِ فایل‌های پاک‌شده، تاریخ ِ ایجاد و حجم تقریبی ِ آن‌ها و از این قبیل مشخصات را در فیـلتـر ِ آن تعیین می‌کنید تا خیلی زودتر به اطلاعات ِ موردنظر برسید. قابل نصب بر روی تمامی نسخه‌های ویندوز و سازگار با سیستم‌های فایل ِ ویندوزی.

Restoration

ری‌استوریشن خیلی ساده است و شاید ظاهر چندان جالبی نداشته باشد و یا بعضی از امکانات ِ پیشرفته‌ی دو برنامه‌ی بالا را دارا نباشد، اما در نوع خودش یک برنامه‌ی عالی‌ای هست و اگر خدای‌نکرده یک روزی اطلاعات‌تان را از دست دادید، می‌توانید روی ری‌استوریشن حساب کنید. بر روی همه‌ی نسخه‌های ویندوز هم نصب می‌شود.

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

برچسب ها: data recovery, recuva, restoration, undelete plus, بازیابی اطلاعات, ری استوریشن, ریکووا, نرم افزار
منتشرشده در December 13, 2009 به دست علیها روی فناوری اطلاعات

فکر می‌کنم با دستورات اختصاصی مرورگرها آشنا باشید. زمانی از این دستورات اختصاصی استفاده می‌کنیم که بخواهیم بعضی از دستورات ِ سی‌اس‌اس‌مان، در مرورگری خاص، متفاوت باشد.

فرض کنید یک کادر در صفحه داریم که اندازه‌ی ارتفاعش در فایرفاکس دقیقا همانی هست که در سی‌اس‌اس تعیین کرده‌ایم، اما در اینترنت‌اکسپلورر 6 کمی ارتفاع بیشتر است. در این‌جا از دستورات اختصاصی اینترنت‌اکسپلورر استفاده می‌کنیم و در آن، اندازه‌ی ارتفاع ِ کادر ِ موردنظر را کمتر می‌کنیم تا متناسب شود و این فقط شامل اینترنت‌اکسپلورر (6) خواهد بود و فایرفاکس و دیگر مرورگرها، هم‌چنان از همان مقدار اولیه برای ارتفاع تبعیت می‌کنند.

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

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

your css codes here..

}

یک مثال هم می‌زنم که کاملا متوجه‌ی ماجرا بشوید. به فرض، می‌خواهیم یک متن که در تگ P قرار دارد را در اُپرا با رنگ سبز نشان دهیم و در مرورگرهای دیگر با رنگ مشکی دیده شود. به این صورت عمل می‌کنیم:

p {
color: #000;
}

کد بالا، متن‌مان را مشکی می‌کند و کاری با نوع مرورگر ندارد.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{

p {
color: #45c705;
}

}

واضح هست؟ با کد بالا گفتیم که متن موردنظر در اُپرا سبز باشد. همین :)

برچسب ها: browser, css, css hacks, اُپرا, دستورات اختصاصی, سی اس اس, مرورگر, هک سی اس اس
منتشرشده در December 5, 2009 به دست علیها روی سی اس اس

نمایش اسلایدی یا همان SlideShow، برای نمایش تصاویر، به‌صورت متحرک و پشت ِ سرهم به‌کار می‌رود. احتمالا نمونه‌هایی‌ از نمایش اسلایدی را در سایت‌های مختلف مشاهده کرده‌اید.

به روش‌های مختلف می‌شود نمایش اسلایدی ساخت، اما جی‌کوئری کارمان را در این مورد بسیار آسان و حجم کدمان را مقادیری کم‌تر کرده است. در ادامه، روش ِ ایجاد ِ نمایش اسلایدی‌ای که ایشان ساخته‌اند را باهم مرور می‌کنیم ببینیم چه می‌شود :)

لازم هم نیست که بگویم کتاب‌خانه‌ی جی‌کوئری را ابتدا از این‌جا بگیرید و اگر نشد، می‌توانید آن را از این‌جا بگیرید؟

کدهای اچ‌تی‌ام‌ال ِ زیر را می‌نویسم:

<div id="slideshow">
    <img src="01.jpg" alt="Slideshow Image 1" class="active" />
    <img src="02.jpg" alt="Slideshow Image 2" />
    <img src="03.jpg" alt="Slideshow Image 2" />
</div>

نکته: حتما باید کلاس ِ اولین تصویر، active باشد.

دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه می‌کنیم و آن را خوب هَم می‌زنیم :دی

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}

خب، حالا یک فانکشن با نام ِ slideswitch تعریف می‌کنیم و کدهای مربوط به افکت ِ نمایش اسلایدی‌مان را در آن می‌نویسیم:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

مدت‌زمان توقف هرعکس بسته به مقداری‌ست که به setInterval() می‌دهید (خط 19). الان روی 5000 یعنی 5 ثانیه می‌باشد که باتوجه به نیاز خود می‌توانید آن را تغییر دهید.

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

برچسب ها: jquery, slideshow, اسلاید, اسلاید شو, جی کوئری, نمایش اسلایدی
منتشرشده در October 28, 2009 به دست علیها روی جی کوئری

از من می‌پرسید به نظرم به‌تر هست همیشه برای کارهای‌تان ارزش قائل شوید. چون اولین گام ِ موفقیت، اهمیت دادن به آن کار است. پس چه به‌تر که از همان آغاز، یک شروع ِ جالب داشته باشیم.

بگذریم. می‌خواهیم یک چیز ِ کوچولو درست کنیم که تا زمان ِ آغاز به‌کار ِ سایت یا وبلاگ و یا هرچیز ِ دیگری که هست، تعداد روزها و ساعات ِ باقی‌مانده را برای بازدیدکننده‌گان بشمارد. مثلا بگوید “به‌زودی تا 5 روز و 8 ساعت و 27 دقیقه و 40 ثانیه‌ی دیگر سایت افتتاح خواهد شد” یا یک همچین‌چیزی :)

کار ِ سختی نیست. اول، کتاب‌خانه‌ی جی‌کوئری را از اینجا بگیرید (اگر اجازه نداد، از اینجا بگیرید).

سپس این اسکریپت را دریافت کنید.

یک فایل با نام index.html بسازید و کدهای زیر را در آن بگذارید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>به‌زودی...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<center><div id="count_down_container"></div></center>
<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "december 31, "+currentyear+" 18:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
</body>
</html>

در خط ِ 12، تاریخ ِ مربوط به پایان ِ شمارنده را باید تعیین کنید. مثلا من آن را روی آخرین روز ِ سال گذاشته‌ام. یعنی 31اُم دسامبر و همچنین هجده ساعت هم به آن اضافه کرده‌ام.

حالا دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه کنید:

body {background-color: #ddeef6;}
#count_down_container {color: #e43c01; font: bold 150px Georgia; direction: rtl;}
sup {font: bold 13px Tahoma; color: #666; margin-left: 60px;}

در انتخاب‌گر ِ count_down_container، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

خب، تمام شد دیگر. نمونه‌ی این شمارنده را اینجا ببینید و آن را کامل دریافت کنید:

برچسب ها: coming soon, count down, jquery, script, به‌زودی, جی کوئری, شمارنده
منتشرشده در October 8, 2009 به دست علیها روی جی کوئری

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

برای خودم یک‌بار احتیاج ِ زیادی ایجاد شد برای انجام این‌کار و بعد از مدتی جستجو، پلاگینی فوق‌العاده با اسم ِ FeedWordPress برایش پیدا کردم که تقریبا نیازی در این زمینه برای‌مان باقی نمی‌گذاشت.

نصب پلاگین (+)

• 1. دریافت پلاگین و استخراج فایل‌های آن از حالت زیپ‌شده و آپلود ِ آن‌ها در مسیر پلاگین‌های وردپرس (wp-content/plugins).
• 2. آپگرید کردن ِ فایل‌های rss.php و rss-function.php در شاخه ی wp-includes. برای این‌کار، فایل‌های rss.php و rss-function.php که در پوشه‌ی MagpieRSS-upgrade به‌همراه پلاگین موجودند، را در پوشه‌ی wp-includes کپی کنید تا جای‌گزین فایل‌های قبلی شوند. “این مورد اختیاری می‌باشد، اما ممکن است با انجام ندادن‌اش، برخی امکانات را از دست بدهید.”
• 3. وارد داشبورد ِ وردپرس ِ خود شوید و پلاگین را فعال‌سازی کنید.

استفاده

پس از نصب، یک قسمت با نام Syndication در ستون کناری ِ داشبورد‌تان اضافه می‌شود. روی Syndication کلیک کنید و از قسمت ِ Add new source، آدرس ِ خوراک ِ موردنظرتان را وارد کنید و Syndicate را بزنید. در صفحه‌ی بعد، اطلاعاتی درباره‌ی خوراکی که داده‌اید به‌شما نشان داده می‌شود. روی use this feed کلیک کنید تا خوراک ذخیره شود.
حالا هر مطلبی که به این خوراک اضافه شود، در وبلاگ ِ شما هم منتشر می‌گردد.

می‌توانید تنظیمات ِ مختلفی روی آن اعمال کنید. مثلا یک نویسنده‌ی جدید ایجاد کنید و آن را به خوراک ِ اضافه‌شده، نسبت دهید. یا از منتشر‌شدن ِ خودکار  جلوگیری کنید و پس از تایید ِ مطلب، اجازه‌ی انتشار بدهید و خیلی موارد ِ دیگر که کشف ِ آن‌ها را به عهده‌ی خودتان می‌گذارم :)

برچسب ها: feed, feedwordpress, rss, syndication, wordpress, خوراک, وردپرس, پلاگین, پلاگین وردپرس
منتشرشده در October 3, 2009 به دست علیها روی وردپرس, پلاگین

فرندفید هم مانند خیلی از سرویس‌های وب‌2، مثلا توییتر، API ِ نسبتا کاملی دارد که می‌توان با به‌کارگیری آن، بسیاری از پراسه‌ها مانند ایجاد ِ انتری یا لایک زدن و…، را از راه دور انجام داد. احتمالا fftogo را دیده‌اید. این سایت با کمک ِ همان ای‌پی‌آی ِ فرندفید کار می‌کند.

حالا ما هم می‌خواهیم یک اپلیکیشن ِ ساده برای ارسال ِ پست به فرندفید با پی‌اچ‌پی درست کنیم.

پیش‌نیاز

• یک سرور ِ آپاچی که روی آن پی‌اچ‌پی نصب شده باشد.
• کلاس ِ ای‌پی‌آی ِ فرندفید برای پی‌اچ‌پی که خود ِ فرندفید آن را ارائه کرده است و می توانید از این‌جا دریافت کنید (اگر نشد، از این‌جا بگیرید).
• اندکی آشنایی با پی‌اچ‌پی!

شروع

یک فایل با نام index.php بسازید. و کدهای زیر را در آن قرار دهید:

<?php
require_once("friendfeed.php");
$uploaded = false;
$entry = null;
if ($_POST["title"]) {
    $uploaded = true;
    $friendfeed = new FriendFeed($_POST["nickname"], $_POST["remotekey"]);
    $entry = $friendfeed->publish_link($_POST["title"], $_POST["comment"]);
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>FriendFeed</title>
</head>
<body>
<div id="notes">
<?php if ($uploaded) { ?>
<?php if (!$entry) { ?>
<div class="error">اوه! ما نمی‌توانیم پست ِ شما را ارسال کنیم! مطمئنید که نام‌کاربری یا کلید ریموت را درست وارد کرده‌اید؟</div>
<?php } else { ?>
<div class="success"><b>منتشر شد!</b> » <a href="http://friendfeed.com/e/<?= $entry->id ?>">پست ِ خود را در فرندفید ببینید...</a></div>
<?php } ?>
<?php } ?>
</div>
<form action="<?= $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">
<label class="float" for="nickname">نام‌کاربری یا ایمیل ِ فرندفیدی:</label>
<input id="nickname" type="text" size="15" name="nickname"/><br />
<label class="float" for="remotekey">کلید ریموت [<a href="http://friendfeed.com/remotekey" target="_blank">پیدا‌کردن کلید</a>]:</label>
<input id="remotekey" type="password" size="15" name="remotekey"/><br />
<label class="nofloat" for="title-entry">عنوان ِ پست:</label><br />
<input id="title-entry" type="text" name="title"/><br />
<label class="nofloat" for="comment">دیدگاه ِ پست:</label><br />
<input id="comment" type="text" name="comment"/><br />
<input id="submit" type="submit" value="انتشار در فرندفید"/>
</form>
</body>
</html>

فایل ِ friendfeed.php را هم که دریافت کردید، در همان مسیر ِ فایل ِ index.php قرار دهید.

اجرا

حالا index.php را اجرا کنید و نتیجه را ببینید.
نام‌کاربری یا ایمیل ِ خود در فرندفید به هم‌راه کلید ریموت ِ خود را وارد کنید. عنوان ِ پست را بنویسید و در آخر می توانید یک دیدگاه نیز هم‌راه ِ پست ارسال کنید (می‌توانید آن را خالی هم بگذارید). روی انتشار در فرندفید کلیک کنید و تمام :)

نمونه‌ی این اپلیکیشن را این‌جا ببینید. می‌توانید آن را کامل و به همراه استایل دریافت کنید:

برچسب ها: api, application, friendfeed.php, remote, اپلیکیشن, ای پی آی, ریموت, فرندفید, پی اچ پی
منتشرشده در September 30, 2009 به دست علیها روی ای پی آی, فرندفید