سرورهای ابری

نگاه کلی

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

نحوه‌ی ثبت نام

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

اول تست کن بعد بخر!

مهم‌ترین نکته‌ای که هنگام بررسی خدمات پارس پک به چشمم می‌خورد، امکان تست رایگان سرورهای ابری آن است. به این شکل که بعد از ثبت نام، وارد پنل خود می‌شوید و می‌توانید قبل از خرید سرویس مورد نظر، با کلیک روی آیکن «سرور تست»، آن را تست کنید و از کیفیت سرویس اطلاع حاصل کنید. برای تست، یک سرور با رم ۲۵۶ مگ و ۹ گیگ فضای هارد در اختیارتان قرار می‌گیرد که صرفا برای تست و مشاهده‌ی بخش‌های مختلف کفایت می‌کند. این امکان فقط یک بار و به مدت ۲۴ ساعت برای‌تان می‌تواند فعال شود و بعد خودکار حذف می‌شود. سرور تست بعد از ثبت نام، در صورت انتخاب، در کمتر از ۲ دقیقه راه می‌افتد و هر لحظه وضعیتش در یک پراگرس‌بار دیده می‌شود.

هنگام ساخت سرور ابری، می‌توانید سیستم عامل موردنظر خود را – چه لینوکسی و چه ویندوزی – انتخاب نمایید. من اوبونتو را انتخاب کردم.

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

البته می‌توانید با ssh هم به سرور لینوکسی و با RDC هم به سرور ویندوزی خود وصل بشوید (آموزش ویدئویی).

هایبرید سرور

تازه ترین سرویس پارس پک بعد از سرورهای ابری، هایبرید سرور هست. این سرویس هم بر اساس ساختار ابری هست به این صورت که صاحب سرور هر زمان که نیاز به سخت افزار قوی‌تری داشته باشد، می‌تواند از پنل خود قدرت سخت افزاری سرورش را افزایش دهد. دقیق تر اگر بخواهم بگویم، مدیر سرور می تواند حداکثر یک سی پی یو ۸ هسته‌ای، رم ۱۲ گیگی و ۱ ترابایت فضای هارد داشته باشد، حتی با حفظ تنظیمات سیستم عامل و اطلاعات هارد سرور و بدون تغییر IP . علاوه بر این‌ها، نمودارهای مصرف CPU و پهنای باند و موارد مشابه نیز در دسترس خواهد بود. پلن های هایبرید سرور را اینجا ببینید.

سرور مجازی ایران (VPS)

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

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

و در نهایت

اگر قصد دارید که مشتری پارس پک بشوید، هدیه‌ای از طرف پارس پک برای شما خوانندگان وبلاگ درنظر گرفته شده است. ۲۰ درصد تخفیف در ماه اول، برای تمامی سرورهای مجازی در ایران، اروپا و آمریکا برای ۲۵ نفر از خوانندگان این وبلاگ. برای استفاده از این تخفیف از کد aliha-20VPS استفاده کنید.

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

h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

در این روش من ابتدا به المنت موردنظر یک بک‌گراند با گرادینت می‌دهم (خط ۲).
بعد با مشخصه‌ی -webkit-background-clip تعیین می‌کنم که بک‌گراند مورد نظر فقط در نواحی‌ای که متن وجود دارد دیده شود. واضح‌تر بگویم؛ حرف A را درنظر بگیرید. حالا بک‌گراند فقط در قسمت‌هایی که خطوط حرف A وجود دارد، دیده خواهد شد (خط ۳).
در آخر هم متن داخل المنت را به‌صورت شفاف در می‌آورم، یعنی عاری از هر رنگی که در این صورت فقط بک‌گراند متن دیده خواهد شد (خط ۴).

نتیجه را ببینید.

منبع: CSS-Tricks

• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس
• هک سی‌اس‌اس – دستورات اختصاصی برای مرورگر اُپرا
• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری
• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟

من دقیقاً با همین قسمت آخر ماجرا کار دارم. این که یک صفحه‌ای داشته باشم و از طریق آن با یک یا چند نفر دیگر به‌صورت زنده گفت‌وگو کنم و ضمناً تایپ‌کردن من را ببینند و من هم تایپ‌کردن آن‌ها را. آماده‌اید؟

مواد لازم پی اچ پی هست و مای اس کیو ال و کتاب‌خانه‌ی جی کوئری.

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

<form action="" id="htForm">
     <textarea name="chatbox" class="chatbox" id="chatbox"></textarea>
</form>

دیتابیس

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

