افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

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

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

<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 قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

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

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

سه نرام‌افزار رایگانی که در هنگام از دست دادن اطلاعات، به کمک‌تان می‌آیند!

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

data-recovery

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

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

Recuva

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

Undelete Plus

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

Restoration

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

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

کدام برنامه‌ی بازیابی اطلاعات را می‌پسندید؟

  • Recuva (50%, 23 Votes)
  • Others (39%, 18 Votes)
  • Undelete Plus (9%, 4 Votes)
  • Restoration (2%, 1 Votes)

کل امتیازها: 46

Loading ... Loading ...

هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا

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

css-hack-for-opera

فرض کنید یک کادر در صفحه داریم که اندازه‌ی ارتفاعش در فایرفاکس دقیقا همانی هست که در سی‌اس‌اس تعیین کرده‌ایم، اما در اینترنت‌اکسپلورر 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;
}

}

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

ساخت ِ یک نمایش اسلایدی ساده به‌وسیله‌ی جی‌کوئری

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

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

jquery 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 ثانیه می‌باشد که باتوجه به نیاز خود می‌توانید آن را تغییر دهید.

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

download-zips

با کمک جی‌کوئری، یک شمارنده برای افتتاح سایت‌تان طراحی کنید

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

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

coming-soon

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

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

یک فایل با نام 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، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

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

download-zips

راهی آسان برای واردکردن خودکار خوراک‌ها به وبلاگ وردپرسی‌تان

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

feedwordpress

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

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

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

استفاده

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

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

کمی API ِ فرندفید، کمی PHP، یک اپلیکیشن ِ کوچولو موچولو!

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

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

ff-app

پیش‌نیاز

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

شروع

یک فایل با نام 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 را اجرا کنید و نتیجه را ببینید.
نام‌کاربری یا ایمیل ِ خود در فرندفید به هم‌راه کلید ریموت ِ خود را وارد کنید. عنوان ِ پست را بنویسید و در آخر می توانید یک دیدگاه نیز هم‌راه ِ پست ارسال کنید (می‌توانید آن را خالی هم بگذارید). روی انتشار در فرندفید کلیک کنید و تمام :)

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

download-zips

phpanywhere، چیزی فراتر از یک ادیتور آنلاین

phpanywhere

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

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

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

phpanywhere-2

کار با phpanywhere بسیار آسان است. کافی است از این قسمت در آن ثبت نام کنید و مدیریت پروژه های تان را آغاز کنید. تا آنجایی هم که دیدم، با فارسی هیچگونه مشکلی ندارد و از قسمت تنظیماتش می توانید یونیکد ِ ادیتور را روی utf-8 بگذارید. من که شخصا از این به بعد مشتری ِ این سرویس خواهم بودم :دی

یک اپلیکیشن ساده و کاربردی با کمک API ِ توییتر بنویسید

با توییتر آشنا هستید. در 140 کاراکتر، آنچه در اکنون دارد رخ می دهد را می نویسید که به اصطلاح می گوییم داریم توییت می کنیم…

API هم احتمالا می دانید چیست. به زبان ساده، چیزی است که بین نرم افزارها ارتباط ایجاد می کند (Application Programming Interface).

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

twitter-app

خب، API ِ توییتر که حی و حاضر هست، پی اچ پی هم مثل شیر دارد نگاه مان می کند و سایت ِ گلابی(!) هم یک افزونه پی اچ پی ِ کامل بر اساس API ِ توییتر، برای توییتر ارائه کرده است. می ماند مخلوط کردن ِ این ها با هم که الان قصد همین کار را داریم. چه می کند اوپن سورس :)

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

قبل از شروع

  • یک. فرض ِ من بر این است که شما با پی اچ پی تا حدودی آشنا هستید.
  • دو. مهم ترین پیش نیازتان، دراختیار داشتن یک سرور آپاچی هست.
  • سه. نسخه ی پی اچ پی ِ نصب شده بر روی سرورتان باید افزونه ی cURL را پشتیبانی کند. برای چگونگی ِ فعال کردن cURL، اینجا بروید.
  • چهار. افزونه ی Services Twitter را هم باید نصب کرده باشید (در ادامه، توضیحات لازم در رابطه با نصب Services Twitter را خواهم داد). این افزونه را از سایت گلابی دریافت کنید. در این مقاله، من از نسخه ی 0.2.1 (بتا) استفاده کرده ام.
  • پنج. گفتن ندارد این که حتما باید یک حساب هم در توییتر داشته باشید :)

خب، اگر در رابطه با این 5 مورد مشکلی ندارید، می توانیم برویم سراغ مرحله ی بعدی.

نصب Services Twitter

twitter-files-and-folders-directoryپکیج ِ Services Twitter را که دریافت کردید، ابتدا پوشه ی Services را در مسیر اصلی اپلیکیشن کپی کنید.
فایل twitter.php را به twitter-class.php تغییرنام دهید و در مسیر اصلی اپلیکیشن کپی کنید.
وجود یا عدم ِ وجود ِ پوشه ی tests هم مهم نیست. در آن، نمونه های مختلف برای امکانات دیگر وجود دارد که می توانید از آن ها برای توسعه ی این اپلیکیشن استفاده کنید. یعنی چیزی بیشتر از فقط ارسال توییت!

