وب‌سایتتان را با جاوا اسکریپت بهینه کنید
مسائل انیمیشنی چطوری میتونن روی برندتون اثر بذارن
وقتی سایت طراحی میکنید، طبیعتا میخواهید از مواد دیگه‌ای هم روی سایتتون استفاده کنید و همه سایت نوشته ساده نباشه. انیمیشن با اینکه سایت رو زنده تر و جذاب‌تر میکنه، اگه درست استفاده نشه میتونه اثر منفی داشته باشه. مثلا اگه بارگذاری انیمیشن خیلی طول بکشه یا فقط بخشی از اون لود بشه، دیگه سایتتون حرفه ای به نظر نمیاد. چی کار کنیم که بتونیم انمیشن داشته باشیم و این مشکل هم پیش نیاد؟ یه سری کارها هست که هر کسی میتونه روی سایتشون اعمال کنه و کاری کنه که سایتش بهینه بشه و همیشه مخاطب رو راضی نگهداره و تجربه خوبی براش باقی بذاره.
تشخیص مشکل
یکی از بزرگترین دلایل بروز این مشکل اینه که سایتها میخوان همه عناصرشون رو به سریع‌ترین حالت ممکن بارگذاری کنند، در نتیجه اثرات ناخواسته ای روی برخی از محتوا میتونه بذاره. مرورگرها یه عملکرد دارن که میتونه این مشکل رو کاملا حل کنه.
روش کدنویسی
اولین وسیله حل این مشکل استفاده از حالت play انمیشینه. چون این ویژگی به مرورگر خبر میده که محتوا چه زمانی اجرا بشه و چه زمانی متوقف، خودتون میتونید طوری تنظیمش کنید که تا زمانی که بقیه محتوای سایت کامل بارگذاری نشه، انیمیشن متوقف بشه. قبلش یه کلاس js-loading استفاده کنید و بعد وقتی همه چیز کامل لود شد پاکش کنید. حالا میتونید براحتی حالت play انیمیشن رو طوری تنظیم کنید که فقط وقتی حالت کلاس js-loading پاک شده، انیمیشن نمایش داده بشه (play بشه).
سایر مشکلات
با اینکه اکثر سایتها با این راهکار روی مرورگرهای مختلف بهتر نمایش داده میشن، اما باز هم یه سری خطرات وجود داره. بزرگترین مشکل اینه که خودِ جاوااسکریپت همیشه روی کامپیوتر کاربر نهایی درست فعال نمیشه، مثلا ممکنه خودِ کاربر غیرفعالش کرده باشه یا شاید بخاطر مشکلی که با یه افزونه دیگه داره این اتفاق بیفته. بنابراین تمام راهکارهایی که ماهیت جاوااسکریپت دارند زیاد قابل اعتماد نیستند. اگه چنین مسئله ای وجود نداشته باشه، این راهکار در اکثر شرایط خوب جواب میده و معتبره.
پلتفرم جدید ساخت وبلاگ بدون نیاز به دیتابیس
در صورتی که به دنبال سیستم مدیریت محتوا برای ساخت وب سایت خود می گردید که نیاز به ساخت دیتابیس نداشته باشید نرم افزار Ghost بهترین نرم افزار برای شما است که به زبان جاوا اسکریپت نوشته شده و بنابراین نیازی به راه اندازی سایت بر روی سرور ندارید.
از زبان خالق:
در حدود یک سال پیش، در نظر داشتم یک بلاگ وردپرس راه اندازی نمایم. به عنوان شخصی که چندین سال بر روی وردپرس تجربه داشته ام، مورد جدیدی برای من نبود. وردپرس در این سال ها رشد بسیاری نموده است، و امروزه از آن به عنوان یک سیستم مدیریت محتوای کامل یاد می شود تا پلتفرم ساخت وبلاگ. سیستم ایجاد وبلاگی که تمرکز آن بر ارسال ها بود و بسیار ساده تر از وردپرس بود را در نظر گرفتم. در نوامبر 2012 مطلبی با عنوان ابزار جدید ایجاد بلاگ ghost منتشر نمودن و مخاطبان بسیاری پیدا نمود که نظرات مثبتی بر روی آن داشتند. در آپریل 2013 تصمیم گرفتم نسخه پروتایپ آن را جهت استفاده در معرض عموم قرار دهم و آن جواب داد. بعد از 5 ماه کار بر روی ghost هم اکنون توسط کاربران آن در حال استفاده می باشد. تفاوت اصلی که ghost با سایر سیستم های ساخت وبلاگ دارد آن است که این نرم افزار تنها با جاوا اسکریپت پیاده سازی شده. با توجه به این مورد شما می توانید محدودیت های وب را نداشته باشید. به عنوان مثال یک وب سایت کامل را می توانید بر روی کول دیسک خود داشته باشید، موردی که قبلا قادر به انجام آن نبودیم. تمرکز اصلی Ghost بر روی ارسال و انتشار مطالب است. همه چیز در این نرم افزار برای ایجاد ساده مطالب در وبلاگ ، سایت خبری و روزنامه بهینه سازی شده.
در صورتی که می خواهید بیشتر در مورد این نرم افزار بدانید به سایت رسمی Ghost مراجعه نمایید.
Ajax چگونه کار می کند
در کد نویسی سنتی جاوا اسکریپت, در صورتی که قصد داشته باشد از دیتابیس و یا فایلی بر روی سرور اطلاعات بگیرید, و یا ارسال اطلاعات کاربر به سرور, شما می بایست برای ارسال اطلاعات به دو روش get و post فرم طراحی می نمودید. و کاربر مجبور بود بر روی کلید ارسال کلیک نماید تا اطلاعات ارسال گردد, و منتظر پاسخ سرور باقی می ماند, و سپس صفحه جدید با نتایج لود می شود.
زیرا زمانی که کاربر بر روی کلید ارسال کلیک می نماید صفحه جدید باز می شود, طراحی سایت سنتی مدت زمان بیشتری را از کاربر می گرفت و مورد پسند کاربران نیز نبود. توسط ajax سایت توسط javascript به صورت مستقیم با سرور در ارتباط می باشد, که این کار از طریق آبجکت JavaScript XMLHttpRequest انجام می شود.
با یک درخواست HTTP, صفحه وب سایت می تواند درخواست خود را ارسال نماید, و سپس از وب سرور پاسخ بگیرد, بدون نیاز به بارگذاری مجدد صفحه. کاربر در همان صفحه اول باقی می ماند, و کاربر متوجه این موضوع نخواهد گردید که در پس زمینه برنامه در حال انجام است.
تصویر زیر نحوه عملکرد Ajax را نمایش می دهد:
کاربر درخواستی را انجام می دهد و در پس زمینه فرآیندها انجام می شود و سپس در لایه ای به درخواست کاربر پاسخ داده می شود, که محعمولا توسط ID شناخته می شود, بدون لود کامل صفحه. به عنوان مثال یک لایه با این آی دی:
در مرحله بعدی ما می بینیم که چطور یک درخواست XMLHttpRequest ارسال می شود و پاسخ گرفته می شود.
1. ساخت XMLhttpRequest
مرورگرهای مختلف روش های متفاوتی برای ساخت XMLHttpRequest دارند. اینترنت اکسپلورر از ActiveXObject استفاده می نماید, در صورتی که سایر مرورگرها از XMLHttpRequest که تابع داخلی جاوا اسکریپت می باشد استفاده می نمایند.
برای آنکه این آبجکت ساخته شود و با مرورگرهای مختلف سازگاری کامل داشته باشد می بایست از “try and catch” استفاده نمایید.
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
2. ارسال درخواست به سرور
برای ارسال درخواست به سرور, ما از متدهای open() و send() استفاده می نماییم.
متد open() سه آرگومان می پزیرد. ا.ولین آرگومان تعیین می نماید از چه روشی درخواست ارسال می گردد (GET یا POST). دومین آرگومان مکان اسکریپت را برای اجرا مشخص می نماید. سومین آرگومان مشخص می نماید درخواست چگونه می بایست اجرا شود. متد send() درخواست را به سرور ارسال می نماید.
xmlHttp.send(null);
3. نوشتن اسکریپت سمت سرور
responseText داده هایی که از سرور پاسخ داده می شود را نگهداری می نماید. در اینجا ما می خواهیم زمان حال را نمایش دهیم. کد سایت “time.php” چیزی است شبیه به این:
response.expires=-1
response.write(time)
%>
4. استفاده از پاسخ
سپس ما پاسخ را دریافت می کنیم و نمایش می دهیم.
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
5. کامل کردن کد
و شما می بایست تصمیم بگیرید چه زمانی AJAX اجرا می شود. در این مثال AJAX اجرا خواهید شد زمانی که کاربر در باکس متن تایپ می نماید. مثال در کد پایین می باشد:
<html>
<body>
<script type=”text/javascript”>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
</script>
<form name=”myForm”>
Name: <input type=”text”
onkeyup=”ajaxFunction();” name=”username” />
Time: <input type=”text” name=”time” />
</form>
</body>
</html>