CREATE TABLE IF NOT EXISTS `tbl_chat` (
`id` int(11) NOT NULL auto_increment,
`chat` LONGTEXT CHARACTER SET utf8  NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=1 ;

INSERT INTO `tbl_chat` (`chat`) VALUES ('type here...');

پی‌اچ‌پی

حالا یک فایل با نام config.php می‌سازم و با آن به دیتابیسی که ساختم، وصل می‌شوم:

<?php
// Mysql Config; enter your host name, database name, database username and password.
define('DB_HOST', 'localhost');
define('DB_NAME', 'database_name');
define('DB_USER', 'database_username');
define('DB_PASSWORD', 'database_password');

// Connecting to database...
$connection = @mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die('Database Error!');
@mysql_select_db(DB_NAME,$connection);
?>

یک فایل دیگر می‌سازم برای ارسال متن به دیتابیس. نام این فایل send.php هست:

<?php
@include('config.php');

$chat = $_POST['chatbox'];
$query = "UPDATE tbl_chat SET chat = '$chat' WHERE id = 1";
$do = @mysql_query($query);
?>

و فایلی دیگر با نام recive.php برای گرفتن متن از دیتابیس:

<?php
@include('config.php');

$query = "SELECT * FROM tbl_chat WHERE id = 1";
$do = @mysql_query($query);
$row = @mysql_fetch_array($do);
echo ($row[chat]);
?>

جی‌کوئری

حالا دیگر کارم با پی‌اچ‌پی تمام شده است؛ می‌روم سراغ جی‌کوئری.

با توابع load() و ajax() قبلاً کارهایی کرده‌ایم (این‌جا و این‌جا). این‌بار هم به این دو تابع پرکاربرد نیاز داریم و اصل کارمان را همین دو تابع انجام می‌دهند.

ابتدا باید متنی که در کادر متن نوشته می‌شود را با تابع ajax() بفرستم برای فایل send.php و این فایل هم متن را می‌گیرد و می‌فرستد به دیتابیس. و البته باید به‌خاطر داشته باشید که می‌خواهم هم‌زمان که در حال تایپ‌کردن هستم، شخص مقابل تایپ‌کردن ِ من را مشاهده کند. پس باید تابع ajax() را در یک رویدادی مثل keyup() قرار بدهم تا با هربار فشردن و رهاکردن یک دکمه‌ی کی‌برد، متن‌ها به دیتابیس ارسال شوند. به‌این‌صورت هر حرف جدیدی که تایپ می‌کنم، ذخیره می‌شود و به این ترتیب، تایپ کردن ِ من به‌صورت زنده مشاهده می‌شود.

$(document).ready(function() {
     $('#chatbox').keyup(function () {

     var chatbox = $('#chatbox');
     var data = 'chatbox=' + chatbox.val();

     $.ajax({
          url: 'send.php',
          type: 'POST',
          data: data,
          cache: false,
          success: function(){}
     });
     return false;
     });
});

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

$(document).ready(function() {
	$('#chatbox').load('receive.php');
});

فایل recive.php را به تابع لود دادم و از این طریق متن گفت‌وگو لود شده و در کادرمتن #chatbox نمایش داده می‌شود.

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

$(function(){
var timer = setInterval(receive_chat, 100);
});
function receive_chat() {
 $(document).ready(function() {
	$('#chatbox').load('receive.php');
 });
}

کار دیگر تمام است و می‌توانم نتیجه را در صفحه‌ی index.php ببینم.

مشکلی که وجود دارد این است که در چنین روش‌هایی با سرور ریکوئست بالایی روبه‌رو هستیم. این یعنی برای اجرا در پروژه‌های بزرگ، به سرورهای قوی نیاز داریم. تصور کنید که در هر ۱۰۰ میلی‌ثانیه یک ریکوئست فرستاده می‌شود و فایل recive.php اجرا می‌شود. جدا از این، با هربار فشردن یک دکمه از کی‌برد، باز یک ریکوئست ارسال می‌شود و فایل send.php اجرا می‌شود.

منابع:
jQuery ajax()
jQuery load()

به دلیل برخی محدودیت‌ها نمی‌توانم نسخه‌ی دمو از این نمونه قرار بدهم اما می‌توانید آن را همین پایین کامل دریافت کنید:

• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• آموزش ویدئویی » شروع کار با CodeIgniter
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر

چیز‌هایی که لازم داریم پی اچ پی هست و این کلاس mobile dectect که توسط ایشان نوشته شده.

یک پروژه ایجاد می‌کنم و در آن صفحه‌ای دارم با نام index.php که می‌خواهم اگر کسی با موبایل وارد این صفحه شد، با یک پیغام مواجه شود. کد زیر را در فایل index.php می‌نویسم:

    include('Mobile_Detect.php');

    if ($detect->isMobile()) {
        echo 'you are on mobile!';
    }else{
        // the content here...
    }

ابتدا کلاس مربوطه را در ایندکس اینکلود کردم (خط اول) و سپس یک شرط ساده دادم که اگر کاربر محترم با موبایل وارد صفحه شد، پیغام فلان را بده و اگر با موبایل نبود هم محتوای صفحه را نشان بده.

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

همه‌ی پلتفرم‌های موبایل:

if ($detect->isMobile()) {}

Iphone:

if ($detect->isIphone()) {}

Ipod:

if ($detect->isIpod()) {}

Android:

if ($detect->isAndroid()) {}

Blackberry:

if ($detect->isBlackberry()) {}

Opera mini:

if ($detect->isOpera()) {}

Windows Mobile:

if ($detect->isWindows()) {}

Palm:

if ($detect->isPalm()) {}

برای تشخیص پلتفرم‌هایی مانند پی‌اس‌پی، پی‌دی‌ای، پاکت پی‌سی، اسمارت فون و چیزهایی از این قبیل:

if ($detect->isGeneric()) {}

دریافت کلاس mobile detect

• ای‌جکس بازی » به‌یاد هایپرترمینال
• آموزش ویدئویی » شروع کار با CodeIgniter
• رُبات‌های تحت وب درخدمت شما هستند!
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• بیایید کمی سربه‌سر دزدهای پوسته بگذاریم – یک کُد کوچولو!

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

دو. چند وقت پیش قرار شد تا با همکاری شرکت بدر الکتریک – نماینده‌ی رسمی بیت‌دیفندر در ایران – به ۳۰ نفر از خوانندگان محترم وبلاگ یک طراح وب، ۳۰ لایسنس سه‌ماهه‌ی آنتی‌ویروس بیت‌دیفندر هدیه داده شود.

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

شروع مسابقه

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

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

پس‌نوشت: مسابقه ۱ ساعت و ۲۵ دقیقه پس از انتشار، به پایان رسید!

• پست مرتبطی یافت نشد!

برای ورود به سایت CodeIgniter اینجا کلیک کنید.
می‌توانید این ویدئو را با حجم ۲۵ مگابایت و کیفیت HD 720p دریافت نمایید.

• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• ای‌جکس بازی » به‌یاد هایپرترمینال
• تشخیص پلتفرم‌های مختلف با پی اچ پی
• رُبات‌های تحت وب درخدمت شما هستند!
• بیایید کمی سربه‌سر دزدهای پوسته بگذاریم – یک کُد کوچولو!

• بازی با رنگ ها! » ۱۰ نوع رنگبندی

می‌خواهیم ببینیم چه‌طور می‌توانیم با استفاده از جی‌کوئری محتوایی از صفحات دیگر بگیریم و در یک صفحه بارگذاری‌شان کنیم بدون این که آن صفحه رفرش شود.

فایل‌هایی که داریم:

یک

خب، ابتدا فایل‌های content1.html و content2.html و content3.html را با ادیتورمان باز می‌کنیم و دستورات اچ‌تی‌ام‌ال زیر را در آن‌ها می‌نویسیم و تنها چیزی که قرار هست در هرکدام از فایل‌ها متفاوت باشد، محتوایی هست که در تگ div با آی‌دی #content قرار می‌گیرد؛

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>بارگذاری محتوای صفحات با جی‌کوئری</title>
<link rel="stylesheet" media="all" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/AjaxLoader.js"></script>
</head>
<body>

<div id="wrapper">

  <ul id="nav">
        <li><a href="content1.html">محتوای ۱</a></li>
        <li><a href="content2.html">محتوای ۲</a></li>
        <li><a href="content3.html">محتوای ۳</a></li>
    </ul>
    <div id="content">
        <h2>عنوان محتوای ۱</h2>
      <p>متن محتوای ۱</p>
    </div>

</div>

</body>
</html>

کتابخانه‌ی جی‌کوئری و اسکریپتی که برای بارگذاری صفحات در ادامه خواهیم نوشت را به صفحه‌مان اضافه کردیم (خط‌های ۷ و ۸).  یک منوی ناوبری ایجاد کردیم و در آن به صفحاتی که قرار هست محتوای‌شان را در این صفحه بارگذاری کنیم، لینک دادیم (خط‌های ۱۴ تا ۱۸). در پایینش یک div هم داریم با آی‌دی ِ #content که محتوای بارگذاری‌شده در این قسمت قرار می‌گیرد (خط ۱۹).

دو

حالا می‌رویم سراغ جی‌کوئری. قرار هست کاری کنیم که وقتی روی هرکدام از لینک‌هایی که در منوی ناوبری قرار دادیم، کلیک کردیم، تنها محتوایی که در #content آن قرار دارد را بگیریم و در صفحه‌ای که در آن هستیم بارگذاری‌اش کنیم. یعنی وقتی در صفحه‌ی content1.html هستیم و روی لینک content2.html کلیک می‌کنیم، اسکریپت ما وارد صفحه‌ی content2.html می‌شود و می‌گردد دنبال تگ دیوی که آی‌دی ِ #content دارد و هرچیزی که در آن دیو هست را می‌گیرد و سپس در دیو #content در صفحه‌ی content1.html بارگذاری می‌کند.

$(document).ready(function() {

	var hash = window.location.hash.substr(1);
	var href = $('#nav li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #content';
			$('#content').load(toLoad)
		}
	});

	$('#nav li a').click(function(){

		var toLoad = $(this).attr('href')+' #content';
		$('#content').hide('fast',loadContent);
		$('#load').remove();
		$('body').append('<span id="load">درحال بارگذاری...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#content').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#content').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;

	});

});