به جز این ها، به پکیج Validate هم نیاز داریم. از اینجا دریافت کنید. پوشه ی docs و فایل validate.php را در مسیر اصلی اپلیکیشن قرار دهید. با مابقی ِ محتویات ِ پکیج ِ Validate هم کاری نداریم.

در آخر باید ساختار ِ فایل ها و پوشه ها چیزی شبیه به تصویر ِ کناری شود.

فراموش نشود: آدرس هایی که در فایل های twitter-class.php، common.php و sample_multiple.php فراخوانی شده اند، به بررسی و ویرایش نیاز دارند.

طراحی محیط اپلیکیشن

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

<html>
<head>
<title>توییت توییت...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<div id="content">
<h1><a href="/index.php"><img src="logo.png" border="0" alt="توییت توییت..." title="" /></a></h1>

    <?php
    if (!isset($_POST['submit'])) {
    ?>
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<label>یوز:</label> <br/>
<input class="user" type="text" name="user" /><br/>
<label>پسورد:</label> <br/>
<input class="pass" type="password" name="pass" /><br/>
<label>چی کار می کنی؟</label> <br/>
<textarea class="message" name="status" cols="15"></textarea><br/>
<center><input class="submit" type="submit" name="submit" value="توییت" /></center>
</form>
    <?php
    } else {
      // include class
      include_once 'twitter-class.php';
      try {
        // read form input
        $user = $_POST['user'];
        $pass = $_POST['pass'];
        $status = $_POST['status'];

        // initialize service object
        $service = new Services_Twitter($user, $pass);
        // update status
        $service->statuses->update($status);
        // perform logout
        $service->account->end_session();
        echo 'توییت شد!';
      } catch (Exception $e) {
        die('اوپس: ' . $e->getMessage());
      }
    }
    ?>
<br />
<hr />
<p style="direction: ltr; text-align: left;">created by <a href="http://aliha.ir/" target="_blank">Aliha</a> | <a href="http://twitter.com/alihaa" target="_blank">follow me on twitter</a></p>
</div>
</body>
</html>

در همان مسیر اصلی، یک فایل style.css هم بسازید و دستورات سی اس اس زیر را در آن قرار دهید:

body {
background: #e8fbff url(bg.jpg) no-repeat left top;
color: #666;
}
a {
color: #0CC;
}
#content {
direction: rtl;
font: 12px Tahoma;
margin: 0 auto;
width: 294px;
}
h1 {
font: bold 23px Arial;
color: #0CF;
}
form input.user, form input.pass {
width: 190px;
background-color: #fafafa;
border: 1px solid #ebebeb;
margin: 3px 0 8px 0;
font: 12px Tahoma;
color: #666;
direction: ltr;
}
form input.user:focus, form input.pass:focus {
background-color: #fcffff;
border: 1px solid #41efff;
color: #666;
}
form textarea.message {
width: 250px;
height: 100px;
background-color: #fafafa;
border: 1px solid #ebebeb;
margin: 5px 0 8px 0;
font: 12px Tahoma;
color: #666;
}
form textarea.message:focus {
background-color: #fcffff;
border: 1px solid #41efff;
color: #666;
}
form input.submit {
background-color: #07d7f6;
font: 12px Tahoma;
width: 80px;
height: 25px;
color: #fff;
cursor: pointer;
border: none;
}
form input.submit:hover {
background-color: #43e6fe;
}
form input.submit:focus {
background-color: #ff6d25;
}
label {
color: #666;
}

حالا آدرس ِ اپلیکیشن را در مرورگر وارد می کنیم تا نتیجه را ببینیم.

twitter-app-index

نام کاربری توییتری و رمزعبور را وارد می کنیم و توییت ِ موردنظر را هم می نویسیم و روی توییت کلیک می کنیم:

twitter-app-success

توییت ارسال شده است! حالا می رویم ببینیم اپلیکیشن مان واقعا کار می کند و راست می گوید یا سرکار گذاشته است ما را :)

twitter-twitt-scrshot

این طور که معلوم است، مثل اینکه کار می کند. خب کارمان دیگر تمام شده است.

می توانید این اپلیکیشن را آماده و بی نقص دریافت کنید، یعنی مراحل ِ بالا دیگر فِرت :)
نمونه ی آن را هم اینجا می توانید ببینید.

download-zips

نمایش پست ها بر اساس حروف الفبا در وردپرس

wordpress-2654

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

این امکان در وردپرس به راحتی امکان پذیر است. فقط کافی است یک کوئری ِ ساده قبل از شروع ِ حلقه ی وردپرس قرار دهید. مانند زیر:

<?php $posts = query_posts($query_string . '&orderby=title&order=asc'); ?>
//Begin The Loop
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>

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