وقتی روی هرکدام از لینک‌ها در منوی ناوبری کلیک می‌کنیم، ابتدا با تابع ()attr. مقداری که در href آن لینک هست گرفته می‌شود و از این طریق آن صفحه را بارگذاری می‌کند و البته ما نمی‌خواهیم همه‌ی محتویات آن صفحه بارگذاری شود، بلکه تنها آن چیزی که در دیو #content آن صفحه قرار دارد را می‌خواهیم بگیریم (خط ۱۴).

دیو #content در صفحه‌ای که الان در آن هستیم را حذف می‌کنیم (خط ۱۵).

یک پیغام به‌عنوان Loading بعد از تگ body قرار داده می‌شود (خط ۱۷ و ۱۸).

حالا باید دسترسی‌پذیری کارمان را ببریم بالا. یعنی برای کاربر یک آدرسی وجود داشته باشد که هر زمان خواست محتوای فایل content2.html را ببیند، اول نرود به صفحه‌ی content1.html و روی لینک content2.html کلیک کند و باقی ماجرا، بلکه با استفاده از آدرسی که در ادامه ایجاد می‌کنیم، تنها با وارد کردن آن در نوار آدرس مرورگرش، محتوای content2.html مستقیما برایش بارگذاری شود. چیزی مانند جی‌میل که اگر این آدرس https://mail.google.com/mail/#sent را در نوار آدرس مرورگرتان وارد کنید، لیست ایمیل‌های ارسالی‌تان بارگذاری می‌شود. برای این‌کار باز هم از تابع ()attr. استفاده می‌کنیم و مقدار href لینک را می‌گیریم و بعد ۵ کرکتر از آخرش حذف می‌کنیم تا .html از نام آن صفحه جدا شود. یعنی content2.html بشود content2 (خط ۱۹).

حالا محتوای جدید بارگذاری و سپس نمایش داده می‌شود (خط‌های ۲۰ تا ۲۵).

در آخر هم پیغام Loading را مخفی می‌کنیم (خط‌های ۲۶ تا ۲۸).

تمام

از این سایت هم می‌توانید برای درست‌کردن تصاویر انیمیشنی ِ Loading استفاده کنید.

نمونه‌ای از آنچه با هم درست کردیم را اینجا ببینید و برای دریافت آن همین پایین کلیک کنید!

• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید

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

• پست مرتبطی یافت نشد!

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

دو. اگر به پایین صفحه‌ی اول وبلاگ دقت کنید می‌بینید که بخش جدیدی را ایجاد کرده‌ام با نام «چه‌کار می‌کنم؟» و در آن قرار هست همان کاری که در بالا گفتم را انجام بدهم؛ مثلاً دارم روی طرح یک وبسایتی کار می‌کنم و به بخش فوتر آن رسیده‌ام و فرضاً یک روش خاصی در آن به‌کار برده‌ام، با یک اسکرین‌شات و توضیحی کوتاه، آن قسمت را نشان می‌دهم. این کل ماجراست.

• آموزش ویدئویی » شروع کار با CodeIgniter
• 4 نکته ی مهم در هنگام طراحی گرافیک که نادیده گرفته می شوند!
• بازی با رنگ ها! » ۱۰ نوع رنگبندی